WEBサイトやブログを制作する前にしていることはあります？私は素晴らしいサイト、自分の作りたいイメージに近いサイトをいろいろとみることから始めます。それはデザインだけでなく内容やどのようなコンテンツを配置しているのか、色の使い方などとても良い刺激になり参考になります。
そこで今回は私がWEBサイト・ブログを制作する前にチェックしている見本帳サイトをご紹介します。どのサイトもいつもお世話になっていて素晴らしいサイトの見本として収集されているサイトばかりです。ぜひ参考にどうぞ！
【WEB見本】 現代デザイン
サイトジャンルとサイトカラーでカテゴリわけされているのでデザイン案の参考にするにはありがたいサイト。トップページと下層ページ1ページがアイキャッチとして確認できるので極端に言うとクリックしてサイトを確認しなくても大体のイメージがつかめます。
【WEB見本】 MUUUUU.ORG
職種別・カラーに加えECサイトやポートフォリオ・ポータルサイトといったサイト別、さらに「かわいい」「クール」などのイメージ、またトップページにjsを多用しているサイトなど見本探しをしているヒトには非常にうれしいジャンルわけされている見本帳サイトです。
アクセスが集中するのか、たまにエラーが表示されてしまう状態が続く事があるのが少し残念・・・。でもとてもすばらしいサイト。
【WEB見本】 inspirationui
WEBサイトの部分的にすばらしいUIデザインを紹介する海外サイト。たとえば、「検索フォーム」「404ページ」といった部分的にすばらしい、面白いつくりになっているサイトを見る事ができます。
部分的なアイディアの参考にはもってこいのサイトです。
【WEB見本】 I/O 3000
カテゴリ・タグ・カラーアーカイブより見本となるサイトを閲覧が可能です。シンプルなビジュアルで大きくサイトを紹介しているためにとてもわかりやすいです。
【WEB見本】 CMI Management Apprenticeships
見本帳のサイトの中ではめずらしい投票型のウェブサイト紹介サイト。いいなと思うサイトにはハートをクリックする事で投票する事ができます。どんなサイトが評価されているのかが一目瞭然でわかるためにサイトの流行トレンドをつかむには見ておきたいサイトです。
【バナー見本】 ナーデザインアーカイブ
バナー広告を数多く集められたギャラリーサイト。バナーサイズや色、業種からバナーを選ぶ事ができます。サイト内のボタンやバナーを作るときに非常に参考になります。
【ランディングページ見本】 ランディングページ集めました。
ランディングページに特化した見本サイト。職種や目的ごとにカテゴリわけされているので特設サイトや販売特価ページなど1ページを制作するときには是非一度は見ておきたいです。
【部分デザイン見本】 ブブンデザインアーカイブ
こちらはパートごとのデザインを紹介しているサイト。たとえばヘッダ部であればロゴ、ナビゲーションといった具合に部分のデザインを紹介されています。たとえばサイトでよく使うtabelですが、意外とサイトにあわせたデザインが浮かんでこないものです。そんなときにも非常に役立ちますよ。
UITemｐle
ランディングページ、ポートフォリオ、お問い合わせページ、料金・価格表示ページ、商品紹介ページデザインをメインの見本帳サイトです。サイト内で注目させていたいページやデザインに困る場合などに参考にしてみてはいかがでしょうか。
あとがき
いかがでしたか？私がWEB制作者として駆け出しのころ先輩から「良いデザインのサイトを作ろうと思う前に、良いデザイン、良いつくりのサイトを死ぬほど見るようにしな！」と言われたことがあります。
さらに加えて、「それらを参考に自分なりに工夫して新しいものを作り出すのが僕らの仕事なんだから」とおっしゃってました。あれから十数年たちますが、私も後輩には同じように伝えています。
今は昔よりこのようにデザイン見本帳サイトが多くあります。これらのサイトをしっかりチェックして自分の引き出しを多くしておきたいものです。