モバイル対応時に必要な判断
現在スマートフォンやタブレット（以下、モバイル）のアクセス数は多くなっていますのでサポート対象から外すことはありません。そのためPCとモバイルの両方のサイトを制作することになります。
ただし２サイト分の工数・コストをかける訳にはいきませんので、下記のような判断が必要です。
- PCサイトが必要かどうか
サイトの目的によってはモバイルでの閲覧しか想定できない場合があります。逆にモバイルサイトが必要ないという選択肢は現状はほぼないと思います。 - PCとモバイルのどちらを優先するか
制作上どちらかに重きを置くことで、工数を適切に配分できます。
「２」については、一方がないがしろになる訳ではなく、どちらをベースにするかというものです。経験的にはPC向けでデザインし、それを元にモバイルに落とし込むという流れが多いと思います。これは見るサイトか、使うサイトかで変わってきます。
「見る」サイトか「使う」サイトか
情報や印象を受け取ることが軸になる「見る（読む）サイト」では、大きな画面での見栄えが重要になります。その場合はPC向けをベースに作ります。ショップサイトもどちらかというと見るサイトなのでPC向けをベースにすることが多いと思います。
一方、例えばレストランの情報を見ながら、地図が閲覧でき、電話をかけられる、というような「使う」ことがメインのサイトでは、モバイル向けをベースに構造の効率化を重視しながらデザインします。
モバイル対応の手法
通常ほとんどのサイトが「レスポンシブウェブデザイン」という方法で設計されています。
これはサーバー上に設置する一つのページが、見る端末によってデザインを変えるという仕組みです。この仕組みによってPC用とモバイル用の２つのページを用意しなくても済むようになります。
ただこの方法はあくまでも一つのページなので、端末によってページ構成（要素の順番など）を変化させることは難しいという点もご留意ください。
現在既にサイトをお持ちの場合
既存のサイトをモバイル対応するという場合、下記のような選択肢があります。
- 今のPC向けのサイトをそのまま残し、モバイルで表示した場合にデザインを変化させる
- 全面的にリニューアルし、PCとモバイルに対応したサイトを制作する
「１」はコストを抑えられますが、ページの内容は変更できないため、モバイル向けのデザインはかなり制限されます。また既存のPCサイトにも若干の調整が入ります。
モバイル環境での画像について
ほとんどのモバイル端末は通常のパソコンに比べ画面解像度が高くなっています。これまでのテレビと4Kテレビの違いと同様です。
ただこの変化によって、サイトの画像に悪影響を与えることがあります。画面の解像度（密度）が増えることで画像が引き伸ばされ、粗くにじんだように表示されてしまいます。特に文字情報が含まれるバナーなどでは顕著に劣化していることがわかります。これを防ぐには画面の解像度に合った密度の高い画像に差し替える必要があります。
またモバイル用の画像にはそもそも大きな課題があります。
モバイル用画像の課題
- モバイルで綺麗に表示するため、密度の高い画像が必要になり、結果データ容量が大きくなる
- モバイル向けには、通信量を抑えるためデータ容量は小さくしなくてはいけない
この二つのバランスを取る必要があります。
具体的には画像の解像度（密度）を高くしながら、JPEGの圧縮率を上げる（画質を低下させる）などし容量を小さくする、という作業です。
一応HTMLにこれを解決する記述方法（srcset属性）がありますが、たくさんの画像サイズを用意する仕組みが必要なため、WordPressなどでしか利用できません。
また既存サイトでモバイル対応をする場合、既にある画像を高解像度にできるかどうかの確認も必要です。元データがない場合は解像度を上げられませんので、別の写真や素材に差し替えることになります。
ベクターデータの積極的な利用
画像形式によっては「点」ではなく「線（ベクター）」の情報でできているものがあります。フォントもそうですが、これらはどんなに高解像度の画面でも粗く表示されることはありません。写真やバナーには使えませんが、ロゴやアイコンなどはこうした「線」の画像形式を積極的に利用した方が良いと思います。
制作条件
主なチェック環境
iOS Safari ( 実機 iPhone、 iPad )
Android Chrome ( エミュレータ )
留意点
- Androidのチェックは主にエミュレータ（PC上の仮想表示）を使用します。またチェックするバージョンはエミュレータが存在し、かつ一定のシェアを持つものとします。
参照：Android / シェア / バージョン – Wikipedia - 特定の環境下で起こるバグがこちらの環境で確認できない場合、その改善ができません。その場合は設計や仕様の変更にて対応いたします。