Webと誌面、"両方で使える"フォントを選定

アドビシステムズは2日、クリエイター向けイベント「Adobe MAX Japan 2016」を開催した。

現地では多種多様なセミナーが行われたが、本稿ではフォントベンダーのモリサワがモデレーターを務め、資生堂や最新ガジェットでのフォント選びの実例が解説された講演「Webや映像を一段レベルアップするフォント選びの極意」の模様をお届けする。


「Lyric Speaker」には「リュウミン」「A1明朝」などモリサワのフォントが使われている

今回紹介された事例は、資生堂の企業文化誌「花椿」のWebサイトのリニューアル、そしてクラウドファンディングサイト「indiegogo」でサクセスしたことなどで注目を集めた、歌詞が表示されるスピーカー「Lyric Speaker」の2件。どちらもモリサワのフォントが使われており、「Lyric Speaker」においては歌詞を表示するフォントの選定にモリサワの助言が活かされたという。

「今の女性」に読んでもらうためのWeb改修

事例として挙げられたWebサイト版「花椿」のルーツは、資生堂の企業文化誌「花椿」。約78年の歴史を持つ同社の企業文化誌で、商品である化粧品にまつわる情報のみならず、生活文化全般を取り扱っている。


過去の「花椿」表紙。中にはそのルーツになった「資生堂グラフ」のものもあった		資生堂　エグゼクティブクリエイティブディレクター・澁谷克彦氏


澁谷氏がアートディレクションを務めた「花椿」の表紙

2012年から同誌のアートディレクションを担当している資生堂のエグゼクティブクリエイティブディレクター・澁谷克彦氏が登壇。創刊時の貴重な表紙や、長年同誌のアートディレクションを担当してきたグラフィックデザイナー・仲條正義氏について語った後、「テイストは(編集長によって)変わってくるが、企業広報誌である以上、企業理念に沿った誌面構成になっている」と説明した。


直近の「花椿」から一部のピンナップやコラムなどのビジュアルが紹介された


資生堂の企業理念「私たちは、多くの人々との出会いを通じて、新しく深みのある価値を発見し、美しい生活文化を創造します」	「花椿」用のタイポグラフィ画像

ここからは、リニューアルを担当したワンパクのアートディレクター稲葉政文氏が、資生堂と共同で行った改修フローを解説した。

まず、「花椿」が抱える現状の課題を洗い出す作業に3～4カ月を費やした。ターゲットを改めて考えた時、リニューアル前のWebサイトの訪問者は多くが男性で、20代女性の認知率が非常に低い数値だったという。稲葉氏は、「花椿」がエディトリアルデザインの"お手本"と目され、デザイナーがサイトを見に来ていたことからこうしたユーザー分布になっていたと語る。


ターゲットの再設定のために作ったペルソナ」	ワンパク　アートディレクター稲葉政文氏

ここから「20代女性の認知度をあげる」という命題を設定し、ペルソナを作ってアプローチすべきターゲットを検討。想定ユーザーと目される人との座談会を設けるなどして特性を調査した。その後、ブランドフレームワークを使って「花椿」というブランドを分析した。


中心にある「粋」というキーワードは、分析の結果あらわれた単語で、創刊から今までずっと「花椿」のバックボーンにあったブランドのコアバリューだと位置づけた	これまでは誌面からの発信に偏っていたコミュニケーションを、読者との相互コミュニケーションにより"粋"を広げるオープンなやりとりへとシフトしていくという方向性を打ち出した

「花椿」Web版の現在のデザイン

こうした方針をもとに、デザインはどうしていったか。20代女性という新ターゲットを想定した場合、既存のエッジーなテイストには拒否反応を感じる人もいると判断し、シンプルな方向でまとめることを決定。可読性、特にスマートフォンにおける読みやすさを重視した。

採用されたフォントは、見出しが「本明朝」、本文が「秀英角ゴシック金」。選定基準は、「紙にプリントしてもきれいに読める、モバイルで読みやすいもの」。例えば、Webだけで展開するなら作りの大きいフォントが栄えるが、紙面に反映すると大味になってしまうそうだ。


採用したフォントの表示例

また、可読性の面で見出しもゴシック体から選ぶか迷ったこともあったが、「花椿」が"お姉さん"的パーソナリティを持つブランドなので、気品を演出するため明朝体から選出した。こうした稲葉氏の解説に付け加え、澁谷氏は、「書体選びは知性とエレガントの具合が難しい。エレガントを追求すると知性が消え、知性を出し過ぎると堅苦しくなる」との見解を述べた。

Webフォントだから出来たレイアウト

今回用いられた「本明朝」などの有料フォントをWeb上で表示する場合、画像として表示するか、Webフォントサービスを用いてテキスト情報として表示するかを選択するのが昨今の状況だが、「花椿」サイトでは、PC/スマホ両方に、モリサワのWebフォントサービス「TypeSquare」が導入されている。

稲葉氏は、「Webフォントは(現代のWebデザインにおいて)必須だと思っている」とコメント。PCとスマホで見え方を変えないというデザイン方針は、Webフォントの利用なしには不可能だったという。「花椿」のサイトでは、見出しとなる段落冒頭の文字がかなり大きく表示されていることを示した上で、Webフォントを使わずこのレイアウトを実現するのは厳しいことに言及した。


資生堂のデザイナーは、入社すると約1年にわたり、この「資生堂書体」の描き方を習得するために、アナログ画材を使った練習を行う

「花椿」のサイトをデバイスの標準フォントにするとまったく見え方が変わってしまう、と語った稲葉氏。フォント、さらに言えばタイポグラフィがWebデザイン、さらには「花椿」そのものに影響を与えているとして、資生堂のデザイナーが今も手描きで制作している「資生堂書体」の紹介を行い、場が締めくくられた。