Webサイトにおけるユニークさとは？？デザインのヒントになるサイトレイアウト例5選

型破りでクリエイティブなデザインは、ゼロから発想されるわけではありません。逆説的に聞こえるかもしれませんが、従来にないデザインを新たに作るには、それ自身、ユニークなデザインによるインスピレーションが欠かせないのです。

それでは、ユニークなデザインとはどんなものでしょうか。

本記事で紹介する5つのWebサイトはどれも、いずれティピカルな内容を、それぞれにユニークなやり方で提供しています。

Webサイトに、パーソナルな要素や人間味のある要素を入れることで、デザインにユニークさが出てくるのです。

 

1．ハーヴァード大学デザイン大学院のカルーセル

 

ハーヴァード大学デザイン大学院のサイトのユニークなところは、ナビゲーション表示の仕方です。多くのWebサイトはページのヘッダー部分に重要なリンクを置いているのに対して、このサイトではナビゲーションがサイトの真ん中に視覚化されて表示されています。

 

カルーセルの使い方もユニークです。

左のイメージは重なり合っていますが、重なっていても何枚が重なっているのかすぐにわかります。タイトルとイメージの関係もクリアで、どれを表示しても、他の選択肢が隠れてしまうことがありません。

ユーザーの使いやすさが考慮されているにもかかわらず、レイアウトのユニークさも失われていません。この二つの要素が合わさって、デザインとして素晴らしいものになっています。

 

2．TRA：グリッドを不用のレイアウト

TRAのWebサイトが斬新な点は、その色づかい（背景が黒、テキストに白のリザーブカラー）もさることながら、グリッドを使用せずに、しかもそれぞれのセクションが固有のグリッドを持っているように思わせるそのレイアウトにあります。

3．固定ページのなかにスクロール可能な写真を配置する

オンラインで靴の販売をしているFEITの製品ページもレイアウトがすばらしいです。

まず、横も縦もスクリーンの全体を利用してデザインがなされています。つまり、画面全体が一つの特定の目的のためにデザインされているのです。

次に、サイトの作りはきわめてシンプル、ミニマルでクリーンです。デザインがフルスクリーンを使っていても、画面は散らかっていません。これは、デザインの大部分が白いスペースに依っているためです。

とりわけ印象的なのは、レイアウトが分けられる仕方です。ページは、3つの異なるセクションに分けられます。

まず、ナビゲーションが左手に。そして右側が製品情報です。この老再度はスクリーン上に固定されています。しかし真ん中のフォト部分は、スクロールできるフォト部分はスクロール可能になっています。

製品写真の情報は残ったまま、ユーザーはフォト部分をスクロールして、製品の説明と名前が見られ、異なる色や材料にアクセスできます。

4．一目で製品の複数面を見せる

 

製品をディスプレイする別の方法例を紹介しましょう。

こちらも靴で、AfuraのWebサイトです。

このページでは、製品である靴は、ページ上に複数の異なるショットで示されます。

デスクトップまたはラップトップならは、デフォルトで3つのイメージが表示されます。

デフォルト・イメージは、背景がすべて均一で、継ぎ目のないナイスな表示がなされています。タブレットのような小さなサイズは、デフォルトでは一度に2つのイメージが示されるようになっていて、こういったところも素晴らしいです。

 

5．サイトに人間味を与える

Webはインパーソナルな場でリアルな人間には出会わない場と考えられがちですが、アプリ、製品、会社などの背後にはリアルの人間がいます。

Opendoorは、デザインのなかに人間的な要素を入れようと努めているように思われます。

ホームページには、中ほどに ’’We’ve got your back.’’ （我々があなたをサポートします）というセクションがあり、Webページの背後にはリアルな人間がいて、いつでも客が手続きするのを手助けするということが示されています。

今ではOpendoorは、従業員の一人の顔写真を載せています。

親しみやすい顔のイメージが人間味ある、人格的な印象をサイトに与えています。

 

いかがでしたでしょうか。

以上のような例を見て考え、ユニークなWebサイトを作るためのヒントとして、ぜひ役立ててください。

 

（※本記事は、7 unique design decisionsを翻訳・再構成したものです）