デザインの作業

みなさんはデザインと聞いてどんな作業を思い浮かべますか?
イラストを描いたり写真を加工したり背景を装飾したり、ホームペ ージに彩りを添える作業を思い浮かべるのではないかと思います。
確かにその通りなのですが、ホームページの作成においてデザインとはそれだけではありません。

デザインの次の工程はコーデイングです。コーデイング (=coding)とはコードを書く こと、 つまりHTMLやcssを使って文章や画像を所定の場所に表示させる作業のことです。
そのためには、ページの横幅、文字の字体(フォントの種類)、色、行間の空き具合、 隙間の大きさ、どこにどのくらいの大きさで画像が入るか、など、あらかじめ決めておかなければならないことがたくさんあります。

デザインの工程でしなければならないことを書き並べてみました。
・ページ全体の横幅を決める
・ページ全体をいくつかの領域(エリア)に分ける
・ページ内の告領域のサイズ(横幅、高さ)を決める
・ページ内の告領域の隙聞の大きさを決める
・ページの表示に使う画像データを用意する(作るか購入したものを加工する)
・ページ全体の色を決める(文字の色、背景の色)
・文字の字体(フォントの種類)、大きさ(フォントサイズ)、行聞の空き具合を決める ・以上を考慮して、ページ全体を 1枚の画像データにする
・画像で表示させる部分と、HTMLやcssで表示させる部分を決める

なぜここまで細かく決めていくかというと、 HTMLはページ全体をどのような構造に分け るかが決まっていないと書けないからです。
cssも、文字の色や大きさ、行間や隙聞の広さ など見栄えに関する仕様が決まっていないと書けないからです。
HTMLもcss も、デザイン通りの構造と見栄えを形にするために使う 言語ですから、そもそもデザインで決まっていないことは書けないのです。
ただし、そこまで厳密なコーデイングが求められていない場合は、ページ全体を画像 (jpgやpng 形式)にしたファイルを見ながら HTMLやcss を書き、細かい部分は目視でだいたい合っていればOKとしたり 、画像を紙に印刷して「この文字は明朝体で14ピクセル」「この背 景は何番の色コード」「ここは後で正式な写真が入ります」など、コーデイングに必要な情報をペンで書き込んでおくアナログな方法を組み合わせて対応することがあります。