テンプレートと編集画面の対応

デザインの決まったサイトを、これから更新していく体制に移します。更新するのは、デザインを作った人ではありません。

更新画面が汎用の一枚だと、どの欄がページのどこに出るのか、画面から読み取れません。更新する人は、公開ページと編集画面を見比べながら当たりを付けることになります。

編集画面は、テンプレートから導きます。ページの構成に合わせて、入力欄の並びと名前が決まります。

見出しの欄には見出しが、画像の欄には画像が入ります。編集画面がページの設計を映しているので、迷う余地が減ります。

デザインが決まったら、ページ内の要素を項目にブレークダウンして、フォームを設計します。テンプレート名・フィールド名・説明・全体の整合性を一覧にして、情報設計として行います。

テンプレートができたら、ワイヤどおりに画面が完全に再現できるかをテストします。ここで項目の過不足が分かります。

writeWiredでは、サイトのデザインを元に、テンプレートとフォームを作ります。編集画面の入力欄は、ページのどこに出る何なのかが分かる名前と並びで用意されます。

更新する人は、公開ページと見比べなくても、欄の名前で入力先が分かります。

フィールドには名前と説明を明記できます。テンプレートにT01のような短いコードを振っておくと、「T01の会社名のところに何を入れればいいの？」という会話が現場で通じるようになります。

更新する人が、作った人に聞かずに更新できるためです。

ヘッダー・フッター・サイトマップのようにイレギュラーの多い部分は、フォームにせず、HTML編集のままにすることを勧めています。