以前、弊社でロゴやメニューなどを作成いたしました函館市本通の焼肉店「焼肉 はこだて牛若丸」。
今回、新たに公式ウェブサイトも制作させていただきました。
このサイトでは、スマートフォンやタブレットからアクセスした際にも見た目が崩れず情報を閲覧しやすい、「レスポンシブデザイン」という手法を取り入れています。
例えば、PCなど大きいサイズのウィンドウで見た場合はこんな感じです。（画像はクリックで拡大できます。）
続いて、タブレットから見た場合。
ここではiPadを縦方向に持った際の解像度である横幅768ピクセルで表示させています。（画像はクリックで拡大できます。）
幅が狭まり全体的にコンパクトになっていますが、文字サイズなどはほぼ変わっていないため、拡大しなくてもそのままで読みやすくなっています。
ではスマートフォンから見た場合。
ここではiPhone4～5の解像度である幅320ピクセルで表示します。（画像はクリックで拡大できます。）
PC、タブレットとは大きくレイアウトが変わっていますが、表示項目が減るということはなく、PCで見た際と同じ情報を得ることができます。
スマートフォンが登場してすぐの頃は、まだアクセスも少なかったため、特に対応をしない（PCサイトをそのまま縮小して表示させる）ケースや、最低限の情報のみを見やすく提示し、あとはPCから閲覧してくださいという対応が多くされました。
しかし現在は状況が大きく変わり、サイトによってはモバイル端末からのアクセスの方がPCよりも多くなっていることも考えられます。
特に「はこだて牛若丸」様のような飲食店の場合、外出先で近隣のお店を検索するといったケースが多く想定されるため、モバイル端末で情報を得やすく表示させることが重要になります。
また、飲食店以外の業種でも、近年はスマートフォンのメールや、Twitter、Facebook、LINEなどといったアプリ経由でリンクを共有されることも多くなったため、モバイル表示にきっちり対応することがますます求められていくと思われます。
今回制作したサイトでは、上記の3サイズの他にiPad miniやiPhone6 Plus、Androidの各端末など、あらゆるサイズのディスプレイに対応して表示されるように設計していますので、是非お手持ちの端末で表示を確かめていただければと思います。
