2つのスマホ対応

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

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

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

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

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

レスポンシブWebデザイン

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

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

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

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

制作条件

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

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