この記事は、css指定でサイトのデザインを描けるようになった人に向けて書いています。
テクニックやテンプレの話ではなく、どう取り組めば結果的に早くサイトデザインを完成させられるのか。
その考え方をツラツラと述べます。
htmlと見本デザインを見ることに時間をかける
例えば、1ページのデザインに10時間かかる場合。
html・cssにかけるのは、htmlに1時間、cssに9時間になると思います。
一方、8時間で仕上げる場合には、html2時間、css6時間の配分となります。
- 10時間 … html(1時間) css(9時間)
- 8時間 … html(2時間) css(6時間)
8時間で終わらせる場合、htmlに1時間多く費やしていますけど、そのぶんcssを3時間も減らせています。
つまり、スピードアップのポイントはhtmlにあります。
で、このhtmlの2時間ってのは何をしているのかといえば…
1時間はコードを書く時間になります。
そして、もう1時間がレイアウトの把握に費やします。
見本デザインとhtmlのコードを突き合わせながら、<header>はここの部分。
<main>や<section>はここなんだなっていうのを確認します。
とにかくその1ページの全体像を大まかに把握することに力を注ぐ。
そんな感じです。
ここに時間をかけます。
もっと具体的には、
見本デザインを見て、ヘッダー・セクション・フッターなどの大まかな範囲を把握
↓
htmlでレイアウトを組む
↓
見本デザインとhtmlレイアウトを突き合わせて見る
↓
htmlレイアウトの組み方の修正
↓
見本デザインとhtmlレイアウトを突き合わせて見る
となります。
だいじなのは、htmlのコードを書きあげることではなく、見本デザインの全体把握とヘッダーがそのデザインのどこに相当するのか。
セクションはどこなのかを理解することです。
これによって、結果的にサイトデザインの完成が早められます。
言い換えると、cssがはやく書けるようになります。
もし、ここに時間をかけずにhtmlレイアウトを組んだあと、真っ先にcssの指定をしはじめれば、作業が進みづらくなります。
みなさんがhtml/cssでサイトを作っていく時、
- 見本デザイン
- テキストエディタ(html/css)
- ブラウザ
ブラウザ … Google ChromeやSafariのこと。
少なくともこの3つを1つの画面で切り替えて見ていると思います。
しかも、htmlとcssの画面もテキストエディタ内でいっしょには見れません。
タブの切り替えが発生ているはずです。
つまり、同時に見れないんですね。
見本デザインもhtmlコードもcss指定の画面、それに指定した結果を確認するブラウザも。
だから、いくら見本デザインがあったとしても、テキストエディタに切り替えた途端、どこの部分をやろうとしていたのかを簡単に忘れてしまいます。
htmlレイアウトを見てもまたすぐに見本デザインに舞い戻らないといけない。
そんなことがひっきりなしに発生します。
見本デザインを見て、css指定する箇所を確認
↓
htmlの画面で指定する要素を確認するが、デザインが分からなくなる
↓
見本デザインを見返して指定する箇所を再確認
↓
htmlの画面で指定する要素を確認
↓
cssで要素に指定する
仮にhtmlの画面を見ながらなんとか思い出せたとしても、その思い出す作業が脳へ負担をかけるんですね。
ジャブ程度の小さなものかもしれませんが、蓄積すると大きなダメージになる。
この思い出す作業を1つの指定ごとにやるんですから。
1〜2時間作業してると、それなりの疲労になってきます。
しかも、作業は1日では終わらないはずです。
となると、2日目も3日目も同じことを繰り返さないといけないんです。
でも、あらかじめ…
1時間多くの時間を割いて、見本デザインとhtmlのレイアウトの位置関係(ヘッダーなど)を頭でイメージできるようになればどうでしょう。
すんなり…とまではいかなくても、cssの指定に割とスムーズに移れます。
見本デザインの確認
↓
htmlレイアウトで指定する要素を確認
↓
css指定
見本デザインとhtmlのレイアウトが頭に入っているので、脳へかかるストレスも減ります。
そうなると、作業は捗るしやってても疲れにくい。
ちなみに、この脳への負担を減らすために2画面がいいと過去の記事でもお伝えしました。
よかったらご覧ください。
遠回りして早く終わらせる
どうしてもhtmlレイアウトを組んだらすぐにcss指定をしたくなります。
ただ、見通しを立ててから始めないと、うまくいかないことが多いんですね。
どっかで手詰まりになってしまう。
そうならないためにも、ページの全体を把握するということが必要です。
もちろん、完璧に把握することはできませんよ。
だれだって。
実際にcssで指定していかないと分からない場合もたくさんあります。
それが細部だったりします。
しかし、それ以外の割と大きなエリアなどは、把握しているに越したことはありません。
先ほど述べたように、脳に余計な負荷をかけず、css指定ができるからです。
そして、それが結果的にサイトデザインの完成を早めることになります。
さいしょに遠回りするのがたいせつなんですね。
ウェブの仕事って、結構こういうことが多いんです。
ですので、この遠回りする感覚を掴んでいただけたらと思います。
まとめ
サイトデザインを制作するうえで、ヒントになればさいわいです。
というわけで、終わり。