ビジネスの成功にはブランドのアイデンティティが不可欠です。個人経営の法律事務所であろうと、デジタルの世界を牛耳る大企業であろうと、第一印象が多くを決定付けます。
あらゆる営業所はブランドアイデンティティを示す要素を誇り高く掲げるべきであり、それはWebサイトにおいても同様です。一般にオンラインショップでは、消費者の認識の中でほかのブランドと私たちのブランドを区別する際に、ブランドロゴが十分に役割を果たします。
Webサイトの美しさの根底には、大抵ブランドカラーとキャッチコピーがあります。しかしこれらだけでは、会社のイメージを形成し、適切なメッセージを伝えるのに十分ではないかもしれません。その際は、もう少し工夫が必要でしょう。その工夫の一つが、ヒーローエリアでブランドのアイデンティティを表現することです。
そこで、ヒーローエリアについて、いくつか特徴的な事例をみてみましょう。
Fyresite
ヒーローエリアでブランドを表現するもっともシンプルな方法は、ビジュアルアイデンティティをトップページの中心に配置することです。以下のFyresiteのサイトをみてみましょう。
Fyresiteのチームの解決策は非常にシンプルです。単にロゴマークをそのままコピーし、拡大してヒーローエリアに配置したのです。しかしこれには魔法のような効果があり、彼らはブランドを示し、会社の生き生きしたダイナミックな雰囲気を表すことができています。
注目すべきは、どれだけロゴマークが視覚的に大きな比重を占めていたとしても、ユーザーの目は紹介文に引きつけられる点です。これは非常に優れています。どのようなデザインにおいても、ブランドアイデンティティとコンテンツのバランスを重視しましょう。コンテンツを犠牲にしては意味がありません。
Olympp
似たようなアプローチがOlymppにもみられますが、こちらのチームはよりデザインに手を加えています。
このサイトでは、ロゴがトップページ全体を覆う画像の上に重ねられています。ここには美しさの法則や汎用的なトーンが実証されています。ギリシャというテーマがヒーローエリア全体で機能し、ロゴを浮かび上がらせているのがわかるでしょう。
シンプルなアイデアですが、上手く機能しているだけでなく、非常に印象的です。
Davis Malm Attorneys
Davis Malm Attorneysの公式サイトは、ブランドイメージを織り込んだ素晴らしい事例です。先に紹介した事例と同じように、ここでも背景の画像がロゴに重なっています。
しかし、こちらのサイトにはマスコットの実際の写真が採用されています。さらに、紹介文のレイアウトの並びと、ロゴの中の社名のレイアウトがそろっています。このヒーローエリアは、ビジュアルアイデンティティ全体に貢献するきっかけとして、合理的に機能しています。
Keyformat
この事例も、基本的にはDavis Malm Attorneysで見たアプローチと同じです。背景には、主要なマスコットであるヤギの実際の画像が使われています。しかし、こちらのヒーローエリアにはまったく異なる雰囲気があり、より遊び心のある見た目になっています。
その理由は、詳細な部分にあります。トレンドを強く意識したネオンカラーと、現代的な特徴の一つである、線を使ったタイポグラフィが使われています。これによってデザインに活気と面白みが加わり、ブランドイメージが上手く演出されています。
Authenticff
このソリューションに使えるのは動物だけではありません。どのような素材でも有効です。抽象的なロゴであっても、ヒーローエリアに調和するでしょう。次のAuthenticffのサイトをみてください。
このロゴは、内側に数本の線が引かれたシンプルな三角形です。最初に紹介した事例とは異なり、ロゴがそのまま複製されているわけではありません。その代わり、このチームは印象的な立体感を与える別のバージョンを使っています。元々のロゴを上手に抽象化してはいるものの、ロゴの特徴や本質は失われていません。
Purple Bunny
伝統的なアプローチに手を加えて進化させることで、面白くしましょう。それには、クリエイティブな思考や、現代的なソリューション、高度な技術が必要です。Purple Bunnyの例を考えてみます。
Purple Bunnyを制作したチームは、ダイナミックなアプローチを採用しました。ヒーローエリアには、ロゴに使われているウサギだけではなく、このマスコットの活発な性格を表現した小さなアニメーションも使われています。
ウサギのアニメーションはトップページの右下にあるので、キャッチコピーの部分から気を逸らされることもありません。このイメージによってヒーローエリアが豊かになり、ビジュアルアイデンティティが明確になり、単純に雰囲気が明るくなっています。
Digital Design Days
マンガのようなアニメーションが好ましくなく、真面目でビジネスライクな雰囲気を求めるなら、最近人気を得つつある、デジタルに再構築されたテッキーなアニメーションを採用できます。
Digital Design Daysのチームはこの技術を実践しました。彼らのロゴは左上の角だけでなく、ヒーローエリアにも表示されています。抽象的な3Dのアイコンが荘厳な雰囲気を与え、ユーザーを楽しませています。さらに、文字情報はロゴでの配置に倣っています。これによって、ユーザーは細部まで調和しているように感じるのです。
この事例からは、どのような種類のロゴであっても、ロゴを中心に簡単にヒーローエリアを構成できることがわかります。これを実践すれば、全体的な美しさに貢献するだけでなく、会社のビジョンをより明確に表し、驚異的な成果を上げられるでしょう。
The Village Films / Athem
こちらの２つの事例は、細部にこだわりたい人、繊細さや洗練されたデザインを好む人に最適です。どちらの例においても、ブランドアイデンティティが丁寧に組み込まれています。
たとえば、Village Filmsの公式サイトでは、透明なマスクのかかったロゴが画面の中心に置かれています。ほとんど見えませんが確かにロゴはそこにあるので、新たなユーザー体験を作り出しています。
Athemのチームはロゴを作り直すのではなく、ロゴの特徴を活かしています。画像が３つに分割されたスライダーをみてください。それぞれの部分がロゴと同じ配置になるように上下方向に動いています。
あなたのブランドへの招待状
ヒーローエリアと上手く調和したロゴは、ブランドアイデンティティを強化し、あらゆる事業に役立つWebサイトを作成する素晴らしい方法です。ロゴはインターネットの要素の一つとしてだけではなく、ビジュアルアイデンティティの一部としても機能するのです。
どのようなロゴであれ、トップページの中で再構築する方法はたくさんあります。Fyresiteのようにそのまま複製して使うことも、Olymppのように背景の画像を利用することも、Purple Bunnyのようにアニメーションを作ることもできるでしょう。
