デザイン解剖#26

今回はタクシーサイネージ | GROWTHのサイトを分析します！

---

MV

使用色
白、黒(1B2025)、黄緑(e9ff00)
背景：灰色(F7F7F7)
黒に黄緑がハイビームのように目立って良いアクセントカラーになっている
フォント
ヒラギノ角ゴ ProN W6

MVは動画が掲載されており、常に動きがあるので目を引き付けられる。
が、背景が常に動いているなどではなく限定的なので混雑した印象には繋がっていない。

ファーストビュー左下に縦組みで「SCROLL」と掲載。そこからアニメーションでバーが伸びている。視線を誘導させる効果。
最近かなり頻繁にこの表現を目にするが、バリエーションを集めてみたい。

「広く、届く。深く、刺さる。」というコピーが80pxという大きさで配置されている。かなりジャンプ率が高い。

メニュー

コピーとは対照的に、メニューは12pxという小ささで配置されている。
日付や時刻を表示する表現はいくつかのサイトで目にするが、
・更新されている感
・リアルタイム感
を醸し出すため？

文字と同じ大きさでアイコンが配置されているのが簡素になりすぎていなくて良い。つい目立たせたくなってしまうが、最低限の大きさで配置するのが整った印象にする肝心ポイントか。

グローバルメニューに全ての項目を表示するのではなく、並列でハンバーガーメニューを配置するのは珍しい？と思った。
が、その後スクロール追従してくるのがハンバーガーメニューのみだったので、なるほど、と納得。

ハンバーガーメニューを開くと、42pxの白黒反転した文字。
選択すると黄緑のハイライトになり、右上に三角形のマークが表示される。

グローバルメニューには無かった日本語での見出しが14pxで併記されている。

こちらも見出し部分は80px
平文は24px
見出し左側に1pxほどの棒線とアクセントカラーの三角形のあしらいが入っている。白黒で簡素になりがちな所にリズムが加わっている。

座布団も単純な長方形ではなく、右下のみ欠けた形。
欠けた部分が三角形なので、他のあしらいとも整合性が取れている。

見出しはヒラギノ角ゴだが、平文は游ゴシックが使われている。
視認性が高く、整った印象になる。

各項目の背景には大きな三角の座布団と、黄緑色の河川が必ず配置されている。連続することでリズムが生まれ、スクロール中も目に止まりやすくなっている。

背景は薄い灰色が重ねられており、そこでも三角形が描かれている。
細かい三角形を散らす、部分的に色を濃くするなど方法は他にも考えられるがそうしないのは、前者は幼くなり、後者は悪目立ちしてしまうからだろう。影のように穏やかに配置されている。

ボタン

通常時

マウスオーバー時

マウスオーバーすると、
・色が透明→黄緑に変化
・左上参画が黄緑→黒に変化
・MOREボタンは＋マークがクルクルと回転
するという効果がある。

他の枠とは違い、この部分は押せますよ！というのをアニメーションで表現している。

またCONTACTボタンをコンテンツ幅いっぱいに表示させることで嫌でも目に入るようにしている。

高さも、MOREボタン60pxに対しCONTACTボタン135pxと、倍以上の大きさになっている。

SP版との比較

PC版で80pxだった見出し文は56pxと、画面に合わせて縮小されていたが、

この部分の数字のみ、より目立たせるために64px→104pxに拡大されていた。

---

-ページ全体で、ポイントになる色/形/テクスチャなどを決めてみよう！

今回の場合は、あしらいに三角形を使う！と決めたら、
・見出し部分
・座布団の形
・背景の重なり
部分全てに使われていた。

-大きな文字はトコトン大きく、遠慮せずに。

80pxという、少し躊躇してしまいそうなフォントサイズでも、ウェイトやフォントを選ぶことで十分整った印象にできる。

-ボタンの「押せる感」は、アニメーションでも表現できる！

ボタンの中に動く部分があると、つい押したくなる、かも？