Advertisement

 

パステルカラーや水彩絵の具のような、やさしい質感。

最近ではWebデザインに、これらの淡い色使いが、利用されていることもあるようです。

 

 

海外デザインブログWeb Design Ledgerで、やさしい色使いが魅力的なWebサイトデザインを21個まとめたエントリー「21 Examples of Light Color Usage in Web Design」が公開されていたので、今回はご紹介します。

 

 

どこかぬくもりを感じて、ユーザーに親しみやすい印象を与えてくれるWebデザインが多く、デザインアイデアの参考になりそうです。

 

 

 

詳細は以下から。

 

 

 

淡い色使いの質感系Webサイトデザインまとめ

 

BdeB

ブランドイメージをモチーフに、やさしい配色でデザインされた、Webサイトデザイン。余白スペースの取り方など参考になりそうです。

brightsites03

 

 

 

Naks

ドライフルーツを販売、紹介しているWebサイトデザイン。左側にメニューを配置し、プロダクト商品の詳細をレイアウトするときなどに良さそうです。

menus03

 

 

 

CRAC

コレまでの制作実績を水平方向にスライドさせて、展開させるWebサイト。太字Webフォントはインパクト大。

menus18

 

 

 

Demi Creative

淡いピンク色と灰色の組み合わせが◎、アメリカはミズーリ州にあるデザイン事務所のWebサイト。

menus04

 

 

 

The Word Cycle

カラフルな色使いで、いままでの制作実績を水平方向にスライドさせる、ユニークなWebサイト。

スクロールすると自動的に、新しい作品を読み込み続けてくれます。

brightsites05

 

 

 

Salt Surf

手作りのサーフボードやスケートボードを販売している、コンセプトからしてやさしい、Webサイトデザイン。

余白たっぷりで、イメージ写真がより一層引き立ちます。

brightsites19

 

 

 

Blind Barber

ニューヨークとロスアンゼルスにある、美容室のWebサイトデザイン。

フルスクリーンで映し出されたモノクロ写真と、紺色フォントの組み合わせがオシャレ。

brightsites18

 

 

 

Reserved

グリッドレイアウトを利用した、あたらしい形のショッピングサイトではないでしょうか。利用フォントや色使いなど個人的にメモとして。

brightsites14

 

 

 

Bleu de Chauffe

レザーバックの販売を行っているWebサイトデザイン。デザイナーブログ(Journal)より制作過程などを公開されています。

menus11

 

 

 

B&O Play

こちらもNike Better World風パララックスエフェクトを利用した、Webデザイン。

買い物かご型スピーカー、ちょっと持ち運びには大きい気が、、。

menus16

 

 

 

La Piuma

ややかすれたような、グランジテイストを取り込んだWebデザイン。サムネイルにホバーすると、鳥のさえずりが聴こえます。

brightsites01

 

 

 

One Pause Poetry

今年のWebデザイントレンドのひとつ、マルチカラムメニューを利用して、ヘッダーを大胆にレイアウトした Webサイト。今後この形、増えてきそうですね。

brightsites20

 

 

 

Churchmedia

太字ロゴがインパクトのある、モノクロテーマのWebサイトデザイン。タイポグラフィーで勝負したミニマルデザイン。

brightsites17

 

 

 

Guiherme Garcia

黄色をベースに、サムネイル画像なども色調を統一した、デザイン性にすぐれたWebサイト。

brightsites12

 

 

 

Nicola Cozzolino Art Director

さまざまなフォントを利用して、自己紹介しているユニークなWebサイトデザイン。

タイポグラフィーの組み合わせ方などは特に参考になりました。

brightsites16

 

 

 

NeoTOKIO!

イタリアを拠点に活動するデザイン事務所のWebサイトデザイン。タイポグラフィーを大胆に利用し、なめらかなフェードアニメーションをうまく活用しています。

brightsites11

 

 

 

Inzeit

パララックスエフェクトをふんだんに利用した、クリエイティブ満点なWebサイト。触って、たのしむWebサイトです。

brightsites07

 

 

 

Appex

ベーシックなレイアウトのWebサイトですが、清潔感のある配色、ユーザーに伝わりやすい余白スペースの取り方など参考点多かったので。

brightsites09

 

 

 

Kipling

ピンク色を基調に、淡いグラデーションを使ったイメージ画像を、フルスクリーンで使用した、ブラジル発のWebサイト。

brightsites02

 

[参照元 : 21 Examples of Light Color Usage in Web Design – WebDesignLedger]