IAになりたい人、IAと仕事をしてみたい人必見!
実践的インフォメーションアーキテクト論
文＝清水 誠
実践系Webコンサルタント。DTP・印刷・ネットビジネスの分野を中心に、ITとIAによる業務カイゼン を手がける。印 刷物とWebへ画像をシングルソースするためのカラーマネジメント、文字情報をシングルソースするECM・XML・自動組版、ビジネスを加速するITイノ ベーションが最近のテーマ。1995年国際基督教大学卒
第5回
ワイヤフレームもコンテンツ管理
Webの画面設計をするためにワイヤフレームを書くのは、IAに限らず幅広く行われている。が、何のアプリケーションを使うべきか、どう記述すべきか、など現場の悩みどころは多い。今回は、ひとつの解決策として、Excelを使ってワイヤフレームという設計書に含まれるコンテンツを効率よく管理する方法を紹介する。
■理想のワイヤフレームとは?
理想のワイヤフレームとは?
ワイヤフレームに世界標準は存在しない。UI設計書、ページスケマティクス、画面設計書など名称もいろいろあり、ツールもホワイトボードからVISIO、InDesignなど多種多様だ。記述方法も白黒のシンプルな線画からきれいにデザインされたものまでいろいろある。どれにも一長一短があり、万能な方法は存在しない。プロジェクトや組織によって異なる状況の中で、伝えるべき内容と相手の都合に合わせて決めるべきだろう【1】。
【1】設計書は関係者間の共通言語
作図・DTPアプリケーションの限界
ツールとしては、VISIOやOmni Graffleような作図アプリケーションや、InDesignなどのDTPアプリケーションを使うことが一般的だ。が、【2】のような問題点があり、悩みどころは多い。
【2】作図・DTPソフトでワイヤフレームを作成するときの問題点
特に、規模が増えたり、機能が複雑になる最近のWebでは、設計書も複雑になるため、設計書に含まれるコンテンツの管理が必要になってくる。システム開発の分野では、膨大で複雑な仕様書を効率よく管理するツールが市販されている。ワイヤフレームのようなUI設計に使えるものもあるが、高価なため、IAだけでは導入は難しいだろう。
実は使えるExcel
多くのIAと同様に、筆者もいろいろなツールや手法を試行錯誤した。そしてたどり着いたのがExcelである。実は工夫すれば、Excelでもワイヤフレームとそのコンテンツを効率よく管理することができるのだ。【2】に列記した問題点はほぼ解決することができる。
■Excelを使うメリット
標準アプリケーションの強み
Excelを含むMicrosoft Office製品は普及率が高いため、作図やDTPの特殊アプリケーションのように作者がPDFに変換しないと閲覧できない、というようなことがない。多くの関係者がワイヤフレームをレビューするようなプロジェクトでは、各自が直接ワイヤフレームを修正するようにすれば、時間短縮につながるだろう。また、Windowsで作成されたExcelファイルを、Macを使うデザイナーやHTMLコーダーが開いてテキストをコピーし、PhotoshopやHTMLソースへ貼り付ける、というようなことも問題ない。
表計算アプリケーションの強み
作図やDTPアプリケーションの場合、印刷する紙のサイズに合わせたドキュメントを作成するが、Excelには紙の制約がなく、シートを縦へも横へも自由に広げることができる。この無限のキャンバスに書かれたテキストや図形を検知し、印刷する紙に合わせて自動縮小する機能がある【3】。はじめから横1×縦1の設定にしておけば、あとでページが長くなっても印刷設定を気にする必要がなくなる。
また、Excelの表計算としての機能を工夫すれば、ドキュメント中のコンテンツを効率よく管理することもできる。
【3】
1枚の紙に収まらない場合は
印刷紙に合わせて自動縮小できる
■Excelによるワイヤフレームの基本
セルへテキストを記入
これが基本。テキストが長いと、セルを飛び出して表示されるが、右のセルに値があると、テキストが欠けてしまう。このため、セルを右クリックして表示されるメニューから「セルの書式設定」を選び、「折り返して表示する」を設定するとよい【4】。
【4】折り返して全体を表示した例
セル幅を調整してレイアウト
ワイヤフレームは本来コンテンツの構造を定義する設計書であり、デザイン要素は含まない。ただし、デザインが終わっている場合はレイアウト、フォントサイズ、色などのデザイン要素を取り込むという方法もある。設計書というよりはプロトタイプのような位置づけになり、レビュー者はページの最終的な見え方を確認しながら総合的な評価を行えるというメリットがある。【5】の例では、最終的なデザインを参照しながらセル幅とフォントサイズを調整し、レイアウトを再現している。
【5】デザインに合わせてセル幅とフォントサイズを調整
図は控えめに
Excelの作図機能はテキストよりも表現力やレイアウトの自由度が高いので使いたくなるが、何かと扱いづらい。
たとえば、セルをクリックしたままマウスをドラッグすると複数のセルを選択できるが、図形の場合は「Shift」キーを押しながら全部の図形をクリックする必要がある。「図形の選択」モードに切り替えると、セルと同じようにドラッグで一括選択できるが【6】、図形の4つの角を完全に囲む必要があるので、選択に失敗しやすい。
【6】矢印カーソルのアイコンをクリックして「図形の選択」モードにし、領域の対角線をドラッグして複数の図形を選択。右上の水色のボックスを囲めなかったため、選択に失敗した
また、セルの幅や高さを変更すると図のサイズや位置が変わってしまうので、図形のプロパティで位置を固定する必要がある。さらに、環境によっては印刷時に位置がズレてしまうこともある。
このため、画像とボタンなど用途を限定するとよいだろう【7】。
【7】ボタン以外はテキストと罫線でフォームを表現した例。記号の○、●、▼を活用。チェックボックスには□が使える
■Excelだからできる設計書のコンテンツ管理
シングルソース
共通部分を1カ所にまとめてライブラリ化すれば、変更が楽になり、変更漏れも防ぐことができる。Excelのセル参照機能を使うと、別のセルに書かれたテキストを参照（リンク）することができる。セルが選択された状態で「=」を入力し【8】、次に参照先のセルをクリックする【9】。これで参照先と参照元のテキストが同期される【10】。別のシートにあるセルを参照することもできる。
【8】まず「=」と入力
【9】次に参照するセルをクリック
【10】Enterを押すと文字列の参照完了
実は、図形でもセル参照を使うことができる。テキスト入力状態にならないように図形の端をクリックし、画面上部の数式バーへ「=」と記入し、参照先のセルをクリックすればよい【11】。
【11】図形でも参照が可能
セル参照では、色やサイズ、スタイルなど文字列以外の情報は失われる。それらの視覚要素も反映させたい場合は、ほとんど知られていない次の「図のリンク貼り付け」機能を使うとよい。
テンプレート
指定した範囲のスクリーンショットを図形化する「図のリンク貼り付け」機能を使って共通部分をライブラリ化すると、テンプレート管理を実現できる。ライブラリにしたいセル範囲を選択してコピーし、貼り付け先をクリックする。次に「Shift」キーを押しながら「編集」メニューをクリックすると表示される「図のリンク貼り付け」を選択すると【12】、図形が貼り付けられる。オリジナル（コピー元）へ変更を加えると、リンク貼り付けした図形にライブカメラのようにリアルタイムで反映される【13】。ヘッダー、フッター、ナビゲーションなどの共通要素をライブラリ化し、シートへ貼り付ければ、疑似的にテンプレートを実現できる。
【12】「図のリンク貼り付け」だと
【13】変更はリアルタイムに反映
バージョン管理
ツール>変更履歴の記録>変更箇所の表示（H）...を選択して表示されるダイアログで「編集中に変更箇所を記録する」にチェックを入れる【14】。だれがいつ何を何へ変更したかが自動で記録されるようになる【15】。
【14】「編集中に変更箇所を記録する」
【15】だれがいつ何を何へ変更したかが記録される
■Excelワイヤフレームの事例
Excelを使ってワイヤフレーム（などの設計書）を書くときに役立つ機能を紹介してきた。最後に、これらの方法を組み合わせたサンプルを紹介しよう。
【16】は、本連載で実際に作成したワイヤフレームである。Webサイトと同様に、プロトタイプを作成した。
【16】プロトタイプ的ワイヤフレーム
通常は18文字2,000行、というように編集部が指示するボリュームでテキストを書き、図版と合わせて納品するのだが、使う図版の大きさや数によってスペースの過不足が発生してしまう。はじめからレイアウトを想定して、ちょうどよい量のテキストを書くことができれば、作業効率がよく、誌面を最大限活用することができる、と考えた。
比較のため、デザイン要素を含まない構造だけのワイヤフレームも作成してみた【17】。情報の構造のみに特化し、レイアウトや色などのデザイン要素を排除してある。
【17】デザイン要素を排除したワイヤーフレーム
筆者のこれまでの経験では、プロトタイプ的なワイヤフレームのほうが、関係者に好意的に受け入れられ、スムーズに進行することが多かった。
ただし、冒頭で述べたように、何のツールを使ってどのように表現すべきかは、表現する情報の性質や設計書にかかわる人（IA、デザイナー、レビュー者）の都合で決めるべきだ。次のようなポイントに留意して、Excelを使ったプロトタイプ的なワイヤフレームを採用するかどうかを検討してみるといいだろう。
・Excelの操作に慣れておく
・デザインを並行で進め、ワイヤフレームへ随時反映していく
・レビュー中にデザイン要素への意見が出ても否定しないでデザイナーへ引き継ぐ
・PhotoshopやHTMLよりも気軽に更新できることを生かし、レビューを短期間で反復する
本記事は『Web STRATEGY』2006年9-10 vol.5からの転載です
実践的インフォメーションアーキテクト論
文＝清水 誠実践系Webコンサルタント。DTP・印刷・ネットビジネスの分野を中心に、ITとIAによる業務カイゼン を手がける。印 刷物とWebへ画像をシングルソースするためのカラーマネジメント、文字情報をシングルソースするECM・XML・自動組版、ビジネスを加速するITイノ ベーションが最近のテーマ。1995年国際基督教大学卒
第5回
ワイヤフレームもコンテンツ管理
Webの画面設計をするためにワイヤフレームを書くのは、IAに限らず幅広く行われている。が、何のアプリケーションを使うべきか、どう記述すべきか、など現場の悩みどころは多い。今回は、ひとつの解決策として、Excelを使ってワイヤフレームという設計書に含まれるコンテンツを効率よく管理する方法を紹介する。
■理想のワイヤフレームとは?
理想のワイヤフレームとは?
ワイヤフレームに世界標準は存在しない。UI設計書、ページスケマティクス、画面設計書など名称もいろいろあり、ツールもホワイトボードからVISIO、InDesignなど多種多様だ。記述方法も白黒のシンプルな線画からきれいにデザインされたものまでいろいろある。どれにも一長一短があり、万能な方法は存在しない。プロジェクトや組織によって異なる状況の中で、伝えるべき内容と相手の都合に合わせて決めるべきだろう【1】。
【1】設計書は関係者間の共通言語
作図・DTPアプリケーションの限界
ツールとしては、VISIOやOmni Graffleような作図アプリケーションや、InDesignなどのDTPアプリケーションを使うことが一般的だ。が、【2】のような問題点があり、悩みどころは多い。
【2】作図・DTPソフトでワイヤフレームを作成するときの問題点
特に、規模が増えたり、機能が複雑になる最近のWebでは、設計書も複雑になるため、設計書に含まれるコンテンツの管理が必要になってくる。システム開発の分野では、膨大で複雑な仕様書を効率よく管理するツールが市販されている。ワイヤフレームのようなUI設計に使えるものもあるが、高価なため、IAだけでは導入は難しいだろう。
実は使えるExcel
多くのIAと同様に、筆者もいろいろなツールや手法を試行錯誤した。そしてたどり着いたのがExcelである。実は工夫すれば、Excelでもワイヤフレームとそのコンテンツを効率よく管理することができるのだ。【2】に列記した問題点はほぼ解決することができる。
■Excelを使うメリット
標準アプリケーションの強み
Excelを含むMicrosoft Office製品は普及率が高いため、作図やDTPの特殊アプリケーションのように作者がPDFに変換しないと閲覧できない、というようなことがない。多くの関係者がワイヤフレームをレビューするようなプロジェクトでは、各自が直接ワイヤフレームを修正するようにすれば、時間短縮につながるだろう。また、Windowsで作成されたExcelファイルを、Macを使うデザイナーやHTMLコーダーが開いてテキストをコピーし、PhotoshopやHTMLソースへ貼り付ける、というようなことも問題ない。
表計算アプリケーションの強み
作図やDTPアプリケーションの場合、印刷する紙のサイズに合わせたドキュメントを作成するが、Excelには紙の制約がなく、シートを縦へも横へも自由に広げることができる。この無限のキャンバスに書かれたテキストや図形を検知し、印刷する紙に合わせて自動縮小する機能がある【3】。はじめから横1×縦1の設定にしておけば、あとでページが長くなっても印刷設定を気にする必要がなくなる。
また、Excelの表計算としての機能を工夫すれば、ドキュメント中のコンテンツを効率よく管理することもできる。
【3】
1枚の紙に収まらない場合は
印刷紙に合わせて自動縮小できる
■Excelによるワイヤフレームの基本
セルへテキストを記入
これが基本。テキストが長いと、セルを飛び出して表示されるが、右のセルに値があると、テキストが欠けてしまう。このため、セルを右クリックして表示されるメニューから「セルの書式設定」を選び、「折り返して表示する」を設定するとよい【4】。
【4】折り返して全体を表示した例
セル幅を調整してレイアウト
ワイヤフレームは本来コンテンツの構造を定義する設計書であり、デザイン要素は含まない。ただし、デザインが終わっている場合はレイアウト、フォントサイズ、色などのデザイン要素を取り込むという方法もある。設計書というよりはプロトタイプのような位置づけになり、レビュー者はページの最終的な見え方を確認しながら総合的な評価を行えるというメリットがある。【5】の例では、最終的なデザインを参照しながらセル幅とフォントサイズを調整し、レイアウトを再現している。
【5】デザインに合わせてセル幅とフォントサイズを調整
図は控えめに
Excelの作図機能はテキストよりも表現力やレイアウトの自由度が高いので使いたくなるが、何かと扱いづらい。
たとえば、セルをクリックしたままマウスをドラッグすると複数のセルを選択できるが、図形の場合は「Shift」キーを押しながら全部の図形をクリックする必要がある。「図形の選択」モードに切り替えると、セルと同じようにドラッグで一括選択できるが【6】、図形の4つの角を完全に囲む必要があるので、選択に失敗しやすい。
【6】矢印カーソルのアイコンをクリックして「図形の選択」モードにし、領域の対角線をドラッグして複数の図形を選択。右上の水色のボックスを囲めなかったため、選択に失敗した
また、セルの幅や高さを変更すると図のサイズや位置が変わってしまうので、図形のプロパティで位置を固定する必要がある。さらに、環境によっては印刷時に位置がズレてしまうこともある。
このため、画像とボタンなど用途を限定するとよいだろう【7】。
【7】ボタン以外はテキストと罫線でフォームを表現した例。記号の○、●、▼を活用。チェックボックスには□が使える
■Excelだからできる設計書のコンテンツ管理
シングルソース
共通部分を1カ所にまとめてライブラリ化すれば、変更が楽になり、変更漏れも防ぐことができる。Excelのセル参照機能を使うと、別のセルに書かれたテキストを参照（リンク）することができる。セルが選択された状態で「=」を入力し【8】、次に参照先のセルをクリックする【9】。これで参照先と参照元のテキストが同期される【10】。別のシートにあるセルを参照することもできる。
【8】まず「=」と入力
【9】次に参照するセルをクリック
【10】Enterを押すと文字列の参照完了
実は、図形でもセル参照を使うことができる。テキスト入力状態にならないように図形の端をクリックし、画面上部の数式バーへ「=」と記入し、参照先のセルをクリックすればよい【11】。
【11】図形でも参照が可能
セル参照では、色やサイズ、スタイルなど文字列以外の情報は失われる。それらの視覚要素も反映させたい場合は、ほとんど知られていない次の「図のリンク貼り付け」機能を使うとよい。
テンプレート
指定した範囲のスクリーンショットを図形化する「図のリンク貼り付け」機能を使って共通部分をライブラリ化すると、テンプレート管理を実現できる。ライブラリにしたいセル範囲を選択してコピーし、貼り付け先をクリックする。次に「Shift」キーを押しながら「編集」メニューをクリックすると表示される「図のリンク貼り付け」を選択すると【12】、図形が貼り付けられる。オリジナル（コピー元）へ変更を加えると、リンク貼り付けした図形にライブカメラのようにリアルタイムで反映される【13】。ヘッダー、フッター、ナビゲーションなどの共通要素をライブラリ化し、シートへ貼り付ければ、疑似的にテンプレートを実現できる。
【12】「図のリンク貼り付け」だと
【13】変更はリアルタイムに反映
バージョン管理
ツール>変更履歴の記録>変更箇所の表示（H）...を選択して表示されるダイアログで「編集中に変更箇所を記録する」にチェックを入れる【14】。だれがいつ何を何へ変更したかが自動で記録されるようになる【15】。
【14】「編集中に変更箇所を記録する」
【15】だれがいつ何を何へ変更したかが記録される
■Excelワイヤフレームの事例
Excelを使ってワイヤフレーム（などの設計書）を書くときに役立つ機能を紹介してきた。最後に、これらの方法を組み合わせたサンプルを紹介しよう。
【16】は、本連載で実際に作成したワイヤフレームである。Webサイトと同様に、プロトタイプを作成した。
【16】プロトタイプ的ワイヤフレーム
通常は18文字2,000行、というように編集部が指示するボリュームでテキストを書き、図版と合わせて納品するのだが、使う図版の大きさや数によってスペースの過不足が発生してしまう。はじめからレイアウトを想定して、ちょうどよい量のテキストを書くことができれば、作業効率がよく、誌面を最大限活用することができる、と考えた。
比較のため、デザイン要素を含まない構造だけのワイヤフレームも作成してみた【17】。情報の構造のみに特化し、レイアウトや色などのデザイン要素を排除してある。
【17】デザイン要素を排除したワイヤーフレーム
筆者のこれまでの経験では、プロトタイプ的なワイヤフレームのほうが、関係者に好意的に受け入れられ、スムーズに進行することが多かった。
ただし、冒頭で述べたように、何のツールを使ってどのように表現すべきかは、表現する情報の性質や設計書にかかわる人（IA、デザイナー、レビュー者）の都合で決めるべきだ。次のようなポイントに留意して、Excelを使ったプロトタイプ的なワイヤフレームを採用するかどうかを検討してみるといいだろう。
・Excelの操作に慣れておく
・デザインを並行で進め、ワイヤフレームへ随時反映していく
・レビュー中にデザイン要素への意見が出ても否定しないでデザイナーへ引き継ぐ
・PhotoshopやHTMLよりも気軽に更新できることを生かし、レビューを短期間で反復する
本記事は『Web STRATEGY』2006年9-10 vol.5からの転載です
