見出し画像

フォントが接客における「声」の役割を果たす。ユナイテッドアローズのサイトリニューアルが企業ロイヤリティーを向上させた話

27のブランドを持ち、全国に店舗展開しているユナイテッドアローズ(以下UA)は、質の高い購買体験をオンラインでも届けるため、OMO(※1)の推進に力を入れています。
その一環として、2022年にはECサイトとコーポレートサイトをリニューアル。今回はグラフィックデザイナーの小林さんに、自社サイトでの書体選定のプロセスや、「らしさ」を伝えるためのこだわりについてうかがいました。

※1 OMO(Online Merges with Offline)…オンラインとオフラインの融合

株式会社ユナイテッドアローズ
マーケティング本部 広報PR部 デザイン課 VPグラフィックデザインチーム
グラフィックデザイナー 小林寿江さん

1. すでに決まっていた?ECサイトのフォント選び

ブランドの世界観が凝縮された店内で、美しく陳列された品々を手に取ってみたり、店員さんにコーディネートを相談したり…。ウキウキするような高揚感や丁寧な接客は、お店に足を運んで買い物をする大きな理由となります。

― 2022年3月、新しいECサイトがオープンしました。デザインを検討する上で、ポイントになったのはどのような部分でしょうか?

小林 リニューアルは、お客様が店舗と同じようなショッピング体験ができるようオンラインでのコミュニケーションの形を見直そう、というところからスタートしました。どうすればお客様が快適にお買い物を楽しめるのか、議論と検証を繰り返しながらデザインや表現を刷新しています。

― 小林さんはデザインに関わる部分を担当されたんですね。
 
小林
 はい。表現の方向性はCCO(チーフクリエイティブオフィサー)がまとめ、私がそれを可視化する形で進めました。空気感を伝えるために行間はゆとりをもたせ、見え方だけでなく言葉の表現についても「店頭では絶対そんな風にお客様とは会話しないよね」といったコミュニケーションを重ねながら、「UAらしさ」を突き詰めていく作業でした。
お客様がオンラインでお買物をする際、接客における「声」の役割を果たすのがフォントだと考えています。どんな声色で、どんな声量で、どれくらいの速度でしゃべるのか。その声で何を話すべきかを、小さなバナーに至るまでこだわって制作しています。

「ランキング」「スタイリング」などの⾒出しに游ゴシック(字游工房)を使⽤

― 今回採用された游ゴシックも、その「声」の役割を担っているわけですね。決定に至る経緯を教えていただけますか。
 
小林
 もともとUAには、字游工房さんと作った欧文のコーポレートフォントがあるんです。以前はビジュアルで表示される書体がバラバラで、「フォントがきちんと揃っていたら、UAという企業のキャラクターや人間性がもっとお客様に伝わるのに」と思い、会社に提案したんです。それがプロジェクトへと発展し、2016年にコーポレートフォントが完成しました。

ユナイテッドアローズ オリジナル欧文書体

小林 和文は全社的に游ゴシックを使っていたので、字游工房さんには「游ゴシックと混植する前提で、『UNITED ARROWS』のロゴ書体をベースにした新しい欧文フォントを作りたい」とお願いしました。
フォントに関して言えば、最初に「らしさ」を意識したのがこのときでした。当初は店舗のポップやサインで使う想定だったんですが、昨今オンラインのコミュニケーションが増えたことから、新しいECサイトでも游ゴシックを採用しています。

― UAらしさを表現する形として、コーポレートフォントと游ゴシックの組み合わせがすでに存在していたんですね。そもそも、游ゴシックが全社的に使われていた理由は何だったのでしょうか。
 
小林
 特に示し合わせたわけでもないのに、デザイナーは全員游ゴシックを使っていましたね。みんながそこにUAらしさを感じていたからだと思うので、指針として定めるようにしました。
一文字一文字が美しくて、もちろん可読性も高い。またこれは個人的な感覚かもしれませんが、ニュートラルだけれど凛としているというか、誠実な感じが安心感にもつながる。游ゴシックのそういった佇まいが、UAの持つ上質な感じや品の良さと重なる気がします。
コーポレートフォントもそうですが、継続して使っていくことが特に重要だと考えています。「この声だ」と決めたなら使い続ける、そこでようやく、UAらしさがお客様に届くのではないでしょうか。

2. コーポレートサイトはあえて違う見せ方に

― ECサイトの半年後には、コーポレートサイトを新しくされました。
 
小林
 実は、コーポレートサイトをリニューアルするのは10年ぶりなんです。以前は大半が文字で占められた企業サイトで、UAという会社の個性が感じられるものではなかったので、ほぼ新しく作り上げました。
デジタルネイティブな若い世代にも見てもらいたいという思いから、新しいサイトにはアニメーションを入れたり、数字などのパーツが回転するようにしたりと、随所に視覚的な遊び心を取り入れています。

写真を大きく配置したコーポレートサイトTOPページ

小林 ファッションを感じられる画像も各所に配して、ベースにはコーポレートサイトのために新たに設定した色を引いています。社名と同名のブランド(UNITED ARROWS)カラーがオレンジなので、以前は企業のカラーをシルバーグレーにして差別化を図っていたのですが、今回そこもリニューアルして、ピンク味のあるグレージュにしました。さりげないけれど、雰囲気のある色です。

PCサイトではブランド名にマウスを重ねると、丸いビジュアルがアニメーション表示される

― アパレル企業のサイトらしく、おしゃれで素敵です!
 
小林
 以前のサイトをご存知の方からすれば、「エエッ」というくらい変わりました(笑)。取引先や関係者の方々からは「すごく格好よくなったね」と言っていただき、評判はとてもいいです。


― コーポレートサイトにはTypeSquareを採用し、中ゴシックBBB見出ゴMB31を使っていただいていますが、このチョイスの理由は何だったのでしょう。
 
小林
 新サイトではサステナビリティの数値目標や取り組みを伝えるページも設けているんですが、こうした企業としての方向性を発信していく上でも、きちんとキャラクター付けをして、UAがどういった企業なのかがわかるようにする必要があると考えました。
ECサイトはそれぞれの世界観を持ったブランドの集合体ですから、それらを俯瞰(ふかん)してまとめ上げる立ち位置として游ゴシックを設定した部分もあるのですが、コーポレートサイトでは「UA社を一人の人間として表現してみよう」と。フレッシュで、なおかつ個性もあるキャラクターを打ち出し、あえてECサイトとは違う見せ方にすることで企業としてのUAを表現しています。
 
― ブランドと企業とで差別化を図るにあたり、フォントもECサイトとは別で検討する必要があったのですね。とりわけトップページのステートメントに使われている中ゴシックBBBが印象的です。


トップページにあるステートメントの一部

小林 サイトのリニューアルに合わせて、今回新しくステートメント(宣言・声明)を作ったのですが、まずはこのメッセージをどんな書体で伝えるかが大きなテーマでした。
実際にいろいろなフォントでテキストを打っては眺めて、検討を重ねました。その中で、中ゴシックBBBは俯瞰すると整然としているんですけれど、一文字一文字を見るとすごく個性があって。全体的にひらがなは小ぶりな印象なのに、意外と「の」が大きいような…。そのあたりがUAらしいのかも、と感じて提案しました。
 
― 一見整っているようで…。
 
小林
 実はキャラが濃いという(笑)。全体像は凛としているけれど、働いているスタッフは一人ひとり強い個性を持っている、というところにつながるのではないかなと。UA社で働く人たちがそうであったらいいな、という想いもあります。
 最初は違うフォントが候補に挙がっていたのですが、どこかしっくりこない感じがあって、CCOとも話し合い途中で見直しました。明朝体を試したり、デザイン性の高いフリーフォントも検討したりしましたが、ステートメントの文章を表示させると、クセが強すぎてちょっと違うな、と。最終的に中ゴシックBBBへたどりついて「これだ!」となりました。

― 同じ文章であっても、フォントひとつで受け取る印象が大きく変わりますよね。
 
小林
 文字で伝える表現はやはりフォントに頼る部分が大きいので、その重要性は感じています。
 
― 実装面ではいかがでしたか。
 
小林
 私は担当外なのでシステム担当に聞いた話になりますが、TypeSquareは管理画面で指定タグを埋めるだけだから、作業もシンプルで早かったと話していました。表示速度に関しても問題はありません。
 
― ECサイトは游ゴシック、コーポレートサイトでは中ゴシックBBBが「声」になりましたが、今後はそれぞれのサイトで使い分ける形になるのでしょうか。
 
小林
 そうです。複数のブランドを包括して横串を通し、ブランドを立たせるような性格のものはECサイトと同じ游ゴシック、コーポレートのキャラクターをしっかり出していくものには中ゴシックBBBを使っていく予定です。
 
― 先ほど「一度決めた声は使い続けることが大事」とおっしゃっていましたね。長いおつきあいになるであろうフォントを、モリサワから選んでいただいたのは嬉しい限りです。
 
小林
 デザイナーとして入社してもう17年くらいになりますが、最初からずっとMORISAWA PASSPORT(※2)にお世話になっております。その信頼感で選びました。今後ともよろしくお願いします。

― 光栄です!こちらこそよろしくお願いします…!
  

※2 「MORISAWA PASSPORT」は2028年度にサービス提供の終了を予定しています。これに伴い、新規・更新のご契約受付を順次終了します。今後は、後継サービスである「Morisawa Fonts」をご利用ください。

今回うかがったお話から、自ら提案してコーポレートフォントの導入を実現し、妥協のないフォント選びをする姿に、小林さんのデザイナーとしてのプロ意識の高さと、フォントへの深い愛情を感じることができました。
 
ユナイテッドアローズの「声」が気になったという方、ぜひ各サイトをのぞいて、耳を傾けてみてはいかがでしょうか。

みなさんからのスキやコメント、お待ちしております。

ユナイテッドアローズ公式通販(ECサイト)

https://store.united-arrows.co.jp/

株式会社ユナイテッドアローズ 企業サイト(コーポーレートサイト)

WEBフォントの記事をもっと読みたい方へ


みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!