ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【webデザイン】レスポンシブサイト製作と注意点まとめ

レスポンシブサイト制作について

個人的に見返す用としていくつかのサイトの要点をまとめました。

引用サイト1

https://ferret-plus.com/2614

レスポンシブの特徴

  • 単一のHTMLの表示をmedia queriesで切り替える
  • 最小横幅・最小縦幅にあわせてCSSを複数記述する
  • クローラーの巡回の手間が減るのでgoogleでも推奨されている。

携帯向けページとレスポンシブページの違い

携帯向けページ
PC用URLとモバイル用URLを用意する。
基本的に画像データ等を共有しない。
レスポンシブページ
単一のHTML。データは基本的に共有(置換する場合もある。)

レスポンシブデザイン制作時の注意

  • スマホページの文字は大きめに
    14~16px程度
  • 画像は可変。%やvw指定など
  • ボタンは上下7pxほどの余白を入れる

Viewportを指定

<meta name="viewport" content="width=device-width;" />

テキストの量や改行を見直し

  • スマホ上では長文になって読みにくくなる場合がある。ページを分ける、改行をスマホ用にするなど

横並びのコンテンツを縦並びに変更

  • カラム数を減らす。縦並びにしたとき余白をちゃんととる。

入力フォームの最適化

タッチ操作を意識する

引用サイト2

http://www.cherry-pick.jp/blog/web-design/responsive-web-design-point.php

各デバイスのサイズ把握

(注:ターゲトによって違う可能性あり?)

スマホで表示したいこと、PCで表示したいことを整理

ナビゲーションをどう縮小、格納するか等

バイスによってUIを変えるかどうか

  • アコーディオンが増えるとコンテンツが縦に伸びて、ユーザーの操作数が増えるので注意

画像の文字サイズなど注意

引用サイト3


https://webbu.jp/responsive-design-575

情報伝達がメインのサイトはレスポンシブと相性がいい

  • 修正の手間が少ないから

ターゲットとするデバイスと横幅をあらかじめ決める

レティナ対応

スマホ用最適化では、アプリ制作という選択肢もある

引用サイト4

http://sinap.jp/blog/2016/01/rwd.html
レスポンシブする際のデザインの変化の仕方

Mostly fluid 画像をそのまま縮小

  • 縮小した場合メイン画像として成立するか等を考慮

画像の左右や上下を非表示にする

  • ウィンドウごとに画像の表示領域を考えていく。

Layout Shifter 画像の見せ方、サイズ自体を変える

  • ウィンドウごとに画像を差し替えて最適な比率とレイアウトで見せる。

Column Drop カラム落ちさせる場合は比率に注意

  • 画像の比率がどのウィンドウでも一定の場合、どの画面で見ても見やすいような比率にしなければいけない。
    囲みや罫線の変化も考える

Tiny Tweaks ワンカラムのデザイン

  • モバイルファースト
  • 1ページのサイト、テキストが多い記事など、単一列のレイアウト

Off Canvas 領域を隠す

  • ブラウザサイズが小さくなるに連れナビゲーショなど一部の情報が隠れる
  • クリックやフリックによって隠れた情報が再表示

ディレクション時のポイント

引用サイト5
http://www.aiship.jp/knowhow/archives/6968

モバイルファーストで制作

  • 操作性など最も制約が多いモバイル基準にコンテンツ・デザイン・素材・レイアウトを考え、それらをタブレットやPCへ流用・調整していく

ブラウザファースト

  • 「最低限を満たせばよい」という思考
  • レスポンシブサイトでは完全に望みどおりの表現はできない場合がある

HTMLは1ソース、画像素材、テキストなどのコンテンツも基本共通

  • 共通化することで、可変させた時の作業量も大きく減らすことができ、結果コストを下げることにつながる

バイス毎に完全なデザインを作りコーディングする事は難しい

  • レスポンシブサイトの構築や更新業務が初めての場合、ワイヤーフレーム作成→完璧なデザイン作成→コーディング・完成というようなワークフローでは、当初(完璧なデザイン)の思い通りにいかないことが多い。
  • ラフ>コーディング>実機検証>修正
    というワークフローを繰り返していく。

ワイヤーフレームとデザイン

  • イメージを掴むためのもので、詳細に作成する必要はない
  • ほぼ同じデザインの利用の場合、デザイン案は一つであとはワイヤーフレームのみで良い。

レスポンシブサイト製作時の炎上ポイント

HTMLは1つでも工数は2ページ分以上

対応デバイスを先に決める

  • レスポンシブデザインは多様なデバイスの閲覧に汎用化(ベター)させるのが目的であり、最適化(ベスト)するものではない
  • 最適にするのではなく、「見やすくする」のがレスポンシブ
  • 最初に対応範囲とスケジュールの承認を取っておく

スマホから設計

最初にPC幅で設計してしまうと、スマホ表示の際に幅が短くなるため、崩れることが多い

懸念点はあらかじめ伝ええる

  • レイアウトの崩れなど

デザイナー、コーダーに相談

  • 多面的な視点で要件を整理