レスポンシブデザイン制作の流れ

モバイルファーストを念頭に進める

様々なデバイスに一つのソースで対応できるレスポンシブデザイン。
その制作を行う上で最も大切なのが、モバイルファーストという考え方です。スマートフォンなどを前提とした、必要最低限の要素だけを配置した軽量なコンテンツの設計を心がけることでタブレットやPCへ展開した際も、様々な事がスムーズに進みます。

検証、確認、修正の重要性

レスポンジブデザインでのwebサイト制作では、デバイス毎の検証、確認、修正がかなり重要な工程となってきます。
PCの各ブラウザでの検証はもちろん、タブレット、スマートフォンの実機での検証も必ず行いましょう。

レスポンシブデザイン制作の作業の流れ

・ワイヤーフレームの作成
サイトのどこに何を配置するかをレイアウトしていきます。
このとき意識したいのが前述したモバイルファーストの考え方。
気を付ける点としては、それぞれのデバイスへと展開したときに整合性がとれた配置にするということです。

・デザインの作成
デザイン作成時に気を付けるポイントは、クライアントとのコミュニケーションをしっかり取りながら行うという事です。
まずはアクセスした際に利用者がはじめに見る部分であるファーストビューを作成し、そのテイストがクライアントの求めるモノに応えられているのかを確認しましょう。

・コーディング・検証、確認、修正
確認すべきポイントとしては、
ワイヤーフレームどおりにコンテンツが配置されているか？
デザインどおりにコーディングがされているか？の2点です。
これは、かならず実機で確認を行うようにして下さい。
PC上で、スマートフォンやタブレットをシミュレーションできるアプリなどもありますが、ボタンがタップしやすいものか？
ユーザーを迷わせる設計になっていないか？などは実機で見る方が確実に分かりやすいです。