『VOGUE JAPAN』が選んだサイトの価値を高めるリニューアルとは？

「Web担当者Forum ミーティング2015 秋」の「『VOGUE』が選んだサイトの価値を高めるリニューアルとは？」セッションでは、モリサワの高桑 剛氏が、『VOGUE JAPAN』のサイトリニューアルでモリサワのWebフォント「TypeSquare」を採用した理由や効果を、コンデナスト・ジャパンの小林 直樹氏に聞いた。

株式会社モリサワ TypeSquare営業課 課長代理 高桑 剛氏（左）と
コンデナスト・ジャパン Techチーム Digital Design Lead 小林 直樹氏（右）

『VOGUE JAPAN』サイトリニューアルのコンセプトは、この5つ

『VOGUE JAPAN』は、2014年4月に、サイトを全面リニューアルした。

サイトリニューアルのコンセプトは、「ホームページが新しいWebメディアとして生まれ変わる」だ。以前はニュースサイト的に所狭しと情報が掲載されていたが、雑誌の中身のように、『VOGUE』の世界観をクリエイティブに表現できるサイトを目指した。

インフォメーションサイト風からより雑誌ブランドサイトに近いポジションを目指した。

リニューアルのポイントは、以下の5つだ。

①ブランディング強化

ビジュアルを大きくとって、『VOGUE』の世界観を打ち出す。また、収入源は広告なので、ビジュアルを大きくとることでブランディング目的の広告主のニーズを反映した広告商品を作れるようにした。

②エンゲージメントと回遊性の向上

エンゲージメント強化のために、エディターが気になる物や話題を毎日交代で紹介するなどの、デイリーで配信できるコンテンツを増やした。回遊性向上のためには、ひとつの記事に対して関連する記事や写真、動画などのレコメンドをたくさんつけた。

③CMSの変更／データ構造の付与

コンテンツを増やすためには、使いやすいCMSが必要なので改良した。また、キュレーションしやすいように、各記事にタグ情報を付けるようにした。

記事に複数のタグ情報をつけると、後からまとめ記事などが作りやすい

④ソーシャルへの対応

CMS改良にあたり、ソーシャルへも自動的に配信できるようにした。記事ごとに、いつソーシャル自動投稿するかを設定、良いタイミングでのソーシャル投稿数が増えることで、流入が増える結果になった。

⑤モバイル訴求

女性サイト全般に見られる傾向ではあるが、『VOGUE JAPAN』のサイトは、モバイルの比率が高く、PCでは大きな画像を使うが、モバイルではシンプルにサムネールとリスト表示に絞って表示する。

ソーシャル対応とモバイル訴求

サイトリニューアルで行ったのは、次のようなことだ。

• ひとつひとつのセクションを大きめにとってスクロールで見せる縦長のページに
• 特集などは動きのあるコンテンツで、雑誌だけでは表現できない世界観をつくる

Webフォント採用の理由は、印象・マルチデバイス・工数

前章で『VOGUE JAPAN』サイトのリニューアルコンセプトを5つ述べたが、それらに加えて、Webフォントを採用したことも重要だ。

リニューアルでWebフォントを導入した理由を問われると、小林氏は「フォントが違うと印象が違う」と言って次の図を見せた。

フォントが違うと印象が違う

『VOGUE JAPAN』が選んだのは、一番上のゴシックMB101だ。その理由として以下の点を挙げた。

• さまざまな話題を扱うので、ある程度ニュートラルなものがいい
• 説得力のあるフォント
• 雑誌がメインなので、雑誌っぽいフォント（採用したゴシックMB101は、雑誌の表紙でも使っている書体）

また、Webフォントを使えば、デバイスが違ってもユーザーに対して同じブランドコンセプトを表現できる。

さらに、テキストを画像化する手法と違って、クリエイターの負担も軽減できる。

日本のサイトでは、Webフォントを使っているケースはまだ少ない。しかし、欧米ではメジャーな大企業ほとんどが使っていると言っても過言ではない。

米国ダウ工業株30種企業 Webフォント利用状況（2015年6月 (株)モリサワ調べ）

『VOGUE』は世界中で雑誌を発行し、それぞれWebサイトもあるが、ほとんどのサイトで複数のWebフォントを利用している。日本でも、ゴシックMB101と、欧文フォント2種類（うち1種類はモリサワ）の3つを使うことにした。Webフォントはたくさん存在し、使用方法もいろいろあるが、『VOGUE JAPAN』はモリサワの提供するクラウドサービスのTypeSquareを採用した。

モリサワのTypeSquareを選んだ理由は、以下の3つだ。

• 多くの書体を使える
• HTMLにTypeSquareの利用を宣言するタグを1行追加してCSSにフォントを指定すれば表示が可能と、簡単に使える
• 社内デザイナーだけでなく外部の制作会社に依頼することも多いが、テストサイトのURLを登録するだけでフォントを使える

TypeSquareを選んだ理由

Webフォントの導入で工数削減、SEOに効果あり。リニューアル後女性ファッション系サイトNo.1に。

モバイル対応ではレスポンシブデザインにすることが多いが、今回のリニューアルではレスポンシブにはしていない。その理由を問われると小林氏は、次のように答えた。

PCで見る人とモバイルで見る人は、目的や状況が全く違うと想定して、モバイルでは過度な演出はやめて思い切ってシンプルに作ろうという思惑があった

改修を行う時も、レスポンシブの場合はPCとモバイルのバランスをとらなければならないが、個別デザインならモバイルに最適な改修ができる。

もうひとつの大きな理由は、美しい広告のためだ。出稿しているのは広告クリエイティブにこだわりを持つ一流のファッションブランドだ。レスポンシブデザインでよく使用されるカラム落ちの手法なので、広告の見える位置が変わると、広告自体の価値が下がってしまう。そこで、個別デザインにする方が広告主にとっても『VOGUE』にとってもお互いに有益であると判断した。

ただし、特集やタイアップなどで、コンテンツをレスポンシブデザインで作ることもある。レスポンシブにするかどうかは、ユーザーにどうプレゼンテーションしたいかによって選べばいいということだ。

サイトリニューアルの効果として、小林氏は以下の2つを挙げた。

①制作時間の削減し、クリエイティブに時間をかけられるように。

これまでは画像テキストが多かったが、アイコンもWebフォントにするなど制作負荷が大幅に軽減された。これにより、デザイナーはUIなどもっとクリエイティブなことに時間を使えるようになった。

②テキスト増加によりSEOに効果があった。

ビッグワードは上位をキープ、テールワードは順位が向上した。

SEO上重要な、記事タイトルや見出しなどが画像ではなくなりテキストボリュームが大きく増えた。

TypeSquareは、2012年2月にサービスを開始した当初、文字の表示が遅いなど評判がよくなかった。その後さまざまな改良の結果、今では問題はなくなり、『VOGUE JAPAN』のようにブランディングで利用されるケースも増えてきた。レスポンシブデザインに適していることから、レスポンシブにするためにWebフォントを採用するというケースもある。その他、最近では新聞系サイトでの利用も増えている。デバイスフォントではなく明朝系のフォントを使うと、ぐっと新聞らしくなる。

印刷物でモリサワのフォントを使っている企業も多数あると思うが、もしそれがMORISAWA PASSPORTプランという契約であれば、追加料金なしにWebフォントも使える。覚えておいて損はないだろう。

MORISAWA PASSPORTプラン

• ファッション・ビューティ・セレブの最新情報｜VOGUE JAPAN
• モリサワ TypeSquare [タイプスクウェア]
• MORISAWA PASSPORTプラン