個性的なデザインの参考に！ユニークなレイアウトのホームページ16選

更新日: 2018年06月01日

CMS・サイト制作

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

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

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

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

1. Colorama Risoprint

http://colorama.space

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

2. Diane Martel

http://diane-martel.com

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

3. Warp 2016

http://2016.warp.net

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

4. Peerspace 2016

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

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

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

http://www.suzunoya.com/kinu/

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

6. Lucie Koldova Studio

http://www.luciekoldova.com

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

7. 家住利男

http://toshio-iezumi.jp

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

8. Heco Partners

http://helloheco.com

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

9. R2D3

http://www.r2d3.us/

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

10. Anonymous Hamburger

http://www.anonymoushamburger.com

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

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

https://biennale.tuad.ac.jp

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

12. Tour Loch Ness

http://loch-ness.webflow.io

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