ますますスマホサイトの需要が増しているスマートフォン専用のスマホサイト。Webデザイナーがスマホサイトを制作する上で、意識して欲しいデザインのポイントと注意点をお伝えします。
目次
スマホサイト優先で制作する
スマートフォンやタブレット端末の普及は今や小学生にまで及び、PCサイトからの検索数より、スマホ、タブレットからの検索数の方が今は圧倒的に多くなっています。近年の検索サイトでは、スマホやタブレット端末からの検索した結果に対して優先的に、「スマホに対応したページ」もしくは「スマホ専用サイト」が検索結果で表示されるようになっています。
スマホサイトに対応していないWebページや記事は、検索結果に出にくくなり、ユーザーの目にも止まらない可能性があります。検索サイトからの経由でホームページへのアクセス数を獲得したいのであれば、スマホサイトも同様に制作しましょう。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
スマホサイトはレスポンシブで制作しよう
スマホ対応のデザインは、IT業界もっとも主流となっているレスポンシブWebデザインで制作がおすすめです。PCサイトのデザインを元にスマホ最適化していくこの方法であれば、URLを端末ごとに分ける必要もなく、コンテンツを複数のページに記載しなくともよいので、今後のWebサイトの管理がやりやすくなります。
新たにホームページを制作する場合はもちろんですが、現行のサイトや既存のサイトを修正してレスポンシブ化できるか検討してみてください。PC閲覧前提でのWebサイトでレスポンシブ化ができない場合は、スマホ専用のスマホサイトを新たに制作する方法もあります。
ホームページ制作会社や個人でも無料で使用できる、商業利用が可能なスマホサイトのテンプレートや、レスポンシブWebデザインのHTMLテンプレートを提供しているサイトもありますので、利用してみるのも良いですね。
スマホサイトの制作方法とは
スマホサイトの制作は、PCサイトを制作する際に使用しているソフトや開発環境でそのまま制作できます。ホームページ制作ソフトやテキストエディタでHTMLとCSSを記述し、PCサイトを公開しているサーバーへアップすれば問題ありません。
またスマホサイトのブラウザは、HTML5やCSS3といった最新技術がサポートされているので、新しいコードでも表示され更に使いやすくなっています。
軽量化をしよう
パソコンとスマートフォンで大きく異なってくるのは、スマートフォンでWebサイトを閲覧する時、通信環境があまり良くないことです。通信環境が良くなくても、ストレスなくページを閲覧できるように、スマホサイトでは表示速度が速い、いわゆる「軽いサイト」を作ることが重要となってきます。
具体的には、なるべく画像を使わない、スマホサイトに適したサイズで画像を書き出しする、パソコン用のサイズが大きな画像は読み込まないようにするなどです。デザインとして文字も画像で置きたい場合でも、スマホサイトではできるだけ画像ではなくテキストで表示するようにしましょう。
CTAの作り込み
スマホサイトのメリットは、サイト訪問者をそのまま問合せに導く導線作りができます。Webサイトの訪問者を具体的な行動に誘導する部分、CTA「Call To Action(コール トゥ アクション)」をしっかり作り込むことが大切です。
PCではクリックしてフォームやカートページなどに飛びますが、スマホサイトではタップするようになります。CTAボタンのデザインは、指先で押しやすいサイズ感、思わず押したくなるようなデザインのボタンを作成することが大事になりますし、電話ボタンを設置する場合は、タップして電話がかかる設定にすることも必要です。
電話の設定は、HTMLでリンクタグを「& lt ; a href = " ; tel : 電話番号 & quot ; & gt ; 電話番号 & lt ; / a>」と書き込みます。電話番号や郵便番号を勘違いを防ぐためにheadダグ本文内にメタタグも記述すると良いですね。
「& It ; meta name= & quot ; format-detection & quot ; content = & quot ; telephone = no & quot ; >」
CTA部分の文言も、ぱっとみてわかりやすく簡潔に情報を入れ込むようにしましょう。
ページのボリュームを考えよう
スマホサイトを訪問したユーザーが、ページの概要を流し読みできるように、文字数が多すぎる場合は調整をしましょう。PCサイトと違ってスクロールも長すぎると、スマホサイトではユーザーにしっかり読んでもらうことができません。
画面幅がPCよりも狭いことで必然的にページの長さが長くなってしまうため、ページの長さを抑えるために、タブやアコーディオン・スライダーなどを使用して、限られたスペースを有効的に使う工夫をしていきましょう。
ECサイトの場合は、各商品ページに人気ランキング一覧をスライダーで表示したり、商品説明の概要部分をデフォルトで表示しておき、「もっと読む」をタップすると、詳細がアコーディオンで表示される方法で多く見られます。
リンクの見直しをしよう
スマートフォンでは画面の大きさがPCと比べると小さくなってしまうので、PCサイトのように同じリンクを何度も貼るのは極力避けましょう。CTA部分など、これだけは外せない！というようなリンクは、追従で表示も可能です。その他はハンバーガーメニューを押すと出てくるポップアップメニューに格納するようにしましょう。
フォームのデザインを見直そう
サイトのコンバージョンとなるお問い合わせフォームも、スマホサイト用にしっかりと作り込んでいきましょう。ユーザーの利便性を考慮して、入力の手間を減らすことも重要です。必須項目は極力少なくし、郵便番号からの住所自動入力なども利便性を考えて実装すべきです。また、未入力や入力ミスが視覚的に分かるエラーがリアルタイムで出るものや、必須項目が全て入っていないと送信ボタンが押せない仕様なども最近ではよく見かけます。
スマホでフォームを入力すると、設定されている文字サイズによってはフォーカスされてしまう場合も、ユーザーのストレスになり得るので避けるようにしましょう。基本的にはinputの中のフォントサイズを16px以上にしておけば、フォーカスされることはありません。
操作がしやすいデザインとなっているか
指先でのタップ操作から、デザインによっては誤操作を招くこともあります。クリックしやすいサイズでのボタン作成はもちろん、文字のリンクひとつにしても、誤操作が起こらないように、文字サイズや上下の余白を十分に取る必要があります。
また、PC用サイトではリンク先やボタンに、マウスオーバーで効果をつけますが、スマホではそのような効果が付けられません。スマホサイトでは、マウスオーバーの効果がなくてもわかりやすいリンクやボタンにしましょう。
ユーザビリティを考慮したサイトを作ろう
スマートフォンでサイト検索や閲覧するユーザーが圧倒的に多くなった今、スマホサイトに対応したホームページが必須になってきています。PCサイトとスマートフォンとではサイズはもちろん、異なる点が多くありますが、スマホユーザーにとって使いやすいサイト、使いやすい導線、利便性を考えて、デザインしましょう。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
