効果的なWebデザインとは? 少ない色数でシンプルに魅せるPCサイトまとめ

公開日:2015-02-17 更新日:2024-01-31 by SEデザイン編集部

目次

PCサイトを制作する時には、目立たせたい情報をどう表現するか、どこがクリックできてどこがクリックできないか、といったデザインレイアウトやアクセシビリティを意識することが重要です。しかし、ついついパーツごとに異なる色を使ってしまうなど、かえって分かりにくいWebサイトになってしまうことがあります。

利用者が混乱することなく、スムーズにWebサイトを閲覧できるようにするには、使用する色数を抑え、シンプルに見せることも必要です。そうすることが、利用者に提示したい要素を効果的に目立たせることにもつながります。

色数を最小限に抑えてシンプルに仕上げながら、メインコンテンツや前面に出したい情報を明確に発信しているPCサイトをいくつかご紹介します。

ほぼモノクロなのに見栄えするWebサイト

ECHO

http://echo-pr.co.uk/

ECHO画面

モノクロを基調としていながら、部分的にマウスオーバーした場所のみ文字色が変わるギミックがあり、伝えたいメッセージがしっかり前面に出ています。人によっては白の多い画面だと目がチカチカするかもしれませんが、ページ最上部の右上にあるスイッチで全体を反転できるようになっているのも気が利いています。

イエローが印象的なWebサイト

ウェブデザイン hasegawahiroshi.jp

http://hasegawahiroshi.jp/

ウェブデザイン hasegawahiroshi.jp画面

モノトーンとイエローの組み合わせが印象的なWebサイト。
トップページとフォーカス部分にのみイエローが用いられていて、何を見るべきか、何を見ているかがしっかり把握でき、利用者は効率的に閲覧していけます。

淡い色合いで、清潔感・安心感のあるWebサイト

大石レディースクリニック

http://www.oishi-clinic.jp/

大石レディースクリニック画面

大きな写真を使用してはいるものの、全体的に柔らかく清潔感のあるターコイズブルーをテーマカラーとしていて、病院にとって大切な“安心感”を与えるデザインになっています。淡い色合いではあるものの、文字と背景とのコントラストも必要十分で、見にくさはありません。

凝った斜めデザインでもすっきり見えるWebサイト

HYPER MARKET

http://hyper-m.jp/

HYPER MARKET画面

包装用紙を思わせる背景が斜めに表示される、一見して興味を引くデザイン。
凝ったデザインは嫌味に感じることもありますが、淡いブルーが商品のイメージやアクセサリーショップというお店自体の雰囲気に合い、信頼感につながっています。
文字が斜めになっているのが見にくい場合は、右側のメニュー下にあるアイコンで正面向きに表示させられるのもうれしいところです。

大量の情報、商品PRも自然に受け入れられるWebサイト

PAPERSKY

http://www.papersky.jp/

PAPERSKY画面

キーカラーは青のみ。たくさんの文字情報や写真が並んでいますが、うるさくならず、それぞれがシンプルにまとまって見えるのは、写真以外の色数を極力絞り込み、整然とレイアウトされているからでしょう。オンラインストアへの誘導を図るWebサイトではあるものの、押しつけがましさを感じさせないデザインです。

このほかにも魅力的なサイトは沢山あります。ぜひ参考にしてみてください。

いますぐ使えるコンテンツ戦略マップ
インバウンドマーケティング成功事例6選

関連記事

コンテンツマーケティングで、
ビジネスの効果を最大化しませんか?

もっと詳しく知りたい方

ご質問・ご相談したい方