最近Webデザインでよく見かけるデザインというと、何が思い浮かぶでしょうか。
12カラムのグリッドデザイン、ヒーローイメージ、動画背景をつかったホームページなどが現在のトレンドです。

このようなトレンドデザインを取り入れているホームページは無数にあります。
しかし個性を出したい場合には、これらのモデルケースから一旦離れてデザインをするのも大切です。

今回は、特定のトレンドに縛られずにデザインしている、ユニークなレイアウトのホームページ事例をご紹介します。

ユニークで個性的なレイアウトのホームページ18選

1. Colorama Risoprint

01_colorama.jpeg
http://colorama.space

ベルリンにあるリソーグループの印刷会社Colorama Risoprintのホームページは、配色も斬新ながら、3カラムの面白いレイアウトを採用しています。
まるで辞書のように、ヘッダーに当たるテキストが太字になっています。
よく見ると、3つのカラムにはそれぞれ同じ内容が書かれていて、少しずつずれていること気づきます。

2. Diane Martel

02_danie.jpeg
http://diane-martel.com

モデルのDiane Martelさんのポートフォリをサイトを覗いてみましょう。
スターウォーズのオープニング部分を想起させるような奥行きのあるメニューは、スクロールすると奥に行ったり手前に戻ったりできます。
メニューをクリックすると詳細を確認することができます。

3. Warp 2016

03_warp.jpeg
http://2016.warp.net

Aphex TwinやFlying Lotusなどの有名アーティストを手がける音楽レーベルWARPの2016年のリリース集は、ちょっと変わったデザインをしています。
3Dの部屋をマウスで周回することができ、壁にはリリースされた音楽のジャケット画像が埋め込まれています。
ジャケ写をクリックすることで、詳細を確認することができます。

4. Peerspace 2016

04_peerspace.jpeg
http://peerspace.webflow.io/year-in-review-2016

サンフランシスコにあるクリエイティブエージェンシーPeerspaceの年次レビューページです。
バブル調の画像やグリッドレイアウト、インフォグラフィックなどを多彩に使いながら、ポップなタイポグラフィを使っていてかわいらしく仕上げられています。

5. 鈴乃屋オリジナルコレクション

05_suzunoya.jpeg
http://www.suzunoya.com/kinu/

着物の販売店鈴乃屋のブランド「衣のいのち」の紹介ページを見てみましょう。
文字やタイトル、ハンバーガーメニューを重ねてみたり、画像と余白が3:1になる配置になっていたり、スクロールするごとに現れるエフェクトが入っていたりと、技巧が凝らされています。
写真も人物の部分を拡大し、横に全身・正面の切り抜きを表示することで、分かりやすい商品紹介になっています。

6. Nelu Cebotari

06_nelu.jpeg
http://nelucebotari.webflow.io

モルドバ在住のUXデザイナーNelu Cebotari氏のポートフォリオサイトを確認してみましょう。
いきなり画面に飛び込んでくる、3分割されたメニューが大胆に配置されています。
配色もユニークですが、レトロ感満載のフォント選びにも注目です。

7. Presentation

07_presentation.jpeg
https://www.wearepresentation.com.au

ワシントンのブティックスタジオPresentationのホームページです。
丸や三角・四角などの幾何図形がモチーフになっており、折り紙を重ねたような背景イメージが印象的です。
図形の表面に薄いザラザラとした質感や細めのストライプを使っているなど、テクスチャーをつけてリアルな触感を出している点も注目です。

8. Lucie Koldova Studio

08_lucie.jpeg
http://www.luciekoldova.com

フランス発のデザイン照明を制作するLucie Koldova氏のホームページです。
宇宙のように広がる空間が、スクロールするとガラス球のようにまとまっていく様が、プロダクトの世界観を映し出しています。
ほんのりと漂うパーティクルにも注目したいところです。

9. 家住利男

09_iezumi.jpeg
http://toshio-iezumi.jp

ガラス職人の家住利男氏のポートフォリオサイトは、非常にシンプルです。
画像とテキストが交互に配置されていますが、作品写真がアニメーションで次々と繰り出されていくところも見ものです。
英語と日本語のバイリンガルページですが、あえてページを2つに分けずに1ページで掲載している点も珍しいですね。

10. Heco Partners

10_heco.jpeg
http://helloheco.com

こちらはAwwwardsの「SITE OF THE DAY」にも選ばれたことのある、シカゴのクリエイティブエージェンシーHeco Partnersのホームページです。
冒頭の黒い川のようなアニメーションが非常に印象的で、アクセントデザインに数カ所に波線が使われるなど、「波」がテーマになっていることが分かります。
白と黒を効果的に使ったシンプルでミニマルなデザインになっています。

11. R2D3

11_r2d3.jpeg
http://www.r2d3.us/

R2D3のホームページでは、最近よく聞く「機械学習」(Machine Learning)についてのイントロダクションを行なっています。
クロールするごとにインフォグラフィックのアニメーションを楽しみながら機械学習について知ることができます。
このようなアニメーションを実装するという発想が面白く、思わず「こんなのあり?」と言ってしまいそうです。

12. Anonymous Hamburger

12_anonymous.jpeg
http://www.anonymoushamburger.com

イタリアのクリエイティブエージェンシーAdoratorioのイメージサイトです。
横スクロールで、写真をバラバラに配置しているのがユニークです。
暗めの配色に写真が映えて見え、合わせて52のレシピがあります。

13. みちのおくの芸術祭 山形ビエンナーレ

13_michino.jpeg
https://biennale.tuad.ac.jp

東北芸術工科大学の芸術祭「みちのおくの芸術祭 山形ビエンナーレ」のホームページです。
写真のふちにテキストを配置する手法や、新聞・雑誌のようなタイポグラフィが独特です。
シンプルながらも、写真をふんだんに取り入れており、印象的です。

14. Tour Loch Ness

14_tourlochness.jpeg
http://loch-ness.webflow.io

幻の恐竜「ネッシー」が出てくるとも言われるネス湖ツアーを開催しているTour Loch Nessページをのぞいてみましょう。
まるで写真を切り取って置いているかのようなデザインが印象的で、自然と視線を奪われてしまいます。
ダークシーグリーンと白のシンプルな構成ですが、写真を効果的に配置しています。

15. Flotar Artist Program

15_flotar.jpeg
http://www.flotar.org

アーティスト育成を行なっているFlotarのホームページです。
既存の概念を壊したような、余白を大胆に使ったデザインです。
綺麗で整頓されているとは言い難いですが、このような崩したデザインこそアーティスト育成を名乗るのにふさわしいのかもしれません。

16. UZUZ

16_uzuz.jpeg
https://uzuz.jp

既卒・第二新卒にフォーカスを当てた就活サポートカンパニーUZUZコーポレートサイトです。
オープニングで登場する顔と「UZUZ」のアニメーションが非常にインパクトが大きく、思わず見入ってしまいます。
まるで動くポスターのようなレイアウトですね。

17. R&C

17_randc.jpeg
www.randcins.jp

総合保険代理店R&C株式会社コーポレートサイトです。
画像がフェードアップしてくるヒーロー背景、シンプルなミニマルデザイン、アイコンを使って分かりやすくしているデザインが参考になります。

18. OTANI JUN

18_otanijun.jpeg
http://otanijun.com

アートディレクター・イラストレーター・グラフィックアーティストのオタニジュン氏のホームページです。
画面を二分割して、デザインとイラストレーションをタブ表示するような、大胆なデザインを採用しています。
オタニさんのかわいいイラストレーションにも注目です。

まとめ

日本の武道や茶道には「守破離」という言葉があります。
まずは王道を徹底的に守り、そこから型を破って初めて自分のオリジナリティが生まれます。

いきなり独創的な作品を作ることは難しいかもしれませんが、まずはデザインの基本ルールを押さえたうえで、オリジナリティ溢れるホームページ制作にも挑戦してみるといいでしょう