「このデザインはシンプルだね」

と言われて、ピンとくる人はどれくらいいるでしょうか。

Appleのホームページのように、シンプルで洗練されたホームページをデザインしたいと思っている人はたくさんいるでしょう。
しかし、いくらワンポイントアドバイス集を見てもなんだかシンプルとはかけ離れていたり、どこかごちゃごちゃしていたりするのは、そもそもシンプルとはいかなるものか、その定義がはっきりしていないからです。

今回は、特にシンプルだと思われる洗練されたデザインのホームページを集めました。

シンプルさを表現したホームページを見て、「シンプルとはどういうことなのか」を突き詰めて考えてみましょう。

シンプルすぎるデザインのホームページ

1. Spencer Nelson

01_spencer.jpeg
http://spencenelson.com

ボルティモア在住のアートディレクターSpencer Nelsonさんのポートフォリオサイトです。
淡いピンクを背景にエレクトリックブルーのロゴとソーシャルメディアのボタンが中央に並んでいて、そのほかの余計なものがそぎ落とされています。
しかし、こうした限られたスペースのなかで、マウスを動かすとロゴを立体的に動かすことができて、遊び心も残しています。

2. RatioBuddy

02_ratiobuddy.jpeg
http://ratiobuddy.com

RatioBuddyはボックスのアスペクト比を簡単に確認することができるオンラインツールです。
左側にはロゴとアスペクト比を変化させることのできるボックスが顔つきで表示されていて、右側でアスペクト比をいじることでボックスサイズの比率を確認することができます。
必要なボタンだけを置いており、非常にシンプルなつくりになっています。

3. Clement CIMON

03_clement.jpeg
http://clementsimon.fr/

フランスのナントに拠点を構えるグラフィックデザイナーClement Cimonさんのポートフォリオサイトです。
ファーストビューでかわいらしいエッフェル塔のエンボスが入った名刺がフィーチャーされ、スクロールすると余白を十分にとっていくつかの作品が登場します。
作品自体も余計な装飾がなく、とってもシンプルな作品が揃っています。

4. TOMÁŠ SEBASTIÁN STEINHÜBEL

04_tomas.jpeg
http://tomassebastian.com/

スロヴァキア在住のブラチスラヴァ在住のUIデザイナーTomáš Sebastián Steinhübelさんのポートフォリオサイトは、とてもシンプルでエレガントです。
「based in Bratislava」の前の部分がアニメーションでさまざま入れ替わるところに遊び心を加えています。
クロールすると、いくつかの作品、そしてTomášさんの特徴を表したアイコンとともに自己紹介が始まります。
ベースカラーの黒、グレー、そしてアクセントカラーのサーモンピンクが絶妙にマッチしていますね。

5. BANNED

05_banned.jpeg
https://bannedproject.com/about/

BANNEDはテック業界に従事するアメリカの移民にフォーカスをあてたストーリーメディアです。
トランプ政権が始まって以来の移民入国制限に直接影響を受けたシリコンバレーの従業員たち6名にインタビューしています。
斬新なコンセプトのメディアですが、サイト全体は非常にシンプルな作りになっています。
クリーム色の背景に、雑誌のタイトルのように「BANNED」という文字が飾られ、雑誌の表紙を飾るような写真の使い方をしています。
それ以外に、余分なボタンや装飾は一切なされていません。

6. Popcorn

06_popcorn.jpeg
http://popcorn.mentallyfriendly.com

Popcornはシドニーとロンドンに拠点を構えるクリエイティブエージェンシーMentally Friendlyが社内で提供するポップコーンのフレーバーを投票するためのサイトです。
チェリーレッドの背景にポップなイラストが掲載されており、かわいらしくもシンプルなサイト構成となっています。

7. Managed by Q

07_managedbyq.jpeg
https://www.managedbyq.com/

オフィスの総合サービスを提供しているManaged by Qコーポレートサイトです。
複数の写真を配置しながらも、乱雑になっていないのは、ヘッドラインとなるコピーと説明文がシンプルにまとめられているからです。
黒とグレー、そしてアクセントカラーにグリーンを使っており、余計なものがそぎ落とされたマテリアルデザインを採用しています。

8. Notepin

08_notepin.jpeg
https://notepin.co/

これ以上ないほどにシンプルなのが、サインアップ不要でノートを作成できるサービスNotepinです。
余計なUIは一切なく、編集画面もブラウザ全体でテキストを編集することができるので、集中して物書きを行うことができます。
全体的に非常に洗練されており、本当に必要なものだけが残っています。

9. Neat

09_neat.jpeg
http://neat.bourbon.io/

Neatは軽量でフレキシブルなSassのグリッドシステムです。
ページには簡潔な説明と「Documentation」のボタンが配置されているだけで、非常にシンプルな構成になっています。

10. Minimal Directory

10_minimaldirectory.jpeg
http://minimal.directory/

Minimal Directoryは、ラトヴィアのリガ在住のRonalds Vilcinsさんによってキュレーションされたシンプル・クリーン・ミニマルなデザインを集めたアートコレクションです。
三分割されたグリッドに正方形の美しい写真がタイル状に配置されています。
まさにミニマルなコンセプトとマッチする、そんなサイト構成になっています。

11. Coming Soon New York

11_comingsoon.jpeg
https://comingsoonnewyork.com/

ニューヨークの雑貨店Coming Soonのショッピングサイトです。
ボールドのメッセージ、商品写真、そしてアクセントカラーのピンクの装飾。
しかし、かわいらしいながらも、オブジェクト同士の距離がしっかりととれているので、シンプルでまとまって見えます。
また、ボールドのメッセージ以外のテキストが控えめなサイズになっているのも、どこか美しく見える理由なのかもしれません。

12. Jeff Wang

12_jeffwang.jpeg
http://www.jeffwang.co/

アメリカのプロダクトデザイナーJeff Wangさんのポートフォリオサイトです。
ファーストビューではJeffさんのバイオグラフィーといくつかのSNSアイコンが並んでいるだけのシンプルな構成になっていますが、スクロールするとマテリアルテイストのイラストが並んでいます。
サイト全体も、過去の経歴と自己紹介の2ページだけが用意されています。

13. Proof

13_proof.jpeg
https://proof.pub/

Proofブログメディアなどのパブリケーションに特化したCMSのようなデジタルパブリッシングツールです。
クロールするごとに、Proofの特徴が写真とほんのわずかなテキストでまとめられています。

14. Oliver Dumoulin

14_oliver.jpeg
http://dumoulin.design/

コネティカット州グリーンウィッチのデザイナーOliver Dumoulinさんのポートフォリオサイトです。
マテリアルデザインをうまく使いながらも、グリッドを壊したりと斬新なデザイン手法を取り入れています。
必要最小限のヘッドラインと説明文だけをつかって洗練されたデザインになっています。

15. Prashant Sani

15_parasit.jpeg
https://prashantsani.com/

こちらはインドのフロントエンドデベロッパーPrashant Saniさんのポートフォリオサイトです。
クロールエフェクトをうまく使いながら、見るたびに楽しいエフェクトが現れます。
必要な情報量は網羅されながらも、一方で情報がうまくまとめられており、情報整理によってシンプルさを表現したサイトの好例だと言えるでしょう。

16. Instant Access

16_instantaccess.jpeg
http://www.instantaccess.io/

Instant Accessは、ログインやユーザー登録を必要としないアクセス技術です。
ログインも登録もせずに、どのようにしてログインするのかが、簡単なアニメーションとともに紹介されています。
文字よりも、まずはイメージを使って理解してもらおうという姿勢が、シンプルなデザインに現れています。
白背景と緑背景が交互に出てきますが、情報がうまくまとめられています。

17. KAMIMURA

17_kamimura.jpeg
http://typgestalt.com/

KAMIMURAはクリエイティブエージェンシー神村図像設計のコーポレートサイトです。
トップページではわずかなキャッチコピーとともに、作品の写真が登場します。
非常にシンプルなだけでなく、その根底にはAppleと同じようにデザインに対する信念を感じ取ることができます。

まとめ

以上、非常にシンプルな、洗練されたデザインのWebサイトをご紹介しました。

人は多くを語りたくなってしまうものですが、あえて言葉を選び、一言ひとことに重みをつけるのはメッセージを伝える上で大切なことです。
デザインでも同じことが言えます。
たくさんのものを羅列するほうが実はデザインする上で簡単だったりしますが、本当に伝えたいものだけを選び抜いて表現することで、伝えたいものの骨格が浮かび上がってきます

デザインを始めるとき、プロトタイプを始めるときには、一度立ち止まって、本当に伝えたいことは何か、もう一度思い出してみてください。
そのときに、今回ご紹介した17のホームページがお役に立てば幸いです。