無から有を生み出す！ホワイトスペースの使い方が参考になる海外サイト13選

デザインと言えば、いかに詰め込むか、いかにレイアウトするか、ということを考えてしまいます。
しかし、デザインにおいてデザイナーがもっとも難しいと考えていることの一つは、「何もない」という部分に対してどのように演出していくか、ということです。

この「何もない」スペースは、一般的に*「余白」や「ホワイトスペース」*と呼ばれています。
単なる空間や行間だけでなく、全体として見たときのバランスなども含めて繊細に扱わなければ、デザインが台無しになってしまうこともあるので、昔も今も、デザイナーの大きな関心ごとの一つは「ホワイトスペースの使い方」です。

そこで今回は、ホワイトスペースの使い方が参考になる海外サイトを集めて、そのポイントを見ていくことにしましょう。
「学ぶ」は「まねぶ」という言葉に由来しているといいますが、素晴らしい実例から学ぶことは、最も有効な近道になります。

ホワイトスペースの使い方が参考になる海外サイト13選

1. NUBBIK

スクリーンショット：2017年10月

NUBBIKは現代風のスタイリッシュなスニーカーを販売しているサイトです。
靴を列に揃えることで商品棚に見立てていますが、ホワイトスペースを大胆に取ることで、シンプルな世界観を演出しています。

2. Simply Chocolate

スクリーンショット：2017年10月

Simply Chocolateは、デンマークに拠点を構えるチョコレートの紹介用のホームページです。

単色の洗練されたパッケージを中央に据えていますが、文字をまとめて配置し、チョコレートバーまわりの空間をあける
ことによって、チョコレートバーへ視線を集めることに成功しています。

3. Rottefella Workout Apparel

スクリーンショット：2017年10月

Rottefella Workout Apparelはオランダにあるクライミングスポーツゥエアのサイトです。

クライミングウェアらしく背景に山を据えつつ、ファーストビューでは空にタイトルを配置し、ホワイトスペースを有効活用しています。

4. Ursa Major Supercluster

スクリーンショット：2017年10月

ホワイトスペースは、「ホワイト」と付きますが、文字どおりの白だけがホワイトスペースという訳ではありません。

Ursa Major Superclusterのポートフォリオサイトでは、ホームページを宇宙に見立てて、コンテンツを少なく配置することで、ホワイトスペース(ここでは空間)を最大限に活用しています。
マウスジェスチャーを採用しており、触ってみると面白いです。

5. cœur

スクリーンショット：2017年10月

cœurのホームページは、非常に大胆な配置になっています。

いわゆるホワイトエッジのホームページとも見て取れますが、真ん中にブランド品を身につけた女性の写真が1枚あるだけです。
ホワイトスペースには視線を集める効果がありますが、まさにその効果を思いっきり活用した格好の例だと言えます。

6. Makr

スクリーンショット：2017年10月

Makrはアメリカで雑貨を販売しているお店です。

ゆったりとしたライフスタイルが人気のMakrですが、ホームページもホワイトスペースを大胆に取ることで、時間がゆっくりながれるような印象を与えます。
写真の構成も面白く、勉強になるのではないでしょうか。

7. Canlis

スクリーンショット：2017年10月

レストランのCanlisでは、セリフ書体とサンセリフ書体をうまく組み合わせながら、行間を十分に空け、シンプルでスローな空間をホワイトスペースで演出しています。

ホワイトスペースがしっかりと取られていると、料理の写真も映えて、美味しそうに見えます。

8. Mausoleum of Augustus

スクリーンショット：2017年10月

Mausoleum of Augustusでは、ローマ帝国初代皇帝のアウグストゥス帝の3Dモデルを操作することができます。

中央にアウグストゥス帝の3Dモデルが配置され、影をつけることによって、ブラウザの画面全体が空間であるかのような演出がされています。
全体的に白が採用されており、クリーンなイメージを与えます。

9. CELEAL

スクリーンショット：2017年10月

CEREALは、アートやデザイン、トラベルなどの記事を読むことができるWebマガジンです。

全体的にモノクロな写真が採用されており、版面率を高くして文字を小さく置くことで、写真の中にもホワイトスペースが生まれるような構成になっています。

10. Co-motion

スクリーンショット：2017年10月

デザインやブランディングを行うデジタルエージェンシーCo-motionのサイトを覗いて見ましょう。

デジタルエージェンシーらしく、クリエイティブワークの写真が目立ちますが、余白をしっかりと取り、ホワイトスペースを効果的に活用することで、プロダクトへの視線を集めています。
Workのページを見ると、色使いも繊細で、鮮やかに彩られているプロダクトを見ることもできます。

11. Bacca

スクリーンショット：2017年10月

Baccaはハンドメイドの楽器スタンドなどを販売しているコマースサイトです。

ファーストビューでいきなりプロダクトが飛び込んできますが、あえて背景を白ではなく暗めのパステルカラーを採用しており、そのことによって世界観を演出しています。
スクロールすることで、さまざまな種類の楽器スタンドを見ることができますが、やはりホワイトスペースが十分に取られています。

12. North East

スクリーンショット：2017年10月

North Eastは、デザインに関するギャラリーとオンラインショップです。

ホームページ全体もホワイトスペースを活用していますが、書籍などのデザインにも意図的にホワイトスペースが使われているようです。
写真にはあえてグレーの背景を置くことで、また別次元のホワイトスペースを生み出しています。

13. Bouguessa

スクリーンショット：2017年10月

ファッションブランドBouguessaのホームページです。

ブランドのサイトがホワイトスペースをしっかりと取ると、写真の１枚１枚が映えて見えます。
このサイトも例外ではなく、写真に自然と視線が運ばれるようになっているので、ブランドイメージを高めやすい効果があると言えます。