自社サイトをスマホ対応にしたい経営者
「昔作ったWebサイトが古くなってきた。スマホで見たらデザインも崩れてるし、こんなんじゃ顧客に見せられないなぁ。そもそもスマホ対応ってなぜ必要なんだろうか。スマホ対応にも色んなやり方があるけど、どれがベストなんだろうか。金額も良くわかりません。全て教えてください。」
こういった疑問に答えます。
もくじ
【時代遅れ】Webサイトをスマホ対応しないと会社が倒産する話
Webマーケティング会社を経営しています。 今回はプロの立場から「Webサイトのスマホ対応をしないとだめな理由」について解説します。記事を読むことで、「自社サイトをスマホ対応する際に知っておくべきこと」が全てわかります。スマホ対応は売上アップに直結するので、是非お読みください。
Webサイトがスマホ対応できているか調べる【Googleのモバイルフレンドリーテスト】
結論として、Googleモバイルフレンドリーテストを使えばOKです。下のリンクをクリック頂き、自社サイトのURLを入れてください。たった1分で測定できます。
スマホ対応を確認したいページのURLを入力し、「テストを実行」ボタンをクリックします。
分析の処理が開始され、2~30秒程度で結果が表示されます。
サイトがモバイルフレンドリーかどうかの結果が表示されます。改善点がありますので、「詳細を見る」をクリックして内容をご確認ください。改善点の具体的な対策には専門知識が必要です。そのため、社内のエンジニアリングチームまたは制作会社に内容を確認してアクションを実行するよう依頼してください。
１．なぜWebサイトのスマホ対応が絶対に必要なのか
下記のとおりです。
スマホユーザーが圧倒的に多いから
検索エンジンがスマホ対応を高評価するから
順に解説します。
スマホユーザーが圧倒的に多いから
自社サイトをスマホ対策ができていない・・・。それは「危機的状況」です。なぜなら「世界的にPCよりスマホを使う人の方が多いから」です。下の図をご覧ください。
https://www.netratings.co.jp/solution/nielsen_mobile_netview.html
上の図の通り、日本国内のスマホ利用者は7000万人を超えています。もはや、PCよりもスマホの方が一般的になっています。今後も、スマホ利用者は増え続ける見込みです。ということは「自社サイトをスマホ対応しないことは、致命的な機会損失である」ということはご理解いただけるでしょう。
検索エンジンがスマホ対応を高評価するから
実際、Googleは「スマホ対応しているWebサイトを優先的に上位表示する」と公式で発表しています。裏を返すと、スマホ対応しないサイトは「世界的に置いてけぼり」になります。上位表示はされず、Webサイト経由の売上も伸びません。
３．Webサイトをスマホ対応させる方法
結論として、下記の3つです。
・スマホ用サイトを別に作る
・変換ツールを使う
・スマホレスポンシブなサイトを作り直す
順に解説していきます。
スマホ用サイトを別に作る
PC用のWebサイトとは別に、スマホ用のWebサイトを作るやり方です。この場合、メンテナンスも管理費用も２倍になります。非常に無駄が多いため、おすすめしません。
変換ツールを使う
「PC用のWebサイトをスマホ用に変換するツール」を用いるやり方です。あまりおすすめしません。まず値段が高いです。初期費用に加えて管理費用が掛かります。その上、ツール自体がサービス終了した場合、スマホ用サイトも消滅します。まとめると、「Webサイトを1つ作れるだけのお金がかかるのに、成果物はない状態」になります。おすすめしません。
スマホレスポンシブなサイトを作り直す
結論として、このやり方が最もメジャーでおすすめです。「PCでもスマホでも使えるWebサイト」を１つ作るイメージです。このやり方なら、メンテナンスも1つのサイトだけでOKです。また、デザイン変更やコンテンツ追加をした場合も、一括で行えます。自社の負担を最小限に抑えながら、スマホ対応することができます。Web本舗もこのやり方を採用しています。
見やすいスマホサイトの特徴
パート1.リキッドレイアウト
スマートフォンサイト１つとっても、ブラウザーにはさまざまな方法があります。したがって、指定された値によってサイズが決定されるピクセルは、スマートフォンサイトの作成には適していないことがわかります。任意のブラウザ幅を処理できるようにするには、要素または画像の幅をパーセントで指定することをお勧めします。
パート2.画像はCSS対応させる
サイトの画像サイズが大きいほど、ページの読み込みが遅くなります。読み込み速度が遅いと、ユーザーにストレスがかかり、サイトを離れる可能性が高くなります。ユーザーのストレスを軽減するには、画像にできるだけ多くのCSSを使用し、サイトの重さを減らすことが重要です。
パート3.文字サイズと行間隔を最適化する
文字サイズは、視認性が重要なスマートフォンサイトでも重要です。たくさんの情報を伝えたいからといって、小さい文字を詰め込んでもスマートフォンの画面では見づらいです。フォントサイズが14ポイント以上にしましょう。
iphoneはHiragino Kaku Gothic（Hiragino Kakugo）のW3とW6しか使用できません。そのため、iPhoneに合わせて作成することも理にかなっています。ちなみに、テキストの行間隔が狭すぎても圧迫感があるので、行間隔を150％〜190％にするのが望ましいです。
パート4.リンクボタンのサイズを最適化する
画面に指で直接触れることで操作するスマートフォンの場合、ボタンのサイズは指で押すように設計する必要があります。ほとんどのユーザーは人差し指や親指でスマートフォンの画面を操作するので、どちらの指でも押しやすい44px以上にします。リンクボタンを押したときに別のボタンを押すようにすると、ユーザーにとってストレスになります。
パート5.Flashを使わない
Flashを使用しないでください。スマートフォンのOSシェアが日本で66.2％のiPhoneでは「フラッシュ」を表示できないからです。多くのユーザーに表示されない「Flash」よりも、「JavaScript」または「CSS3」を使用してビデオやアニメーションをサイトに配置する方が現実的です。
パート6.シンプルなレイアウトにする
視認性を重視したスマートフォンサイトは、基本的にメインコンテンツ（1列）のみを表示するシンプルなレイアウトです。PCサイトのようなカテゴリやメニューを表示する「サイドバー」を使用したい場合は、タップして開閉する「アコーディオンメニュー」を使用するのが最適です。
パート7.画面遷移の削減をする
PCとは対照的に、スマートフォンは場所によっては必然的に通信速度が遅くなります。通信速度の遅いページをたくさん検索しなければならないサイトでは、ユーザーは各画面を待つことに不満を感じるでしょう。
ユーザーのストレスが軽減されると、サイトの滞留時間が長くなります。したがって、画面遷移をできるだけ少なくしてサイトを設定するようにしてください。
パート8.操作に適したUIにする
スマートフォンは指で触れるだけで操作できるデバイスです。したがって、PCサイトと同じ感覚のスマートフォンサイトを作成すると、UIが悪くなることは避けられません。ユーザーの視点から、「これは指で使いやすいかもしれない」と「これは指で使いやすいかもしれない」と考える必要があります。
パート9.PCバージョンも表示できるようにする
一部のユーザーは、スマートフォンでサイトのPCバージョンを表示したい場合があります。このような要件を満たすために、スマートフォンのWebサイトに「PCバージョン切り替えボタン」を置くと便利です。シンプルでわかりやすいボタンで、PC版のページに切り替えることが理想です。
デザインやUIの参考になるギャラリーサイト【2021年】
1. sps collection
シンプルな構造のスマートフォンサイトのデザイナーリンク集。カテゴリや色で分類するだけでなく、キーワードを検索することもでき、とても便利です。
2. AGT
http://agtsmartphonedesign.com/
国内外のスマートフォンサイトのデザインギャラリー。ホバーすると垂直方向に長いスナップショットが表示されます。
3. iPhoneデザインボックス
主にスマートフォンサイトをグループ化したデザイン集。 PCとスマートフォンのTOPページが記録され、比較することができます。
4. Pttrns
スマートフォンアプリケーションの優れたユーザーインターフェイスとデザインを集めたウェブサイト。海外のウェブサイトなので英語ですが、カテゴリーが多くて見つけやすいです。
5. Inspired UI
iPhone、iPad、Android向けのアプリケーションのデザインをまとめたサイト。サイトのキャプチャが豊富にあるため、参考になります。
6. iconDrop
スマートフォンサイトを作成する上で絶対に必要なウェブクリップアイコンとアプリアイコンをまとめたサイト。詳細ページで同じタイプのアイコンのリストが出てくるので、簡単で便利です。
まとめ
今回はプロの立場から「Webサイトのスマホ対応」について解説しました。スマホ対応は売上アップに直結しますよ。まだスマホ対応してない場合は、今すぐ検討することをお勧めいたします。
