fbpx

As Best Creative, Do Everything For a Goal…

Blog 社員ブログ

BLOG

社員ブログ

Web制作デザイン
Webデザインまとめサイト。参考サイトはずばりこれ!
2019/08/08


Webデザイン初心者にとって、まとめサイトが参考サイトになるのは自明の理といっていいでしょう。一方で経験豊かな玄人にさえも大いに役立つコンテンツかもしれません。そしてWebディレクターはもちろん、極論として、関わってくる職種全ての方に当てはまるともいえます。

優れたUI、レイアウト設計、配色の妙に加え、惹きつけては離さないキャッチコピー……等々。デザインと対峙した時、いずれも大枠で捉え、学んでいくことが重要です。
極力ユーザーの負荷・ストレスにならないように、ページスピード(読み込みの速さ)やサイト内検索・カテゴリの使い勝手の良さ、グローバルナビゲーションをはじめ自然で明確な導線。こうした要素もデザインを考えていくなかでは悩ましく、大勢を左右してきます。意識しないわけにはいきません。
さらに述べると、サムネイルのチョイスは、ページ内での見やすさだけでなく、検索結果に表示される画像にもなるがゆえ、クリック率の向上という成果においても一役買うほど大事なものとなっています。となればユーザーの関心を手繰り寄せるべく、デザイナー(orディレクター)は、いわばマーケティングの領域にも踏み込まなければならないわけです。

さすがにWebデザインで初心者の方がこれらをすべて押さえるのは厳しいですよね。
確かにオリジナリティ、ユニーク性は大切です。
とはいえ、それらを生むための出発点としてお手本にするサイトはあった方がよいでしょう。逆に参考サイトを持たない場合、着手の機会を作れず経験という糧を蓄えることができなくなる可能性が孕んできます。

学ぶことは真似ること。型やパターン、果ては細部に宿るニュアンスまで、他人の制作物から教わるものや、そこに潜むヒントは無限大です。幸運なことに、そういったサイトは数多くあり、しかも親切なメディアがまとめてくださっている現状があります。スキルアップのために使わない手はありません。
ということで本稿では、リスペクトを表し、そうした価値あるメディアをピックアップ。参考サイトはずばりこれです。
が、ただ漠然と引っ張ってきたわけではありません。優れたデザインは目的を重視します。
したがって、Webデザインを考える際のお手本にしたいまとめサイトを、そのメディアの特性に応じてタイプ別に分け、セレクトしました。
あなたのキャリアに影響を及ぼすサイトとの出会いを、この記事が後押しできれば幸いです。

目次

カテゴリやタグから選べる「siteInspire」

「siteInspire」はロンドンのデジタルスタジオが運営しており、世界中から優れたデザインのWebサイトを集めているまとめサイトです。
掲載するサイトはスタッフ自らが厳選しています。すべてのサイトがレスポンシブデザインであることもそうですが、チョイスにこだわりや特徴がところどころうかがえます。
なかでも特筆すべきはタイプ・スタイル・サブジェクトといったカテゴリ検索です。これによって、目的に合ったWebサイトを見つけやすくなっています。
タグの種類も実に豊富。「ナビゲーションが凝っているサイト」や「背景に動画素材を用いている」といった指定で検索することが可能です。パーツごとに参考とするにはもってこいといえそうです。

海外のまとめサイトであるため英語での利用が求められるものの、キーワードでの検索ができるので特に問題なく使えるはずだと考えます。
法人サイトやショップサイト、ポートフォリオなど様々。
詳細ページを開くと関連するWebサイトまで紹介されるので、イメージに合ったサイトを探すのにわかりやすくて役立ちます。

「siteInspire」はこちら>

投票によって掲載サイトが決まる「AWWWARDS」

「AWWWARDS」は海外において有名なWebデザインのまとめサイトであり、アメリカ・フランス・イギリス・日本などからWebサイトは選ばれています。
多様的であらゆる立場にいる人と審査員からの投票によって厳選されているとあって、そのクオリティは間違いないもの。
なお、投票はデザイン(40%)・ユーザビリティ(30%)・クリエイティビティ(20%)・コンテンツ(10%)の4つの評価軸に対し、10点満点で行われます。

加えて言及したいのは、「Site of the Day」という賞が設けられていること。その日に注目されているWebサイトをユーザー視点で確認することが可能です。
月・年単位でも様々な賞が授与されているため、受賞しているものを調べてみるだけでも充実しています。多くのデザインに生かせることができるでしょう。
客観的に高い評価を得ているWebデザインを知りたい人にとって、メリットが大きいまとめサイトです。

最新のトレンドを世界規模で意識することは、Webデザインにおいて非常に重要です。
日本国内だけではなく、海外のWebサイトが豊富に比較できる「AWWWARDS」を活用して、ユーザーを引きつけるワールドワイドなデザインを探してみましょう。

「AWWWARDS」はこちら>

保存やチェックが簡単にできる「81-web.com」

「81-web.com」では、日本の優れたWebデザインをギャラリー&リンク集という形で取り上げています。
サイト画面で「+」のボタンを押すとお気に入りとして保存することができるなど、操作性に優れているのが特徴です。
ログインをしなくても保存できるので、いったん保存をして後からチェックし直すといった使い方ができます。
そして、画面に表示されているアイコンをタップすると、Webサイトのレイアウト全体をすぐに確認することが可能です。
表示されるサムネイルだけでもサイトデザインのイメージはわかります。ファーストインプレッションだけで気になるものを探すとき、とても便利な仕様となっています。スピーディーに参考サイトを見つけたいなら重宝したいまとめサイトです。

「81-web.com」はこちら>

PCとスマホの表示を比べながら選べる「bookma! v3」

「bookma! v3」は、レスポンシブデザインを比較するのに向いているWebデザインのまとめサイトです。
PCとスマホでの表示画面が並んで掲載されているので、一目でモバイルのイメージを確認することができます。
また、サイト画面の上部にはPCとスマホのアイコンがあるのですが、タップすればそれぞれの表示に絞れる設計となっています。ありそうで意外と珍しいかもしれません。いずれにせよありがたい機能だと思います。実際、使うシーンによって膨らむアイデアは異なります。デバイスでフィルターを掛けておいてデザインを考えれば、タスク管理、整理においても効率的なのではないでしょうか。

あらためてお伝えすると「bookma! v3」は、全体的に仕様はシンプルで、キーワード検索も可能。多くのWebデザインを視覚的、直感的にチェックできるため、比較検討する際に有効に活用できるまとめサイトです。

「bookma! v3」はこちら>

ランダムにWebページが表示できる「I/O 3000」

「I/O 3000」は、日本国内だけでなく海外のWebサイトも掲載されているため、豊富な種類のWebデザインを比較することができます。
カラー・タグ・カテゴリから検索することが可能なので、思いついたキーワードでどんどん検索できるでしょう。
また、アーカイブも確認できるため、特定の時期のトレンドを探ることにも役立てられます。
さらにはオートスクロール機能が備わっているので、一覧ページを下方向にスクロールしていくと続きが自動的に読み込まれる仕様となっています。いわゆる遅延ロードのサポートとしても、ユーザーに負荷を掛けない親切なつくりです。

また、「シャッフルボタン」を押すことによって、掲載されているサイトのなかからランダムで表示することもできます。これが案外使えるのです。
デザインの考案に行き詰まってしまったときや、インスピレーションを得たいときに活用してみてください。気分転換のごとく、凝り固まった考えが時にクリアになり、フレッシュな気持ちで作業がはかどります。
これまでの発想にとらわれずにデザインを見つけたいときにはぜひ!
思いがけないWebデザインを発見できる可能性が高いです。

「I/O 3000」はこちら>

クリエイティブのバリエーションが特徴的な「WebDesignClip」

「WebDesignClip」はサイトの読み込みが速いため、ストレスを感じることなくWebデザインを探すことができます。
サムネイルも大きめに表示されるため、視覚的に利用しやすいサイトだといえるでしょう。
日本国内のデザインと海外のデザインが分けられているので、それぞれ目的にあわせてチェックできます。
また、ほかのまとめサイトに見られない特徴としては、LP(ランディングページ)だけでの閲覧も可能となっていることが挙げられます。
スマホ版のWebページの絞り込みもできるため、モバイル端末を重視したWebデザインを考えるときに活用できるでしょう。

カラー・レイアウト・カテゴリ・タグといったいくつもの切り口で検索でき、マイクリップに追加をするとログインしなくても気に入ったWebサイトを保存できます。
サブカラーでもカラー検索ができるのが特徴です。メインカラーに合わせる色を探す場面、多いと思います。アクセントカラーも含めて活用してみてはどうでしょう。
配色を変えるだけでも、Webサイト全体のイメージを一新できることがあります。まさしく色々なパターンを試してみるのをおすすめします。

「WebDesignClip」はこちら>

WordPressでのサイトデザインの参考になる「WeLoveWP」

「WeLoveWP」は、WordPressで作成されたサイトがメインとなっています。
そのため、個人のブログやポートフォリオなどが中心に掲載されているのが特徴です。
Webデザインを考える目的だけでなく、WordPressのテーマ探しにも活用できます。
一見してとてもじゃないけれども、いわゆるCMSの範疇で作られたものだとはわからないものもあり、WordPressをメインプラットフォームとしデザインを考えるならば、参考サイトとして非常にありがたい存在です。機能してくれること請け合い。心底、太鼓判を押したくなる優れものです。
もちろん、WordPressには初期設定の時点からテンプレートが備わっているものの、いまひとつデザインが気に入らないというケースも少なくないはず。
ゆえに、「WeLoveWP」を活用すれば、引き出しがより増え、普段何気なく感じていたモヤモヤを解消させるきっかけにもなるでしょう。

「WeLoveWP」はこちら>

Webデザインのまとめサイトをチェックするときの注意点

さて、ここまで紹介してきたメディアも含め、Webデザインに関するまとめサイトは数多く存在します。そうなってくると結局どのサイトを参考にすべきか迷ってしまうこともあるでしょう。
だからこそタイプ別に分けたのですが、それだけではまだ指針として決定打にかけるといった声が聞こえてきそうなのも正直なところです(笑)。
それでは、判断基準、ポイントをもう少しだけ。
まず、基本的に押さえておきたい点として、更新頻度が高いまとめサイトを参考にしてください。
Webデザインのトレンドは固定化されたものではなく、常に変化しているものです。
トレンドとは無情なもの。今イケてるデザインも1年後には適さないものになっている可能性は十二分にあります。
1つの形式にこだわるのではなく、世の中の流れに合わせて柔軟に構築していくことが大切です。そこで説得力を帯びてくるのが更新頻度の高いまとめサイト。定期的に更新が行われているなら、それはきっと最新版でしょう。そう考えるのが自然です。

そしてWebデザイン同士で比較するなら業種をマークしてください。同じ業種はもちろん、関連業種も参考にしてみましょう。競合する企業や個人がどのようなデザインを採用しているのかをチェックすることは、それこそ上述したトレンドをおさえることにもなります。業界全体の傾向を把握し、そこで真っ向勝負、時に差別化を図り、といった具合に明確な戦略が生まれれば、必要なまとめサイトは自ずと絞られてくるのではないでしょうか。
一方で、斬新なアイデアを求めている場合には、異なる業種の方が効果的です。マッチするかしないかはまず度外視してください。そこには突破口がいくつも見え隠れしています。視点を変えた先に正解があるという話も、決してフィクションではなく現実にあります。いずれにせよ、挑戦的なデザインを欲するなら取り入れる参考サイトも冒険してみましょう。

まとめサイト内で見るべきポイントは人それぞれだと思います。その前提を踏まえ強いて挙げるならば、カラーや画像の位置、フォントに目を向けてみることは、とても重要です。
例えばメインカラーとサブカラーの組み合わせは実物のサイトを見てみないとわからないもの。どのペアが一番イメージに近いのか、その観点を持っていると俯瞰したセンスが身に付けられます。画像の位置やフォントの種類・大きさも同様。一つの要素でWebサイトの印象は違ってくるというのをまざまざと実感させられます。そういうわけで、まとめサイトは有効なのです。数々の事例を実際に見ながら学ぶことができるメリットだけでも十分な根拠でしょう。
そこから自分のイメージにあわせてカスタマイズすることで、オリジナリティが加わり、魅力も増すという好循環。目指すスキームはここだと思います。

Webデザインを初めて学ぶ人は、公開する気のないWebページを1から作ろうとしても、途中で挫折してしまうケースがあります。
再三お伝えしますが、まとめサイトに掲載されているWebデザインを参考にすれば懸念される事態は回避しやすいです。まずは経験すること。そこからどんどんデザインに関するスキルを磨くことができます。
そこからさらに前へと進むには、SEOやアクセス解析についても学んでみましょう。まとめサイトに選ばれているものは、良質なデザインはもちろん、検索順位で上位表示されやすい傾向があったり、PV数が多かったりすることも特徴的です。ゆえに、その構造を参考にしている方々もいます。
いずれにせよ、Webに関する知識は常に変化しているので、コツコツとタイムリーに身につけていく必要があります。Webデザインを変更したときには、合わせてアクセス状況などを見てユーザーの反応をチェックしてみましょう。この結果こそが、より良いサイトを構築するための貴重な情報源になりえるかもしれません。

Webデザインを有効に活用するためには、単に多くの事例に触れるだけではなく、どういったデザインが支持されているのかを踏まえたうえで、分析し考えることが大切です。

まとめサイトを参考にすることで、オリジナリティも生まれていく!

まとめサイトをチェックしておけば、いざWebデザインを変更する際にもヒントが得られるでしょう。気になるデザインを基盤とし、自分ならどのようにアレンジするか、普段からシミュレーションして考えておくと尚良いと思います。
結果的にオリジナリティが生まれるわけですから面白いですよね。
したがってまとめサイトに対して抵抗があるというのは、勿体ないという見方もできます。
加えて、そこにはトレンドも内包されていることが多いです。
先述した通り、デザインは流行や最新の技術などによって日々変化していきます。乗り遅れてはいけません。

サイト制作の入門として機能し、オリジナリティが発生し、トレンドも押さえられる。
やはり、Webデザインの参考サイトは、まとめサイトがうってつけですね。

SHARE

PLEASE CONTACT US

Web制作、SEO、各種デザイン制作など、集客についてお困りのことがあれば、
いつでも下記のボタンからお問い合わせください。

Go to TOP
Go to TOP