機種が多くスクリーンサイズはバラバラ。そんなスマートフォンやタブレットに自社Webサイトをどう対応させるか。日々サイトと向き合うマーケティングやWebサイト運営の担当者にとっては悩ましい問題だろう。他社の出方や将来的な技術動向を睨みつつ、どうすべきか決めかねている企業が多いのではないか。

　そんな中、旗幟鮮明に「モバイルファースト」の方針を掲げて、グループの総合サイト「canon.jp」の全面的なモバイル対応を進めているのが、キヤノンだ。

「canon.jp」のパソコン向けサイト

「canon.jp」のスマートフォン向けサイト

　モバイルファーストとは、スマホでの利用を最優先に考えてサイトをデザインすること。ネット専業の企業が注目する新しいアイデアだが、国内大手企業では実現したところはほぼない。そんな試みにキヤノンは販売会社キヤノンマーケティングジャパン（MJ）と共同で取り組んでいる。

　サイトの全面刷新は4年ぶり。トップページや主要な製品情報ページの移行は3月にほぼ完了。2014年末までには残るページを含めて完全移行したい考えだ。

　モバイル対応が欠かせない業界と言えば、10～20代の若者や女性が顧客の中心となるアパレルメーカーやEC（電子商取引）企業などが思い浮かぶ。キヤノンも「EOS」や「IXY」といった製品ブランドを持ち、そうした顧客は少なくない。

　とはいえ、約3兆4800億円の連結売上高のうち51％はプリンターやカラー複合機などのオフィス向けビジネスが占める（2012年12月期）。デジカメなど消費者向けビジネスよりBtoB（企業間取引）企業としての色合いが強いのだ。

　そんなキヤノンがモバイルファーストにいち早く取り組むのはなぜか。サイト刷新を主導したキヤノンMJのコミュニケーション本部ウェブマーケティングセンターの増井達巳センター所長は言う。

　「例えば大型のカラー複合機など商品がBtoB向けでも、その商品を紹介するページを顧客が昼間に会社のパソコンから見ている、などと考えるのは大きな間違い。情報がまるで届かない可能性もある」

個人のスマホで業務情報を収集することも

　BtoB製品でもその特徴などを知らせるために動画やアニメーションを使うのは今や当たり前。しかし会社によっては社内のパソコンで、そうしたコンテンツが閲覧できない。情報セキュリティーの観点から表示するコンテンツの種類を制限しているからだ。実際キヤノンMJ自身が同様の方針を採っている。すると自分のスマホで仕事の情報を収集することもあるだろう。

　さらに、例えば複合機などの調達担当者が、夜は自宅からタブレットでデジカメのページを見るといったこともある。「もはや誰が、いつ、どんなデバイスからどのページにアクセスするか、企業が事前に想定することなど不可能」（増井氏）。だから消費者向けであれ、企業向けであれ、どんなデバイスからアクセスされても同じように情報提供できる環境が必要となる。

　サイト刷新前に実施したcanon.jpの強み・弱み、機会・脅威を評価する「SWOT分析」でも、弱みとして「マルチデバイス対応」が、脅威として「接触メディアの多様化」があると分かり、マルチデバイス対応の必要性を再確認したことも背中を押した。

キヤノンが実施した「SWOT分析」。「マルチデバイス対応」が出来ていないことが「弱み」という結果に

　増井氏は「目指したのは単なるマルチデバイス対応ではなく、モバイルファースト」と強調する。実際、リニューアルしたcanon.jpは、まずスマホでの表示に適したデザインの画面を作り、パソコンからアクセスした場合にもその同じ画面を見せるという珍しい方法を採る。

グローバルナビゲーションは廃止し、画面右上の「メニュー」からサイトマップなどへ誘導する

　スマホの小さい画面に最適化するため、グローバルナビゲーションは無くした。代わりに、画面右上に「メニュー」のリンクを用意し、クリック（またはタップ）すると現在表示しているページの階層、現在のページにあるコンテンツの一覧、サイトマップへのリンクなどを表示する。

　パソコンで見ると不自然なほどテキストが大きいが、スマホではちょうどタップしやすい大きさとなる。

　スマホありきで画面を作ることは、Webサイトのあり方の見直しにもつながる。画面が小さいため盛り込める要素は必然的に絞られる。少ない情報量で最大の効果をあげるため、画像やテキストをどう作るか、工夫せざるを得なくなる。それがcanon.jpの発信力アップにもつながるというわけだ。

レスポンシブWebデザインへの誤解

　今回のリニューアルは技術的にもユニーク。HTMLは1つで、画像やテキストなどもスマホで見ることを前提にした1種類のみ。パソコン向けもスマホ向けも画面の見た目はほとんど変わらない。が、例えばアイコンを説明するテキストが、画面幅に余裕があるパソコン向けでは画像の横に、画面の狭いスマホ向けは画像の下に表示されるといった細かな違いはある。これをCSS（カスケーディング・スタイル・シート）という画面の見栄えを決めるファイルによって切り替えている。

　HTMLや画像、テキストなどを1種類しか持たず、端末ごとにCSSで見た目を切り替える手法は、一般にはレスポンシブWebデザインと呼ばれる。だが、増井氏は「世間的に誤解があるようだが、レスポンシブ＝モバイルファーストではない。当社が実装したのも（一般的な意味での）レスポンシブではない」と言う。

　一般的なレスポンシブでは、パソコン向け画面をスマホで見ると、グローバルナビゲーションが画面下に移動することもある。「パソコンとモバイル両方に対応と言いながら、見た目がまるで違ってしまう。これではモバイルファーストにならない」と増井氏。そこで、canon.jpではデザイン、画像、テキストの長さなどをほぼスマホ向けでそろえた。

　「canon.jpを、キヤノンから情報を発信するだけでなく、顧客からも情報をもらえる場に変えて、顧客との交流を通じて製品やブランドに愛着を感じてもらえるエンゲージメントプラットフォームにしたい」と増井氏は言う。ソーシャルメディアとの連携強化など、「次」に向けた動きが、既に始まろうとしている。