eyemovic inc.

Works blog仕事の取り組み・ビジョン

2015.01.30

ディレクター&デザイナー向けレスポンシブザイン超入門

スマホのユーザー数も年々増加し、ご相談いただく案件で
「レスポンシブ対応でお願いします」というケースもかなり増えております。
その背景としてはスマホユーザーのアクセスがどんどん増えている事とか、Google先生の一言とか、更新性の事とか色々ありますが、その辺の突っ込んだ話はさておき。

単純に「案件数が増えている=トレンド」なわけですが、
レスポンシブデザインもあくまで「手段」の一つ。
当然ながら万能ではないので、発注側、受注・制作側ともに、
レスポンシブデザインにどのようなメリット・デメリットがあり、
どのような制約があるか、という事を理解しておく必要があります。
テスト段階になって「思ってたんと違うー」というのは誰も幸せになりませんからね。

特に、私はディレクターという立ち位置で
主にサイトの設計やデザインディレクションを担当したりするので
自分自身での整理を兼ねて一度まとめてみようと思いまして。
ちなみに今回の記事はデザイン&ディレクター目線ですので、
HTMLタグがどうとかCSSがどうとかブレイクポイントがどうとかいうのは一切ないのでご了承を。

レスポンシブ(ウェブ)デザインってなに?
簡単に言うと、1つのURLでPC、スマホ、タブレットといった複数の画面サイズに対応したデザイン
※1つのURLで、裏側にPHPとかでデバイス判定してテンプレート変えたりして・・・とかは当たり前だけどレスポンシブデザインではないです。

武蔵野美術大学のウェブサイトを例に。
PCの画面サイズで見て、ブラウザウィンドウの横幅を「ぎゅーん」と縮めてもらうとすごい分かりやすいですね。
スライダー画像やコンテンツのサムネイル画像の大きさやテキストブロックの大きさが変わったり、ヘッダナビゲーションが収納されたり出て来たり。

01_3size

 

レスポンシブ(ウェブ)デザインの基本要素と簡単な解説

サイトにアクセスいただき、動きを見ていただけるとなんとなくわかりますが、レスポンシブデザインの基本要素としては以下の3点が挙げられます。

  • ブラウザの横幅(端末の横幅)に合わせたレイアウトに変わる
  • 画面サイズによって要素の表示/非表示の切り替えができる
  • 要素の順番は基本的に変わらない。これは設計時に超重要。

少し説明を分かりやすくするために、先ほどの3サイズ別の画面の「要素」を色分けした図になります。

02_3size_color

まずは2つめの要素の表示/非表示について。
PC画面で出ているヘッダナビ、検索などの機能、グローバルナビをそのままスマホ画面に並べると、ボタンだらけになって使いづらくなります。そこでスマホでの閲覧時はこれらのボタンを非表示にし、代わりにロゴの上にナビゲーションボタンを集約させています。

 

続いて3つめの要素の順番が変わらないについて。
要素の順番としては左上からスタートしていきます。

  1. ロゴ
  2. ヘッダ・検索・グローバルナビ
  3. メインイメージ
  4. スペシャル
  5. お知らせ
  6. トピックス
  7. ニュース・・・

基本的にこの順番はPCでもスマホでも変わらない、という所がポイント。
要素の順番が変わらない(変えられない)というのがどういう事かというと・・・。

例えばユーザー目線に立ち、善かれと思って
「スマホユーザーは最新情報を先に見てもらいたいから、スマホサイズになったときは[3.メインイメージ]と[5.お知らせ]を入れ替えましょう!」というのは、残念ながらできません。できなくはないですが、かなり無理矢理になるため適切な方法ではない。

ただ、要素の順番を変える事は出来ませんが、2つめに挙げた要素の表示/非表示を使うことはできます。
武蔵野美術大学のウェブサイトでは、スマホで閲覧したときは「資料請求」「交通アクセス」といったスマホユーザーにとって優先度の高いコンテンツへのリンクをロゴの上に表示されるように設計されています。これはとってもユーザーフレンドリー。

ほとんどのウェブサイトで言える事ですが、情報の優先度というのはウェブサイトにアクセスしてきたユーザーの状況(端末)によって変わります。
自宅で見るのか、屋外で見るのか。はたまた特定の人しかこないのか、初めて来る人が多いのか。
レスポンシブデザインはあくまでサイト構築の一つの手段ですので、できること・出来ない事、メリット・デメリットをを理解し、このようなどのようなユーザーの状況が多いのかという事を考え、ユーザーに取って使いやすく、さらに運営側にとってもバランスの良い形をつくって行きたいな、と思います。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。