サイトリニューアルの記録
随分久しぶりに、会社のウエブサイトのデザインを変更しました。
床屋の頭と一緒で、面倒くさがらずにいつもびしっとしておかなければいけないのですが、つい人のサイトばかりやっていて自分のサイトまで手が回らないという状態が２年近く続いていました。
どうせやるなら、これもやりたい、あれもやりたい、といろいろ構想だけは膨らむので余計手をつけるのが面倒になってくる悪循環です。
昨日は14ヶ月ぶりにこのブログを更新したので、勢いでサイトのリニュアーアルのやってしまうことにして、一気に仕上げました。週末の間に終わらせようと締め切りを決めたのが良かったのか、昨晩と今朝家族が寝ている間に大体形になったので、細部まで詰めるときっといつまでも終わらないので見切りをつけて先ほどアップロードしてしまいました。まだまだ、納得のいかない点が沢山ありますが、とりあえずリニューアルするという目的は達成。
で、作った手順を記録しておきます。
1．ラフデザイン
なんとなく頭に浮かんだデザインを、Macでデザインします。私の場合は、Adobe Fireworksというソフトを使って、色々なレイアウトや色合い、サイズの組み合わせ試してみます。この段階では、「絵」としてのデザインでコーディングの事は考えません。
2．パーツ作成
ラフデザインの段階では、画像はアタリで素材集のサンプルなどを使用しますが、本番用のパーツの準備を始めます。今回は、ふだん愛用しているLAMYの万年筆をアクセントに使いたかったので、明るくなるのを待って外でデジカメで撮影して切り抜きました。ついでに、フッタ部分に使用するMOLESKINの手帳も撮影。
3. スライス作成
ラフデザインから、サイトのパーツとして使用できる部分を切り取って行きます。繰り返しパターンや、背景として使う部分のサイズを計算しながら、部分毎に画像ファイルを作成します。
4. CSSレイアウト
ラフデザインをCSSで実現するために、レイアウト構造を考えます。
5. CSS実装
CSSレイアウトを実際にコーディングして、各ブラウザで正しく表示されるかチェックします。この段階では、コンテンツや画像は使わずに、各ブロックに罫線と色をつけるだけのシンプルなHTML+CSSで試します。頭の中で「あーIE（インターネットエクスプローラ）なんて、氏ねばいいのに〜」と100回くらい唱えます。
6. コンテンツ流し込み
ここまでできたら後は単純作業です。各ページ毎のコンテンツを流し込み、動きが必要な部分にはjavascriptなどを入れて行きます。フッタやメニュー等各ページ共通の部分は別ファイルにして、同じファイルからSSIで読み込むようにします。こうすることにより、一カ所を更新すると全てに反映されるので間違いが少なくなります。
実際にはこの他に、キーワードの選定、出現頻度のチェック、SEO関連タグ埋め込み、アクセス解析ツールの埋め込み、文法チェック、などなど色々面倒な事があるのですが、ざっくりこんな感じです。多分、人によっていろいろなやり方があると思いますので、あくまで私の場合の例です。