WEBディレクターズガイド#8「原稿整理・実装」
こんにちは。本日はWEBディレクターズガイドの8回目「原稿整理・実装」をテーマに進めていきたいと思います。
この工程は、お客様にご入稿いただいた原稿や画像素材などを実際にWEBページに落とすための下準備です。(コンテンツ制作から依頼を受けている場合は、取材撮影などの工程を挟みますがここでは割愛します。）
情報の構造化について理解した上で、ラフ制作の作業を行うようにしてください。情報の構造化を行う事により人間だけでなくマシンリーダブルなWEBサイトになります。
この作業はコーダーがどのようにページを作ればよいかを把握するための作業です。この工程の粒度により、やり取りの回数が減り制作の効率化を図れます。
情報の構造化とは
私が居たチームでは文書構造化と言う風に呼んでいたのですが、ご存じの通りWEBサイト→WEBページはいくつものページが階層構造になり存在しています。（例えばトップページ→インデックスページ(コレクションページ)→詳細ページの様に。）
同様にWEBページもタイトル→見出し→本文…の様に段階を踏んで存在しています。つまり、情報自体も構造化された状態で段階を踏んで整理をしてあげることで見る人にも、機械にも、理解しやすい情報となります。
この工程は、単に準備したWEBページ用の原稿をコーディングする方に横流しする事をする作業ではなく、「情報の収まり方」をコントロールする工程になります。言い換えれば雑誌の編集に似た工程になるのではないかと思います。
そういった意味合いでは、これまでWEBディレクターズガイドで記載してきた工程も全て構造化の上で成り立っています。
全てが構造化の上に成り立っている
少し本テーマと話はそれてしまいますがこれまでの工程は全てUX→UIのプロセスに密接な関係があります。ではなぜUIUXと呼ぶのか？と思われた方はとても鋭いと思います。この経緯についてはUX原論と言う本を読んでいただくことをお勧めします。
ユーザーエクスペリエンスの要素 © 2000 Jesse James Garrett
http://www.jjg.net/elements/translations/elements_jp.pdf
上記は有名な図ですが、ユーザーの利用文脈をモデル化した上で何がユーザにとって良い体験をもたらすのか。与えたい価値はどの点にあるか、を戦略定義しそれらを要件化(コンテンツ・機能）しアウトプットへ繋げていくわけですが、まさに今回のテーマは上記の「情報アーキテクチャ、情報デザイン」にあたる工程になります。つまりWEBサイトの制作プロセス全てが構造化しているのです。
そしてこのディレクターズガイドは情報中心の要素定義を主体にしています。なぜならユーザにとって必要なのはWEBサイトを操作する事ではなく、操作の先に得るモノであったりコトであるからです。ですが、どちらが欠けても成立しません。常に機能と情報はカウンターパートな関係にあります。
WEB制作で起こりやすいトラブルと言うのは、戦略→要件→構造→枠組→表現の積み上げの過程において、表現を支えるヤグラが脆い状態において起こりえるということが出来るのではないでしょうか？
今ここでは情報、と呼んでおりますが、これはいわばコンテンツなのでここをおざなりにすると「情報アーキテクチャ」「情報デザイン」のヤグラが脆くなり機能重視で面白くないWEBサイトが出来上がってしまいます。（※なので私は「流し込み」という言葉が大嫌いです。）
具体的には？
では具体的に何？と言うことに触れていきます。こういう事です。
ページの中における情報はすべて人間が人様に対して行う話として例えてみると良いかもしれません。「話の趣旨が明確で一貫としている」「言いたい内容が分かりやすく、論旨がシンプルである」話が好まれる様に、WEBページにおいてもこの考え方同じなのです。
逆に「話があちこりに脱線して何か言いたいか分からない」「論旨が不明瞭である」「無駄に話が長い」こういった話が好まれない様に、WEBページもまたこの考え方は然りなのです。人間が好まない話は機械も好みません。
これらをHTMLのルールに沿って考える工程。これが文書構造化です。
りんごを例に取ってみるとこういう形になります。
りんごと言うテーマがあります。ここでは日本各地の有名な品種を説明していくわけですが、日本各地の有名な品種って何か？こういうものがあります、ではその有名な品種についてどうか…みたいなテーマ対するトピックが派生する、、、と言うようなイメージです。ここで突如みかんの話をし始めたりするのは話に一貫性がないのでダメです。
例えばHTML5の場合ですとh1を主題として設けられます。
これらを行う手段は色々ありますが、基本的にはメモ帳（か、それに準ずるテキストエディタ）に、
(1カラム)
<h1>ページタイトル</h1>
<リード文>リード文…</リード文>
<h2>こちらはh2</h2>
<p>本文をここに記載していきます</p>
<画像=”ファイル名” alt="代替えテキスト” title="タイトル属性”>…
のような形で記載していくのですがベースとして、HTMLでコーディング済みのパーツ一覧(我々はモジュールテンプレートと呼んでいました)があれば、構造化された文書があることでマークアップが効率的に進められます。
デザインシステムが同じ考え方ですね。
コーダーの方が情報の重みが分かるようディレクターが上述の様に情報を構造化し、渡し制作工程を進めます。
ですが、まぁこの工程実は伝わればよいので、テキストパッドでなくてもPowerPointでラフを書いて渡す形でも構いません。
肝心なのはこの工程がコンテンツの質を左右するということです。コンテンツの品質はここで決まります。
最後に
いかがでしたでしょうか。今回は原稿整理と書きましたが、情報に対するディレクターの向き合い方みたいな事が伝わればいいなと思っています。
実装には触れておりませんが(苦笑、この辺はWEB制作のステップを時間軸で感じて頂くためにタイトルには実装、の文字も含めさせていただいたという次第です。
次回は、「#9：動作検証・デバッグ」～見るべきポイントを見よう～、について書きたいと思います。
ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？