Web制作 参考サイトの捉え方、使い方
こんにちは。先日以下の記事を書いた制作部のTです。あれからだいぶ、子どもも大きくなりました。
Web制作においては、エンジニアも、デザイナーも、プランナーも、皆さん、参考サイトを見る事はあると思います。よいデザインに触れたり、見たりすれば、パーツやビジュアル、構成の参考になるはず、です。たくさんそれらを見て、まずは自分なりによい！と思ったことのアップデートをしていくことが大切かなと思います。
コツは、観察と比較。参考サイトを見るだけではなく、参考書を読むことも含め、勉強するときは、今の自分なりに観察した結果と比較して、答え合わせをする。それがよい！と思ったことのアップデートです。
サイトデザイン
ゼロからすべてを生むのはカンタンではありません。レイアウトの参考になりますが、ときに「こういうのでいいんだよ」という説明や、納得の際に役に立ちます。
Webdesignclip（定番）
海外
LPデザイン
pinterest
たくさんのクリエイターさんが、LPのデザインをピンどめされています。
バナー
なぜそのレイアウト・構図なのか？を考えやすいです。ので、参考にする際はなぜそうなっているか？を考えるべきです。LPのデザインに比べキャンバスがちいさく、参考元となっているデザイナーさんは苦労してそのレイアウトに至っているから、です。
バナーデザインサンプルデータベース
定番ではないでしょうか。
ブブンデザイン
同じく定番ではないでしょうか。
retrobanner
サイズ別検索ができます。
メインビジュアル・素材
いわゆる素材提供サービスのサイトは、「雰囲気検索」で探すことができて、アイデア出しの際、そのテーマのデファクトを知ることもでき、便利です。
配色
自信に色彩感覚がない！と思う方は、悩む時間や習得する時間が惜しい場合はカラーパレットやジェネレータのお世話になると良いと思います。
シンプルなカラーパレット
Adobe Color CC
見つけたらスムーズにPhotoshopやIllustratorに反映できるようです。
ColorDrop
パレットをクリックすると、4色分のカラーコードとrgba値が表示され、さらに表示されたテキストをクリックするとコードがコピーできます。
ジェネレータ
coolors
スペースキーを押すとランダムでパレットを生成してくれます。面白いです。
グラデーションを見つけられるやつ
Grabient
スタイルシートをコピーできます。
itmemo
スタイルシートをコピーできます。
背景素材
よい！と思ったデザインを分解していくと、やはり背景素材やパターンなどと合わせて構成されていることも多いです。
photoshopvip
パターンや背景のトレンドがわかります。信じてよいと思います。
アイコン・ピクトグラム
iconfinder
参考にしたい形やアイコンを検索するとそれっぽいのが出てくるので、
〇〇を表現したいとき、どういう絵を書くのがデファクトなんだろう？というのがわかります。
fontawesome
アイコンの書体を表示させることができるWebサービスです。
非デザイナーのみなさんでもカンタンにアイコンが作れます。
（商用利用可能なFreeのものが多数）
最後に
デザインは暗記して覚える分野ではないと私は思っています。ただ参考サイトを眺めるだけではなく、自分の感覚の現在位置を知ることも大切です。
沢山の素材やLPを見て、知識と目を肥やしていきたいものです。
リオ制作部へのお問い合わせはこちらからどうぞ！