レスポンシブデザインについては他の記事でも詳しくご案内させていただいているので、詳細は他の記事をご参照ください。こうしたページを制作するためには、やはり柔軟なサイトのレイアウトを実現することが非常に重要になってきます。
制作時に注意する点について他の記事でもご案内させていただいていますが、着手前の段階で特に気をつけたい点としては、
「コンテンツサイズの指定方法」
「タッチ操作を意識する」
この2点に集約されると考えられます。
【コンテンツサイズの指定方法】
他の記事でも既にご紹介させていただいていますが、画像やコンテンツの横幅はpxではなく％指定にすることで、画面サイズが変動してもレイアウトを保ったままサイトを見せることが可能です。
また「max-width」「min-width」のような属性を用いて要素の最大値/最小値を指定することで、一定のサイズを超える画面でも安定したレイアウトでサイトを見せることが出来るようになります。
【タッチ操作を意識する】
従来はそもそもPCサイトとモバイルサイトは別のサイトとして制作を進めていくことがベターでした。
スマートフォンでは操作性や画面サイズなどからPCサイトではなくモバイルサイトを見せることを推奨していますが、今までであればモバイルサイトで特に「スマートフォンで閲覧する」ことを意識して、つまりカーソルをあわせてクリックする方法だけではなく指でタッチすることへの操作性を意識して、サイトの制作を進めておられたかと思います。
レスポンシブデザインで作成されたサイトは、全ての端末で同じページを見ることになります。このため従来のようにモバイルサイトに特に注意するのではなく、PCサイトとしてタブレットからのアクセスの場合についても同様に注意が必要になります。
aishipではタブレットからのアクセスは原則としてPCと認識しています。タブレットを使用されている方はご承知のことだと思いますが、タブレットを使用する時は指でタッチするか、もしくは専用のタッチペンを使ってサイトを閲覧します。
既にこの点に注意をした上でサイトの制作を進めておられる方もいらっしゃるかもしれませんが、特にリンクのタッチのしやすさ、フォームの入力/選択など、タブレットでの操作性にも注意していくことが大切です。
【まとめ】
今回は「レスポンシブデザイン」のサイトを制作する上で、まず気をつけたい点についてご案内しました。今までにご紹介させていただいたスマートフォン向けサイト制作のコツも、そのまま流用できることがたくさんあります。それらを生かして、新しいサイト制作を進めていきましょう。
