これはウェブサイトのデザインを決める前に、サイト内に配置する要素とそのレイアウトをまとめておくものです。
「Googleドキュメントを使ってワイヤーフレーム作成過程を共有したい。」
そんな時におすすめのTipが紹介されていました。
直接的には関係ないという方でも、オンラインでのリアルタイム共有というアイデアは参考になると思います。
Googleドキュメント用ステンシル
デンマークに住むMorten Justさんという方が、Googleドキュメントでワイヤーフレームを作るためのステンシル＝型紙を作成してくれました。
先日公開されたGoogle図形描写を活用したもので、かなりの労作になっています。
ワイヤーフレームを作成するツールといえば、Visioなどが有名です。
最近ではオンラインサービスも登場しています。（Mockingbirdなどが）
Morten Justさんは、ワイヤーフレームの作成にGoogleドキュメントを利用するメリットを5つ挙げています。
- リアルタイムであること。チーム全員がドキュメントを共有して、お互いの作業の様子をその場で見ることができる。
- ワイヤーフレームはクラウド内に残っていくこと。ファイルをあちこちに送付する必要もないし、ドキュメントが先祖返りすることもない。
- データが消滅するリスクがないこと。すべての編集が保存される。
- 無料であること。
- ほとんどの人が既にGoogleアカウントを持っていること。だから、会員登録の必要がない。
実際の利用方法まとめ
実際に公開されている型紙のサンプルです。
ご覧になって分かるように、ワイヤーフレームに必要なものが網羅されています。
ただし、Morten Justさんも言うように、Google図形描写にはまだ課題が多くて、VisoやOmnigraffle比べるとまだまだ使い勝ってが悪いと指摘しています。
- ステンシル＝型紙のライブラリー機能がない。
- 別のドキュメントにコピペするのが容易ではない
確かにちょっと使いづらい感はありますが、実際にそれらを使ってワイヤーフレームを作成する手順を簡単にまとめました。
5/19現在、6枚のテンプレートが共有されています。
（1）共有されたファイルリストのページにアクセス
（2）ファイルを開く
クリックするとサムネイルが表示されます。
サンプルページ
ここで「開く」をクリック
（3）コピーを作成する
共有されたファイルが開きますが、このままでは編集ができません。
ファイルを開いたページ
そこで、自分で編集できるように「コピーを作成」します。
別ウインドウで「Copy of Wireframe: Product details」というようなタイトルがついたファイルが開きます。
この状態になれば自分の好きなように編集ができるので、左側にあるパーツを自由に移動してワイヤーフレームを組み立てることが可能です。
パーツ部分だけを別で新規に作成したファイルにコピーしたい場合は、以下の手順で行います。
別のドキュメントに持って行きたい部分をドラックして、範囲選択をします。
そして、「図形をウェブクリップボードにコピー」を選びます。
これで選択が完了。
別のファイルに移動して、貼りつけます。
ここで「図形」を選択すると・・・
コピーした部分を貼り付けることができる。
Google図形描写では、同一ファイル内であれば、右クリック＞コピー＆ペーストが可能ですが、別ファイルに貼りつけようと思うと、メニュから選択するしかないようです。
実用に耐えるまでには正直、もう少し時間がかかるように私も思います。
ただ、チーム内でのワイヤーフレームをしっかり共有することが、これから作るサービスのイメージ共有につながります。
このイメージの共有が、サイトの成否を分けると言っても過言ではないでしょう。
それを実現してくれるGoogleドキュメントの可能性に、今後も期待したいところです。