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

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

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

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

1. Colorama Space

01_colorama.jpeg
http://colorama.space

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

2. Diane Martel

02_danie.jpeg

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

3. Warp 2016

03_warp.jpeg

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. Lucie Koldova Studio

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

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

7. 家住利男

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

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

8. Heco Partners

10_heco.jpeg
http://helloheco.com

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

9. R2D3

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

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

10. Anonymous Hamburger

12_anonymous.jpeg

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

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

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

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

12. Tour Loch Ness

14_tourlochness.jpeg

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

13. Flotar Artist Program

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

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

14. UZUZ

16_uzuz.jpeg
https://uzuz.jp

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

15. R&C

17_randc.jpeg
www.randcins.jp

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

16. OTANI JUN

18_otanijun.jpeg
http://otanijun.com

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

まとめ

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

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