スマートフォンへの最適化（2）スマートフォン最適化の方法は？
WEBSASで実現する「スマートフォンへの最適化」。
数々の案件から見えてきた
HOW-TOをお届けするコラムです！
WEBSAS 広報
スマートフォンへの最適化の必要性についてはVol.1で紹介しました。
それではスマートフォンへの最適化をするには、どのような種類があるのでしょうか。
スマートフォンへの最適化はどうやって？
大きく分けて3つのやり方があります。
- スクラッチでスマートフォン用サイトを構築する
- レスポンシブWebデザインを導入し、PC、スマートフォンでの表示を１ソースで行う
- 変換ソフト／サービスを利用し、現在のPCサイトをスマートフォン用に変換する
それぞれを詳しく見ていきましょう。
1.スクラッチ開発
スマートフォン用に新しくサイトを作成するやり方です。
デザインを自由に作りたいときはこの方法が最適です。
一方、新しくサイトを作成する分、時間やコスト面での負担が大きくなります。
また、運用に際しても、PC、スマートフォンそれぞれの運用が必要になってくるため、労力が必要になります。
2.レスポンシブWebデザイン
共通のHTMLソースを１つ用意し、画面サイズ毎にCSSを分けてデザインを変えることで、PCとスマートフォンの両方に対応します。 『静的で、ボリュームが比較的小さく、PCとスマートフォンでコンテンツ量が同じサイト』には最適です。
スクラッチに比べて導入までの時間は少ないものの、設計の難易度は高く、デザインはPC版のページに強く影響を受けます。また、運用に際して、ページの構成を変える際にCSSの深い知識が必要になってくるなど、デメリットもあります。
3.変換ソフト/サービスを利用する
変換ソフト／サービスを利用しPCサイトの画面デザインをスマートフォン用に変換します。
『大規模で動的なサイト、画像を多用した更新頻度の高いサイト』に向いています。
アプリケーションの開発が不要で、デザインもスマートフォン専用に作ることができます。
それぞれのやり方のメリット・デメリットやどのようなサイトに適しているかをまとめると下記のようになります。
| スクラッチ開発 | レスポンシブWebデザイン | 変換ソフト/サービス | |
|---|---|---|---|
| 概要 | PCサイト同様にアプリケーション構築を含めて一から開発する | 共通のHTMLソースを一つ用意し、画面サイズ毎にCSSを分けてデザインを変える | PCサイトを利用し、画面デザインをスマホ用に変換する |
| 開発スピード |
× 新たにアプリケーションの設計と開発が必要 |
▲ アプリケーションの開発はj不要だが設計の難易度が高く、CSS調整に負荷がかかる |
● アプリケーションの開発が不要な短工期での構築を実現 |
| シングルURL |
▲ ツールでの振り分けやリダイレクト設定で可能だが管理が負担になる |
● 同じサイトなのでそのままシングルURLとなる |
● シンプルな設定でシングルuRLを実現可能 |
| デザイン性 |
● 制約がなく自由に作り込める |
× PCサイトの作りに影響を大きく受ける |
● スクラッチ制作同様のレベル感で作り込める |
| PC連動性 |
× 更新の際は両方のサイトを更新する必要があり、コストとリスクが発生する |
● 連動するが、相互依存が高いため、非連動部分の設定が困難など懸念する点も残る |
● テンプレートに記述したルールでコンテンツが連動。非連動部分の設定も容易 |
| 運用負荷 |
× PC/スマホ個別に運用が必要。運用負荷・コストは最も高い |
▲ 運用は1サイトのみだが、修正やコンテンツの追加にはスキルが高いエンジニアが必須 |
● 通常運用はPCサイトのみ。運用負荷を大幅削減 |
| 適正 | スマホ独自サービスであるサイト。他の手法が使えない場合の手段 | 静的でボリュームが比較的小さく、PCとスマホでコンテンツ量が同じサイト | 大規模で動的なサイト。画像を多用した更新頻度の高いサイト |
まとめ
- スマートフォンへの最適化には３つのやり方があり、それぞれメリット、デメリットがある
- 自分のサイトがどのやり方にむいているのかの選定が必要