無から有を生み出す!ホワイトスペースの使い方が参考になる海外サイト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のホームページです。
ブランドのサイトがホワイトスペースをしっかりと取ると、写真の1枚1枚が映えて見えます。
このサイトも例外ではなく、写真に自然と視線が運ばれるようになっているので、ブランドイメージを高めやすい効果があると言えます。
まとめ
**「何もない」**というのをあえて意図的に作り出すことで、情報を詰め込むのとはまた違った「意味」をユーザーに与えることができるのが、ホワイトスペースです。
ホワイトスペースは、写真や文字に視線を集めることができるだけでなく、スローな時間の流れを演出したいときにも使えます。
このため、ファッションブランドや雑貨のサイトなどでもホワイトスペースは存分に活用されています。
ぜひ、演出したい世界観に応じて、ホワイトスペースを有効活用してみてください。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ファーストビュー
- ファーストビューとは、ユーザーがホームページを訪問した際、スクロールせずに表示される範囲のことです。ディスプレイのサイズや解像度によって、ファーストビューは異なります。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ファーストビュー
- ファーストビューとは、ユーザーがホームページを訪問した際、スクロールせずに表示される範囲のことです。ディスプレイのサイズや解像度によって、ファーストビューは異なります。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●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・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング