サービスの魅力を最大限伝えるWEBアプリへリニューアル！フォントのサブスクリプションサービス「LETS」

今回はフォントサービス「LETS」のリニューアルでしたが、PIVOTが主にしたのは、①非会員向けのサービスプロモーションページと、②会員向けアプリケーションのページ、２種類です。

非会員向けのプロモ―ションページ、会員向けのアプリケーションページ、両者は大事にすべきポイントがそれぞれ違います。前者はサービスの魅力が伝わらなければいけませんし、後者はユーザーが使いやすい、操作しやすいデザイン配置である必要があります。

非会員には、何を訴求すべきなのか、サービスを理解してもらうデザインやワーディングをどうするべきなのか。それを探るために、非会員向けのページ作成にあたりユーザー調査を行いました。

まずは、ターゲットがどんな道筋をたどって会員登録までたどり着くのか、ターゲットがLETSをダウンロードするまでのシナリオをサービスブループリント※（エンドユーザーと、サービス提供者双方の行動フローを記した設計図）フレームワークによって作成し、最終的にデザインのプロトタイプを４種類準備しました。

そのうえで「どんな機能があれば利用してもらえるのか？」「新規ユーザーが欲しいサービスは？」といった具体的なユーザー調査を再度行いました。

はい、調査をしたことでよりターゲット像が固まり、サービスの魅力がよりはっきりしましたし、訴求ポイントも見えてきました。

高城ːそこから、カラーの設定や余白感のあり方、ページの印象をどう伝えるかなど、クライアントとPIVOT双方で吟味しながら進めていきました。

フォントサービスのプロモーションサイトだけあり、やはり“サイトから得る印象”はとても大切です。妥協せずに丁寧に制作したことで、随所にクライアントのこだわりが反映されたページになったと思います。

会員向けのページでは、使う人の目線に立って、全体的にフラットなデザインを心掛けました。デザインにおけるシャドウやエンボスなどをあえて入れないことで、主役であるフォントを集中して見ることができ、さらに直感性に優れたページに仕立てています。

河村：私たちも日ごろから業務でフォントを選ぶことが多いので、いつも以上に「使う人目線」には気を配れたと思います！（笑）

やはり「フォントの見せ方」ですね。

フォントは、いわば“クライアントの魅力を表現するもの”です。

ページを見た人に「このフォント使ってみたい！」という動機を促すようなデザインにしたいと考えていました。

クライアントと協議の結果、プロモーションページに使用するフォントは、クライアントの代表フォントともいうべき「筑紫明朝」を採用しました。

会員向けの「フォント管理ページ」にも力を入れましたね。

文字が最も美しく見えることを目指すため、

・コントラストを上げるために白い下地に文字は黒色を使用

・トメ、はらい、ハネがしっかり見えるようなデザイン

・文字と文字の間にスペースを持たせ、一文字一文字がじっくり見られる設定

そのほか、紙媒体を扱うデザイナーさんにも話を聞き、横書きだけではなく縦書きの見本導入を提案するなど、細かな点にも気を配りました。

開発全体を通して、「ターゲットの軸をぶらさないこと」は意識しましたね。また、ターゲット目線という話でいくとLETSのWEBサイト全体の構造も変更しています。設計する際にWEBサイトの構造変更も視野に入れてスタートしたのです。

既存のサイトは「どこに何のページがあるか少しわかりづらい」という課題感をクライアントも私たちも抱いており、「どこに何が書いてあるか一目でわかる」構造へブラッシュアップをはかりました。

▼リニューアル後のLETSサイト

LETSはどんなサービスなのか、どんなフォントが使えるのかなど、ターゲットが必要とするページによりアクセスしやすく、クライアントが持つさまざまなフォントの魅力も伝わる内容になったのではないかと思います。

ありがとうございます！

運用面でいえば追加ページが発生した際にクライアント側でも対応できるよう、モジュールを組んで制作していったのもひとつのポイントです。