おしゃれで美しい海外のWebデザインまとめ35

ウェブデザインまとめアイキャッチ画像

記事内に商品プロモーションが含まれる場合があります

本当におしゃれな海外のWebサイトだけを30つ集めました。どれも表現やコンセプトがアイデアに満ちており、見ているだけでワクワクしてくるはずです。

1. iFly50

KLM iFly 50

GO

世界の50の絶景を穏やかなBGMとともに鑑賞できるWebサイト。はじめて訪れたとき「本当に良いものを見た」と感激しました。

2. MMP Wishes 2017

2017 Make Me Pulse

GO

MMP(Make Me Pulse)はパリのWeb制作会社です。このWebサイトはコーポレートサイトでも、委託して作られたページでもありません。純粋に最先端のWebデザインを提案するために作られたサイトなのです。その結果、世界中のWebサイトを表彰するAwwwardsに受賞し、何よりのプロモーションとなったようです。戦略までオシャレですね。

3. Paper Planes

Paper Planes 🔊

GO

言葉を失うくらいに感動したのがこちらです。スマホで開くと、自分で紙ヒコーキを折ることができます。紙には自分の場所が記されたスタンプが押されます。スマホを振れば、紙ヒコーキは飛んでいきます。その直後に画面には美しいアニメーションとともに「Planes have just left Osaka」というように表示されます。世界中のこのページを開いている人が、自分の投げた紙ヒコーキを見ることになるのです。世界を少し身近に感じられる素敵なコンセプトのWebサイトですね。

4. EPICURRENCE

Epicurrence  No 5 🔊

GO

デザイナー向けのカンファレンスの特設ページ。隅から隅まで世界観が統一されており、最高にオシャレです。中央配置のシンボリックなタイトル、ゆるやかに動く雲、背景画像とマッチしたグラデーション、全てが完璧です。

5. wrk.

Wrk  French Creative Web Studio 🔊

GO

個人的に大好きな3Dなフラットデザイン。細かなアニメーションや、色使いが秀逸でずっと見ていたくなります。

6. dot

go

ぬるぬるとした動きがおしゃれなWebサイト。淡いグラデーションと丸みがかった文字がよくマッチしています。

7. In Pieces

species-in-pieces

GO

絶滅の危機にある30の種が、Low Poly(粗いポリゴン)な表現で紹介されています。スクロールするたびに動物が切り替わっていきます。ちょっとしたアニメーションが素敵です。

8. Beagle

Beagle by Podio Proposal Software

GO

スクロールするたびにガラッとデザインが変わり、新たな発見があります。もう1度スクロールしたくなる秀逸なデザインです。

9. Anniwang

A Day in the Life of a Front End Developer

GO

こちらもスクロールと連動した動きが面白いフラットなWebデザインです。個人のポートフォリオサイトで「私の1日」がテーマとなっています。「HIRE ME(雇って)」が良いですね。

10. 12dishes

Around the World in 12 Dishes

GO

世界のユニークなレシピと、そのレシピが生まれた背景を紹介するWebサイト。おしゃれなだけでなく、レシピページは見やすく実用的に作られています。レシピ数は12つだけ。中には日本の「塩昆布茶漬け」も紹介されています。配色が秀逸です。

11. The Spare Time

FINN no  How much is your spare time worth

GO

「時間の価値を測る」というコンセプトの面白いWebサイト。ドラッグにより様々なアニメーションを楽しむことができます。たとえば上のスクリーンショットのページでは、タクシーをドラッグによりぐるぐると動かすことができます。

12. Take What You Can Carry

Take What You Can Carry 🔊

GO

新しい表現がたくさん取り入れられており、とても勉強になります。たとえばカーソルを常に追尾する要素や、傾けて並べられた文字など、見ているだけでインスピレーションが刺激されます。

13. BLOCK16

Block16  Farm To Table Street Food 🔊

GO

トップページを開くと、画面いっぱいにアメリカンな食卓が表示されます。よく見ると映像となっており、少しずつ食材が取られていきます。タイポグラフィも映像にマッチしており、本当によくできたWebサイトだと思います。

14. New York Summer

New York Summer  Jake Blakeley

GO

ニューヨークでのインターン体験が日記のように表現されています。派手すぎないアニメーションと、淡い色使いがとても心地よく感じられます。

15. ZIPL

ZIPL Web Studio 🔊

GO

Web制作会社のコーポレートサイト。機能性よりもオシャレさを追求したという構成ですが、その分ワクワクさせてくれます。背景が黒の”ナイトバージョン”と、白の”デイバージョン”を切り替えることができるというのもセンスが良いですね。

16. Peter Nottage

British Male Voice Over  Presenter | Pete Nottage 🔊

GO

フラットで立体的なアイコンがとてもかわいいです。これだけユニークな表現をしていてもサイト構成は分かりやすくなっています。スマホでもかわいく表示されるレスポンシブデザインも良いですね。

17. Bauhaus

Bauhaus Archiv 🔊

GO

ドイツのWebメディア。立体感・奥行きの表現がものすごく上手で、まるでカードが画面の上に浮いているように見えます。このような表現は今後も間違いなく増えていくでしょう。

18. 2am

Creative Design  Digital

GO

背景に埋め込まれた美しい映像と、細字のフォントがよくマッチしています。スクロールによりかかるぼかしも素敵です。

19. HILLSIDE

Home  Hillside Community Church 🔊

GO

背景には美しい映像が埋め込まれています。デスクトップ表示がユニークで、画面上部だけでなく左右にもメニューバーが置かれています。これが白枠のような役割をしており、映像を引き立てています。

20. BRANDED7

Lake View  Limited Edition Art ~ Branded7 Art  Limited Edition Prints By Rob Palmer 🔊 1

GO

アーティストのポートフォリオ兼作品販売サイト。壁に取り付けられたような額縁の表現が上手です。

21. Confederation Studio

Little Notes  Confederation Studio 🔊

GO

動きがとてもかわいらしいWebデザイン。特にローディング中のアニメーションがとてもユニークで面白いです。

22. Infinity Foods

Foods  Infinity Foods

GO

オーガニック食材を扱う会社のWebサイト。作りはシンプルなのですが、大胆なタイポグラフィにより見応えが生まれています。

23. Poc Sculpture

Fullscreen 1

GO

木製雑貨を扱う会社のWebサイト。カードのように重なり合う写真と塗りつぶされた要素がおしゃれです。

24. Coffee Times

Coffee Times Coffee House | Serving Fresh Coffee to Lexington for 30 years 🔊

GO

コーヒー豆販売会社のコーポレートサイト。豆を焙煎する映像が埋め込まれており、引き込まれます。手書き風のフォントと、マグカップ痕が良い味を出しています。

25. Trainrobber

Trainrobber AR  VR 🔊

GO

VR要素のあるWebデザイン。スマホだと傾けることで視点を変えることができます。VR的な表現は言うまでもなく今後増えていくのでしょう。

26. Bepat

Patrick David | Italian Front End

GO

イタリア人Webエンジニア個人のWebサイト。大胆な大きさに指定されたフォントや真っ黒な背景など、刺激的な表現が目をひきます。

27. meiofio

Melissa Meio Fio 🔊

GO

複数のカラフルな要素がいくつもズレたように重なり合うというかなりユニークなデザイン。ファッション系のテーマを扱うサイトであれば、こういうのもアリかもしれませんね。

28. DJECO

DJECO 🔊

GO

イギリスの大手おもちゃメーカーのWebサイト。ただアニメーションがついているだけでなく、ちょっとゲームで遊ぶもこともできます(そしてけっこう楽しいです)。ただその分だけ重たく感じられるのは難点ですね。

29. Pirate

Fullscreen 2

GO

グリッド表示がユニークで参考になります。背景画像は固定されており、グリッドは一部空洞になっています。そのためスクロールすると、固定された背景画像が垣間見えます。これは斬新…。

30. IDA HOFFART

Ida Hoffart

GO

デンマークの制作会社のコーポレートサイト。今回紹介する中では動きの少ないシンプルなデザインなのですが、使われている作品画像がハイクオリティです。

31. EURO VET

http://en.euro.vet/

GO

動物向けの製薬会社のWebサイトです。アイコンにカーソルを当てたときのアニメーションがとてもいい感じ。スクロール時のエフェクトもヌルヌルとしていておしゃれです。

32. US Mobile

Fadfa 15

GO

淡くじんわりと広がるような「影」のつけ方が美しいWebサイトです。青ベースの配色もハイセンス。

33. appico

appico

GO

Web系制作会社のサイトです。全体的に広めに取られた余白により、ゆったりとした印象が出ています。部分的に動画が埋め込まれており、目を引かれます。

34.amaio

amaio

GO

パリのフリーランスデザイナーさんのポートフォリオサイト。テキストの上下に写真が滑らかに重なる動きが斬新。

35. Real Estate

Real estate

GO

インディー・ロックバンド「Real Estate」のWebサイト。音楽を演奏するイラストの人物や風景に色をつけていく、というユニークでクリエイティブなものとなっています。

最後に

ここまで30のWebサイトを紹介してきました。こうやってハイクオリティのサイトを見るのは良い勉強になりますね。

Book mockup のコピー psd  66 7  cover RGB 8

例を見ながら、具体的なデザインの方法を学んでいくのであればこちらの本が役に立つのではないかと思います。参考までに。 Webデザインの見本帳

同じカテゴリーの記事
同じカテゴリーの記事一覧
デザイン参考
サルワカ