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

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

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. Notepin

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

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

6. Neat

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

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

7. Coming Soon New York

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

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

8. Prashant Sani

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

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

9. KAMIMURA

17_kamimura.jpeg
https://kkco.jp/ja/

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

まとめ

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

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

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