ホワイトスペースがうまく使われた印象的な海外系Webデザイン21選
Webサイトのデザインにおいて、とても重要な要素にホワイトスペースがあります。いわゆる余白というやつです。
ホワイトスペースはただの隙間ではなく、デザイン上の「間(ま)」であり「リズム」ともいうべきもの。そんなホワイトスペースを活用した海外のWebサイトをご紹介します。
ホワイトスペース をうまく使ったウェブデザイン
個人的にホワイトスペースほど、ウェブデザインにおいて難しい要素はないと思っていて、そうした要素を大胆に、かつ繊細に取り入れるというのは、ウェブデザイナーの力量にかかっていると言えます。
デザイナーの巧みなバランス感覚によって、うまく構成されたウェブデザイン。
ホワイトスペースをコントロールして、空間を演出した海外のWebサイトの事例が以下になります。
Snowbird
![Snowbird](https://mbdb.jp/wp-content/uploads/2012/11/snowbird.jpg)
eighty3creative.
![Eighty3creative.](https://mbdb.jp/wp-content/uploads/2012/11/eighty3creative.jpg)
Andrew Lucas
![Andrew Lucas](https://mbdb.jp/wp-content/uploads/2012/11/AndrewLucas.jpg)
Adhara NY
![Adhara NY](https://mbdb.jp/wp-content/uploads/2012/11/AdharaNY.jpg)
Pitara
![Pirata](https://mbdb.jp/wp-content/uploads/2012/11/Pirata.jpg)
CHRIS BODDY
![CHRIS BODDY](https://mbdb.jp/wp-content/uploads/2012/11/CHRISBODDY.jpg)
Over
![Over](https://mbdb.jp/wp-content/uploads/2012/11/Over.jpg)
Anonymous
![Anonymous](https://mbdb.jp/wp-content/uploads/2012/11/Anonymous.jpg)
Something Splendid
![Something Splendid](https://mbdb.jp/wp-content/uploads/2012/11/SomethingSplendid.jpg)
CO OP
![CO OP](https://mbdb.jp/wp-content/uploads/2012/11/COOP.jpg)
superReal
![SuperReal](https://mbdb.jp/wp-content/uploads/2012/11/superReal.jpg)
Rockaway Relief
![Rockaway Relief](https://mbdb.jp/wp-content/uploads/2012/11/RockawayRelief.jpg)
tom reinert design
![tom reinert design](https://mbdb.jp/wp-content/uploads/2012/11/tomreinertdesign.jpg)
MAGIC TOUCH
![Magic touch](https://mbdb.jp/wp-content/uploads/2012/11/magictouch.jpg)
CEE: The State of Financial and Economic Education in United States
![CEE](https://mbdb.jp/wp-content/uploads/2012/11/CEE.jpg)
Beatbox Academy
![Beatbox Academy](https://mbdb.jp/wp-content/uploads/2012/11/BeatboxAcademy.jpg)
labor b designbüro
![Labor b designbüro](https://mbdb.jp/wp-content/uploads/2012/11/35f01b19130f21ee196d7091f7d9f9c6.jpg)
Session M
![Session M](https://mbdb.jp/wp-content/uploads/2012/11/SessionM.jpg)
Philip House
![Philip House](https://mbdb.jp/wp-content/uploads/2012/11/PhilipHouse.jpg)
NV Interactive
![NV Interactive](https://mbdb.jp/wp-content/uploads/2012/11/NVInteractive.jpg)
The Mealings
![The Mealings](https://mbdb.jp/wp-content/uploads/2012/11/TheMealings.jpg)
緻密に ホワイトスペース を取り込む
どのデザインも、大胆なんだけどしっかりとした緻密な計算によってホワイトスペースが取り入れられてますね。
僕自身、ウェブデザインをするときには、それなりにホワイトスペースを計算して作っているつもりなんですが、やっぱりまだまだ修行が足りませんね。なかなかこうはならないですもの。
テキスト情報を多めに見せることを優先させているというのもありますが、こう思い切った余白を取ることに、若干の恐れがあるというかなんというか。
個人的に「Beatbox Academy」は、デザインはもちろんですが、キーボードアクションと組み合わせたサウンドギミックもあって、一発で好きになりました。
こちらはぜひアクセスして遊んでみてくださいな。
via. 21 Inspiring Examples of White Space in Web Design | Inspiration