ボーイのサイトトレース02

トレース先

CRE8TIV Agency — Digital Marketing Accelerator

トレースしたデザイン

長体・平体を組み合わせたフォントの表現

サイト中で最も目を引くのがタイポグラフィの表現。自社製のオリジナルフォントが使用されているが、通常サイズ以外に長体と平体が掛かったフォントが２種類用意されている。

縦横比率が異なるフォントを組み合わせる事で単調な見せ方にならずインパクトのある訴求をしている。また両方をフラットに使用すると比率の違う物同士でチグハグな印象も与え兼ねないため、ジャンプ率で差を付けるなどしてバランスを取っている。

ちなみにサイトトレースでは元がオリジナルフォントでそのまま使用出来なかったため、平体は「Neue Haas Grotesk」の垂直比率を60%に、長体は「Fjalla One」を使用することで擬似的に表現をした。（左がトレース、右が本家）

「Fjalla One」は下記のサイトでも使用されている。比較的クセのあるフォントだがそれ故にフックやインパクトを与えたい場合に適している。

採用情報 | つばめタクシー・大和グループ

シンプルなのに複雑性を感じるレイアウト

レイアウトは「軸」となるグリッドがあり、このポイントを中心として展開している。軸をしっかりと設ける事で左右が非対称になっていても安定感のある見え方になっている。

同じ素材で、今度は「余白」ではなく「図」に目を向けてみる。

レイアウトするとき「軸」を作る。軸がしっかりしていると読みやすいし、崩しを入れても破綻しにくい。

ポイントは「木の幹」を意識して枝を作っていくこと（軸は真ん中でなくてもよい）。枝で変化つけると自由さが広がる。 https://t.co/mAM5r4f633 pic.twitter.com/Yuu5i97Kgt

— ハラヒロシ / デザインスタジオ・エル (@harahiroshi) May 11, 2020

レイアウト自体は箱組みの要素が多く実はそこまで複雑なレイアウトはしていない。それでも複雑性を感じるのは片側の余白を大きく空けるなどして、左右非対称の要素を作っているのと、円の装飾をズラし気味に配置する事で整った印象を緩和しているためだと考えられる。