Support SmartPhones・Tablets
スマホ・タブレットの対応
≫ ２つのモバイル対応
[ 既にあるPCサイトをそのまま残す ]
PC向けのサイトが既にあるという場合、PC向けのサイトはそのままに、スマートフォン向けにデザインを分岐させることができます。既存サイト内の構造次第ではありますが、ほとんどの場合可能です。
ただし既存サイトの構成のまま作成することになるため、コンテンツの順番を変えられないなど、ある程度PC向けの構成に縛られることになります。あくまでもPC向けのサイトを、スマホでも見やすくすることが目的となります。
対応コストを抑えできるだけ早くモバイル対応したい、という場合はこちらの方法をご検討ください。
[ サイトを一から作り直す ]
モバイルに合わせて一からサイトを設計することで、スマートフォン向けに最適化できるだけでなく、ナビゲーションの位置やコンテンツの順番などサイト全体で最善の形を目指すことができます。ただ設計やチェックなどにかなりの工数を割くことになりますので、まとまったコストは発生します。新規サイトやリニューアルのタイミングにてご検討ください。また、これら二つの他にスマートフォンに特化した別サイトを起ち上げるという方法も考えられますが、管理や運用が煩雑になり必要なコストも大きくなるため、特別な理由がない限りおすすめできません。
≫ レスポンシブWebデザイン
スマートフォンとPCからのアクセスを見分け、ページのデザインを変更する方法を「レスポンシブウェブデザイン」といいます。
ただ見分ける条件を「PCかスマートフォンか」とすると、OSや機種など条件の数が多くなり、将来確実に修正が必要になります。
そこで「画面の横幅」を基準にするという方法が一般的になっています。以下のようなメリットがあります。
・表示を分岐させる仕組みを、横幅という簡単な数字を基準としているため将来変更が必要になる可能性が低い。
・スマホを横にした場合にスマホ向けのデザインが見づらくなることがあります。
「横幅」を基準とすることでこうした問題も自然と避けられます。
・「横幅」を基準としているため、PC画面上でもウィンドウを細くするとスマートフォン向けのデザインになり、制作時にチェックしやすくなります。
条件となる横幅の分岐点（数字）を「ブレイクポイント」といいます。
通常「PC向け」と「モバイル向け」を分けるため１箇所とするか、間に「タブレット向け」も想定し２箇所とします。
分岐点を増やすほど工数が嵩みますので１〜２箇所が現実的です。
≫ モバイル環境での画像について
スマートフォンやタブレットなどのモバイル端末は通常のパソコンに比べ画面解像度が高くなっています。
画面は細かな「点」でできていますが、その「点」がパソコンよりも小さく数が多いため、文字の曲線もガタガタせずにきれいに表示されます。テレビの2K、4Kの違いと同様です。ただこのことが画像ファイルに影響します。
写真や広告バナーなどに使われる、JPEGやPNGという形式の画像は下記の点にご注意ください。
・モバイル向けに綺麗に表示する場合、より密度の高い画像が必要になり、結果的にデータ量が大きくなります。
一方でモバイル通信を抑えるため、画像のデータ容量は小さくしなくてはいけません。バランスを取る必要があります。
・既存のサイトでモバイル対応をする場合、既にある画像を高解像度にできるかご確認ください。
写真などはオリジナルのデータを探すところからとなります。
・前者の対応としては画像の解像度（密度）を高くし、かつJPEG圧縮（＝画質の劣化）などで
データ容量を小さくするという作業を行います。
・後者のように高解像度化できない画像の場合、モバイルでは少し滲んで（ぼやけて）表示されます。
内容がわからないほどではありませんが、主要な画像であれば少し気になります。
特にテキストが含まれる広告バナーなどは顕著です。
また画像の中には「点」ではなく「線」でできているものがあります。
SVGやCSSによる表現、またフォントもそうですが、これは画面解像度に影響されません。
写真やバナーには向きませんが、ロゴやアイコンなどはこうした「線」のデータを積極的に利用します。
≫ 制作条件
スマートフォンの仕様は日々変わっていくため、制作時点で設計仕様やチェックの範囲など規定する必要があります。
・主なチェック環境：
iOS 最新 (Safari / 実機 iPhone、iPad)
Android (Chrome / エミュレータ)
・Androidのチェックは主に実機ではなくエミュレータ（PC上の仮想表示）を使用します。
またチェックするバージョンはエミュレータが存在し、かつ一定のシェアを持つものとします。
参照：Android / シェア / バージョン – Wikipedia
特定の環境下で起こるバグがこちらの環境で確認できない場合、その改善ができません。
その場合は設計や仕様の変更にて対応いたします。