WD Online

プロモーションの舞台裏 Web Designing 2016年1月号

ビジネス展開を見越し運用体制の強化を図った“マーケティングツール”サイト

国内有数のフォントメーカー、(株)モリサワが約8年ぶりにコーポレートサイトをリニューアル。マーケティングツールとして機能するサイトへの脱皮を図り、コンテンツから基幹システムまで全面的に刷新した。随所に見受ける効用について、制作関係者にインタビューを行った。

(株)モリサワ コーポレートサイト
□クライアント:(株)モリサワ
□企画/制作:(株)ワンパク

マーケティングツールとして再始動

2015年10月1日より、(株)モリサワがコーポレートサイトをリニューアル公開した。全ページにWebフォントを採用し、サイト自体がWebフォントのモデルケースとなることを目指している。レスポンシブWeb対応で、PC用とスマートフォン用それぞれに最適なWebフォントを使い分けている(01)。フォント製品に特化した以前のサイト構成を改め、時代状況の変化に対応できるフルモデルチェンジを決断したという。

「2012年からサービスを始めたWebフォントの本格的な訴求を行えることと、電子書籍をはじめフォント以外の自社製品もきちんと訴求できること。これらの実現を目指して全面的にリニューアルしました」(モリサワ・阪本圭太郎氏)

 

3ebdbe726c897f168ef2594f864668fe.jpg
01 全面的に「Webフォント」を採用した意図
2007年以来のリニューアルを実施。全ページでWebフォントを採用することで、このコーポレートサイトそのものが“Webフォントのモデルケース”として機能するように配慮されている。PC版には可読性に優れたUD書体(ユニバーサルデザインフォント)を、スマートフォン版にはスクリーン幅が狭いことを考慮してやや縦長のコンデンス書体を採用し(右)、Webフォントを使い分けて利用している

 

2013年の暮れ、数多くのコーポレートサイトを手がける(株)ワンパクとパートナーシップを締結。バックエンドのシステム開発も含めたワンパクとの二人三脚の体制がスタートした。

「“モリサワ”という企業のブランドについて、クライアントと徹底的に議論することから始めました。そこで共有したことが、“文字を通じて社会に貢献する”というクライアントの企業理念を体現することでした」(ワンパク・阿部淳也氏)

「ブランドのあり方を捉えなおしながら、各事業部を通じて約80名の方々にヒアリングを行い、現場からのビジネス要件とユーザーニーズを洗い出しました。また、柔軟な対応を可能にする基幹システムへの仕様変更も進めていきました」(ワンパク・原冬樹氏)

その結果、このサイトそのものがWebフォントのモデルケースという「マーケティングツール」へと生まれ変わったことも成果の一つ。だが、本サイトの見所はこの点だけにとどまらない。

 

ユーザー目線ありきに情報量を改善

ブランドのあり方や要件定義を巡る議論は、半年以上かけてじっくり行われたという。目指す姿は、マーケティングツールとして機能できること。その実現に向けて共有されたもう1点が、ユーザー目線に基づく設計だ。

「スマホでもストレスなく閲覧できるために、抜本的な情報構造の見直しが必然でした。その実現を支えた一つが、ヘッダに設置したプルダウンメニューです(02)」(ワンパク・阿部氏)

 

064ba232d61c403315ecc647e62c660e.jpg
02 行き先が明快なプルダウンメニュー
プルダウンメニューには事業戦略に沿ってカテゴリーを6つ用意。「企業情報」ページの場合(A)、その中に配置された4つのコンテンツに対して、任意の情報先に遷移しやすいようにグラフィカルなアイキャッチも配置(B)。そのほかもコンテンツ数に応じてアイキャッチを用意(C)。表に出しているコンテンツは一読してわかるボリュームに抑え(D)、別途、詳細ページを用意している

 

「ページのどこからでも主要となるコンテンツへ遷移できるようにしました。PC版ではメガメニューを採用し、ダイレクトに行き先を見つけられる設計にしています。企業サイトとして提供すべき情報を担保すると同時に、ユーザーが項目内容を想起できるよう、アイキャッチを効果的に使用し、ユーザーが直感的に把握できるように配慮しました」(ワンパク・原氏)

遷移先には、要旨をまとめた適量のコンテンツを用意。つまり、最優先に重きを置く「一読で内容を把握しやすい構造」を貫いている。

 

ビジネス展開を視野にツール開発

Webフォントや情報構造の再構築という観点とともに、本サイトで印象深いのは、冒頭に用意されたオリジナルムービー。映像は、老若男女を問わず、文字が人々の暮らしと直結しているシーンについて情緒的に描いている。けっして長くない再生時間も好印象だ(03)。

 

3d805806c4b42eb01770e62a23fa3dff.jpg
03 「Everywhere」と名づけられたムービーを導入した理由
トップページは、冒頭にムービーコンテンツを置き、スクロールすると自社製品にまつわる概要を掲載している(A)。ここで目を惹くのは、BtoBサイトには珍しい、やわらかなトーンが印象的なオリジナルムービーの存在だろう(B~D)。 「ユーザーにとって、最初に目に飛び込んでくる要素です。けっして押しつけがましくならない表現で、“日常的に人は文字や書体に触れている”ということを実感していただける状況を映像化しています」(ワンパク・阿部氏)

 

「文字は水やガスなどと同じ“情報”のインフラという考えのもと、生活に欠かせない“文字”という存在について、説明的にならず伝えやすいムービーを採用しました」(ワンパク・原氏)

暮らしにかかわる“文字”について、まずはユーザーに気づいてもらうことが、モリサワという企業の姿勢を広めていくことにつながる。

「肝心なのは、一人ひとりのユーザーがモリサワについて具体的に想像しやすくなっていただくことです。ワンパクさんとの議論の積み重ねで、双方が納得して行きついた方向性が、自社製品の紹介要素を盛り込まず、文字が日々の生活にいかにかかわっているかを感じとっていただくことでした」(モリサワ・阪本氏)

また、フォントメーカーとしての真骨頂を感じさせてくれるのが「フォントツール」(04)。この完成度の高さは、一度試せば実感できるだろう。任意に入力したテキストに対して、選んだ書体がリアルタイムに表示されるからだ。

 

ba042f8d71ca511d5de98b4578a58a97.jpg
04 軽快に動作するフォントツール「書体見本」
希望のフォントの種類を選択すると(A)、入力したテキスト(「例:ネットビジネスを加速させる」)が検索候補のWebフォントに変換されて確認できる、というフォントツール(B)。 「フォントメーカーとしての生命線を担うツールだと思っています。弊社でフォントシステムに関するバックエンドを再構築して、より自然な挙動が実現できる整備を行いました。特にスマホ上でも、手軽に使えることが実感していただけるはずです」(ワンパク・原氏)

 

「クライアントの財産となるツールになるよう注力しました。緻密な設計に基づきシステムを刷新し、APIも開発しました。アプリ化をはじめ、将来的なビジネス展開を見越して、汎用性のある開発を行いました」(ワンパク・原氏)

 

ECストアとの統合も決定

ユーザー目線を意識した構造改革は、ほかにも随所に見受けられる。グローバルサイトは、国や地域の実状にあわせて、シンプルな構成で実現。またサポートページでは、ワンパク独自のCMSを導入。フォーム対策で用意した「よくある質問」の内容をはじめ、社内担当者がいつでも更新できる設計へと仕様を変更(05)。実際にアクティブな運用が行われている。

 

885a671a92c4a13fae772abc2609b554.jpg
05 独自CMSを導入し、アクティブな運用体制を確立
アメリカ、韓国、台湾と、現地法人を置く国や地域向けのグローバルサイトは、現地の実状にあわせてシンプルな構成で用意(A)。そのほか、ワンパク独自のCMSを導入し、サポートページ内の電話の混雑状況や(B)、問い合わせフォーム対策として「よくあるご質問」内容(C)を社内担当者がつねに更新できる設計に。自社製品にかかわる箇所には詳細ページや購入への導線(コンバージョンボタンの設置)も確立されている(D)

 

「このサイトで実現したいのは、マーケティングプラットフォームとして機能することです。時代の変化に対応できる装置を開発し提供するだけでなく、今後クライアントとともに、このコーポレートサイトを育て、飛躍させることが、私たちの使命です」(ワンパク・阿部氏)

2015年10月から始まったモリサワの新たなスタートは、年内に第二弾を迎える予定だ。

「弊社のECサイトを、12月半ばからコーポレートサイトに統合していく予定です。これもワンパクさんと、バックエンドから一気通貫して設計と開発を行ってきた取り組みの証です。いかにコーポレートサイトをマーケティングツールとしてワークできるか。今後の効果検証にも大きな期待を寄せています」(モリサワ・阪本氏)

 

1d8e66abc4a52d9bbdac4fd4bd561174.jpg

 

535103d0659f763b9d78fad2202380f8.jpg
Interview with>> 左から(株)モリサワで経営企画部マーケティング課に所属し、今回プロジェクトマネージャーを務める阪本圭太郎氏、クリエイティブディレクターを務める(株)ワンパク 原冬樹氏、プロデューサーを務める同社阿部淳也氏

掲載号

Web Designing 2016年1月号

Web Designing 2016年1月号

2015年12月18日発売 本誌:1,530円(税込) / PDF版:1,200円(税込)

グロースハック/「キーワードツール」活用講座

サンプルデータはこちらから

■ 特集:今日から始める“成長戦略”グロースハック
 世界の急成長サービスが特集 実践するデジタル時代のマーケティング手法

近年、「グロースハック」という言葉を耳にすることが増えてきました。しかし、その本当の中身を正しく理解している人はあまりいないようです。チップス? テクニック? スタートアップ企業向けの秘密のノウハウ? いえ、そうではないんです。グロースハックとは、これからのデジタル時代に必須の「マーケティングの考え方」のことなのです。今回はさまざざな角度からグロースハックの考え方を紹介していきます。

■ 集中企画:ネットビジネスを有利にするための「キーワードツール」活用講座
 SEOやリスティング広告対策に! 事前にユーザーの検索行動がわかる

「キーワードツール」は、インターネットにおける検索行動量を手早く調査できるツールです。つまり、あるキーワードが「どれくらいのユーザーにリーチするのか」を事前に推定できます。ここでは、ツールの概要とともに、その活用術について解説します。

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
GREEN NAME/LIFE IS A GIFT/ORCHESTRE DE PARIS/KAI FACT magazine/Deja vu/くばら あごだしチャレンジ/キリンメッツ スター・ウォーズ/google STARWARS/LACOSTE-F/W OUTWEAR/Christmas Express/めぐみ野 スペシャルコンテンツ「トマトになった男の子」/Japan Sumo Cup/沖縄戦 全記録|NHKオンライン/Typetone

■ ビジネス・EC
 □ ECサイト業界研究
 カンバセーションコマース:Facebook を利用した会話によるEC

 □ 月刊店舗設計
 ULYSSES:適切な場所での情報発信がビジネスの可能性を広げる

 □ モバイルビジネス最前線
 MYALO:禅×脳科学によるストレスコントロール「マインドフルネス」をアプリで学ぶ

 □ 知的財産権にまつわるエトセトラ
 作者以外にも著作権は認められる

 □ Bay Area Startup News
 画像やテキストを判別して自動でサイトをつくる「The Grid」

■ マーケティング・プロモーション
 □ サイト改善基礎講座
 ユーザーインタビューで有効なコンテンツを見定める

 □ ハギハラ総研
 日本人の半分はまだECを利用していない

 □ デジタルプロモーションの舞台裏
 ビジネス展開を見越し運用体制の強化を図った“マーケティングツール”サイト

 □ 行動デザイン塾
 ブームは「なじみの行動」が火付け役に

 □ 課題解決のためのUI実装講座
 カテゴリーが多いスマホサイトで役立つ「スワイプ対応タブメニュー」

 □ 解析ツールの読み方・活かし方
 買収したサイトを最小限のコストでリノベーションする

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]誰のためにつくるのか?: John Lewis Christmas Advert 2015 眞鍋海里
 [デジタルプロモーション]「ノーデジタル」の拡散:The Gun Shop 築地 Roy 良
 [Webサービス]上質な表現の「場」:Medium 仲暁子
 [IoT]なんとなくの心地よさ:kizuki. 神谷憲司

 □ モノを生むカイシャ
 1→10drive:「体験」をデザインするプロ集団

 □ 清水幹太の「Question the World」
 Julia Kaganskiy:美人マッドサイエンティストによる、やばい実験計画

 □ ツクルヒト
 榊原澄人:「フレーム」を超えて動き出す世界

 □ 最果タヒの「詩句ハック」
 第19回 あみだく詩゛

 □ デザインにできることMonologue
 Vol.143 パブリッシュ

 □ エキソニモのドーン・オブ・ザ・ボット
 コンピュータに「嗅覚」を与えるチップがインターネットのニオイ体験を可能に!?

■ インフォメーション
 □ Topics
 突破クリエイティブアワード2015/ココノヱPresents らくがきミュージアム/第19回 文化庁メディア芸術祭/BB-8 by Sphero

 □ Movement&News
 水族館+動物園+美術館?!「NIFREL(ニフレル)」オープン!/「スター・ウォーズ」のキャラクターや乗り物を使った作品を発表するフランス人写真家の日本初個展/数万枚もの写真をコラージュして1枚の地図をつくりあげる西野壮平 ほか
 [アドテック東京 2015]属性から個人へ。エンゲージメントを高めるトレンド/[Adobe Falsh Professional]時代とユーザーの潮流にあわせ「Animate CC」として新生/Twitter Japan担当者が語るTwitter広告成功のために必要なこと ほか

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています