インフォメーションボックスデザインを集める

けんちゃん
·

いい感じのヘッダー下部にあるインフォメーションボックスデザインを見つめるお仕事

KDDI

  • 重要なお知らせ

  • 義援金受付

  • 災害用伝言板

複数種類使用されている、どれもスタイリッシュでかっこいい

HONDA

  • 重要なお知らせ

一つのインフォメーション内に複数のお知らせを掲示

重要なお知らせラベルとインフォメーションマークで視認性UP

リンクはアンダーラインを入れてリンクである認識の向上

日産

  • お見舞いメッセージ

  • 工場出荷時期の目処

同じレイアウトだが、並べてかつ工場出荷時期の目処については文字色を変えることでリンクである視認性を高めている

三菱自動車

  • お見舞いメッセージ兼工場出荷時期の目処

一つのボックス内でメッセージとお知らせ両方を掲載

一見リンクだとわかりにくいかも?

Fender

スライダー上部に配置、アンダーライン付き

三井住友カード

スライダーにオーバーレイする形で配置

画像が切り替わってもインフォボックスだけは変わらないため視認性は良さそう

アメリカン・エキスプレス

メニューバー下部に配置

「詳しくはこちらからご確認ください。」の文言がありここだけアンダーラインが入っているのでリンクであるとの視認性は高そう

JCB

最上部に配置

配色をつけてはいるが、比較的大きな画面だと上部過ぎてあまり目に入らなそう

ダイナースクラブ

薄めの配色のボックスだが「重要なお知らせ」ラベルの文字サイズが大きく、各リンクはアンダーラインでリンクの視認性を高めている

SHARP

同じボックスデザインで配色だけ変えて2つ掲載

サイト全体のfont-weightが300に設定されている影響でちょっと読みづらいがデザインとしてシンプルで馴染みやすい

@braveryk7
電子ゴミです