Webデザインで参考にしたい海外サイト&ギャラリーまとめ30選

BUSINESS

新しいBLOGや広告、ポートフォリオ、その他商業目的のWebサイトを作りたいけれど、何から初めていいかよくわからない方へ。

Webデザインで参考にしたい海外サイトとギャラリーサイトを30個厳選しました。UI、イラスト/グラフィック、インフォグラフィック、LP、タイポグラフィー、アニメーションという6つの観点から紹介します。自身のWebサイト作りに、ぜひ役立ててください。

UI編

1. waaark

waaaak

モジュラーデザインで設計されたWebサイト。載せる情報を必要なものだけに厳選しているので、すっきりと見栄えがよく、余計なストレスを感じることなく欲しい情報にアクセスできます。

ページを移動するときに、画面がカラフルな波で覆われるアニメーションは、ユーザーの興味を引くユニークなデザインですね。

waaark

2. Facebook Design

fb

Facebookのデザイナーが作った記事や動画のWebサイト。読みたい記事にカーソルを合わせると、記事が少し浮くように上にあがります。

シンプルなデザインですが、ユーザーが画像や記事の読みこみにストレスを感じないための工夫が凝らしてあります。

Facebook Design

UI編のギャラリーサイト

3. ULTRAUI

ギャラリー

Andorid、iPhone、Mac、WebのUI参考画像を探すことができます。いくつかの画像がシネマグラフになっていて、実際にどのようなイメージでユーザーに使われるのか簡単に確認できます。

文字の説明がほとんどないので、画像とシネマグラフを見ながら直感的に、ユーザーの視点に立って考えられるギャラリーです。

ULTRAUI

4. UI8

UI8

UI8

豊富なコンテンツが揃うUIマーケット。

トレンドのグラデーションデザインや奥ゆきのあるタイポグラフィー、カラフルなインフォグラフィックなど、高品質のWebデザインが揃っています。見ているだけでインスピレーションを受けそうです。

イラスト・グラフィック編

5. New Acton

イラスト

イラストレーターなどイラストのプロに書いてもらったイラストを使用すると、個性が発揮されてユニークなWebサイトになります。

上記のWebサイトの、線が 細くてあたたかさが溢れるイラストはとても独創的ですね。

New Acton

6. Dreamer Stories

Dreamer

DACAによってアメリカからの強制退去を猶予された若者たちの声がまとめられたWebサイトです。似顔絵がとてもユニークですね。

Dreamer Stories

7. INSPIRATIONGRID

グラフィック

世界中の優秀なクリエイターの情報と、プロダクトを集めて紹介しているWebサイト。幻想的なグラフィックデザインやアート、イラスト、幾何学模様などさまざまなジャンルを見られます。

Webデザインのコンテンツとして参考のイラストを探したり、Webサイトのコンセプトイメージを探したりできます。

INSPIRATIONGRID

8. oscar

oscar

oscarのWebサイトには、ご覧のとおり個性的なイラストが描かれています。線で描かれた人間のイラストもユニークですが、下へスクロールするとクリックアイコンでもイラストが登場します。

線画と同じ系統で統一感が出て、イラストなのにすっきりと見られますね。

oscar

9. Pottermore

potter

世界的に有名な児童書で映画の「ハリー・ポッター」に関連した「Pottermore」というサイト。

Webサイトに飛ぶとホグワーツの「H」が登場して、すぐあとに4寮を象徴する動物たちが描かれたロゴがあらわれます。UI/UXにも関係しますが、こういった凝った演出も世界観に合えば、ユーザーにとっては素晴らしいユーザーエクスペリエンスになります。

Pottermore

10. OPERATION SAMUS RETURNS

マシン

ゲームやアニメ登場しそうなロボットを立体的に描くとしても、子どもっぽくならずに描くことが大切です。OPERATION SAMUS RETURNSの場合は、背景と文字の色を黒と赤で統一しているので、ユーザーも見やすいWebサイトになっています。

OPERATION SAMUS RETURNS

イラスト・グラフィック編のギャラリーサイト

11. Behance

behance

Webデザインをはじめ、クリエイティブ分野からプロダクトを集めて紹介しているWebサイトです。作品の母数が多いので、さまざまなジャンルのクリエイティブ作品に触れることができます。

Webサイトデザイン以外のところからインスピレーションを得たい人におすすめです。

Behance

12. Dribbble

Dribbble

アートやイラスト、グラフィック等を使ったポートフォリオを集めて紹介しているWebサイトです。奥ゆきのあるフォントや、トレンドの幾何学模様がとくに充実しています。

Dribbble

13. FWA

FWA

Webデザインのイラスト材料だけを探すサイトではなく、実在するセンスの良いサイトをコレクションしているギャラリーです。1ページに多くて2サイトしか表示されないので、ひとつひとつのサイトをじっくりと見られます。

ジャンルはショッピングやNPO法人などさまざですが、サイトによってユーザーエクスペリエンスをどう上げているのかを研究すると発見が多いのでおすすめです。

FWA

14. Siiimple

Siiimple

ユーザーが欲しい情報を手に入れるときに邪魔になる、悪い機能やデザインを取り去り、限界までシンプルにしたWebサイトが集まっています。

シンプルさを追求したい人や、ごちゃごちゃしたサイトを改変したい人におすすめです。

Siiimple

インフォグラフィック編

15. wellmedicated

インフォ

インフォグラフィックとは、横並びで書いてあってもよくわからない数字情報のようなものを、図や絵にして理解されやすくするデザインのことです。

数字やデータも、ひとめ見て理解できれば、Webサイトに表示しても離脱率は跳ねあがらずにすみます。wellmedicatedには、数字をわかりやすく図にしたインフォグラフィックがたくさん載っているので、ぜひ訪れてみてください。

wellmedicated

16. Daily InfographicDailyInfographic

上記のインフォグラフィックは、それぞれ理想の仕事をイラストにしたものです。赤いボックスで分かれているので、誰が何かすぐにわかりますね。

Daily Infographicは、数字が多くないインフォグラフィックを扱っています。イラストベースなので初心者でも試しやすいです。

Daily Infographic

インフォグラフィック編のギャラリーサイト

17. GOOD

GOOD

16と17で紹介したようなインフォグラフィックのデザインが、実際に使われている記事を読むことができます。読んでみると、文章だけではよくわからない記事も、インフォグラフィックをつけるだけで格段に読みやすくなることがわかります。

GOOD

18. visually

まとめ

図や画像はもちろん、インフォグラフィックを駆使した動画も紹介しているWebサイト。

カラフルで広告や宣伝に使えそうなインフォグラフィックも数多く揃っています。

visually

LP(ランディングページ)編

19. DATING vandalized

Dating

DATING vandalizedのWebページでは、トップはショッキングピンクですが、下にスクロールしていくとだんだん紫色へ。紫色から水色、水色から青色へと、グラデーションになっています。

余白も十分にあって、一度見ただけで何が書いてあるのかすぐにわかりますね。

DATING vandalized

20. icon54

icon

アイコンを販売している海外の会社です。

「アイコンを販売している」ということも、ランディングページを見ただけですぐにわかります。ここまでシンプルにしてしまうと、自社の個性を発揮できないというジレンマがありますが、ユーザーエクスペリエンスとうまくすり合わせていく必要がありそうです。

icon54

LP(ランディングページ)編のギャラリーサイト

21. lapa

lapa

ランディングページを集めたギャラリー。31のカテゴリーから選べるので、作りたいWebサイトに近い種類のページを見られて、ランディングページが作りやすいです。

lapa

22. Land Book

landbook

デザインがシンプルで機能性に優れているランディングページを集めているギャラリーです。スクロールで10~15のページを見られるので、わかりやすさや情報の多さを直感的に判断できるのが特徴です。

Land Book

タイポグラフィー編

23. msds studio

msds

アルファベットのなかの幾何学模様が、Webサイトを開くたびに変わるので、毎回開くのが楽しみになります。タイポグラフィーのデザインの参考にどうぞ。

msds studio

24. CaavaDesign

caava

フォントのデザインだけではなく、背景や文字の色も考慮してデザインしているタイポグラフィー参考サイト。

手描きのかんじやペンで塗ったようなカジュアルなタイポグラフィーなど、とにかくおしゃれなでざいんが多いのでおすすめです。

CaavaDesign

タイポグラフィー編のギャラリーサイト

25. MUUUUU.ORG

MUUUU

優れたタイポグラフィーデザインのWebサイトをたくさん集めているギャラリーサイト。6つのサイトを一度に見られるので、良いデザインと悪いデザインを簡単に比較できます。

MUUUUU.ORG

26. I/O 3000 Webデザインギャラリー

typo

タイポグラフィーを見比べるのに邪魔な情報が一切なく、見やすいWebサイトです。どんどん新しいサイトが追加されるので、タイポグラフィーをいつもチェックしている人にはおすすめ。

I/O 3000 Webデザインギャラリー

アニメーション編

27. A Creative Digital Studio

動

動画やシネマグラフが多様されているわけではありませんが、Webサイトに飛んだときの、動きのあるトップページがとにかくすごいです。トップページに悩んでいる方にはおすすめです。

A Creative Digital Studio

28. ANIMAGRAFES

jet

ジェットエンジンが動く仕組みを、動くアニメーションで表現しています。

実際にはタービンやスピナーが高速回転しているので、ユーザーはジェットエンジンの仕組みを苦労することなく理解できます。文章だけではわかりにくい説明を多用する方にはおすすめです。

ANIMAGRAFES

29. CP+B COPENHAGEN

ピンク

ピンク色の背景の後ろでミキサーを操作している様子を、シネマグラフで表現しています。高画質の動画を繰り返し再生することで、webページに動きをもたせてユーザーの興味をひいているのです。

CP+B COPENHAGEN

アニメーション編のギャラリーサイト

30. GIPHY

gi

GIFをまとめているWebサイト。リアルな動画だけでなく、ロゴのアニメーションやシネマグラフ、アニメーションタイポグラフィーなど幅広く取り揃えています。

GIPHY

まとめ

自身のWebサイトで使用したいと思える、クールなデザインは見つかりましたか?

この記事で紹介した30選以外にも、素晴らしいWebサイトがたくさんあります。ぜひギャラリーサイトを訪れて、チェックしてみてください。

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ