works

作品サブ画像1
作品サブ画像1
作品サブ画像2

FONTPLUS

CD

SPA

アクセシビリティ

ウェブサービス

タイポグラフィ

ブランディング

リニューアル

レスポンシブ

豊富な和文書体をメーカー横断で提供しているウェブフォントサービス「FONTPLUS」のリニューアルにあたり、クリエイティブディレクションを担当しました。

FONTPLUS

このプロジェクトでは、「サービスのリブランディング」をサービスサイトのフルリニューアルという形で実施しています。私は具体的なデザインは行わず、ユーザー体験の再設計・戦略立案・コンセプト定義といった方針立てと、それに基づく全体のディレクションについて関わらせて頂きました。

サービス価値の再定義

大幅な事業リニューアル(和文書体中心のサービスラインナップから、Monotype社との提携による複数ファウンダリー・多言語対応を単体で実現)にあわせ、サービス価値の再定義から体験設計・デザイン・コンテンツ制作・最終インターフェイスの定着までをパートナー各社と実施しています。

これにあたり、マニフェストを「Web Typography Standards」と定義しました。これは、Web Standards = ウェブ標準 の考え方を意識したものです。そして「Fast UX:とにかく早く/速く使えて、フォントが見る人まで最短で届くユーザー体験」をコンセプトに、思い切ってサイトトップを「選ぶ/試す/共有する」ことに特化したウェブアプリケーションにしています。ウェブ制作に関わる人が、最速で仕事を終えるために必要な体験を凝縮させよう、と試みました。

ためし書き画面
サイトトップである「ためし書き」ページ。SPAとして実装し、サービスユーザーは階層をたどることなく体験が完結し、未会員のユーザーはお試しができる設計。このサービスでできることを集約しています。

またデザインに関しては、豊富な書体それぞれの持つ魅力・特徴が映え、エモーショナルな喜びを際立たせるために、できる限りユーザーに画面上のコントロールを預け・主張せず・道筋だけを残すようなたたずまいを志向しています(これは同僚のアートディレクターによる素晴らしい仕事です)。

    アートディレクション上のポイント

  • バーティカルリズムを駆使したコンポーネント設計
  • カウンタースペースを大胆に使い、文字だけで書体の特徴を表現
  • 色やサイズなどのパラメータをできる限りユーザに預ける

グラフィカルなタイポグラフィ表現とウェブアクセシビリティ・ユーザビリティのバランスをとりつつ、適切なコンテンツディレクションを行い、技術と向き合いサービス体験全体を高いレベルに定着させる。そのために、クライアントやパートナー各社との連携を通して、プロトタイピングや議論、地道な折衝を繰り返し、私の考える「デザイン」を試みました。

    全体ディレクション上のポイント

  • サービスが目指す価値観の提示
  • ユーザー価値=コミュニティ価値と捉える
  • ディテールとコンセプトの繋がりを明確に
  • プロフェッショナルによる衝突
  • ポエム駆動開発

ウェブ媒体とフォントのいまあるべき姿を検討し、Discover Typography、Share-Ability というキーワードとともに、サービスサイト全体の体験をデザインしています。

マティスV のフォント詳細画面
マティスV のフォント詳細画面。文字サイズやサンプルテキストを見ながら、詳細なフォント情報が閲覧できる
Bauer Bodoni のフォント詳細画面
欧文は Monotype 社の高品質なラインナップが順次追加される。これはBauer Bodoni。背景色と文字色を自由に変更することも可能。
フォントカタログ一覧画面
「フォントカタログ」の一覧画面。インクリメンタルな絞り込み検索やテキストの置き換え・サイズ変更などをしながら書体の比較ができる。
フォントカタログ一覧の本文ビュー
見出しだけでなく本文向けのビューモードも用意。段組みの状態で、文字サイズと行間隔のバランス検証もできる。

生まれ変わったFONTPLUS画面
コンテンツページの画面。サービス概要、ご利用方法、導入事例、ニュース、FAQ、フォントランキング。
サービスのビジョンをまとめたページ、記事系のページなど、全コンテンツの再構成とリライトを実施。
Twitterでシェアする様子の画面
キーワードのひとつである Share-Ability(共感可搬性)をサイト中の細かなディテールに反映。セクションごとのパーマリンク生成を実装したほか、「ためし書き」した結果は一意な再現URLを発行でき、プロジェクト関係者との連携だけでなくそのままSNSへの共有も可能。遊びの要素も。

 

client :

ソフトバンク・テクノロジー株式会社

creative direction :

関口 裕(Nippon Design Center, Inc.

art direction, design :

後藤 健人(Nippon Design Center, Inc.)

web application development :

片岡 聖, 河合 伶, 今野 聖也, 清水 規行, 谷藤 圭一, 森 浩一郎, 森 淳(Uniba Inc.

front-end development, back-end development :

安田 祐平, 安友 裕秋, 鈴木 丈, マルコ・ソラッツィ(SHIFTBRAIN Inc.
仲村 直(account management : SHIFTBRAIN Inc.)

content direction, planning, writing

土屋 綾子(https://tsuchir.com

UX design, planning :

鈴木 健一(Standard Inc.

design :

霍田 智子(Nippon Design Center, Inc.)

account executive :

杉本 瑞樹(Nippon Design Center, Inc.)
 


担当時期:2018年〜

一覧ページへ