2つのスマホ対応

1、既にあるPCサイトをそのままにしたい

PC向けのサイトが既にあるという場合、スマートフォンデザインを「追加」できる場合があります。サイト内の構造次第ですが、ほとんどの場合調整可能です。

2、サイトを一から作り直す

スマートフォンに合わせて一からサイトを設計し直します。新規サイトやリニューアルのタイミングにてご検討ください。
設計やチェックなどに工数はかかりますが、サイトとしても情報が整理されより良いサイトになります。

この他にスマートフォンに特化した別サイトを起ち上げる方法もありますが管理が複雑になります。上記の方法であれば、同じページ(URL)で表現を変えるだけとなり最低限の管理工数で済みます。

レスポンシブWebデザイン

スマートフォンとPCからのアクセスを見分け、ページのデザインを変える方法をレスポンシブウェブデザインといいます。

ただ見分ける条件を「PCかスマートフォンか」とすると、OSや機種など条件の数が多くなり、また将来確実に修正が必要になります。そこで現在は「画面の横幅」を基準にするという方法が一般的です。以下のようなメリットがあります。

  • スマートフォンが大型化しているため、スマートフォンだからといってボタンや文字を大きくするとかえって見づらくなることがあります。「横幅」を基準とすることでこうした問題も自然と避けられます。
  • 純粋に「横幅」を基準としているため、PC画面上でもウィンドウを細くするとスマートフォン向けのデザインになります。制作時、チェックしやすくなるというメリットもあります。

条件となる横幅の分岐点を一般に「ブレイクポイント」といいます。通常PC向けとスマホ向けを分けるため1箇所とするか、間にタブレットも想定し2箇所とします。分岐点を増やすほど工数が嵩みますので1〜2箇所が現実的です。

モバイル環境での画像について

スマートフォンやタブレットなどのモバイル端末は通常のパソコンに比べ画面解像度が高くなっています。画面は光る「点」でできていますが、その「点」がパソコンよりも小さく数が多いため、文字の曲線もガタガタせずにきれいに表示されます。テレビの2K、4Kの違いと同じです。

ただこのことが一部の画像にはとてもネックになります。
「点」で描かれているJPEGやPNGなどと呼ばれる画像です。写真や広告バナーはほぼこの形式です。

  1. モバイル向けに、より密度の高い画像が必要になりデータ量が大きくなる。
    モバイル通信を踏まえるため本来はデータ量は小さくしなくてはいけません。
  2. 既存のサイトでモバイル対応をする場合、既にある画像は高解像度に対応できないケースが多い。
    写真など元データを探すところから再作成が必要になり、単純にコストがかかりすぎるなど。

「1」は矛盾した対応になりますが、画像の密度を高くし、かつJPEG圧縮(=画質の劣化)などでデータ容量を小さくするというギリギリの対応を行います。またその画像を割愛できないかどうかも検討が必要です。

「2」のように高解像度化できない画像の場合、画像は少し滲んで(ぼやけて)表示されます。特にテキストが含まれる広告バナーなどは顕著です。内容がわからないほどではありませんが、主要な画像であれば少し気になると思います。この辺りは割ける工数・コスト面と折り合いをつける必要があります。

また画像の中には「点」ではなく「線」でできているものがあります。SVGやCSSによる表現、またフォントもそうですが、これは画面解像度に影響されません。
写真やバナーには向きませんが、ロゴやアイコンなどはこうした「線」のデータを積極的に利用します。

制作条件

スマートフォンの仕様は日々更新されます。そのため制作時点での設計仕様、チェック環境などをある程度規定する必要があります。

  • 主なチェック環境は下記の通りです。
    iOS 最新 (Safari / 実機 iPhone、iPad)
    Android (標準ブラウザ、Chrome / エミュレータ)
  • Androidのチェックは主に実機ではなくエミュレータ(PC上の仮想表示)を使用します。またチェックするバージョンはエミュレータが存在し、かつ一定のシェアを持つものとします。
    参照:Android / シェア / バージョン – Wikipedia
  • エミュレータや特定の環境下にてバグがある場合、設計やデザインの変更にて対応いたします。
PAGE UP