現在、市場の中心であるiPhoneのSafariやAndroid端末の標準ブラウザでは、WebKitと呼ばれるブラウザのレンダリングエンジンを搭載しており、HTML5やCSS3といった最新技術への対応が進んでいます。 PCサイトのように古いWebブラウザへの対応を考える必要がないスマートフォンの世界では、むしろ新しい技術を積極的に活用したサイト制作がポイントになります。 WebサイトのデザインではいきなりHTMLを書くのではなく、まずPhotoshopやFireworksなどの画像作成ソフトを使って「デザインカンプ」を作成し、画像パーツを切り出してHTML化していくのが一般的です。 こうした流れはスマートフォンサイトの場合でも変わりません。
スマートフォンの画面は携帯電話のように固定ではなく、本体を縦にしたり横にしたりして使えます。 ところが、本体の向きを変えると画面の幅が大きく変わるため、縦向きの画面では表示に問題がなくても、横画面では見づらくなってしまう場合があります。
たとえば、縦画面では最適化されていた文章を横画面にすると、1行が長くなり見づらくなってしまうことが考えられます。 そのため、スマートフォンサイトではリキッド（可変幅）デザインにするのが基本です。 実際に可変幅に対応するのはHTML/CSSコーディング段階での作業になりますが、デザインカンプを作る際には画面の向きに応じてデザインします。 スマートフォンサイトでは3G回線で利用されることを想定して、ページ容量をできるだけ低く抑える必要があります。 そのため、PCサイトでは画像を使って表現していた角丸ボックスやグラデーションなどの装飾要素は、スマートフォンサイトではできるだけCSS3のプロパティを利用するのがおすすめです。
基本的にスマートフォンは画面に直接手を触れて操作します。 特に、iPhoneにはカーソルが存在しないので、ポインタをリンクや画像に重ねた際にアイコンを変更させるといった、ロールオーバー（マウスオーバー）による表現ができません。 PCサイトでは、リンクの下線を非表示にして、マウスを重ねた場合に下線を表示したり色を変えたりする場合がありますが、こうした動作はできないため、一目でリンクだと分かる必要があります。 リンクを設定する画像には立体感や枠を付けたり、アイコンでリンクであることを示すなど、サイト内でルールを定めて統一するようにしましょう。 スマートフォンサイトを作る際、毎回実際の端末で確認するのは非常に手間がかかります。
そこで、本格的なサイト制作に入る前に、PC上で確認できるプレビュー環境を整えておくと便利です。 実際の端末に近いイメージで表示を確認したい場合は、iPhone/Androidのアプリ開発者向けに配布されているSDK（Software Development Kit）に、「シミュレーター」が用意されているので、それを利用します。 作成したファイルをWebサーバーにアップロードすれば一応完成ですが、スマートフォンサイトのURLをユーザーに入力してもらうのは現実的ではないので、iPhone/AndoridからPCサイトにアクセスしたときには自動的にスマートフォン専用サイトに振り分けるようにしましょう。 iPhone/Androidからのアクセスを判別して専用サイトに振り分けるには、JavaScriptやPHPなどのプログラム言語か、Webサーバーの設定を利用します。 スマートフォン利用者はどんどん増えているので、スマートフォンサイトを作ってみてはいかがでしょうか。