お待たせしました。
サイト制作よりブログ更新のほうが時間かかってます。
池ちゃん(@ikechan0201)です。
前回の記事に引き続き、サイト制作の流れ中編です！
１．作りたいサイトのイメージを固める
２．コンテンツを決めて、ページ数を定める
３．テキストを作り、デザインを決める←今日はここ！
４．コーディングを始める
５．最終チェックして公開！
前回で２まで書いたので、今回は３から。
３．テキストを作り、デザインを決める
２までで紙ベースでサイトのイメージが掴めてきたかと思います。
この段階ではそれらを絞って、クオリティーを上げていくことになります。
まずはデザインから。
オススメのソフトは「Fireworks」です。
どうやってデザインを作っていったのか流れをまとめておきます。
１．実際のサイトのサイズに合わせてファイルを作成
自分は幅を930pxにしていたので、その幅に合わせて高さは適当に。
２．とりあえず紙に書かれたモノを大雑把に配置
細かいデザインは後にして配置予定のバナーや文字情報をばらまきます。
３．文字サイズやマージンの調整
全部書くと多分幅に収まらないとか、思ったよりもサイズが合わないと思います。
文字サイズを調整して、本文/トピックの文字サイズを定義していきます。
本文の一般的な文字サイズなどもあるので、そういったことも意識しつつ。
また、バナーとバナーの間の距離感を決めていきます。
隙間がバラバラだと気持ち悪いし、右揃いなのに少しずれてると気になるので。
４．ブラッシュアップ
上の状態までをしっかりやれば、あとは細かいデザインやテキストの調整です。
正直、自分はこの部分に関しては、大分手を抜いてしまったので、
デザインがイマイチ、テキストが適当な部分もあります。
実際にサイトをリリースする際にはしっかりと細かい部分までこだわりましょう。
これをしっかり行えば、画像ファイルでWEBページができるはずです！
どんなサイトになるのか大分形が出来上がっていると思います。
ついでに、自分は今までイラレを使ってデザインをしていたのですが、
サイト制作は確実にFireworksのほうが便利です！
というのも、
・スライスして簡単に素材を作れる
・サイズ調整がやりやすい
これから上で作った１枚のページを分解して、コーディングしていきます。
わざわざバナーを１つずつ別ファイルにするのはとても面倒だけど、
それをスライスだとすぐに画像ファイルを作れてしまうのです。
もしデザインを修正したときにはスライスをもう一度して上書きすればいいだけなので、
何度も修正しても意外と手間にはならず。
また、イラレよりサイズ調整などがしやすいです。
マージンをどの程度とるのか、枠のサイズはいくつかなど、すぐに分かります。
（自分のイラレが古くて(CSだったんです)それらがわかりにくかったのもありますが）
というわけで、WEBサイトのデザインを作る際には、
「Fireworks」を使うことをお勧めします。
次はいよいよラストの後編ということで、
コーディングのお話。