あなたはスマホ専用のホームページを作ろうとしている中で、外部の業者に任せるにせよ、自社で制作するにせよ、具体的にどのように作ろうか迷っているかもしれない。
スマホサイトを制作する際に忘れてはいけないのは、ユーザーの求めている情報が簡単に手に入るか？という視点だ。
スマホユーザー数の増加から、特別な設定をしなくても、売上の20％程度はスマホ経由になるだろう。
しかし、しっかりと作れば売上の50％以上をスマホ経由にすることが出来るだろう。
ネットショッピングでなくともスマホ経由のお問い合わせも同様である。
この記事では、どのようなサイトを、どのように制作すれば効果の高いサイトができるかについて、初心者でもわかるようにお伝えしていく。
＜目次＞
１，スマホサイトのデザイン視点
２，独自の環境で作るか、自動変換ツールを使うか
２－１ 具体例
２－２ システム構成の違い
３，スマホ独自サイトを制作する方法
４，スマホ独自サイトのメリットとデメリット
４－１ メリット
４－２ デメリット
５，予算|スケジュール|必要なスキル
５－１ 予算
５－２ スケジュール
５－３ 必要なスキル
６，自動変換ツールを使ってライトに制作する方法
６－１ 自動変換ツールの種類
６－２ 推奨する自動変換ツール
６－３ 予算
６－４ スケジュール
６－５ 必要なスキル
７，自動変換ツールを使う場合の注意点
1 スマホサイトのデザイン視点
見慣れたスマホサイトの構成かもしれないが、実はスマホユーザーが使いやすいように様々な点で工夫されている。どのような点を工夫しているのか見ていこう。
①ユーザーのメリットは必ず目に入る左上に配置する。
新聞、雑誌、書籍などでも同じだがWebサイトでも左上からユーザーは読んでいくため「5,000円以上送料無料」などのユーザーのメリットとなる表現は左上に配置し、必ず目に入れることでユーザーの購入意欲を湧いてくるようにする。
②ログインや会員登録は右上に配置する。
実際にスマホサイトではログインや会員登録はユーザーが「ログインしたい、会員登録したい」という意識を持って進んで貰うメニューであるため誤タップの起きにくい右上に配置している。
英文の記事でスマホサイトのタップしやすい範囲をまとめたものがある。英文サイトはこちらから
多少極端に表現しているのかもしれないが右親指で操作する場合、右上部は右下と同様にタップしにくいことが分かる。
つまりログインや会員登録が右上にあるのはログインや会員登録をしたいと思うユーザーだけがタップできるようにしている。
③グローバルナビゲーションのメニュー数は4～5である。
スマホサイトのナビゲーションで配置されているのはどのようなサイトであっても多くは4～5個程度だ。それには明確な理由があり、それ以上メニューを増やしてしまうとタップできるボタンのサイズが小さくなってしまい誤タップが起きてしまう。
そのためパソコンサイトでそれ以上のナビゲーションを展開していてもスマホサイトでは4～5メニューに絞らないといけない。
またカートが右にあるのはこのサイトの例ではもっとも利用頻度が多いからであり、ナビゲーションに配置する順番も工夫しないといけない。
④ファーストビューに載せる情報を工夫する。
スマホサイトは上から下にスクロールして進むため下に行けば行くほどサイトからユーザーは離脱する。これはどのスマホサイトでも同じだ。そのためスマホサイトではファーストビューを徹底的に工夫し、何をユーザーに最初に伝えるかが大切で、サイトの上から順番に配置をする。
このサイトでは「SALE情報」や「ネット限定情報」、「週末セール開催情報」までがファーストビューに入っている。
⑤アイコンは一目でそれが何を表すかが分かるようにする。
「カート」のアイコンはショッピングカート、「お気に入り」のアイコンはハート、「カタログからご注文」のアイコンは本をデザインしたもの等、ナビゲーションには一目でそれが何であるか分かるアイコンをデザインすることが重要だ。これはあなたのサイトだけで使われるデザインを採用するのではなく、他のサイトも参照しながら、ユーザーが分かり易いものを追求する必要がある。
⑥キーワード入力欄は広くする。
スマホは文字入力は他のデバイスと比べると得意ではないので入力しやすいように工夫が必要だ。
キーワード入力欄は出来るだけ広くする。もちろん広くし過ぎるとファーストビューに影響があるので注意しながら設計する。また文字入力が苦手なスマホサイトでは必ずテキストボックス選択時のキーボードは入力して欲しい設定にしておく。例えばECサイトのフリーワード検索であれば「全角ひらがな」だ。電話番号入力なら「半角英数」にする。
⑦一番売り出したい情報をグローバルナビゲーションのすぐ下に配置する。
あれもこれもと伝えたくなる気持ちにもなるが、スマホサイトでは早く目的を達成させてあげることが重要なので、一番売り出したい商品を選定し1つないしは2つ程度を上部に配置する。
より数が多い場合は「フリック」（横にスライド）させる表現もできるが、フリックは情報を隠してしまうのであまりおすすめできない。
サイトの一部ではあるものの、スマホユーザー向けにこれだけの工夫をしていることが分かる。
サイト全体ではもっと多くの数を工夫していることは想像できるだろう。
これは「ただかっこいいだけのスマホサイト」ではなく、本当にユーザーが使いやすいサイトを追求し、しっかりと成果（売上やお問い合わせ等）が出るようにするための施策のいくつかの例だ。ECサイトの例で書いたが基本的には企業ホームページのスマホ対応でも同じ考えとなる。
スマホはパソコンと違い、表示できる範囲が狭いので徹底的な情報設計が重要になる。
このようにユーザーの使いやすさを徹底してスマホサイトを作るのはどうしたらいいだろうか。その方法を見ていきたい。
２ スマホ独自サイトを作るか、自動変換ツールを使うか
スマホサイトを作る方法は２つある。「スマホ独自サイト」を作るのか、「自動変換ツール」を使うのかのどちらかだ。
２－１ 具体例
サイトを見比べるだけでは基本的に違いは分からない。しかしシステム構成は大きく異なっている。
どちらが「スマホ独自サイト」で、どちらが「自動変換ツール」か分かるだろうか？
答えは「三越伊勢丹オンライン」が「自動変換ツール」で、「ZOZOTOWN」が「スマホ独自サイト」だ。
つまりサイト上からはどちらの作り方なのかはほぼ分からないのだ。
２－２ システム構成の違い
スマホ独自サイトというのはパソコンサイトとは個別にサイトを作る方法で、自動変換ツールを用いるのは外部のシステムを使って既存のサイトを参照してスマホ用に最適表示させている方法だ。
どちらにもメリットとデメリットがあるがユーザーの目的を達成するためには「スマホ独自サイト」を作るほうが効果がある。
制作方法を見ながらまずは「スマホ独自サイト」を見ていこう。
３ スマホ独自サイトを制作する方法
効果を最大化するなら、スマホサイトはパソコンサイトとは別に構築する「スマホ独自サイト」のほうがよい。
なぜならばユーザーの行動に合わせて自由自在にスマホサイトを作ることが出来るため、結果として圧倒的に誘導率が変わってくるからだ。
具体的に言うと、例えば、商品一覧画面でパソコンサイトは10件まで表示し、11件以降は「次のページ」で見る構成だった場合に自動変換ツールを用いた構築方法だと、同じようにスマホサイトも10件までで1ページ、11件から2ページ目となる。
しかしスマホユーザーは10件だけしか一覧ページに載っていないのは使いづらい。
スマホサイトでは下に進むこと（スクロールする）は容易なので50件でも100件でも同じページ内でスクロールさせるやり方は便利だ。
「スマホ独自サイト」の場合は商品一覧ページの表示件数を50件にすることも可能だし、最近では表示件数を「30件、50件、120件」などとユーザーに選択させるサイトもある。また「次のページ」という構成ではなく、楽天市場のスマホサイトの商品一覧ページのように同じページ内で「もっと見る」と読み込ませることもスマホらしい工夫の一つだ。
商品一覧ページは一例であるが、商品詳細ページにおいても、トップページにおいても、入力フローにおいてもすべて同じで「スマホ独自サイト」ではスマホらしい設計・デザイン・表示の工夫ができるが「自動変換ツール」の場合はそうはできない。
出来たとしてもカスタマイズが発生するので費用が別途必要となる。
結果、ユーザーが目的を達成するスマホサイトを作るのはスマホ独自サイトのほうが望ましいと言える。
４ スマホ独自サイトのメリットとデメリット
4-1 メリット
最大のメリットはスマホユーザーの行動に合わせたスマホサイトを自由に作成することができるのでユーザーが成約しやすいサイトになることだ。
4-2 デメリット
最大のデメリットは設計・開発が自動変換ツールよりも高度であるため「費用」が高くなり、「スケジュール」が長くなり、「スキル」が高度になる点だ。
当然、スマホサイトを更新する手間がかかるという点もデメリットだ。
なぜならばスマホ独自サイトを更新をする場合、パソコンサイトとスマホサイトを両方修正する必要があるからだ。
しかし、1つの更新で2つ更新できる方法もある。
管理画面を作って自動的に両方が更新できるようにするなどであるが、開発費用が数百万円の単位で必要になるので開発費がかさむことは間違いない。
したがってあなたの置かれている状況が「スマホユーザーが増えているから、急いでスマホ対応をしないといけない」ことだったとするとスマホ独自サイトによる作成は不向きだと考えるのが自然だ。
５ 予算|スケジュール|必要なスキル
5-1 予算
業者に依頼した場合で初期費用：1,000万円～2,000万円、月次費用で10万円/月～50万円/月程度が目安になる。
ECサイトで「会員登録」、「ログイン」、「セール」、「ランキング」、「ニュース」、「購入」、「カート」、「お気に入り」、「カテゴリー検索」、「あなたが見た商品」等の一般的なメニューがあり、メールシステム・レコメンドシステムとの連携や会員管理機能や商品登録機能、セール機能等を開発する場合は2,000万円のレベルになる。仕様によってはそれ以上になる場合もある。
外部システムとの連携がないなどプログラム開発と検証のボリュームが減ればそれよりも予算は低くなる。
月次費用はサーバーの構成やサーバーの保守体制によって費用が大きく変わる。
24時間、365日の有人監視（人が張り付いて異常がないか確認する）であればもっと高額になることもあれば、より規模の小さなECサイトでレンタルのサーバー等でよければ費用は安くなる。
企業ホームページでは業者に依頼した場合で初期費用20万円~100万円程度が目安になる。
これはページの枚数によって大きく予算は変動する。
10～20ページぐらいの規模のサイトであればおよそ10万円/月ぐらいを見れば十分だと考えている。
5-2 スケジュール
ECサイトをスマホ化する場合は３か月～半年程度必要になる。
社内で作るにしても、外部の業者だとしても、人的・予算的に大きなプロジェクトとなる。
ECサイトではなく企業のホームページのスマホ化であれば、１ヶ月～２ヶ月程度見れば十分である。
5-3 必要なスキル
もし、社内で制作を考えるのであれば、スキルが整っているかを必ず確認しよう。
WebサイトとECの開発経験があればスキル的にはよいが、未経験であれば外部に依頼しよう。
Webのプログラミング言語やデータベースに関する知識など幅広い知識が必要になる。
HTML、CSS、Javascriptの知識がベースに必要になる。
スマホ独自サイトのことを書いてきたが、予算的にもスケジュール的にもスキル的にもそこまでは考えられないという場合もあるだろう。
その場合は前述のように「自動変換ツール」を用いるやり方がある。
ユーザーが目的達成する効果はスマホ独自サイトには劣ることになるが、スマホ経由の売上を伸ばすことができる対策として「自動変換ツール」を使うやり方は十分にオススメできる。
もっとも売上を伸ばすにはスマホ独自サイトではあるが現実的な判断としてこの構築方法も正しい判断になる企業もいるだろう。
6 自動変換ツールを使ってライトに制作する方法
6-1 自動変換ツールの種類
この「自動変換ツール」には「無料」と「有料」の2種類がある。
無料がいいというのも担当者の心情として理解できるが無料には無料である理由があるためオススメできない。
つまり「広告」が入ることになるのだ。
もし、あなたがWeb担当者だとすると無料ツールを使うと別の会社のサービスが広告表示されてしまって不都合があるだろう。
ユーザーは敏感ですから不信に思うだろう。
遊びで使ってみるぐらいだったらよいのですが企業担当者では無料ツールは使ってはいけません。
6-2 推奨する自動変換ツール
決裁者の思考に合わせてツール選定するのがよいだろう。
＜実績重視の決裁者であるなら＞
オススメは3つある。
- 株式会社ショーケース・ティービーの「スマートフォンコンバータ」
- 株式会社シンメトリックの「ジーンコード」
- 株式会社エムティーアイの「モバイルコンバート」
いずれも大手企業への導入実績があり、決裁者への説得材料にもなると考えられる。
またECサイトへの導入実績も豊富だ。
【導入例】
「スマートフォンコンバータ」はSBIカード、ABCマート、ダイハツ工業、ディノス・セシール、東急ホームズ等。
「ジーンコード」はインテリジェンス、三越・伊勢丹、JRA（競馬）、学情（大手人材）、セゾン投信等。
「モバイルコンバート」は日本航空、ヒューマンアカデミー、キリンビバレッジ、ニッセン、本田技研工業、マイナビ等。
機能としてはほぼ同等だと考えられるので３社から提案を貰い、比較検討するのがよいだろう。
値段やスケジュールだけではなく「サポートの体制」や「新機種の対応をどのような方法で保証するか」についても合わせてしっかりと提案を貰うことがパートナー選びで重要な視点だ。
＜予算に厳しい決裁者であるなら＞
有料ツールと言っても出来るだけ支出を抑えてスマホ対応をしたい場合はトランスコスモス株式会社の「リライトスタイル」がよいだろう。
なぜならば月額料金が固定で1万円/月であるから、かかるコストを推算しやすいためだ。
多くのスマホ最適化ツールはPV（ページビュー数）に応じて月額料金が決まるためキャンペーンを実施した月や繁忙期ではツールの利用料金が高くなる。具体的な事例ではレンタカー予約スマホサイトでは繁忙期である行楽シーズン前には通常月に比べ５倍の料金になったことがあった。
そのため担当者は試算がしにくいことも考えられる。それを考えると月額固定はこのツールを選定するメリットだ。
このツールでは月額費とは別に初期費が3万円が掛かります。
6-3 予算
ECサイトでは初期費用は100万円～1,000万円になる。
変動する理由はいくつかあるが、まず何を変換元のサイトにするかという点だ。
パソコンサイトを参照してスマホ化する場合はパソコンのどこをどのようにスマホに見せるのか設計・開発に時間がかかり1,000万円級の案件になることも私の経験ではある。
あとは、どの範囲までカスタマイズをするかという点だ。
つまり、ただ変換するだけではなくスマホらしいデザインを追加する等の場合には高額になるが、
かんたんに変換しただけでデザインは最小限ということであれば500万円以下になることもあるだろう。
月額費用は数千円～30万円程度。
大手ECサイトであればページビューが増えるのでもっと必要だ。これはツールの月額料金で、各ツール提供会社によって異なる。なぜならば多くのツールの月額費用はページビュー数が多いと費用が変わる変動制だからだ。
企業のホームページのスマホ化では初期費用が50万円程度、月額費用：数千円～5万円程度（提供ツール会社により変動）あたりが目安と考えてよいだろう。もちろんページ枚数やデザインが大きく変われば予算は変動する。
6-4 スケジュール
ECサイトでは１カ月～３ヵ月月程度だ。
３ヵ月かかるのはシステム連携やその検証に時間がかかる場合やカスタマイズが発生した場合だ。
通常のECサイトでさほどカスタマイズが発生しない場合は3ヵ月あれば十分にオープンできる。
数ページのボリュームの企業ホームページであるなら数日、
数百枚などページ枚数が多ければ1ヵ月ぐらいが目安となる。
スマホ独自のサイトより期間が明らかに短くなるので、あなたの会社で「早くスマホ対応をしないといけない」という場合では自動変換ツールを用いるやり方がよいだろう。
6-5 必要なスキル
PC向けサイト（もしくは携帯サイトを元にする場合もあるが、これからの時代を見据えるとパソコンサイト変換が主流になるだろう）を表示しスマホ独自のサイトは作らないのでスキルや知識は必要ない。
変換ツールを提供している会社がやってくれるイメージだ。
しかしより良いスマホサイトにするにはWebサイトへの理解やサイトデザインの知識があるほうが望ましい。
７ 自動変換ツールを使う場合の注意点
自動変換ツールはパソコンサイトを「自動的にスマホ用に変換する」システムですが、システム的に変換処理をするタイミングでエラー等の不具合が発生する場合があります。
自動変換ツールは変換用のサーバーがありますが、その変換用サーバーとサイトのサーバーの連携がうまくいかずにエラーが発生してしまい、ユーザーがサイトを使えなくなってしまったことも私の経験上あります。
つまりサイトの安定運用という視点では自動変換ツールは不安が残るとも言えます。
大手の自動変換ツール提供会社であればサポートの体制もしっかりしている会社もあるので選定する基準にはサポート体制がどうなっているのかもしっかりと見ましょう。
最後に
ホームページ制作ソフトの「ホームページビルダー」やWordPress、またecbeing、コマース21などのEC系システム、ネットショップASPをすでにあなたの会社が使っているとしたら、「スマホ対応」の機能、メニューがあるはずだ。
追加費用も発生するが、迷わず「スマホ対応」をするためシステム提供会社に問い合わせをして確認してみよう。
コメントをどうぞ