スマートフォンサイトの制作の流れ

スマートフォンサイトの制作においても、パソコン用ホームページ制作と同様に、実際にサイトのデザインを決める前に、サイト制作の方針決定や全体の設計を行うことがとても大切です。直接サイトから商品を販売するのか、或いは資料を請求させるまでが目的なのかなど、サイトの示す方針が明確に定まらないと、コンテンツを決めることすらできません。社内（家族経営の場合は家族と）でよく議論をして、どういった方向でサイトを運営していくべきか考える必要が重要です。

1.スマートフォンサイト制作の方針を決定

ここがうまくいくか否かでその後のサイト運営が大きく変わってきますので社内で議論をすることが大切です。また、お客様や友人たちの忌憚のない意見を聞き、取り入れることでより一層ユーザー目線のホームページが出来上がりますので、他店のサイトをそのまま流用することなく、自社独自のサイトを作るようにしてください。

なお、スマートフォン用サイトの制作方法には大きく分けると3通りあります。

 
1.既にあるパソコン用ホームページを元に、スマートフォン向けのCSSを追加する方法

この方法では、HTMLはPCサイトのものを流用し、CSSはスマー卜フォン用に最適化したものを別途作成します。PCサイト用のデザインとスマートフォン用のデザインの切り替えは通常JavaScriptなどを用いて行います。

この方法のメリットは以下のとおりです。

 
一方、この方法には以下のデメリットがあります。

 
上記のデメリットにもあるとおり、この方法の場合は元のPCサイトの構造がセマンティックになっていないと対応が困難であり、工数を軽減できない場合があります。元のサイトの構造を十分に調査したうえで検討してください。

また、元のPCサイトが初めからHTML5で出来てればいいですが通常のHTMLで構築されている場合やワードプレス、ムーバブルタイプ等などのPHPで制作されている場合、サイトそのものをCSSで調整するということが困難であるということもあり、実際は殆ど行われていません。

2.レスポンシブルWEBデザインに対応

レスポンシブルWEBデザインとは既存のPCサイトを可変表示を可能にし、スマートフォンから表示の場合はスマートフォンの横幅に合わせてサイトを表示させる方法です。

この場合、パソコン用ホームページも同時にリニューアルをする必要があります。更新が一度に済むというメリットはありますが、PCサイトをスマートフォンに合わせて疑似的に表示させているだけですから表や画像の位置などがうまく表示されず、一部不具合が生じる場合があります。

直接商品を販売するサイトではなく、飲食店や治療院など、来客を促すサービス業では最適だと思います。

3.新たにスマートフォンサイトを制作する方法

この方法では、スクラッチでスマートフォンサイトを制作するため、PCサイトやフィーチャーフォンの既存サイトの構造に依存することなく、サイト設計からデザイン制作、コーディングすべてをスマートフォンに最適化できます。

スマートフォンユーザーが違和感なくサイトを閲覧できる唯一の方法です。

ただし、この方法には以下のデメリットがあります。
自社でサイトを管理する場合、スマートフォンサイト用に別途HTMLを用意するため、テキストや画像を挿入するため、更新が通常の倍以上掛かる（単純にテキストを挿入するだけであれば倍の時間で済みますが画像をスマホサイト用に縮小したりすればさらに時間が掛かるため）。

また、ドリームウィーバーなどのホームページ制作ソフトがないと更新自体が出来ないということもあります。

但し、リアライズでは更新も行いますのでお客様の手を煩わすことはありませんのでご安心ください。

2.ワイヤーフレームの制作

サイト制作の方針が決まったら、次はワイヤーフレームの制作に取りかかります。

ワイヤーフレームとは、ページ内のどこに何を置くかを示した設計図のようなものです。通常はモノク口の線と図、テキストなどで記述します。

3.デザイン作成

ワイヤーフレームが完成したら、ワイヤーフレームを元にしてレイアウトを作成し、文字サイズ、全体のトーン&マナーなどのデザインを決めていきます。通常は最初にトップページでデザインの方向性を決めてから、下層ページのデザインを作成していきます。

なお、実際にスマー卜フォンサイトのデザインを作成する場合は、事前に以下の点について把握しておく必要があります。

画面サイズ(キャンパスサイズ)
解像度
転送速度(3G回線への接続時)

画面サイズの考慮

ページサイズは、スマートフォンの画面サイズに合わせて制作する必要があります。現段階では、iPhone、Androidがもっとも普及している端末であり、多くの制作者が実際に使用している端末でもあるので、iPhoneとAndroidの画面サイズに準拠してデザインするのが良いでしょう。デザイン制作においては実機での確認も重要なので、リアライズではパソコン上だけでなく、実機を確認しながら制作します（パソコン上で上手に表示されてもいざスマホで見ると不具合を生じることがあるため）。

解像度

スマートフオンサイトのデザインでは、高解像度ディスプレイでの見栄えの違いに注意する必
要があります。iPhone6の画面解像度は1136x×750pxですが、実際に画面に表示されるのはその半分程度の大きさです。これはPC用のディスプレイとスマートフォンのディスプレイで1ピクセルの大きさが異なるために起こる現象です。

そのため、スマートフォン用のデザインをPCで制作する場合はすべての要素を倍のサイズで作成する必要があります。例えば、幅640pxで画像を表示したい場合は1280pxの画像を用意する必要があります。同様に、文字を12ptで表示したい場合は24ptでデザインします。

転送速度

昨今LTE(Long Term Evolution)の普及により、スマートフォン端末の回線速度も速くなっておりますが、依然として3G回線で接続しなければならない場合が多いのが現状です。そのため、スマー卜フォンサイトでは回綿速度があまり速くない場所でも容易にアクセスできるように、ページ容量をできるだけ減らす必要があります。

CSS3では、グラデーションや角丸などを容易に表現できるので、PCサイトのように多数の画像やグラフィックを使用するのではなく、CSS3の描画機能を活用してページを作成することが大切です。

なお、リアライズではリンクやメールなどのボタンなどには極力画像ではなく、CSS3を使ってデザインをするようにしています。こうすることにより、ダイナミックな表現は維持したまま、ページ表示速度を上げることが可能になります。

4.コーディング

ページのデザインが完成したら、次はコーディング作業（実際に設計図に基づいてサイトを制作することです。

・文書構造に基づいてHTMLを作成する
・デザインに合わせてCSSでスタイリングを行う

5.プログラミング

コーディングが完了したら、必要に応じて使用する機能をプログラミングしていきます。サイト内にアニメーションを表示させるときに必要な作業です。