記事内に商品プロモーションが含まれる場合があります
本当におしゃれな海外のWebサイトだけを30つ集めました。どれも表現やコンセプトがアイデアに満ちており、見ているだけでワクワクしてくるはずです。
1. iFly50
世界の50の絶景を穏やかなBGMとともに鑑賞できるWebサイト。はじめて訪れたとき「本当に良いものを見た」と感激しました。
2. MMP Wishes 2017
MMP（Make Me Pulse）はパリのWeb制作会社です。このWebサイトはコーポレートサイトでも、委託して作られたページでもありません。純粋に最先端のWebデザインを提案するために作られたサイトなのです。その結果、世界中のWebサイトを表彰するAwwwardsに受賞し、何よりのプロモーションとなったようです。戦略までオシャレですね。
3. Paper Planes
言葉を失うくらいに感動したのがこちらです。スマホで開くと、自分で紙ヒコーキを折ることができます。紙には自分の場所が記されたスタンプが押されます。スマホを振れば、紙ヒコーキは飛んでいきます。その直後に画面には美しいアニメーションとともに「Planes have just left Osaka」というように表示されます。世界中のこのページを開いている人が、自分の投げた紙ヒコーキを見ることになるのです。世界を少し身近に感じられる素敵なコンセプトのWebサイトですね。
4. EPICURRENCE
デザイナー向けのカンファレンスの特設ページ。隅から隅まで世界観が統一されており、最高にオシャレです。中央配置のシンボリックなタイトル、ゆるやかに動く雲、背景画像とマッチしたグラデーション、全てが完璧です。
5. wrk.
個人的に大好きな3Dなフラットデザイン。細かなアニメーションや、色使いが秀逸でずっと見ていたくなります。
6. dot
ぬるぬるとした動きがおしゃれなWebサイト。淡いグラデーションと丸みがかった文字がよくマッチしています。
7. In Pieces
絶滅の危機にある30の種が、Low Poly（粗いポリゴン）な表現で紹介されています。スクロールするたびに動物が切り替わっていきます。ちょっとしたアニメーションが素敵です。
8. Beagle
スクロールするたびにガラッとデザインが変わり、新たな発見があります。もう1度スクロールしたくなる秀逸なデザインです。
9. Anniwang
こちらもスクロールと連動した動きが面白いフラットなWebデザインです。個人のポートフォリオサイトで「私の１日」がテーマとなっています。「HIRE ME（雇って）」が良いですね。
10. 12dishes
世界のユニークなレシピと、そのレシピが生まれた背景を紹介するWebサイト。おしゃれなだけでなく、レシピページは見やすく実用的に作られています。レシピ数は12つだけ。中には日本の「塩昆布茶漬け」も紹介されています。配色が秀逸です。
11. The Spare Time
「時間の価値を測る」というコンセプトの面白いWebサイト。ドラッグにより様々なアニメーションを楽しむことができます。たとえば上のスクリーンショットのページでは、タクシーをドラッグによりぐるぐると動かすことができます。
12. Take What You Can Carry
新しい表現がたくさん取り入れられており、とても勉強になります。たとえばカーソルを常に追尾する要素や、傾けて並べられた文字など、見ているだけでインスピレーションが刺激されます。
13. BLOCK16
トップページを開くと、画面いっぱいにアメリカンな食卓が表示されます。よく見ると映像となっており、少しずつ食材が取られていきます。タイポグラフィも映像にマッチしており、本当によくできたWebサイトだと思います。
14. New York Summer
ニューヨークでのインターン体験が日記のように表現されています。派手すぎないアニメーションと、淡い色使いがとても心地よく感じられます。
15. ZIPL
Web制作会社のコーポレートサイト。機能性よりもオシャレさを追求したという構成ですが、その分ワクワクさせてくれます。背景が黒の”ナイトバージョン”と、白の”デイバージョン”を切り替えることができるというのもセンスが良いですね。
16. Peter Nottage
フラットで立体的なアイコンがとてもかわいいです。これだけユニークな表現をしていてもサイト構成は分かりやすくなっています。スマホでもかわいく表示されるレスポンシブデザインも良いですね。
17. Bauhaus
ドイツのWebメディア。立体感・奥行きの表現がものすごく上手で、まるでカードが画面の上に浮いているように見えます。このような表現は今後も間違いなく増えていくでしょう。
18. 2am
背景に埋め込まれた美しい映像と、細字のフォントがよくマッチしています。スクロールによりかかるぼかしも素敵です。
19. HILLSIDE
背景には美しい映像が埋め込まれています。デスクトップ表示がユニークで、画面上部だけでなく左右にもメニューバーが置かれています。これが白枠のような役割をしており、映像を引き立てています。
20. BRANDED7
アーティストのポートフォリオ兼作品販売サイト。壁に取り付けられたような額縁の表現が上手です。
21. Confederation Studio
動きがとてもかわいらしいWebデザイン。特にローディング中のアニメーションがとてもユニークで面白いです。
22. Infinity Foods
オーガニック食材を扱う会社のWebサイト。作りはシンプルなのですが、大胆なタイポグラフィにより見応えが生まれています。
23. Poc Sculpture
木製雑貨を扱う会社のWebサイト。カードのように重なり合う写真と塗りつぶされた要素がおしゃれです。
24. Coffee Times
コーヒー豆販売会社のコーポレートサイト。豆を焙煎する映像が埋め込まれており、引き込まれます。手書き風のフォントと、マグカップ痕が良い味を出しています。
25. Trainrobber
VR要素のあるWebデザイン。スマホだと傾けることで視点を変えることができます。VR的な表現は言うまでもなく今後増えていくのでしょう。
26. Bepat
イタリア人Webエンジニア個人のWebサイト。大胆な大きさに指定されたフォントや真っ黒な背景など、刺激的な表現が目をひきます。
27. meiofio
複数のカラフルな要素がいくつもズレたように重なり合うというかなりユニークなデザイン。ファッション系のテーマを扱うサイトであれば、こういうのもアリかもしれませんね。
28. DJECO
イギリスの大手おもちゃメーカーのWebサイト。ただアニメーションがついているだけでなく、ちょっとゲームで遊ぶもこともできます（そしてけっこう楽しいです）。ただその分だけ重たく感じられるのは難点ですね。
29. Pirate
グリッド表示がユニークで参考になります。背景画像は固定されており、グリッドは一部空洞になっています。そのためスクロールすると、固定された背景画像が垣間見えます。これは斬新…。
30. IDA HOFFART
デンマークの制作会社のコーポレートサイト。今回紹介する中では動きの少ないシンプルなデザインなのですが、使われている作品画像がハイクオリティです。
31. EURO VET
動物向けの製薬会社のWebサイトです。アイコンにカーソルを当てたときのアニメーションがとてもいい感じ。スクロール時のエフェクトもヌルヌルとしていておしゃれです。
32. US Mobile
淡くじんわりと広がるような「影」のつけ方が美しいWebサイトです。青ベースの配色もハイセンス。
33. appico
Web系制作会社のサイトです。全体的に広めに取られた余白により、ゆったりとした印象が出ています。部分的に動画が埋め込まれており、目を引かれます。
34.amaio
パリのフリーランスデザイナーさんのポートフォリオサイト。テキストの上下に写真が滑らかに重なる動きが斬新。
35. Real Estate
インディー・ロックバンド「Real Estate」のWebサイト。音楽を演奏するイラストの人物や風景に色をつけていく、というユニークでクリエイティブなものとなっています。
最後に
ここまで30のWebサイトを紹介してきました。こうやってハイクオリティのサイトを見るのは良い勉強になりますね。
例を見ながら、具体的なデザインの方法を学んでいくのであればこちらの本が役に立つのではないかと思います。参考までに。 Webデザインの見本帳
