モダンなレイアウトのWebサイト30選。Webデザインで困った時の参考に!

フランスのカルチャーサイト

Webサイトのデザインやレイアウトをどうしたら良いのか?

アイデアに行き詰まったときは、他のデザイナーが作ったWebサイトを閲覧したり、海外のWebデザインのレイアウトを参考にする方もいることでしょう。

たとえば、Webサイトのアイディアが発信されている『Dribble』や『Behavior』のようなサイトから情報を得るというのもひとつの方法です。このようなサイトでは、たくさんのWebデザイナーが最新のトレンドやさまざまな手法やテクニックを駆使したデザインを発信しています。

この記事では、Webデザインに困ったときの救世主としてあなたをインスパイアしてくれるおすすめのWebデザイン・レイアウトをご紹介します。

1. InterGlobal Exhibits

スマートフォン画面

『IGE』は、カスタムトレードショーの展示やディスプレイ、インタラクティブデザインのブースを展示する世界的なトレードショーのデザイン会社です。

InterGlobal Exhibits

2. Volusion

スマートフォン画面

『Volusion』は、3万人以上の業者が信頼を寄せるオールインワンのショッピングカートソフトウェアです。中小企業のオーナー向けに設計されたプラットフォームには、業者が成功するために必要なものすべてが含まれています。

Volusion

3. BigCommerce

スマートフォン画面

発送や支払いを管理するコマースプラットフォームです。

BigCommerce

4. U+Design

スマートフォン画面

クールなWebサイトのレイアウトとして有名なのが、『U +デザイン』です。ここでは、フォルクスワーゲン、Axa、E.On、ホームクレジット、CTPなど名だたるビッグブランドでの実績をもつ、デジタルデザイナーやアートディレクター、UXデザイナーと繋がることができます。Usertechのデジタル開発チームによってバックアップされ、ニューヨーク、シリコンバレー、プラハでのスターアップ企業をサポートしています。

U+Design

5. Bialek

スマートフォン画面

『Bialek』は、家具、プレハブ内装工事、商業、政府、教育、並びにヘルスケアなどの分野に置いて、顧客のサポートサービスの販売をしています。
WBENC認定の女性社長による中小企業であり、卓越した製品、デザイン、プロジェクト管理、および継続的なサービスを提供しているという点で非常に高い評判を得ています。『Bialek』は 25年間にわたりHerman Millerディーラーを務めており、現在ではトップディーラーとなっています。

Bialek

6. Envato Elements

スマートフォン画面

『Envato Elements』には、UIキットや写真を含んだ多くのデザイン素材が240,000以上ストックされています。『Envato Elements』に登録することで月額1回の定期購読ができます。月額29ドルで、29,000以上の膨大なライブラリーに無制限にアクセスができダウンロードが可能です。

Envato Elements

7. Kvell

スマートフォン画面

『Kvell』は、現代的かつ機能的なデザインを誰もが達成できるようにしたいという願いから生まれました。意味のあるデザインは、何がどのように見えるかだけはでなく、日々の生活の中でどのように繋がっているかが大切であり、それが可能となるようなWebレイアウトを追求しています。

Kvell

8. The Generation Webbyrå Stockholm

スマートフォン画面

素晴らしい視差アニメーションや変換機能を備えたイノベイティブなメニュー、そしてデザインと調和したカスタム写真など、『The Generation Webbyrå Stockholm』のWebエージェントのサイトのレイアウトは一見の価値ありです。

The Generation Webbyrå Stockholm

9. I Buongiorno – Vini del Salento

スマートフォン画面

ワインの販売を手がける『I Buongiorno』は、直感的な操作が楽しい回転盤のようなヘッダーメニューが特徴。

I Buongiorno – Vini del Salento

10. Deni Cler Milano

スマートフォン画面

『Deni Cler Milano』はレディースファッションの通販サイト。

Deni Cler Milano

11. Carbone

スマートフォン画面

『Carbone』はフランスのカルチャー発信サイト。サムネイルにマウスポインタをあわせると、画像の上に文字が流れます。

Carbone

12. Cedrick Lachot

スマートフォン画面

フランスのデザイン会社のコーポレートサイト。読み込み画面で大きく表示される「Percent」の文字列が印象的です。

Cedrick Lachot

13. Joshua Sortino

スマートフォン画面

『Joshua・Sortino』は、モダンなレイアウトのデザイナーとして有名です。デザインVPのデザイナーでもある彼は、サンフランシスコベイエリアに拠点を置くスタートアップアドバイザーとして活躍しています。

Joshua Sortino

14. Cédric Pereira

スマートフォン画面

パリを拠点に活動するプロダクトデザイナーのWebサイトです。

Cédric Pereira

15. Carbon Beauty

スマートフォン画面

『CarbonBeauty®』は、美容製品を購入するユーザーの購買意欲がより増すようなプラットフォームを構築しています。

Carbon Beauty

16. Johnson Banks

スマートフォン画面

さまざまな企業のロゴが閲覧できるWebサイトです。

Johnson Banks

17. Satin Fine Foods

スマートフォン画面

2011年に設立した『Satin Fine Foods』は、世界中にいるケーキアーティストの情報発信プラットフォームです。最高品質のフォンダンを提供するサテンアイス社のWebレイアウトはとても参考になります。

Satin Fine Foods

18. Emark

スマートフォン画面

『Emark』は、最適なマーケティングと広告技術の統合を実装、統合、有効化することにより、オムニチャンネルのソリューションを構築している会社です。

Emark

19. Equilibrium Design

スマートフォン画面

フルサービスのデザインスタジオである『Equilibrium Design』は、すべてのプロジェクトに一流のデザイナーが携わります。クライアントがアドバスやサポートを依頼すれば、デザインを改善するための後押しをしてくれます。

Equilibrium Design

20. Théodore Rousseau

スマートフォン画面

『ThéodoreRousseau』は、19世紀半ばのフランス絵画における偉大な人物の一人として有名です。このWebサイトは、グリプトテク美術館で開催される特別展用のものであり、アート色の強い素晴らしいWebサイトに仕上がっています。

Théodore Rousseau

21. Survival Russian

スマートフォン画面

『Survival Russian』は、ロシア語を話す国への旅行をより安全で楽しいものにするための語学学習のWebサイトです。10レッスンで必須のコミュニケーションスキルを習得し、地元の人と交流するための基本的なロシア語を学ぶことができます。

Survival Russian

22. Psikontacto

スマートフォン画面

『Psikontacto』はポルトガルのコインブラにあるサイコロジークリニックです。ここのWebサイトは、新規顧客を導くファシリテーターとしての役割をしっかりと果たしているデザインのため、非常に参考になります。

Psikontacto

23. Vermont

スマートフォン画面

『Vermont』はチェコ、スロバキア、ハンガリー地域のファッションを牽引するハイブランドとして代表的な会社です。同社のWebサイトは、顧客にインスピレーションを与え、自身を大切にし自信がみなぎるようなエネルギーを提供することを目的として作られています。

Vermont

24. Ode Goods

スマートフォン画面

『Ode Goods』はハンドメイドの日用品を扱う会社です。

Ode Goods

25. Norgram

スマートフォン画面

『Norgram』は、国際的に認知され賞を受けたデザイナー、セバスチャン・グラム&マティアス・ホーストノーマークのデザインディレクターがタッグを組んでいるWebサイトです。

Norgram

26. Big Youth

スマートフォン画面

パフォーマンス分析、戦略定義、Webサイトなどの構築、コンテンツの作成、キャンペーンの実行などを行うデジタルエージェンシーです。

Big Youth

27. Fotonaut

スマートフォン画面

グラフィックデザインの会社『Fotonaut』によるコーポレートサイト。

Fotonaut

28. A-dam Underwear

スマートフォン画面

『A-dam Underwear』は、メンズのアンダーウェアブランドです。商品のデザインそのものや、独特なシチュエーションで撮影された商品画像がユニークでとても面白いです。

A-dam Underwear

29. 10×16

スマートフォン画面

『10×16』は、19人のビジュアルアーティストがカバーアートを再考し、2016年にリリースされた好きなアルバム10枚をカウントダウン方式で紹介しています。

10×16

30. JamFactory

スマートフォン画面

アデレードの市内中心部とバロッサのSeppeltsfieldにあるユニークな非営利団体である『JamFactory』は、世界的に優れたセンターとして認められています。同社のセラミックス、ガラス、家具、ジュエリー、金属デザイン用のスタジオは、2年間のアソシエイトトレーニングプログラムを通して、アーティストやデザイナーのスキルとビジネストレーニングを提供しています。

JamFactory

まとめ

目的や用途に合わせたバラエティー豊かなデザインやレイアウトは、Web上にたくさんあります。

見た目の洗練さだけではなく、そのWebサイトを見るユーザーへの訴求力なども考慮された優れたWebサイトを知ることは、デザインをする上でもよい勉強になるのではないでしょうか。気になったWebサイトがあればぜひ参考にしてください。

(翻訳:Hisae Sasaki)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship