ホワイトスペース[white space]とは
文字や画像などが何も記されていない余白部分のことをホワイトスペースという。
デザイン入門者の場合、隙間を埋めるようにデザインエレメントを敷き詰めてしまいがちだが、あえてスペースを取ることで情報のまとまりをわかりやすくしたり、デザインにメリハリを付けることが出来る。ホワイトスペースを有効に使えるようになることがデザイン上級者になるための秘訣だと言われている。
http://www.brother-enterprise.co.jp/pre-release/led.html
振動を検知して自動で光るブラザーの懐中電灯のランディングページ。 「ぐらり。ぴかり。」のキャッチコピーを読んで、揺れると光るんだな、と理解したくらいの絶妙なタイミングでサイト全体が本当に揺れ出す、という素敵な演出。 LP […]
世界一のピアノメーカー スタインウェイの公式サイト。 グレーとゴールドっぽいベージュを基調に、高級感と重厚感を持ったデザインに仕上がっています。 ヘッダーメニューの「取り扱いピアノ」部分はアマゾンから流行が始まったメガメ […]
コンタクトレンズブランド のウェブサイト。 雫がしたたる形状にトリミングされたメインビジュアルがさりげなくオシャレですね。 ホワイトスペースを広めにゆったりとデザインされており、ハイセンスな印象です。
http://the3doodler.jp/3doodler-2/
2.0にバーションアップされた空中に絵を描ける3Dペン「3Doodler」のウェブサイト。 3Doodlerは世界初の3Dペンとして発売された商品です。 商品そのもののインパクトが強いので、過剰なデザインに頼らず最低限の […]
http://www.miyakojima-style.jp/
沖縄 宮古島の観光紹介サイト。 ハイセンスな家具通販ウェブサイトのような高級感のあるデザインで、「こういう休日を沖縄で過ごすのもいいなぁ」と思わせてくれるデザインですね。 レスポンシブWEBデザインになっています。
http://www.kankomie.or.jp/special/kumanokodo/
三重県観光連盟の熊野古道を紹介する特設サイト。 淡いピンクや黄色のザラッとしたテクスチャの色使いで、女性でも親近感がわくようなポップなデザインに仕上がっています。
http://shinetsu-shizenkyo.com/
フラットな単色イラスト背景とダイナミックなレイアウトが素敵です。 たまに解像度の低い写真が混ざっているのが残念ですが、クオリティ高いです。 パララックス的なアニメーションもいいですね。
http://www.d-064.com/af_banner_eccube.php
EC-CUBEで作ったネットショップにアフィリエイトを簡単に導入できる「電脳卸」の紹介ランディングページ。 スッキリと情報を整理しており、いかにもLPらしいダサさを感じない魅力的な紹介ページに仕上がっています。 各セクシ […]
矯正歯科クリニックのウェブサイト。 ガター無しのタイル型グリッドレイアウトでビビッドな色使いのフラットデザインを取り入れることで、明るくポップな印象に仕上がっています。 PC向けでもハンバーガーメニューを使用しているのが […]
天然の無垢材にこだわった材木屋さんのサイト。 ブラックをベースし、ホワイトスペースを広くとってゆったりとレイアウトすることで、高級感とハイセンスな洗練されたライフスタイルをイメージさせてくれます。 遅れて表示されるアニメ […]
http://www.yomeishu.co.jp/komagane/
養命酒を製造している駒ヶ根工場のウェブサイト。 駒ヶ根の緑を活かした背景画像や、ゆるめのイラスト、手書きアイコンなど 養命酒自体もナチュラルでオーガニックな印象になるようなデザインです。
http://www.pecotoy.com/shop/main/index.php
韓国の紙製のフィギュア(ペーパートイ)PECOTOYのウェブサイト。 立体感のあるロゴマークや、ポリゴン風の背景、サークルデザイン、背景動画など、最近のトレンドをふんだんに取り込んだオシャレなデザインに仕上がっています。
サングラスブランドのウェブサイト。 サングラスの黄色いレンズをイメージしたようなベージュカラーをキーカラーに、スッキリとした配色。 計算され尽くされたずれたグリッドデザインも美しいです。 レスポンシブでのスマホ表示も完璧 […]