Webサイトを作る時に役立つ無料ツール＆サイト２１選
Web制作会社に入社して、もうすぐ２年経ちます(^^)わーい！てか時が経つの早すぎる。この２年間で学んできたお役立ち情報をお届けします。
これからweb designerを目指す方には必須の無料ツール♪
これがあると便利なので、ぜひ使ってみてくださいね。解説を交えながら紹介していきますよ～！
私が実際に現場で使ってきて、かなり必要だったと思うものを厳選してみました。一部は参考書に載っているのもあります。Webデザインをする時には、かなり多方面の知識や材料が必要になります。
そんな時にこれがあると便利！というものを自分の為にまとめておきたいと思いました。
- 写真・画像編集
- 写真フリー素材・Webデザイン見本集
- 配色・カラーコード
- Webサイトのサイズ、文字数の確認
- SEO（検索エンジン最適化） 、キーワード調査
- ロゴ作成メーカー
- ホームページテンプレート系
- Webマーケティング、プログラミング学習
写真・画像編集
写真加工.COM 無料の画像加工編集サイト・フリーソフト
写真加工.COMは無料で画像の加工や写真を編集できるオンラインサービスです。私も少し試してみましたが、とても分かりやすく操作しやすいので初心者でもすぐに使えるツールだと思います。年賀状や季節のハガキを作るときにも便利で、デジタル画像の形式も多種ありますので、どのファイルでも対応できるようになっています。
画像リサイズツール
画像リサイズツールは選択した画像のサイズを、ブラウザ上で変換してくれる便利なツールです。jpgとpngに対応しており、pxの単位で変更することができます。画像のサイズを変えたい時にフォトショップを使いたい所ですが、フォトショップは起動するのに時間がかかります。そんな時にサイズを変えたいだけなら、このツールを使った方が早く作業が終わりますね。
写真フリー素材・Webデザイン見本集
写真AC
みなさんよくご存知の写真素材屋さんの写真ACです。無料なのにとても色々なシーンから、写真が選択できるのでWeb業界でも日常的に使われているサービスです。私もよく仕事で使う機会が多いのですが、特にスポーツをしている人とか細かく設定されているので、ECショップでの商品紹介でも使えるものが多いです。企業さんのホームページでも見かける機会も増えましたね。
GIRLY DROP（ガーリードロップ）
ガーリードロップは、女子のためのおしゃれなフリー写真素材集です。リンク先を見ると分かるのですが、女子が好きな素敵な写真素材がいっぱいで全て無料でダウンロードができます。私もよく年賀状を印刷したりする時に使ったり、友達の誕生日にはバースデー写真をダウンロードしておいてメールで送ったりしています。とても上がる素材がゴロゴロしていますので、個人的によく見に行ったりしています。
ブブンデザインアーカイブ
ブブンデザインはWebデザインの部分部分のデザインをまとめたサイトです。デザインに行き詰まった時や、参考に使えるので見るだけでも勉強になりますよ〜。Webデザインの顔でもある、タイトルロゴのデザインもかなり使えると思います。様々な種類があるので、色々と探してみるのも楽しいかもです。
バナーデザイン 専門ギャラリーサイト・レトロバナー
レトロバナーはサイズやカテゴリーで様々な種類のバナーを検索できる、バナーを集めたリンク集です。バナーを作る参考になるので、Webデザイナーには必須のサイトになります。サイズ別やカテゴリーで選べるのが特徴で、様々な業態のデザインが溢れているのでぜひ利用してください。私もバナーを作るときは必ずと言っていいほど、このサイトを眺めてから作り始めます。
MUUUUU.ORG
MUUUUU.ORGは縦長のwebデザインを集めたリンク集です！カテゴリから探せば、様々な形態のwebサイトを探すことができます。多くのwebデザイナーが日常的にデザインのアイディアをここで収集しているくらい、有名なサイトです。
配色・カラーコード
ColorPick Eyedropper
ColorPick EyedropperはGoogle Chromeの拡張機能です。拡張機能とはGoogleのアプリのようなものです。これをダウンロードしておけば、Webブラウザ上の色がどういうコードなのか？知ることができます。Web上での色は「＃」から始まる６ケタの数字と英字を組み合わせたものになります。たとえば自分の好きなホームページがあったとして、そのページを真似してみたい時に使えたりします。色の雰囲気だけを真似てみるとか、Webデザインする時の練習には欠かせないのが色の組み合わせなのです。
iromiru（イロミル）
higashi-dance-network.appspot.com
イロミルは画像（img）や写真を取り込み、その色を知るためのツールです。やり方は簡単で、上記サイトにアクセスして写真をアップロードする。そしてその画像の見たい色の部分をクリックします。すると右隣にカラーコードが表示されますので、それをコピーしてフォトショップやCSS、 HTMLなどに打ち込めば同じ色を再現できるのです。Webを使う人なら必須の便利なサービスなので、ぜひブックマークしておきましょう。
WEB色見本 現職大辞典 - HTMLカラーコード
WEB色見本 現職大辞典 - HTMLカラーコードはその名の通りですが、Webで使うカラーコードを調べることができます。色選びに困った時には必ずと言って良いほど、このサイトを利用します。フォトショップやイラレで「こんな色が欲しいんだけどなぁ」という時に調べたり、何かと便利です。パステルカラーや和色大辞典という種類から選ぶこともできるので、直感的な色選びにも向いています。
配色パターン見本４０選：ベストな色の組み合わせ確認ツール
配色パターン見本４０選：ベストな色の組み合わせ確認ツールは「親近感を感じさせる配色パターン」など、直感的に良い組み合わせの配色パターンを確認できます。クール系の配色パターンでは企業のホームページなどに使える配色パターンを知ることが出来、Webデザインをする上で必ず必要になる見本帳になるでしょう。これがあるのとなのでは、サイトのイメージが全く異なるものになります。それくらいデザインをする時には配色の組み合わせは重要な要素のひとつになります。色によって「こういうイメージのサイトかな？」と訪問者に感じさせることができます。
Webサイトのサイズ、文字数の確認
Web計
web計はwebブラウザ上のあらゆるサイズを測ることができます。デザインでは基本の黄金比や白銀比なども計算できるため、Webデザインをする時には必須のツールと言えそうです。単位は全て「px」（ピクセル）となっております。
文字数カウント
http://phonypianist.sakura.ne.jp/convenienttool/strcount.html
文字数カウントでは、その名の通りに文字数がいくつか知りたい時に使えます。Webライティングに文字数は密接に関わりがあります。例えばライターのお仕事では「何文字以上」という条件があります。ライターには必須のツールと言えそうです。バイト数も調べることが出来ますので、バイト数に制限があるサービスを使いたい時の、目安を知ることも可能です。
私は予めメモ帳などに書いておいた記事をコピーし、文字数カウントにペーストすることでカウントしています。直接書き込むとインターネットが途絶えてしまった時に、データが消えてしまいます。ブラウザ上に書き込んだ情報のバックアップは取れないので、気をつけてくださいね。
SEO（検索エンジン最適化） 、キーワード調査
Google検索エンジン最適化スターターガイド
SEOの基本に欠かせないのが、Googleの検索エンジンによるSEO（検索エンジン最適化）です。このガイド通りにSEO対策をしていくことが、まずは基本となります。その上でキーワード調査をしたり、ホームページやブログを育てていくことでアクセスアップやサイトの安定化に繋げていけるでしょう。SEO対策は基本的には無料で出来ますが効果が出るのには少し時間がかかります。短期間にアクセスを集めたいのであればリスティング広告などの有料対策を考えていく事も、サイト運営には必要になってくるかもしれません。
goodkeyword
goodkeywordは検索キーワードの、複合キーワードのランキングを知るためのツールです。複合キーワードとは、土台となるキーワードと一緒に検索されるワードの事です。例えば「webデザイン」というキーワードを調べると、複合キーワードには「技能検定」「参考」「独学」というキーワードが上位に表示されました。このように何と一緒に検索されているかで、どんなキーワードを一緒に使ったら、上位表示されられるか？の参考になります。
SEOチェキ
SEOチェキは競合するサイトのURLを入力する事で、そのサイトのタイトルやメタタグ、検索順位、SNSでのいいねの数など情報を調べることができます。またそのサイトで「○○」というキーワードがどれくらい使われているかも調べることができます。競合サイトを丸裸にできる訳です！！
ロゴ作成メーカー
LOGASTER | ロゴメーカー
LOGASTER | ロゴメーカーは簡単に無料でロゴを作成できるサービスです。企業名を入力後、ビジネスタイプを選択します。次へをクリックするとそれに合うようにテンプレートが表示されるので、その中から好きなデザインを選び自由にレイアウトできます。その種類が豊富すぎて選ぶのに時間がかかってしまいましたが、それもまたワクワクしますよね。このブログのタイトルで作って見たものがこちらになります。いかがでしょうか？
企業名「LOVE&PEACE」ビジネスタイプ「デザイン」
ホームページテンプレート系
WiX（ウィックス）
ウィックスは無料でクオリティの高いホームページが作成できるWebサービスです。実際にWeb業界ではWiXを使ってホームページを作り、それを販売している人たちもいます。それくらいクオリティの高いページを、簡単に作ることができます。テンプレートの種類も多いので、選ぶだけで綺麗なページが出来てしまうのが魅力と言えます。
Ameba Ownd アメーバオウンド
Amebaのアカウントがあれば簡単にホームページができるサービスです。ホームページというよりは、ポートフォリオを掲載したりするのに便利なフォーマットと考えると分かりやすいかもしれません。自分の作品を残して置いたり、仕事に繋げるためのギャラリーを作るのもおすすめです。
ちなみにスターバックスコーヒーもこのサービスを使って、ホームページを作っているようです。ちょっと感動しちゃいました。インスタのページとかオシャレすぎる。
Webマーケティング、プログラミング学習
ferret（フェレット）
フェレットではwebマーケティングを中心に学べるウェブサイトです。webマーケティング講座も無料で学習することができ、基本から奥の深いところまで学ぶことができかなり勉強になります。私もこの講座を受けたのですが、細かく学べたので「本当に無料でいいの？」というくらいクオリティの高い内容でびっくりしています。
Progate（プロゲート）
プロゲートはオンラインでwebデザインに必要なプログラミングの基本を学べます。もちろん無料です。問題をクリアーするとレベルが上がっていくので、ゲームをしているような感覚で楽しく学ぶことができますよ〜。基本の「HTML」「CSS」はもちろんの事「J Query」「Java Script」「PHP」なども学べます。
無料のサービスでも使い方によっては、とても有意義になりますよね。私もこれらのツールを有効活用し、Webサイトを作るのに役立てています。よりサービスを充実させたいのなら有料版も考えてバランスよく使ってみてはいかがでしょうか？
みなさんの参考になれば幸いです。それではまた(^^)
いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)
- 作者: 伊藤庄平,益子貴寛,久保知己,宮田優希,伊藤由暁
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2017/02/25
- メディア: 単行本
- この商品を含むブログを見る
