神森さん

日本電子専門学校様リニューアル
2004年4月リニューアル第一弾
フルCSSレイアウト
文書構造を意識したマークアップ
学科紹介をより分かりやすくする
他のページは既存のページをCSS化

反省点
作業時間が当初の予定よりもかかってしまった
CSSの設定をPJメンバ全員で自由に設定していた
CSSスキルの差によりクオリティがバラバラだった。

CSSレイアウトにより製作現場の変化
従来の制作とは違うワークフロー
ブラウザチェックに要する時間
グループ制作での個々のスキルの差による作業効率の低下
各要素をあらかじめきちんと洗い出す必要がある

2004年6月リニューアル第二段
フルCSSによりレイアウト
文書構造を意識したマークアップ
カテゴリの見直し
全ページオリジナルデザインでのフルCSS化

改善点
前回の反省点をふまえグリッドおよびパーツ設計を行う
CSSの設定は原則として一人
グリッド及びパーツ設計を元に、ベースを設計
ベースコードをドリのコードスニペットに登録
HTMLは基本的には同じ表現の繰り返しが多い、という事から使っていく
制作スタッフ全員でスニペットを共有


グリッドの定義とパーツ設計
グリッドを元にレイアウトボックスを作成
パーツデザインを元にパーツをCSSで定義

→極力スタッフにはスタイル定義を行わないようにすることでサイト制作の効率化を考える

デザイン作成
要素が入っている書割を書く。
例:下にナビがあるのものと左にナビがあるもの
入る要素は全て入れて、縦長になっても構わないので入れ込んだ絵(ある程度クリエイティブな)に落とす

サンプルページ制作
最初にドリで作りこみ、スニペットに登録していく。
パーツ(エレメント)として考え、それを全て登録していく
→スニペット仕様書をドキュメントにしたりする場合も必要になってくる?

DWへの取り組み
コードスニペット
よく利用するコードを登録することが出来る機能
CSSレイアウト時の有効活用
コードを登録

デザイナーからのグリッドでは余白、レイアウトをピクセル指定で貰うようにする(笑)


FWのデザインからDWのデザインビューにコピペしていく
基本ここではテキスト要素のみ
テキストの中の見出しを定義していく
レイアウトバーよりdivでのくくりを定義していく
この段階でIDかクラスを定義書にしたがって定義していく
CSSを記述していく
子孫などのセレクターの場合には詳細ラジオを選択

スニペットに登録するスタンダードを定義して、それぞれのパーツがどういう表現になっているのか、の制作管理表で運用。
パーツ化の進捗の管理もする。
最初に作ってしまえば、その後にもマスターとして使い回しが出来る。

スニペットはローカル保存が前提なので、拾い出す必要がある
ドキュメント&セッティング→アプリケーションデータ→マクロメディア→コンフィグレーションズ→スニペッツ
この中のドキュメントを他の方と共有する

コード仕様書を見ながら、というのはナンセンスで、ブロック、パーツ、要素・・・の積み重ねでやっていくことでスキルの差や工数を減らしていく。
→ページの要素(エレメント化)を全て洗い出す、という事が何よりも大事になってくる

(付録)
テキスト、ワードからドリへ
空白行のあるプレーンテキストは、改行前後をpタグで囲ってくれる。
.テキストの場合は、BRタグが入る。

しかしワードの場合は、空改行は空改行にもpタグがあたってしまう。
半角スペースのある空改行をドリに持ってくるとそれは無視される
shift+リターンの改行はBR扱いになる。(矢印が↓の形になる)