これだけ注意すれば十分!スマホサイトの作り方

必要な情報を厳選する

スマートフォンサイトを作る際は、PC用のサイトをまるまる作りなおす必要があるケースが殆んどです。なので、もしも「どんなデバイスでアクセスしても違和感のない見栄えを実現しよう!」と思っているなら、まず最初にやらなくてはいけないことは「いらないページを削除する」ことになります。なぜならスマートフォンは解像度が低いので、どうしてもサイズが足りなくなるからです。厳選したページだけを選ぶようにメニューを変えないと、とてもではありませんが画面に収まりません。

まずはスマートフォンのサイズで最適化する

スマートフォン用のサイトをデザインをする際は、まずは縦長のモード(ポートレイト)をデザインします。なぜなら、PCサイトとは全く異なるレイアウトになるからです。最もPCのレイアウトから遠いところを先に片付けておかないと、後から調整することが難しくなります。縦長レイアウトの難しさは、トップのメニューについて、横幅がどうしても足りなくなることです。なので、デバイスの横解像度に合わせて一部のメニューを隠したり、別ボタンを押して現れるようにするなどの工夫をする必要があります。

最後にタブレット型のサイトに調整する

スマートフォン向けのデザインが済んだら、最後にタブレット用のレイアウトを作ります。間違ってもPC用のレイアウトと同じにしてはいけません。タブレットはPCと近い解像度を持っていますが、微妙に小さいからです。またタブレットはマウスによる操作ではなくタッチ操作になるので、各UIの部品が一定のサイズより小さくなってはいけません。一般的には140pxより小さいボタンサイズなどは、指で押しにくいサイズなのでNGとされています。

スマホアプリのゲームなど紹介をする為に、スマホの方でも見やすいようにスマホサイト用にわかりやすくしてます。