岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

ホームページ(Webサイト)制作にお役立ち無料ツール・サービス10選

公開日:2017年8月28日 : ソフト・アプリ・ツール,ホームページ制作関連

ホームページ(Webサイト)制作にお役立ち無料ツール・サービス10選-cover

同じ仕事を長年続けていると、毎回行う単純作業がありませんか?

もちろん大事な作業ではあるので省くわけにはいかないですが、もっと効率的にこなせないかな?とも思います。

ホームページ制作業者の多くは、Adobe製のフォトショップ、イラストレーターなどでデザインを制作して、ドリームウィーバー、もしくはcoda、Sublime Textなどでコーディングを行うことが多いです。

実はその他にも、業務効率化のためにさまざまなソフトを活用して仕事の早さと質を上げています。

ということで今回は無料で使えるホームページ制作(web制作)に使えるツール・サービスを紹介します!

テキスト系ツール

ダミーテキストジェネレータ

ダミーテキストジェネレータ

https://webtools.dounokouno.com/dummytext/

ダミーテキストを必要な文字数表示してくれます。

「Webデザインはできたけど、テキストの文章はまだできていない」といった場合に、ダミーテキストを入れておけば実際にテキストが入ったレイアウトを確認することができます。いつも使っています。地味に便利。

ダミーテキストの種類もプルダウンから選べます。

文字数カウンタ

文字数カウンタ

http://phonypianist.sakura.ne.jp/convenienttool/strcount.html

入力した文字数をカウントしてくれます。webページのレイアウトに、入れられる文字数が限られいる場合や、今入れてある文字数が何文字なのか?ここにコピペすれば文字数がわかります。

テキスト比較ツール

テキスト比較ツール

http://difff.jp/

右と左に入力された文字列の異なっている部分を教えてくれます。修正した箇所が直っているか?など確認する際に便利です。

日本語校正サポート

日本語校正サポート

http://www.kiji-check.com/

入力すると文章を校正してくれます。誤字脱字や漢字の使い方、冗長表現(文章が長い)などかなり細かい部分まで見てくれます。

画面下にスクロールすると設定をタスタマイズできます。

enno

enno

https://enno.jp/

上記と同じようなツールです。日本語のあからさまなエラー (タイポ、スペースのエラー、誤字脱字、変換ミス、入力後の編集ミス、文字化け) を自動でチェックしてくれます。

画像系ツール

ダミー画像生成

ダミー画像生成

http://placehold.jp/

上記ではテキストダミーのサイトを紹介しましたが、その画像バージョンです。

Webページのレイアウトは決まっているが、画像は何が入るか分からないといった場所に、imgタグに表示されているURLを記述すれば、画像をわざわざ作成することなく画像を表示できます。

大きさや比率も選べるので便利です。

画像圧縮_tinypng

tinypng

https://tinypng.com/

画像の容量を圧縮して軽くするツールです。画像のファイル容量は大きくなりがちなので、軽くすることでWebページの表示を早くすることができます。

MWORKSのブログで、使い方紹介記事を以前書いたので気になった方は下記のリンクからどうぞ。

画像圧縮でサイト高速化!無料で使えるおすすめサービス3選

https://mw-s.jp/image-compression/

デザイン系ツール

Webアイコンフォント_fontawesome

fontawesome

http://fontawesome.io/icons/#web-application

Webアイコンフォントのサイトです。様々アイコンを無料で使用できます。アイコンを画像で作成する手間が省けるので便利です。

ストックフォトサイト

ストックフォトサイト8選_Web制作時に使い勝手のよいサイト_カバー画像

ホームページ制作に画像はつきもの、どうしても手元にある画像で足りない場合はストックフォトサイトを利用します。

以前記事を書いたので下記のサイトからご確認いただけると幸いです。

ストックフォトサイト8選_Web制作時に使い勝手のよいサイト

https://mw-s.jp/stockphoto-recommend/

チェック系ツール

css対応状況チェック

css対応状況チェック

http://caniuse.com/

Webページでサイトを見られるようにするためにコーディングを行いますが、そこで使用するコードがどのブラウザで使用できるか?をチェックできるサイトです。

使用しているコードで、正しく見られるブラウザの範囲を確認します。

Apple製品_Mac、iPad、iPhone用ブラウザチェック

Apple製品_Mac、iPad、iPhone用ブラウザチェック

http://responsiv.eu/

ホームページは様々な端末で見られるので、正常に表示されているか?チェックします。

このサイトではチェックしたいサイトのURLを入力すると、Apple製品の端末を一覧で確認できます。

Microsoft_簡易ブラウザチェック

Microsoft_簡易ブラウザチェック

https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/

こちらはマイクロソフトが提供している上記と同じブラウジングチェックツールです。端末だけでなくブラウザ毎(ieなど)でも表示されます。

チェックしたいサイトのURLを入力した後、若干読み込みに時間がかかるのと、再現性が不明なので参考までにという形になると思います。

最終的には、できるだけ実機で確認するのが一番です。

まとめ

【ホームページ(Webサイト)制作にお役立ち無料ツール・サービス10選】Web制作事業者でなくても、ブログを運営している方や企業のWeb担当の方など普段Webで情報を公開している方々には、使えるツール・サービスだと思います。

Web運営のお役立ていただけると幸いです。それではまた!

ホームページ制作について、ご相談くださいませ

『ホームページを開設したいけど、どこに頼めばいいかわからない…』
『自社で運営しているが、成果がぜんぜん上がらない…』など、
お困りの点がありましたら、お問い合わせください。

メールフォームはこちら

【MWORKSでは、個人事業主の方、中小企業の商売の役に立つサービスを提供しています。】

ホームページ制作の内容はこちら >>

制作実績一覧ページはこちら >>

HP制作|おすすめ関連記事

会社ホームページを開設するメリット、デメリット、知らないと損です!
ホームページ良い例、悪い例7つ。新規制作、リニューアル、運営チェックに
あなたのホームページにアクセスが少ない理由、6つのチェックポイント
ホームページに目的は必要?代表的な例8つ
MWORKSで実際に行っているホームページ制作流れ(制作の裏側編)
レスポンシブデザインとは?今最適なスマホ対応の方法
何がヤバい…スマホ対応していないホームページのデメリット
会社用HPは本をつくるイメージで。内容を分類・階層分けしてつくる!
Webサイトのhttps化(SSL)した?暗号化通信の必要性とは?
SEO対策で必ず設定するHTMLタグ|SEO対策の基本04
2017年版|パソコン画面解像度シェア&HP制作に最適なサイズとは?


スポンサーリンク

お問い合わせ

- contact -

お仕事の依頼やご相談はお気軽にどうぞ!お客様の商売発展の力になります

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています

SNS

- SNS -

MWORKSで開設しているSNSです。気軽にいいね!フォローなどしていただけると嬉しいです