スマートフォン(Iphone/Android)経由のサイトアクセス数はほとんどのWEBサイトで上昇の一途をたどっていて、私のクライアントの某大手美容系サービスではCVの80%がスマホ経由という結果も出てきている。

ターゲットが女性で10代～20代をターゲットにしているという事もあるだろう。ターゲット次第ではもはやPCサイトではなくスマホサイトに注力することでデジタルマーケティングで爆発的な成果をあげられる時代に突入したのである。

今回のエントリーではスマートフォンサイト(Iphone/Android)サイト(以下、スマホサイト)を作る際にチェックしておきたい6つのTIPSをまとめた。

スマホサイト制作でチェックすべき6つのTIPS

・ホームボタン機能付きのロゴ(スマホ用のロゴにすることが大切)

→ホームボタンはスマホの画面で見てストレスなく、わかりやすく理解できるデザインにしなければならない。PCのロゴをそのまま準用しているサイトがあるがそれは情報が読み取れない意味のないロゴになってしまう。特にサブタイトルは小さな文字であることが多いので注意が必要。

・メニュー　メインコンテンツの裏に表示

→Facebook、FourSquareなどユーザーからの支持を集めているWEBサービスを見れば一目瞭然なのだが、PCサイトにあるグローバルナビゲーションのメニュー表示はほとんどない。代わりにあるのはメニューボタンとメインコンテンツの裏に隠されスライドとして表示されるメニュー一覧である。なぜ、こんな表示になっているかというとスマホはPCと違い、ページ遷移を繰り返すと通信状況などに左右されユーザーが離脱する可能性が高まるからである。理想はスマホサイトのTOPページでサイトの目的をユーザーが全部完結できる事。

・アイコンで情報を表示→直感的に理解できる

→アイコンで直感的にわかるデザインはPCサイトより気を配るべきである。スマホデザインでは情報を入れられるスペースに制限があるので当然表示できるテキストの文字数も制限される。時にはPCサイトで使用していた効果的な売り文句を削減しなければならない事さえある。なので、アイコンを巧みに使う工夫でユーザーが内容を理解しやすいように工夫しよう。

・横切りのテキストで表示→量が多い場合はアコーディオン

→スマホサイトで横切りテキスト表示を繰り返すことはメリハリを無くし、デザインを殺す設計である。リンクが多いコンテンツはアコーディオン式レイアウトを積極的に投入してメリハリがありユーザーが全体像を理解しやすい設計にしたほうがいい。

・バナーで情報コンテンツを表示

→情報コンテンツなど本コンテンツと毛色が異なるページへリンクさせるときはバナーで情報を表示させるなどの手法で他の情報との違いを表そう。毛色が違う情報(例えばお役立ちコンテンツ的な情報)へのリンクを先のアコーディオン形式で表示してしまうとユーザーはサイトの本コンテンツとの違いを理解できず困惑してしまう。

・文字フォント・大きさ・色を指定

→最も大事なのがスマホサイト用の文字フォント・大きさ・色の指定である。実際のターゲットによってまったく異なるといっても過言ではない。特に小さい文字が読めないというのは致命的である。ターゲット想定しているユーザーに実際に画面を見てもらい感想を聞いてみるのが手っ取り早く、確実である。

まとめ

サーッとスマホサイトで注意すべき6つのTIPSをご紹介した。よくPCサイトのデザインを準用して、PCサイトに準拠してスマホデザインを作るという事があるがこれは大きな間違いである。スマホサイトはスマホように最適化して0から作るくらいの気持ちで設計しないと大ゴケすることがある。ユーザー視点に回帰してスマホユーザーから支持されるスマホデザインの制作をしたいものである。