モバイルファーストなスマートフォン最適化サイト制作
数年前まで、制作現場においてウェブサイトデザインを検討する際にパソコン版のデザインを先に作成しその後スマートフォン版にレイアウト変更や修正をしてプログラミングしていくという流れが一般的でしたが、その際どうしてもパソコン版のデザインが優先されるためスマートフォン版のデザインを多少妥協することがありました。
しかし近年では優先順位は逆転しつつあります。
ターゲットユーザーのカスタマージャーニーマップ（ユーザーの行動予測）において、
どのタイミング・どんなシチュエーションでユーザーがこのサイトを見るのかを考察した際、スマートフォンで気軽に・移動中になどの利用を見込むことが多くなっているため、
いかにスマートフォンで魅力的に分かりやすく・操作しやすいウェブサイトかという事が大事になっています。
極端な例では、パソコン版のレイアウトは捨て（デザインがおかしくなっても表示だけされていれば良い）という場合もあるくらいです。
佐蔵ファクトリーでは、ユーザーの利用用途に応じてモバイルファーストでのホームページ制作を行います。
インターネットの利用状況とデバイス調査（MMD研究所調査結果の抜粋）
引用元：https://mmdlabo.jp/investigation/detail_1941.html
| 対象者 | スマホ | ガラケー/フィーチャーフォン | 携帯端末を 持っていない |
|---|---|---|---|
| 10代男性 | 94.5% | 1.2% | 4.2% |
| 10代女性 | 97.8% | 0.2% | 2.0% |
| 20代男性 | 94.7% | 1.4% | 5.8% |
| 20代女性 | 94.7% | 1.1% | 4.2% |
| 30代男性 | 87.3% | 6.6% | 6.2% |
| 30代女性 | 92.9% | 3.4% | 3.6% |
| 40代男性 | 85.0% | 9.6% | 5.4% |
| 40代女性 | 87.7% | 8.5% | 3.8% |
| 50代男性 | 83.0% | 11.9% | 5.1% |
| 50代女性 | 84.2% | 11.0% | 4.8% |
| 60代男性 | 81.0% | 14.1% | 4.9% |
| 60代女性 | 80.9% | 13.5% | 5.5% |
総務省の令和３年版インターネットの利用状況データ
引用元：https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r03/html/nd242120.html
2020年度のインターネット利用者数：
83.4%のうち、
での利用
での利用
総務省発表の統計データの上ではパソコンでのインターネット利用も多くスマートフォンでの利用割合はそれほど多くない様に見えるかもしれませんが実際のサイト運営側から計測したデータとしては、業種や利用用途による差はあるものの、スマートフォンからのアクセスが74%〜89%と高く、とりわけ主婦向けの商品・サービスやサラリーマンが移動中に利用するサービスなどはほとんど100%に近い確率でスマートフォンからのアクセスがメインとなっています。
スマートホン最適化非対応のデメリット
スマートフォンに対応していないウェブサイトの代表的なデメリットは以下の3点です。
スマートフォンで閲覧の際の離脱率が上がる
特にECサイトや資料請求フォームなどでは、スマホ最適化をしていないサイトは致命傷となり、サイトの離脱及び商品サービスの売り上げ減少に直結します。専門用語でカゴ落ちと呼ばれ、欲しい商品をカゴに入れたけどその先の手続きが面倒で画面を閉じてしまうといった状況です。
Google検索結果の下落
厳密にいうと「スマートフォンで検索された時の検索結果順位」となりますが、Googleは2015年4月からモバイルフレンドリーを推奨しています。スマホで検索された際、スマホ最適化されていないサイトは上位表示されづらくなります。
アクセス数が減る
Googleの検索エンジンではサイトの評価において滞在時間や直帰率も加味されます。スマートフォンで検索位して辿り着いたユーザーが「見づらい」という理由ですぐに離脱する行為が多くなると、サイト評価及び検索順位が下がりおのずとアクセう数も減少してしまいます。
スマートフォン対応方法
スマートフォン対応（最適化）の方法は主に２種類あります。
ースマートフォン専用サイト制作
パソコン版のホームページとスマートフォン専用のホームページを２つ用意し、ユーザーがアクセスしてきたデバイスを判定してどちらかを自動的に表示させるという方法です。
レイアウトやデザインの自由度は高いのですがホームページを二つ制作・維持することになりますのでその分費用も手間もかかります。
パソコン版のホームページとは大きく異なるサイトを制作可能
ホームページが二つ存在することによる管理・運用の手間
- コンテンツ数や商品数が多く煩雑なデザインのサイト
- ホームページ内にSVGアニメーションやパララックス背景など読み込みが重い動的要素が多いサイト
ーレスポンシブデザイン
一つのホームページに対してユーザーにアクセスされたデバイスの表示幅に合わせてレイアウトを組み替える手法です。
レイアウトが切り替わる幅のタイミングをブレークポイントと呼びますが、ブレークポイントを追加することでスマートフォンだけでなく、タブレットなどへの最適化対応も可能になります。
ホームページそのものは一つなので管理・運用がラク
パソコン版のレイアウト・デザインを大きく崩すことは難しい
- 制作及び管理運用に対する費用や手間を抑えたい方
- SEO対策をしているサイト（重複コンテンツを避けたい）