Trans

神戸のNPOやソーシャルビジネスの創業・運営のお手伝い

パワーポイントでプロトタイピング（日本語訳）

翻訳 ユーザビリティ・アクセシビリティ

Prototyping with PowerPoint

この記事では、パワーポイントを使ったデスクトッププログラムとWebアプリのインターフェースのプロトタイピングについて扱っている。
また、マイクロソフトのパワーポイントに焦点を合わせているが、OpenOfficeのようなほかのプレゼンツールでも大体は同じようにできる。
この記事のために、私はパワーポイントの2000を使った。ここで扱ったものはjansoft.pptを参考にしてほしい。

パワーポイントを使うことの利点

なぜプロトタイピングにパワーポイントを使うのか？
個人的にはプロトタイプを作るために様々なツールを使ってきた。Photoshop、Dreamweaver、Internet Explorer (HTML+javascript)やDelphiなどだ。これらのツールにはよい点もあれば、悪い点もある。
パワーポイントはいくつかよい点がある。

  1. ほとんどの人がパワーポイントを仕事場で使っていること。
  2. スライドマスタがほかの全てのスライドのためのテンプレートを作ってくれること。
  3. スライド間での整列、コピー、ペーストがとても簡単であること。
  4. そのプレゼンを見た人たちがそれを最終的な完成品だとは見なさないこと。
  5. どこででもプレゼンできること。
  6. ワンクリックでWebページとしても保存できること。

はじめよう。

はじめに、私たちはスライドマスタを作らないといけない。スライドマスタとはすべてのスライドに表れてほしいパーツで構成されているものだ。
もし、私たちがWebサイトのプロトタイプを作るのであれば、プレゼンの背景は空白のブラウザの画像を必要とすると思う。

  1. Internet Explorer（もしくはほかのブラウザ）を空白のページで開く。もしくはアドレスバーにabout:blankと入力し、エンターキーを押してもよい。
  2. クリップボードにブラウザのウィンドウのスクリーンショットを貼り付けるためにAlt+Print Scrnを押す。
  3. Windows付属のPaint（もしくはほかのグラフィックソフト）を開き、新しい画像としてCtrl+Vで貼り付ける。
  4. BMPまたはPNGファイルとして画像を保存し、Paintを閉じる。

これで、スライドマスタを作る準備ができた。

  1. パワーポイントで新規の空白のプレゼンテーションを開く。はじめのスライドにレイアウトを適用するかどうかを聞かれたら、キャンセルを押す。
  2. プレゼンテーションを保存する。
  3. スライドマスタを編集するために、メニューから「表示 - マスタ - スライドマスタ」を選択する。
  4. 背景で右クリックし、ドロップダウンから「背景」を選択する。背景から「塗りつぶし効果」を選択する。
  5. 塗りつぶし効果のダイアログでタブの「図」を選択し、「図の選択ボタン」をクリックする。
  6. さきほどPaintで保存した画像を選択し、画像の選択の確認にOKをクリックする。背景に適用させるために「適用」をクリックする。
  7. スライドマスタを閉じるために「閉じる」ボタンをクリックする。

まだこれで終わったわけではない。私たちがWebサイトのプロトタイプを作っていると仮定しよう。そのサイトは最上部にメニューバーを持っていて、その下にタイトルバーがある。
そこで、タイトルバーをプロトタイプに加えてみよう。スライドマスタにタイトルバーを加えることもできるのだが、すべてのスライドでタイトルバー自体を修正できない。
これが、私たちがタイトルバーをタイトルマスタに加えないといけない理由だ。私たちは新しいタイトルマスタを必要とする。

  1. スライドマスタを編集するためにメニューから「表示 - マスタ - スライドマスタ」を選択する。
  2. 新しいタイトルマスタを挿入するために「挿入 - 新しいタイトルマスタ」を選択する。
  3. そのタイトルマスタがスライドマスタのブラウザの背景を継承していることを確認できるだろう。
  4. そのタイトルマスタで長方形のボックスを確認することができるか。マスタタイトルのスタイルを編集するためにクリックする。
  5. まずテキストを選択し、フォントをVerdana、16 point、Boldに変更する。
  6. 次に、最上部のメニューバー（個々のメニューはそれ自体個々のスライドに追加する）のためのスペースをあけておいて、上部に移動させる。ブラウザの背景の範囲に合うようにサイズを調整する。
  7. ボックスを右クリックし、「プレースホルダーの書式設定」を選択する。塗りつぶしに「青」を選択し、OKをクリックする。
  8. もう一度テキストを選択し、色を「白色」に変更する。
  9. 「マスタサブタイトル」、「日付/時計」、「フッター」、「数字領域」のプレースホルダーを削除する。
  10. 最後に「閉じる」ボタンをクリックする。

これでプロトタイプのはじめのスライドの準備ができた。

  1. Ctrl+Mを押して、デフォルトのレイアウト（タイトルスライド）を選択する。
  2. タイトルバーの真ん中をクリックし、「Home」とタイプする。
  3. 「F5」をクリックし、プレゼンを実行する。
  4. プレゼンを離れるためにはESCをクリックする。

リンクとフォーム要素を追加する。

これで、全てのスライドにコンテンツを追加するための基本的なスライドができた。
クリックできるようなプロトタイプを必要とするのであれば、スライドにハイパーリンクを追加する必要がある。幸運にもパワーポイントならすごく簡単にできる。
もしかすると「コントロール ツールボックス」からフォームコントロールを使いたくなるかもしれないが、それらを使う必要はない。
フォームコントロールっぽいものを作るために、オートシェイプとテキストボックスだけでやってみよう。
私たちは完成版のアプリを作ろうとしているわけではない。プロトタイプであって、議論できればいいわけだ。
そのサイトはユーザのログインを必要とする保護されたサイトであり、ログイン後にメインメニューがあり、サイトは3つのセクションに別れている。ソフトウェア、記事、リンクだ。こんなサイトと仮定しよう。
トータルでは5ページを必要となり、既に私たちはトップページは作った。では、ほかのページを作っていこう。

  1. ホーム
  2. メニュー
  3. ソフトウェア
  4. 記事
  5. リンク

この段階でプレゼンテーションを保存しよう。
では、メニューのスライドを選択し、3つのテキストボックスを加える。それぞれのページの真ん中に、ソフトウェア、記事、リンクというテキストも入れよう。

  1. 整列と配置を使って、それらをちゃんと並ばせる。
  2. 3つのテキストボックスを選択し、Verdana、24 pointの文字サイズにする。
  3. 「ソフトウェア」のテキストを選択し、右クリックで「ハイパーリンク」を選択する。
  4. ハイパーリンクダイアログで、「このドキュメント内」、「スライドタイトル」を展開し、ソフトウェアのスライドを選択し、OKをクリックする。
  5. 記事とリンクのスライドでも同じ事を行い、記事とリンクのスライドにもリンクする。

リンクの色が少し青白いので、青色に変更しよう。

  1. メニュースライドを選択し、「スライドのデザイン - 配色 - 配色の編集」を選択する。
  2. 配色の編集ダイアログで「ユーザ設定」タブを選択する。
  3. 「強調とハイパーリンク」ボックスを選び、色を青色に変更する。
  4. 「強調と表示済みハイパーリンク」ボックスを選び、色を青色に変更する。
  5. 「適用」ボタンをクリックすると、その変更が適用される。

Ctrl+Sでプレゼンテーションを保存し、F5で実行する。はじめのスライドをクリックでスキップし、メニューのスライドへ。3つのリンクのどれかをクリックすると、それぞれ「ソフトウェア」、「記事」、「リンク」のスライドにいける。

ログイン要素を加える

ホームのスライドにログイン要素を加えよう。スライドの左側に次の要素を入れていこう。

  1. テキストボックスに「ユーザ名」と入れる。
  2. 黒色の線の長方形を作る。
  3. テキストボックスに「パスワード」と入れる。
  4. 黒色の線の長方形を作る。
  5. テキストボックスに「ログイン」と入れ、黒色のボーダーとシルバーの背景色を入れる。

テキストはVerdanaで10 pointのフォントサイズにする。整列と配置でちゃんとしたレイアウトにする。「ログイン」テキストを選択し、メニューのスライドへハイパーリンクをはる。
Ctrl+Sでプレゼンテーションを保存し、F5で実行する。
ログインをクリックすると「メニュー」スライドにジャンプする。3つのリンクのどれかをクリックすると、それぞれソフトウェア、記事、リンクのスライドにいける。

最上部のメニューバーを加える

最後にメニューの項目をメニューバーを加えよう。

  1. メニューのスライドを選択する。
  2. スライドのどこでもよいのでテキストボックスと共に「ログアウト」というテキストを入れる。
  3. テキストをVerdanaでフォントサイズを10 pointにする。
  4. そのテキストにホームのスライドへのハイパーリンクを貼る。
  5. メニューエリアの右端に移動し、それをコピーするためにCtrl+Cをクリックする。
  6. ソフトウェア、記事、リンクのスライドに移動し、それぞれCtrl+Vでログアウトのリンクを貼り付ける。

ソフトウェアのスライドを選択する。

  1. スライドのどこでもよいのでテキストボックスと共に「メニュー」というテキストを入れる。
  2. テキストをVerdanaでフォントサイズを10 pointにする。
  3. そのテキストにメニューのスライドへのハイパーリンクを貼る。
  4. メニューエリアの左端に移動し、それをコピーするためにCtrl+Cをクリックする。
  5. 記事、リンクのスライドに移動し、それぞれCtrl+Vでメニューのリンクを貼り付ける。

プロトタイプを仕上げる

あとは必要な分だけプロトタイプに詳細なものを加えていこう。そして、プレゼンのためにプロトタイプを保存し、議論しよう。

訳者より一言

couldの長谷川さんのPowerPointを使ったプロトタイピングというエントリーに触発されました。
僕もサイトを作るときはグラフィックデザインに落とし込む前に必ずパワーポイントでプロトタイプを作るのですが、その方法をちゃんと調べたことはないなと思い、自分のブクマを探していてこれを訳してみようと思いました。いささか古い記事ではありますが、十分な汎用性がある記事かなと思っています。