【ウェブサイト制作オンラインレッスン後記】

HTML歴２ヶ月目でブログのコーディングへ

先日、オンラインレッスンで、HTML歴2ヶ月目の生徒さんに
そろそろ自力でページを作れるようになっていただくために
制作課題（ブログ風ページ）の仕様書を作りました。

基本的なHTMLタグとCSSの書き方がある程度終わったので、
仕様書通りに１からコーディングしてページを作り上げる
過程へと進みます。

私が仕事でやってきたデザインとは根本的に違うんですね

この生徒さんはベテランのデザイナーさんなのですが、
Webの分野はご経験がありませんでした。

先日、レッスンの冒頭でこの仕様書をお渡ししたときに、
生徒さんから質問がありました。

「最初に余白とか文字サイズまで決めてから作るのですか？」

「私が仕事でやってきたデザインとは根本的に違うんですね」

これ、とても良い質問なんです。

フォトショップやイラストレーターなどの画像編集ソフトを
お使いの方はわかると思いますが、いくつものレイヤーを
重ね合わせて最後に細かい位置調整をしていきますよね？

でも、ウェブページ（HTML）の画像やボックスはブラウザを
クリックしてもドラッグしても動かすことができません。

ウェブページ制作には設計が必要

ブログを書いたことがある方は経験されていると思いますが、

「この写真をもうちょっと右に表示したいんだけど・・・」
「微調整がきかない・・・」

もどかしいですよね。

そんなとき、多くの方はこうすると思います。

「スペース（空白）を入れて調節しよう！」

でも、仕事としてウェブページの制作や更新に関わる人が
このやり方しかできないと困ります。

何十ページもあるブログやサイトだとどうするんですか？

納品先（クライアント様）に、

「１ページずつ、毎回スペースや改行を入れてください」

と説明するのですか？

そんなことをしなくて済むように、HTMLを書きはじめる前に
サイト全体のページ構成やレイアウト（余白や文字サイズも）
をきちんと考えておくことが大切です。

これをしないと、制作の途中で

「うーん、ここはもう少し広げたほうがいいか・・・」

「あ！そしたら他のページも同じ幅にしないとダメかな・・・
　面倒くさい・・・」

「納期まで時間がないし、クライアント様はそこまで
　細かいこと気にしないだろう・・・やめとこ」

ということになってしまいかねません。

でも、こういった細かいところをサイト全体で統一する
ことってすごく大事なんです。

部分的に見ただけなら誰も気づかないかも知れませんし、
クライアント様も

「ここ、なんかズレてる気がするけど、細かいこと言うのは
　気がひけるから言わないでおこう・・・」

と思うかも知れません。

しかし、サイトの違和感というのはこういうところから
生まれるものではないでしょうか？