Web担当者なら一度はチェックすべきWebデザインの参考サイト18選
Webデザインの参考になるサイトについてご紹介します。便利サイトやデザインの参考になるサイトも多く取り上げているので、デザイナーやWeb担当の方々に参考にしていただければと思います。なおご紹介するサイトは、配色やフォントなどのカテゴリーごとにまとめてあります。
※記事内で取り上げたサイトを使う際は、必ず利用規約を確認するようにしてください。
目次
配色
Kuler
Adobeが提供している、配色のシミュレーションができるサイトです。シミュレーションだけでなく、他のユーザーが作成した配色も見られるのでデザインの参考になります。
https://kuler.adobe.com/create/color-wheel/
hue360
配色のサポートをしてくれるサイトです。クリックだけで色が選択できる、直感的な使い勝手もいいですね。
NIPPON COLORS
日本の伝統的な色合いが見られるサイトです。和名と一緒に、カラーコードも表示されます。各色を選択すると背景色が変わり、カラーコードをコピーすることもできます。
COLORRRS
HEXコードとRGBコードの変換をしてくれるサイトです。機能はそれだけなのですが、ミニマルなデザインがいいですね。
フォント
WhatTheFont
フォントを判別してくれるサイトです。フォントの画像（PNG、GIF、JPG）をアップロードすると、データベースのフォント情報と照らし合わせてフォントを識別してくれます。専用のフォーラムもあり、眺めているだけでもフォントデザインの参考になります。
http://www.myfonts.com/WhatTheFont/
wordmark.it
ローカルPCにインストールされているフォント情報を使って、入力したテキストを一覧表示してくれます。フィルタでフォントを絞り込んだり、表示しているテキストサイズを変更することも可能です。
BLOKK
モックアップなどに使える、ブロック型のダミーを表示するWebフォントです。
ロゴ
LogotypeCreator
既存のテンプレート画像から、簡単にロゴ画像が作成できるサービスです。テンプレートはArtやSportsなど、30以上のカテゴリーに分類されています。ドロップシャドーなどのエフェクトをかけることも可能。なお作成したロゴをダウンロードするには、サービスへの会員登録が必要です。
Logo Garden
Logo Gardenも、ブラウザからロゴ作成ができるサイトです。Industry、Symbol、Colorの順に選択していき、テキストを載せれば完成です。ロゴのダウンロードには、無料のアカウント登録が必要です。
http://www.logogarden.com/
モックアップ/ワイヤーフレーム
PlaceIt
iPhoneやMacなどの画像に、実際の画面を重ね合わせたスクリーンショットをつくることができます。ドラッグ＆ドロップで使えるので、操作も簡単です。
Dynamic Dummy Image Generator
ダミー画像のジェネレーターです。ダミーテキストと並んで、モックアップの作成では非常に手間になります。サイズや背景、テキストなどを選択するだけで、簡単にダミー画像が生成できます。作成したダミー画像は、PNG、GIF、JPGの3種類のファイル形式でダウンロード可能です。
コーディング
Mincss
煩雑になりがちなCSSを掃除してくれます。余計なCSS読み込みを減らせますし、デザイン工数の削減にもつながります。使い方は、URLを指定してアップロードするだけです。
http://www.peterbe.com/plog/mincss
CSS3.0 Maker
Border RadiusやCSS TransformなどのCSS3のプロパティを作成してくれるサイトです。プレビューで表示を確認しながら、アウトプットするCSSを作っていくことができます。画面上でCSSをコピーすることもできますが、HTMLファイル形式でダウンロードすることも可能です。
liffect – effect for lists
CSSアニメーションを使って、複数の画像をおしゃれに表示するCSSを生成してくれます。Fade InやFlipなど、24種類のアニメーションが用意されています。DurationやDelayなどの指定も可能です。Generateボタンをクリックすると、HTML、CSS、JavaScriptのコードを生成してくれます。
http://ademilter.com/lab/liffect/
Grad3
グラデーションが作成できるツールです。ボタンやナビゲーションなどの要素には、グラデーションが欠かせません。カラーなどの選択をするだけで、指定した内容のCSSを書き出してくれるのでコーディングの手間が省けますね。プレフィックスの選択も可能です。
素材サイト
イラストAC
商用利用可能なイラストが配布されているサイトです。無料でダウンロードできる素材がほとんどです。ダウンロード形式は、JPEGやPNG、AI形式も提供されています。利用するには無料の会員登録が必要です。イラストACと同じ系列に、フォントACや写真ACなどのサイトもあります。
ぱくたそ
商用利用可の写真素材がダウンロードできるサイトです。掲載されている写真のジャンルも多岐にわたっていて、ビジネスからイベント、シーンなどにジャンル分けされています。掲載されている写真は、記事執筆時点で7,800枚を超えています。
足成
足成も商用利用可能な写真が配布されているサイトです。アマチュアカメラマンが撮影したものが多く、写真編集の素材として使えるシンプルな写真が多く掲載されています。写真点数は75,000点を超えています。他サイトでお目当ての写真が見つからない場合は、足成で探してみてはいかがでしょうか。
Webデザインの参考になるサイトについてご紹介しました。デザインの効率化とともに、デザインの質を上げることにもつながります。簡単に使えるサイトも多いので、ぜひ積極的に活用していきましょう。