Blog スタッフブログ

■レスポンシブデザインとは？

サイト閲覧時に使用する、デバイスの画面サイズに依存しないWebデザインのこと。
PCよりもスマホでWEBサイトを見るユーザーが多数派になって久しい現代では
サイト制作における基本的な考え方と言えます。

WEB制作の開発環境そのものにおいては未だPCの役割は大きいですが、それゆえにユーザー目線に立つうえでは重要です。

❶文字の改行位置

画面サイズの縮小によって、テキストの改行位置がPCと同じままではバランスが悪くなってしまいがちです。
改行タグにCSSを設定することで、スマホ画面でのみ改行タグを表示するようにすればスマホサイズでも無理のない見た目になります。

❷レイアウトの変更

画像とテキストを横並びにするようなレイアウトをそのまま画面縮小すると、画像の領域がとても狭くなってしまう上テキストも改行が増えて読みづらくなります。
こういったレイアウトはスマホ画面ではそれぞれを縦に並べるようにすることで見やすくなります。

PCサイズでは画像とテキストにそれぞれ

display:flex;

を設定し、スマホサイズではこれを解除するやり方が手っ取り早いです。

画像やテキストの位置をorderプロパティで制御すればより自由な編集が可能です。

※注意点

縦にコンテンツを並べるとその分ページが長くなり、ユーザーが画面をスクロールする手間も増えます。状況によっては以下のように、一部コンテンツのみ横並びを保つといったやり方も重要になります。

❸テーブルレイアウトの表示

テーブルレイアウトはスマホ画面では横長になり、画面を右側にスクロールする手間が増えます。
この際、ユーザーに横スクロールできることをわかりやすく示すことが重要です。
ScrollHintというjavascriptのライブラリを使えば簡単に実装できます。

$(function () {
  new ScrollHint('.js-scrollable', {
    scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
    applyToParents: true,
    i18n: {
      scrollable: 'スクロールできます'
    }
  });
});