レスポンシブサイトの画面設計について

Writer： otsubo　更新日：2024/04/22

こんにちは、デジナーレ福岡オフィスの大坪です。

今回は「レスポンシブサイトの画面設計」についての考え方や重要なポイントを共有したいと思います。レスポンシブデザインは、異なるデバイスで一貫したユーザーエクスペリエンスを提供するために不可欠です。このブログでは、効果的なレスポンシブサイトを設計するための基本的なステップと考慮すべき点に焦点を当てて考えてみたいと思います。

 

コンテンツファーストでの制作ステップ

 

コンテンツファーストとは？

文字通りコンテンツ(内容)を先に洗いだして細かい要件などを書き出し、ワイヤーフレームやデザインの作成はその後に行います。こうすることで無理なくレスポンシブのメリットを生かせたウェブサイトを構築することが可能になります。

 

従来の設計と何が違うのか？

従来はデザインファーストのように、視覚的な魅力を優先してデザインされ、その枠組みにコンテンツを当てはめていく手法が主流でした。しかし、美しいデザインがある一方で、使いやすさや欲しい情報がすぐに得られるかといったことが犠牲になってしまいます。

デザインの面でも、画面構成で無理が生じると最悪の場合、振出しに戻り、情報設計から行わなければならなくなります。

その一方で、コンテンツファーストではユーザー体験を最適化し、情報がアクセスしやすく、かつ機能的なウェブサイトが実現可能です。

 

ウェブサイトを構築するために抑えておきたい３つの手順

 

1. コンポーネントの洗い出し

ターゲットとそのニーズを理解した上で、画面に必要なすべてのコンテンツの内容、そのコンテンツの優先順位付けといった洗い出しを行います。

 

2.コンポーネントの順序設定

コンテンツの洗い出しが出来たら、そのコンテンツをどのように配置していくか、ページの構造を設計します。情報の重要度や優先順位を元に、コンポーネントを縦一列に配置します。

 

3.コンポーネントのグルーピング

配置されたコンポーネントはバラバラになっているので、関連するコンポーネントをグループ化し、最終的なレイアウトに反映します。その後、ワイヤーフレームやより細かいビジュアルデザインを詰めていきます。

 

 

ワイヤーフレームの利用

ユーザーの目的に応じた操作性と視覚的な魅力を考慮しながら、サイト全体の設計図（ワイヤーフレーム）を基にデザインを進めます。このワイヤーフレームを元に、ビジュアルデザインを行い、使い勝手とブランドイメージを向上させた後、実装作業へと移行します。
このワイヤーフレームはエンジニアに対するコーディングの指示書の役割も果たしているので、ページ遷移や機能の要件、ページの階層なども明確にしておく必要があります。

 

レスポンシブデザインの基本

レスポンシブサイトでは、異なるデバイスで同じHTML構造を使用することが原則です。最初の設計段階で適切な計画がなされていない場合、情報設計工程まで戻って修正が必要になることがあります。これを避けるためには、初期段階での正確な計画が不可欠です。

 

ブレイクポイントの設定

デザインのレイアウトを崩れることなく適切に展開していくためには、一定の画面幅を基準にして、CSSを使用してレイアウトを切り替えていきます。画面の幅が変更されたときにレイアウトが切り替わるポイントのことをブレイクポイントといい、レスポンシブのあるウェブサイトではこのブレイクポイントが必要不可欠です。ブレイクポイントを大きく分類すると二つあり、

• メジャーブレイクポイント: スマホとPCなど、画面レイアウトを劇的に変更されるブレイクポイント
• マイナーブレイクポイント: 部分的なレイアウト調整用に設定されるブレイクポイント

があります。どこにブレイクポイントを設けるのかは実際のプロジェクトによってルールが異なったり、配置しているコンテンツ、ウェブサイトのメインユーザー層、どのデバイスでの使用を目的にしているのかによっても変わります。ですが基本として、これらのブレイクポイントを組み合わせて実装していくことになるでしょう。

 

まとめ

レスポンシブサイトの設計は、計画的かつ段階的なアプローチが求められます。コンポーネントの洗い出しからブレイクポイントの設定まで、各ステップはサイトの使用感と機能性に直接影響します。今回共有した設計手順が、皆様の実務現場で役に立つことができれば幸いです。