ホワイトスペースがうまく使われた印象的な海外系Webデザイン21選

Webサイトのデザインにおいて、とても重要な要素にホワイトスペースがあります。いわゆる余白というやつです。

ホワイトスペースはただの隙間ではなく、デザイン上の「間(ま)」であり「リズム」ともいうべきもの。そんなホワイトスペースを活用した海外のWebサイトをご紹介します。

ホワイトスペース をうまく使ったウェブデザイン

個人的にホワイトスペースほど、ウェブデザインにおいて難しい要素はないと思っていて、そうした要素を大胆に、かつ繊細に取り入れるというのは、ウェブデザイナーの力量にかかっていると言えます。

デザイナーの巧みなバランス感覚によって、うまく構成されたウェブデザイン。
ホワイトスペースをコントロールして、空間を演出した海外のWebサイトの事例が以下になります。

Snowbird

Snowbird
Snowbird 

eighty3creative.

Eighty3creative.
eighty3creative. | branding. web. print. 

Andrew Lucas

Andrew Lucas
Andrew Lucas – Web & Interface Design – London 

Adhara NY

Adhara NY
Adhara NY | 

Pitara

Pirata
Pirata – we create digital products 

CHRIS BODDY

CHRIS BODDY
CHRIS BODDY – COPYWRITING 

Over

Over
Over 

Anonymous

Anonymous
Anonymous / Home – Digital production company 

Something Splendid

Something Splendid
Something Splendid 

CO OP

CO OP
CO OP 

superReal

SuperReal
superReal | Create Commerce 

Rockaway Relief

Rockaway Relief
Rockaway Relief – New York 

tom reinert design

tom reinert design
tom reinert design 

MAGIC TOUCH

Magic touch
BeoPlay A9 – AirPlay Music System 

CEE: The State of Financial and Economic Education in United States

CEE
CEE: The State of Financial and Economic Education in United States 

Beatbox Academy

Beatbox Academy
Beatbox Academy 

labor b designbüro

Labor b designbüro
labor b designbüro 

Session M

Session M
Session M 

Philip House

Philip House
Home – Philip House 

NV Interactive

NV Interactive
Home – NV Interactive 

The Mealings

The Mealings
The Mealings 

緻密に ホワイトスペース を取り込む

どのデザインも、大胆なんだけどしっかりとした緻密な計算によってホワイトスペースが取り入れられてますね。

僕自身、ウェブデザインをするときには、それなりにホワイトスペースを計算して作っているつもりなんですが、やっぱりまだまだ修行が足りませんね。なかなかこうはならないですもの。

テキスト情報を多めに見せることを優先させているというのもありますが、こう思い切った余白を取ることに、若干の恐れがあるというかなんというか。

個人的に「Beatbox Academy」は、デザインはもちろんですが、キーボードアクションと組み合わせたサウンドギミックもあって、一発で好きになりました。
こちらはぜひアクセスして遊んでみてくださいな。

via. 21 Inspiring Examples of White Space in Web Design | Inspiration

「デザイン」新着記事

Font Awesome 4.5.0がリリース Googleアイコンなど最新のデザインに変更

ホシナ カズキ

アイコンWebフォント「Font Awesome」が66アイコンを追加したバージョン4.4.0を公開

ホシナ カズキ

iPhone 6/iPhone 6 PlusやiOS 8、Apple Watchのモックアップ用PSD素材

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく