コラム

コラム

あなたのサイトはどのレイアウト変化が最適ですか?

これまでの記事にてレスポンシブwebデザインは、PCから閲覧された時はPC向けのレイアウトへ、iPad等のタブレットからはタブレット向けへ、スマートフォンからはスマートフォン向けへ変化すると説明して来ました。

レスポンシブwebデザインには、変化のしかたにも複数のパターンがあります。
コンテンツの内容により、どのように変化させるか、最適なレイアウトを考える必要があります。

そこで今回は、レスポンシブwebデザインのレイアウト、5つの変化例を紹介したいと思います。

レスポンシブWebデザイン5つの変化

① 可変を前提に!一般的なレスポンシブ

可変を前提に!一般的なレスポンシブ
PC向けには任意のレイアウトを、タブレット向けには横幅を小さく変形、スマートフォン向けには1カラム、と言った風にデバイスの幅に合わせ画面の横幅を変更し、カラムを並び替えるレイアウトです。
固定サイズと可変を組み合わせる、もっともシンプルな方法です。

② カラムを落として変形

カラムを落として変形
PCでは2カラムから3カラムで制作しておき、ウィンドウ幅が小さくなると3カラムから2カラムへ、
2カラムから1カラムへと変化します。
任意のウィンドウ幅になると順番にカラムを落としていくレイアウトです。
タブレット、スマートフォンでは1カラムで表示します。

③ デバイス毎にレイアウト変更

デバイス毎にレイアウト変更
スマートフォン向けには1カラムのレイアウトですが、ウィンドウの幅が大きくなるにつれ、レイアウトが変化していくレイアウトです。
PC向け、タブレット向け、スマートフォン向けと、まったく違うレイアウトになり、情報量の多いサイトで良く見られます。

④ 1カラムベース

1カラムベース
こちらのレイアウトはシングルページのサイトによく見られます。
1カラムだけで制作されており、画面の幅に応じてウィンドウ全体の幅が変化します。
コンテンツのレイアウトが変わることはなく、幅が小さくなると、画像、テキストが小さくなり、画面外へはみ出るテキストは改行されます。

⑤ 画面外領域を使用

画面外領域を使用
スマートフォン向けアプリや、Webアプリによく使用されています。
画面外の領域を使いコンテンツを表示し、JavaScriptや、タッチデバイスでのスライド操作等で表示します。
JavaScriptが使えない環境や、タッチタッチデバイスではない環境への対応が必要です。

終わりに

レスポンシブwebデザインを実装するにあたり、レイアウト設計は重要です。
どのレイアウトがコンテンツ内容にあっており、ユーザーにとって使用しやすいのかを考えなければいけません。

5つの変化例を紹介しましたが、一長一短であり、どれが一番優れていると言う事はありません。
各コンテンツ内容にあったレイアウトを考え、制作していく必要があります。

最近ではモバイルファーストと言う言葉も使用されており、webサイトのスマートフォンへの対応が求められていいます。
モバイルファーストとはスマートフォンやタブレット等、画面が小さく、回線速度が一定ではないモバイル端末を中心に制作を進める事を言います。

これからホームページの制作を考えている方や、モバイルサイトの制作を考えている方は、
モバイルファーストを意識し、レスポンシブwebデザインでのホームページ制作をおすすめします。

最新のエントリー

企業イメージを向上させ、目的を達成するWebサイト制作を

Webサイトをただ作るだけでは意味がありません。適切なブランディングや戦略、ユーザーの立場に立ったデザインやWebソリューション
などを用いて、すべては企業の目的を達成するためにクレビスファクトリーは全力でお客様の協力をいたします。

株式会社クレビスファクトリー サービス一覧