【Web制作の現場】小畑式マークアップ術：アーキテクチャダイアグラム
前回紹介させていただきました「アーキテクチャダイアグラム」について、
掘り下げていきたいと思います。
前号を見逃した方は、バックナンバーよりご覧ください。
アーキテクチャダイアグラム
「アーキテクチャダイアグラム」では、主に下記の4つの項目を設定していきます。
※案件によっては、項目が増えたりします。
- レギュレーション
- サイトマップ
- ディレクトリマップ
- メタ情報
マークアップデザインエンジニアの仕事は、この「アーキテクチャダイアグラム」を作ることから始まります。
ちなみに。。。
この「アーキテクチャダイアグラム」を編み出すまでに、3年以上かかりました！
そのノウハウを惜しみなく皆様にお伝えしたいと思います。
誰にも言わないでねｗ
これらの資料は「エクセル」で作成していきます。
「エクセル？」と思ったあなた！
「エクセル」は、非常に便利なツールなので、ぜひ使い慣れてください。
僕の作業自体、エクセルとにらめっこしている時間が多数ですｗ
設計をしっかりと行なってからでないと、実装に入りません。
それはなぜかというと、、、
準備をしっかりしたほうが「効率良く作業ができる」から。
準備に8割ほど時間を掛けるくらい。
「脳内マークアップ」を行なってから、実装に入るのです。
「脳内マークアップ」って、怪しい響きですがｗ
これ重要なんですね。
慣れるまでは、ついつい、手を先に動かしがちですが、
実際に手を動かす前に考える作業を入れると更に効率良く作業が出来るので、
お試しください。
前置きが長くなりましたがｗ
詳しく見ていきましょう！
【レギュレーション】
このシートは、プロジェクトの仕様を決め込んでいくものです。
このシートを元にクライアントと仕様のコンセンサスを取って行きます。
を書きこんでいきます。
「レギュレーション」は、一度作ってしまえば他の案件でも使いまわせるので、はじめだけ気合入れて、作りこみましょう。
これが成果物にもなりますので、クライアントとの打ち合わせ時に確認してもらって、承認を得てから、実作業に入るようにします。
特に、OSとブラウザの所は、はじめにキチンと詰めておかないと、大変なことになります。<>
言った、言わないの揉め事も、ブラウザの問題が多いです。
「IE6でも見れるように」とかの話を先にキッチリ詰めておきましょう。
※最近では、IE6を排除しよう的な運動もありますね。
【サイトマップ】
このシートでは、サイトの構成を記載していきます。
サイトの構成だけでなく、
など
【ディレクトリマップ】
サイトマップが確定したら、ファイルの構成を記載していきます。
具体的に
- フォルダ名
- ファイル名
- bodyに付与するID/CLASS名（ページごとに決める場合）
- 文字コード
など
【メタ情報】
結構忘れがちなのが、メタ情報。
サイトマップを用いて、下記の項目を記載します。
基本的に、クライアントに記載してもらうようにしています。
- title
- description
- keywords
と、以上が「アーキテクチャダイアグラム」の全貌になります！
たぶん、他の制作会社では見れないノウハウですね。
あまり、出したくないのですがｗ
メルマガを読んでいただいている皆様は特別ですよ★
ということで。
次回は、これらをどのように実装につなげていくか？
ということをお伝えしたいと思います。
また長くなってしまいましたね。。。
すみませんｗ
