レスポンシブデザインを始める前に知っておきたいこと。
netbwave
今回は、初心者向けのレスポンシブデザインのホームページ制作の考え方です。
レスポンシブデザインのホームページって、作り始めの頃は意外と手間が掛るモノです。特に初めてレスポンシブデザインでホームページを作る時などは、かなり苦労するでしょう。
複数のホームページをレスポンシブデザインで作ると、作業の流れも理解して制作効率もアップします。ですが、もしかするとあまり効率の良い作り方をしていないかもしれません。
まずはスマートフォン画面から作り始める
レスポンシブデザインの場合、PC画面とスマホ画面の違いは、何処でしょうか？
PC用は作り込まれた、完璧な画面。
対してスマホは省略された簡素な画面。
と言ったところでしょうか。
PC画面は各種の装飾を施して、綺麗なページに仕上げます。そこからスマホ画面を作り上げると言う事は、例えば、綺麗に飾り付けられたデコレーションケーキの飾りを全て取り除く作業だと思えば、解りやすいかと思います。
これって、結構手間が掛ると思いませんか？
一度作ったモノから余計な装飾を取り外す。しかもかなり綺麗に……
スタイルシートの指定したセレクタそのものが不要であれば、簡単に削除出来ますが、そうでない場合は、意外と手間が掛ります。また常に、スマートフォンでの画面確認をしながら作業を進める事は、結構手間が掛りますよね。
仕事なので、当たり前だと言ってしまえばそれまでですが、作業効率と言う面からは、疑問ですよね。
これが逆だとどうでしょうか。
最初はシンプルなケーキを作って、そのシンプルなケーキをコピーして、そのコピーにデコレーションを施して行く。
最初はスマホにつきっきりですが、スマートフォン画面が出来れば、後はスマートフォンでの確認はいりません。
こちらの作業の方が、簡単で楽だと思いませんか？
もちろん、ブレイクポイント※1の設定次第では、複数の画面サイズでの確認は必要になりますが。ベースとなるスタイルシートにプロパティを足すあるいは変更するだけなので、比較的に簡単な作業で終わります。
作業時のポイントになるのは、まず使用が予想されるタグを可能な限り洗い出します。
デザインデータがある場合は、デザインデータに沿った画面を作る事が優先されますが、デザインデータに無い部分。ブログ本文などで、ホームページ制作後に追加される部分も考慮して、一般的な記事に含まれるであろうタグがどのように表示されるかを確認しておく必要があります。
と言っても、それほど多くはありません。大体基本的なタグを押さえておけばよいので、私が作業をする時は以下のタグで大体の表示チェックをします。
テキスト関連
H1～H6、P、strong（ｂ）、a
リスト関連
ul、ol、dl
ブロック（範囲指定）関連
div、span
イメージ関連
img
フォーム関連
input、button
表レイアウト関連
table
ざっとこんなところでしょうか。その他デザイン上必要なタグがあれば、それらを追加して、表示の確認をします。
タグについては、テンプレート化しておけば、他でも使えるので便利です。
スマホの画面が出来上がれば後は、気のすむまでPC用のスタイルシートをいじり倒せば、よいのです。
レスポンシブデザインにつてい、多くのサイトで制作方法が書かれています。ですが、こう言った作業効率について言及しているサイトはあまりありません。
制作方法やテクニックも重要ですが、初心者やこれから勉強してみようと思っている人には、こうした【何故そうしなければならないのか】というところまで掘り下げた内容が必要な気がしたので、今回は技術的な要素を排除して、概論的な内容を書いてみました。
（まぁ、ブログに長々とこんな事を書いて、更に詳しい制作方法とか書いてたら、超長文のブログが出来上がるので、無理もないのですが）
WordPress（ワードプレス）などのCMSテーマを改造する場合
最近はWordPress（ワードプレス）などのCMSが普及しているので、ゼロベースで最初からレスポンシブデザインのホームページを制作される人は少ないと思います。
他のテーマをベースにして改造した方が作業効率は良いですからね。
ですが、テーマ改造の場合でも、やはりスマホ画面から作業した方が速い場合があるので、私はまずスマホ画面の改造からやります。ただ、WordPressの場合はスマートフォン画面での修正は基本的には無い場合が多いです。あってもリスト系のタグと、DIVタグぐらいでしょうか。イメージタグも、きっちり調整されて表示されるので、そう言った意味では、手間いらずで助かります。
だからと言って、タグの確認を後回しにしてしまうと、後の修正（調整）で結構泣きが入る事があります。デザインが出来上がっている場合は、特に面倒な事があるので、出来ればスマホ画面から制作を始めた方がよいでしょう。
特にヘッダー廻りやグローバルナビゲーションなどは、改造ベースのテーマによってはかなり手を焼く事があるので、先に確認しておいた方がいいでしょう。
最後に。
たとえ、趣味でホームページを作っていても、作業効率がいいに越した事は無いので、今回の話はそう言った人の手助けになれば、よいです。
レスポンシブデザインに限った事ではありませんが、作業効率を高める為には、どうすれば良いのかと言う事を常に考えておく事が大事です。作業効率がいいと言う事は制作に余裕が生まれるので、綺麗なホームページを作る事にも繋がります。
現実問題として、端末の画面に合わせたレスポンシブデザインの場合、ブレイクポイントを何処に設けるかで作業効率がかなり変わります。大雑把にPCとスマホのみの2種類か、タブレットや大型スマホなどに合わせると、3～4種類の作りこみが必要になるので、意外と大変です。
その大変さを緩和する為にも、作業効率を上げる事は、重要になってきます。
ブレイクポイント※1
レスポンシブデザインで最も重要な、画面を切り替える横幅サイズ。
一般的にはスマートフォンとタブレットで2つぐらいを設定している場合が多いです。
