ヒーローエリアで単色を有効に使った8つの事例

Nataly Birch

ウクライナのセバストポリ出身のWeb開発者。Word PressとIT関連の執筆に日々熱中しています。自身のブログも運営しており、お役立ち情報やエッセー、チュートリアルをシェアしています。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

The Design Trend of Utilizing Monochrome Colors in Hero Areas

ここ最近、色の使い方が大きく変わってきたようです。ほんの数ヶ月前まで、インターフェイスの細部の多くみられる強烈に目を引く色づかいが話題になっていました。ヒーローエリアにはグラデーションをかけたレイヤーを重ね、ページ中に明るく大胆な色のCTA(行動喚起)ボタンを散りばめるというスタイルです。

今日(こんにち)、一部のサイトでは単色のデザインへと移行しているようです。よく使われる見慣れた色と比べて、成熟した深みのある色が使われており、単色という言葉から想像される単調さとは少し違った印象をつくりだしています。

MUG

MUGでは、最低限のヒーローエリアにメニューやロゴ、キャッチコピーといった重要なものだけが配置されています。しかし、決して稚拙ではありません。背景にはMUGの名前を想起させる大きな「U」の文字がアニメーションで表示され、興味を引くものとなっています。

そして背景には、濁りのないきれいなネオングリーンが一面に使われ、ただただきらびやかです。サイト訪問者に大きな印象を与え、その目を一瞬で奪います。訪問者を困惑させることなく、デザイン全体をポップでモダンな雰囲気にしています。特に重要なことは、サイトのデザイン全体と完璧にマッチしているということです。そしてアニメーションを引き立て、その効果を高めています。それと同時に、ハンバーガーメニューのアイコンなどの細かい要素への視線も誘導し、全体として調和と釣り合いがとれています。

ここでは、単色の背景色がこの力強いデザインに欠かせない要素となっています。そのため、この単色のヒーローエリアが非常に魅力的で興味深くみえるのです。

Omnium Blockchain

さきほどの例と同じように、Omnium Blockchainのチームも単色によるデザインに目を向けており、その色はブルーです。この選択は偶然ではありません。ブルーが信頼性や責任性、堅実さを連想させる色ということはよく知られています。しっかりと仕事をするという雰囲気を出すのにぴったりなのです。そして意見が割れるようなケースでも、信頼感を与えクライアントを味方につけることができるのです。

単色のデザインでは、テーマが一貫していて人の気をそらさせません。プロジェクトの全体的なイメージと印象をつくりあげるのに必要不可欠な貢献をしているのです。

Creative Canopy

こちらはまた別のブルーを基調としたサイトですが、さきほどの例よりももっと複雑で入り組んでいます。Creative Canopy はそのWebサイトの美しさが、モノトーンデザインによってつくりあげられている非常に素晴らしい例です。さまざまな濃淡のブルーが使われ、絵に深みと多様性を与えています。そこに退屈さは微塵もなく、賢いアイディアと素晴らしい技法が人々の興味を引きつけてやみません。さらに、ホームページ全体でも同じアプローチが使われており、ユーザー体験の一貫性を生み出しています。

Dix4 Agency

単色のデザインは、複数のレイヤーを重ねることでさらに進化します。その印象的な例がDix4 Agencyです。このサイトのヒーローエリアでは、特徴的な色彩のレイヤーが使われていて、独特な雰囲気をもった味わい深いデザインとなっています。

あらゆる色に刻々と変化するカラフルなレイヤーは非常に刺激的です。この新しいアイデアを使った単色のエリアは、全体のデザインテーマの中心的な存在となっています。このアプローチはサイト内の他の場所でも使われ、あらゆる場所でポジティブな感情を呼び起こします。

ONEFOUR

ONEFOURのデザインチームも同じ手法を使っています。Dix4 Agencyと同じようにデザイナーは1つの色だけにはこだわらず、さまざまな色合いと絶え間なく変わる背景を使って、サイト訪問者を引きつけています。

イエローからブルーに変わるキャンバスは、美しい色彩でみる人を楽しませてくれます。この手法を使うことで、開放感のあるシンプルでゆったりとしたヒーローエリアをつくりだすことができます。ちょっとした工夫を加えることで、ミニマリズムの美しさを損なうことなく成功を収めています。

MST Agency

MST Agencyのチームは、単色をただレイヤーや背景に使用するのではなく、ページ全体に適用することでサイトを訪れる人に強い印象を与えています。Webサイトのウェルカムページでは、おなじみのスライダーで訪問者を出迎えます。各スライドは、それぞれ単色のテーマカラーで全体をまとめる構成となっています。

ページ内の各パーツはテーマとなる色にあわせて色が変わります。この面白いアイデアが構成上の調和をもたらしています。退屈にみえるのか、素晴らしくみえるのか、その紙一重のバランスがインスピレーションを与えてくれます。

Three59

Three59は、作品の要素として美しいダークグレーを使用しています。それはWebサイトの雰囲気をつくりだす必要不可欠な要素であり、インターフェイスに実務的な信頼感を与えています。このプロジェクトには刺激的なユーザー体験を生み出す動きのあるデザイン要素が多く使われているため、このような力強い単色の背景がぴったりとマッチしています。

単色の背景は、前面の要素を引き立てる舞台を用意するだけでなく、プロジェクトにちょっとしたエネルギーを与えつつ、すべての動的な要素のバランスを取っているのです。

Codigo

Codigoはこのテクニックの典型的な例です。特徴的ともいえるきれいな単色のベタが、前面にくる要素に対してしっかりとした土台を提供しています。キャッチフレーズとナビゲーションを最大限に活かすデザインです。

ここで注意すべきことがいくつかあります。まず第一に、この色の選択によって、全体の読みやすさを向上させるとともに、キャッチフレーズに視線を集め狙い通りに強調されています。第二に美的な効果を狙っています。単なる原色のレッドではなく、スタイリッシュにみえる、強烈な個性が感じられる色です。そして最後に、この色はすでに確立されているブランドアイデンティティの一部である、ということです。

ひとつの色を最大限に活かす

色の使い方は千差万別です。少なくともWebデザインの分野では、Pantoneが作ったルールに忠実である必要はありません。色使いにもトレンドや人気のソリューションがあります。あるときは明るくて派手なグラデーションがもてはやされ、またあるときは落ち着いた単色の表現に取りつかれたり、と非常に気まぐれです。でも1つ確かなことは、人々は皆、美しさと調和を追い求めているということです。

単色のヒーローエリアには魅力があります。確かに色とりどりの「お化粧」をすることはできませんが、たった1つの色を選ぶことで、訪れる人々に強い印象を与えることができる、優れた美意識をもった際立ったデザインをつくりだすことが可能です。

もちろん落とし穴もあります。単色での解決策は往々にして退屈なデザインになってしまいがちです。そこで必要になるのは、たった1色を使って楽しくて魅力的なデザインをつくるためのアイデア力と創造力のトレーニングです。これまで紹介してきた例を、ぜひそのトレーニングに役立ててください。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて