Webデザインの参考になるギャラリーサイトをまとめました。優れたWebデザインを行うためには、色々なサイトを見て自分の中の引き出しを増やしていくことが大切です。
今回おすすめのギャラリーサイトを選ぶにあたって下記のポイントに注目しました。
- サムネイルの見やすさ
- 読み込みの速さ
- 検索、カテゴリの使いやすさ
- 更新頻度
では、早速Webデザインの参考になるおすすめのギャラリーサイトをご紹介していきましょう！
INDEX
海外と日本のギャラリーサイトの違い
海外のサイトは、日本のサイトと比べて高度なコーディングスキルが必要となるWebサイトが多く取り上げられている印象があります。
それに比べて、日本のギャラリーサイトはシンプルかつ美しく作られているWebサイトが取り上げられていることが多いです。
海外のギャラリーサイトの方が利用者も多く、その分多様なWebデザインを見ることができるのでインスピレーションを得ることには役立ちますが、初心者の方がWebデザインの勉強のために参考にする場合は、日本のギャラリーサイトを選んだ方が適しているかもしれません。
まずは、ご自身の技術力や目的に合ったギャラリーサイトを見つけて、それを定期的にチェックする習慣を身に付けるのがおすすめです。
海外のギャラリーサイト
まずは海外のギャラリーサイトからご紹介します。
1. AWWWARDS
「世界中の優れた開発者、デザイナー、エージェンシーの才能と努力を見出し、応援するサイト」
海外では有名なWebデザインギャラリー。色々な方の投票によって掲載されるサイトが決定する仕組みを採用しています。
「Site of the Day」という賞があり、毎日注目のWebサイトをチェックすることができます。他のサイトと違って、ユーザーの視点からサイトが選ばれているのが面白いですね。
2. siteInspire
ロンドンのデジタルスタジオが運営する海外のWebデザインのギャラリーサイトです。
スタイルやタイプ、カテゴリなどから優れたWebデザインのアイデアを探すことができるようになっています。
3. CSS Design Awards
UIデザイン、UXデザイン、イノベーションなど、異なる観点で優れたデザインのWebサイトが選ばれているギャラリーサイトです。
特徴や使われている色、Webサイトの種類など様々なフィルタリングでWebデザインのアイデアを探すことができます。
日本のギャラリーサイト
次に日本のギャラリーサイトのご紹介です。
4. I/O 3000
「国内外を問わず、Web制作の参考となるサイトが集められているギャラリーサイト」
カテゴリ、タグ、色からWebサイトを探すことができ、シャッフルボタンを押せば全サイトの中からランダムでWebページを表示できるので、デザインのインスピレーション探しに使えます。
5. bookma! v3
「感性を刺激するWebデザインギャラリー」
PCとスマホの表示が並べて掲載されているので、レスポンシブデザインを比較しながらチェックすることができます。
画面上部のアイコンをクリックすると、PC・スマホのどちらかに絞って表示することも可能です。
6. Web Design Clip
「Webデザイン制作の上で参考になるクリエイティブの高いWebデザインのリンク集」
ページの読み込みが速く、サムネイルも大きめに表示されているので使いやすいギャラリーサイトです。MyClipに追加すれば、ログインしなくてもお気に入りおWebサイトを保存できるのが使いやすく、色、レイアウト、カテゴリー、タグなどから探すことができます。
7. 81-web.com
「Webサイト制作に役立つ、日本の優れたデザインのWebデザイン・Webサイトギャラリー＆リンク集」
「＋」ボタンをクリックするとログインしなくてもお気に入りとして保存しておくことができるので、後で見返したい時に便利です。
また、ディスプレイのアイコンをタップするとページにアクセスしなくても、レイアウト全体をチェックすることができ、いちいちページを開くのがめんどくさい人にはおすすめです。
8. S5-Style
「優れたWebデザインをブックマーク Webデザイナーのためのリンク集・ポータルサイト」
スターのアイコンをタップするとログインしなくてもお気に入りに登録することができます。検索機能が非常に豊富で、全体的にしっかりと作り込まれているサイトです。
9. RESPONSIVE WEB DESIGN JP
「日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト」
複数の画面サイズで表示した時のサムネイルをひと目で確認できるので、レスポンシブデザインでWebサイトを作る時に参考になります。
10. MUUUUU.ORG
「クオリティが高い縦に長いサイトを厳選して集められているギャラリーサイト」
カテゴリ分けが非常に細かく、探しているWebデザインに限定してサイトを探すことができます。
Webデザインギャラリー – Web Design Trends
当サイトではデザインが優れたWebサイトを定期的にご紹介していますが、色々な記事に分散してしまっているので1つにまとめてほしいというご意見をいただき、ギャラリーページを新しく作りました。
デザイン手法やテクニックごとにタグ分けしているので、タグをクリックするとデザイン手法ごとにWebデザインを探すことができます。
コンテンツは定期的に更新しているので、ぜひ使ってみてください！
まとめ
優れたWebサイトを作るためには、ギャラリーサイトでデザインのトレンドやコーディングテクニックなどを日々チェックすることが重要です。参考になるWebサイトは自分なりにまとめておくと、何かサイトを作る時の参考になりますね。
コーダーの方は、優れたデザインのWebサイトをどのようにコーディングするのかイメージしながらサイトを見てみると勉強になります。ぜひWebデザインのギャラリーサイトをチェックして、ご自身のサイト制作に役立ててください！
