ウェブサイトの個々の要素を考えると、ユーザーエクスペリエンスにプラスの影響を与えるものとして、ロゴはブランドを確立し、独自の考察を受けるべきです。この記事では、ウェブサイトのロゴに関して、あなたのウェブサイトのユーザーエクスペリエンスを確保するためのいくつかのヒントを私たちのエージェンシーの実務から提供します。

ウェブサイトのロゴはホームページメニューを置換します

ロゴは一般的にナビゲーションバーに配置され、常にホームページにリンクされている必要があります。ユーザーは今日、ロゴをクリックすると自動的にホームページに戻ることを期待しています。このように、ロゴは時に、まだ「ホーム」リンクとしてウェブサイト上に表示されている場合がある、ホームへのリンクを提供します。ナビゲーション内でホームへのリンクを提供することは不要です。そして、貴重なスペースも節約されます。

当社の拠点であるドイツ北部のヴァーレン（ミューリッツ）市は、ユーザーにハウスアイコンでホームページに戻る方法を提供することに決定しました。こちらはロゴ以外に別のロゴが配置されているため、ユーザーがロゴをクリックする率が低下する可能性があるからです。また、このウェブサイトのユーザーはインターネットに不慣れかもしれないと考えられています。率直に言って、このハウスアイコンはユーザーエクスペリエンスをあまり向上させません。なぜなら、このウェブサイトには、情報アーキテクチャ、ユーザーインターフェース、そしてアクセシビリティ（特にリンクやテキストの読みやすさに関するコントラスト）に関する多くの問題が存在するからです。ヴァーレン（ミューリッツ）市のウェブサイトはそのままネガティブな例となっています。

レスポンシブロゴ：デバイスの解像度に合わせたロゴの調整

デスクトップビューでは十分なスペースがあるため、企業名やキャッチフレーズをロゴに含めることができますが、モバイルビューではスペースと注目を考慮して、ロゴを簡略化した形で配置する必要があります。

ロゴに関してもウェブサイト同様に、大きさやメディア、環境に合わせて数年前から調整される傾向があります。これをレスポンシブロゴと呼び、このロゴは周囲の状況に応じて適応することで、小さなメディアでも完璧に表示され、場合によっては異なるアプローチが必要になる場合もあります。全てのデバイスや画面サイズで同じ見た目の固定ロゴとは異なり、レスポンシブロゴは各状況に合わせて適応し、異なるデバイスを通じて一貫性のある最適化されたユーザーエクスペリエンスを提供します。これにより、ロゴは形状だけでなく、ブランドメッセージにおいても変わることなく適応します。

良い例として、スイス企業ヴィクトリノックスが挙げられます。初期表示では大きなアイコンがユーザーに表示されます。唯一の欠点は、ロゴがSVGではなくPNGファイルとして表示されていることです。

スクロール中は画像要素のみが表示されます。背景にはスイスの起源を強調する山が見えます。最初のビューポートではブランド形成が重要です。ユーザーは理解すべきです。「あなたはここで正確にヴィクトリノックスにいます」。ユーザーがスクロールすると、内容が重要となります。ロゴは表示が簡略化され、主なコンテンツにスペースを提供します。ナビゲーションは上部に固定され、これは使いやすさの面からも非常に有用です。

ギネスのウェブサイトは、企業名とロゴを一緒に配置しています。スクロール中はロゴが少し小さくなり、ナビゲーションは引き続き表示されます。ユーザーがスクロールを始めるとロゴとナビゲーションが大きくなり、追加のページにアクセスしたいと思われるためです。

コマース銀行のウェブサイトは最適な解決策ではありませんでした。ロゴは企業名と一緒に表示され、SVG形式で配置されていますが、横にあるナビゲーションと非常に競合しています。スクロールするとナビゲーションが完全に消え、ユーザーが再び最上部にスクロールしてナビゲーションを見る必要があります。たとえばzeit.deが行っているように、スクロールを開始するとすぐにナビゲーションが表示されるようにするとより良いでしょう。

コマース銀行が行ったコンバージョン最適化の観点から非常にうまく行ったのは、2人の人物の目線を注目点にした大きな画像です。彼らはボタンの方向を見つめており、これにより訪問者の目も自動的にそのボタンに向かいます。このようなコール・トゥ・アクションへの注視は非常に効果的です。素晴らしい仕事、コマース銀行！

興味深いのは、モバイル版の例を見ている時です。

モバイルバージョンでは、Victorinoxのロゴがさらに小さくなり、その代わりに中央に配置され、ユーザーの相互作用をより良く構造化するために配置されます。Guinnessはロゴの下ではなく右側にテキストを配置しています。このように、ハープにはより多くのスペースがあり、最上部のナビゲーションバーが大きすぎることはありません。一方、Commerzbankはスマートフォンの解像度ではテキストを単に非表示にします。

ユーザーエクスペリエンスにおけるレスポンシブロゴの役割は重要です。なぜなら、ユーザーがウェブサイトにアクセスする方法に関係なく、視覚的な一貫性とブランドアイデンティティを保つのに役立つからです。

ロゴが解像度の変化に反応しない場合、ユーザーの注意を引きすぎる可能性があります。Hypovereinsbankの例では、特にスマートフォンのビューでは、非常に目立つロゴが右側に配置されたコール・トゥ・アクションと競合しています。デスクトップビューでは、中間グレーのナビゲーションポイントが見落とされる可能性があります。一般的に、このウェブサイトにはさらにいくつかのUXエラーがあります。

レスポンシブロゴを確保するためには、デザイナーは複数のロゴアダプテーションを用意する必要があります。ロゴは異なる背景でもうまく機能する必要があり、さまざまなサイズでも必要です。したがって、解像度が小さいほど、ロゴの詳細が減少します。ただし、ブランドの核心を失わないようにする必要があります。これがレスポンシブロゴの活用の高度な技術です。したがって、ブランドのリニューアルを依頼する場合は、今後のロゴの使用時にこの要件を考慮してください。

ウェブサイトロゴのファイル形式

解像度に応じて正しいサイズがロードされるため、レスポンシブロゴの使用は合理的です。より小さな解像度、つまりスマートフォンなどでは、より小さなグラフィックのみがロードされます。これにより読み込み時間が節約されます。ただし、最大の効果は次の場合に得られます。:

1. 適切な解像度でロゴを組み込む（高さと幅についての情報も含む）。ロゴが解像度が高すぎる状態で組み込まれており、表示用にダウンスケーリングされる場合が多い。
2. ベクターフォーマットSVGでロゴを組み込む（PNGやJPGではなく）。

ウェブサイトロゴをファビコンとして使用する

ファビコンとしてロゴの縮小形を使用してください。小さな解像度のファビコンでは、テキストや他の小さな要素を省略してください。

上記の例でGuinnessのウェブサイトは、ロゴをウェブサイトで非常にうまく使っていますが、ファビコンとしては最適ではありません。小さな白いGuinnessのテキストは読み取りにくく、ファビコン全体の印象を低下させます。コントラストが低いです。テキストなしでハープのみに焦点を当てて簡素化すると、印象ははるかに向上します。この記事の他の例はすべてGuinnessよりもうまく解決されています。

レスポンシブロゴに重点を置いたエージェンシーを探している場合は、お気軽にお問い合わせください。私たち4eck Mediaはユーザーエクスペリエンスの専門家です。

プロフェッショナルなポジショニングが重要な場合は、次のアイコンパックやコーポレートデザインテンプレートも興味深いかもしれません: