個性的なデザインの参考に!ユニークなレイアウトのホームページ16選
最近Webデザインでよく見かけるデザインというと、何が思い浮かぶでしょうか。
12カラムのグリッドデザイン、ヒーローイメージ、動画背景をつかったホームページなどが現在のトレンドです。
このようなトレンドデザインを取り入れているホームページは無数にあります。
しかし個性を出したい場合には、これらのモデルケースから一旦離れてデザインをするのも大切です。
今回は、特定のトレンドに縛られずにデザインしている、ユニークなレイアウトのホームページ事例をご紹介します。
ユニークで個性的なレイアウトのホームページ16選
1. Colorama Space
ベルリンにあるリソーグループの印刷会社Colorama Spaceのホームページは、配色も斬新ながら、3カラムの面白いレイアウトを採用しています。
まるで辞書のように、ヘッダーに当たるテキストが太字になっています。
よく見ると、3つのカラムにはそれぞれ同じ内容が書かれていて、少しずつずれていること気づきます。
2. Diane Martel
モデルのDiane Martelさんのポートフォリをサイトを覗いてみましょう。
スターウォーズのオープニング部分を想起させるような奥行きのあるメニューは、スクロールすると奥に行ったり手前に戻ったりできます。
メニューをクリックすると詳細を確認することができます。
3. Warp 2016
Aphex TwinやFlying Lotusなどの有名アーティストを手がける音楽レーベルWARPの2016年のリリース集は、ちょっと変わったデザインをしています。
3Dの部屋をマウスで周回することができ、壁にはリリースされた音楽のジャケット画像が埋め込まれています。
ジャケ写をクリックすることで、詳細を確認することができます。
4. Peerspace 2016
http://peerspace.webflow.io/year-in-review-2016
サンフランシスコにあるクリエイティブエージェンシーPeerspaceの年次レビューページです。
バブル調の画像やグリッドレイアウト、インフォグラフィックなどを多彩に使いながら、ポップなタイポグラフィを使っていてかわいらしく仕上げられています。
5. 鈴乃屋オリジナルコレクション
着物の販売店鈴乃屋のブランド「衣のいのち」の紹介ページを見てみましょう。
文字やタイトル、ハンバーガーメニューを重ねてみたり、画像と余白が3:1になる配置になっていたり、スクロールするごとに現れるエフェクトが入っていたりと、技巧が凝らされています。
写真も人物の部分を拡大し、横に全身・正面の切り抜きを表示することで、分かりやすい商品紹介になっています。
6. Lucie Koldova Studio
フランス発のデザイン照明を制作するLucie Koldova氏のホームページです。
宇宙のように広がる空間が、スクロールするとガラス球のようにまとまっていく様が、プロダクトの世界観を映し出しています。
ほんのりと漂うパーティクルにも注目したいところです。
7. 家住利男
ガラス職人の家住利男氏のポートフォリオサイトは、非常にシンプルです。
画像とテキストが交互に配置されていますが、作品写真がアニメーションで次々と繰り出されていくところも見ものです。
英語と日本語のバイリンガルページですが、あえてページを2つに分けずに1ページで掲載している点も珍しいですね。
8. Heco Partners
こちらはAwwwardsの「SITE OF THE DAY」にも選ばれたことのある、シカゴのクリエイティブエージェンシーHeco Partnersのホームページです。
冒頭の黒い川のようなアニメーションが非常に印象的で、アクセントデザインに数カ所に波線が使われるなど、「波」がテーマになっていることが分かります。
白と黒を効果的に使ったシンプルでミニマルなデザインになっています。
9. R2D3
R2D3のホームページでは、最近よく聞く*「機械学習」*(Machine Learning)についてのイントロダクションを行なっています。
スクロールするごとにインフォグラフィックのアニメーションを楽しみながら機械学習について知ることができます。
このようなアニメーションを実装するという発想が面白く、思わず「こんなのあり?」と言ってしまいそうです。
10. Anonymous Hamburger
イタリアのクリエイティブエージェンシーAdoratorioのイメージサイトです。
横スクロールで、写真をバラバラに配置しているのがユニークです。
暗めの配色に写真が映えて見え、合わせて52のレシピがあります。
11. みちのおくの芸術祭 山形ビエンナーレ
東北芸術工科大学の芸術祭「みちのおくの芸術祭 山形ビエンナーレ」のホームページです。
写真のふちにテキストを配置する手法や、新聞・雑誌のようなタイポグラフィが独特です。
シンプルながらも、写真をふんだんに取り入れており、印象的です。
12. Tour Loch Ness
幻の恐竜「ネッシー」が出てくるとも言われるネス湖ツアーを開催しているTour Loch Nessのページをのぞいてみましょう。
まるで写真を切り取って置いているかのようなデザインが印象的で、自然と視線を奪われてしまいます。
ダークシーグリーンと白のシンプルな構成ですが、写真を効果的に配置しています。
13. Flotar Artist Program
アーティスト育成を行なっているFlotarのホームページです。
既存の概念を壊したような、余白を大胆に使ったデザインです。
綺麗で整頓されているとは言い難いですが、このような崩したデザインこそアーティスト育成を名乗るのにふさわしいのかもしれません。
14. UZUZ
既卒・第二新卒にフォーカスを当てた就活サポートカンパニーUZUZのコーポレートサイトです。
オープニングで登場する顔と「UZUZ」のアニメーションが非常にインパクトが大きく、思わず見入ってしまいます。
まるで動くポスターのようなレイアウトですね。
15. R&C
総合保険代理店R&C株式会社のコーポレートサイトです。
画像がフェードアップしてくるヒーロー背景、シンプルなミニマルデザイン、アイコンを使って分かりやすくしているデザインが参考になります。
16. OTANI JUN
アートディレクター・イラストレーター・グラフィックアーティストのオタニジュン氏のホームページです。
画面を二分割して、デザインとイラストレーションをタブ表示するような、大胆なデザインを採用しています。
オタニさんのかわいいイラストレーションにも注目です。
まとめ
日本の武道や茶道には*「守破離」*という言葉があります。
まずは王道を徹底的に守り、そこから型を破って初めて自分のオリジナリティが生まれます。
いきなり独創的な作品を作ることは難しいかもしれませんが、まずはデザインの基本ルールを押さえたうえで、オリジナリティ溢れるホームページ制作にも挑戦してみるといいでしょう。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ヘッダー
- WEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。また目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コーポレート
- コーポレートとは、日本語の「企業」のことです。インターネット上で「コーポレートサイト」という場合は、企業のホームページであることを表します。また、コーポレートは接頭語として使われることが多く、「コーポレートガバナンス(企業内統制)」などのように、他の単語と組み合わせて使うことが多いようです。会社そのものを指すことが多い「カンパニー」とは使い方が異なります。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- コーポレート
- コーポレートとは、日本語の「企業」のことです。インターネット上で「コーポレートサイト」という場合は、企業のホームページであることを表します。また、コーポレートは接頭語として使われることが多く、「コーポレートガバナンス(企業内統制)」などのように、他の単語と組み合わせて使うことが多いようです。会社そのものを指すことが多い「カンパニー」とは使い方が異なります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング