ワイヤーフレーム

A collection of 12 posts

プロセス

ブレないワイヤーフレームを作るコツ

すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の5つのアプローチ」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは4つあります。 ワイヤーフレームを作る目的はなにか 作ることで何を達成させたいのかを明確にします 制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります 誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります 誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特定のインタラクションを確定させたいのか ワイヤーフレームを作るということだけに考えを集中してしまうと、そもそもの目的が失われることがあります。どのアプリケーションで作れば効率的にワイヤーフレームが作れるのか選ぶのではなく、何をすれば上記の役割を果たすことが出来るのか検討し、それに応じてワイヤーフレームをつくる道具を変えるのが最適でしょう。私は主に OmniGraffle を利用していますが、時には HTML ベースですし、Photoshop や PowerPoint ということもあります。 HTMLベースで作るときの落とし穴 ここ数年注目されているのが HTML を使ってより本物に近いワイヤーフレーム (むしろプロトタイプといえる) を作るというアプローチ。コンテンツの量によってスクロールの仕方が異なりますし、

ワイヤーフレーム

OmniGraffleを便利に使うあれこれ

制作のためにいろいろなソフトを使っていますが、数年経っても相変わらず使っているもののひとつに OmniGraffle があります。ダイアグラムやワイヤーフレームを手軽に作れますが、多機能なので奥が深いソフトのひとつ。以前もOmniGraffleを使ったテンプレート作りで便利な使い方を幾つか紹介しましたが、今回も最近(やっと)見つけたものも含めて6つ紹介します。 下準備を忘れずに Webサイトのワイヤーフレームを作るのであれば新規文書をそのまま使わず、キャンバスのサイズをきちんと調整しましょう。ディフォルトではルーラの単位がインチになっている場合もあるので、まずはピクセルに切り替えます。グリッドの間隔もインチではなくピクセルにしておくと設計がしやすくなります。OmniGraffleでは、グリッドをオブジェクトに手前に表示させることが出来るので、厳密な設計を好む方は手前に表示したほうが作りやすいでしょう。 もちろん、こんなことを毎回するのは面倒です。毎回使いそうなキャンバスの設定が完了したら、テンプレートとして書き出します。今後は新規作成するときに作ったテンプレートを選ぶだけで良いですし、毎回確実に使いそうであればディフォルトテンプレートに設定しておいても良いでしょう。 スタイルを上手に使い回し ライン、図形、色、影などなどオブジェクトに装飾を手軽に加えることが出来ますが、複雑になればなるほど同じように再現するのが面倒になります。まったく同じであれば複製で良いのですが「このグラデーションだけ別に使いたい」といった場合もあります。 そんなときに便利なのがウィンドウの下に表示されるオブジェクトのステータスパネル。選択したオブジェクトの状態 (スタイル) を表示してくれるわけですが、実はそれぞれのアイコンがドラッグ出来るようになっています。これを使えば線のスタイルだけ使い回しといったことが可能になります。元のオブジェクトを選択した後、パネルからコピーをしたいスタイルを新しいオブジェクトにドラッグ&ドロップするだけ。 計算は任せる

ワイヤーフレーム

OmniGraffleを使ったテンプレート作り

OmniGraffleは、ワイヤーフレームをささっと書くのに大変便利なツール。以前「サイト制作に便利なOmniGraffleステンシル」という記事で、高品質のステンシルを幾つか紹介したことがあります。これらを使えば手軽に完成品に近い見た目の絵図を作ることが可能になります。なかなか便利な OmniGraffle ですが、通常版とプロ版の2つあり、どちらか迷っている方もいるのではないでしょうか。今回紹介するハウツーは通常版でもある程度出来ますが、プロ版で効果を発揮するテンプレートの作り方です。 変数を活用する 書類を制作する際に、何度も同じことを書く場合や、ページ番号を挿入したい場合があります。こうした情報を手入力していると大変手間がかかります。OmniGraffle にはテキストフィールドに変数を利用することが出来、ダイナミックに文字や数字を生成することが出来ます。例えば、各キャンバスをページと見なし、キャンバスにそれぞれ名前を付けておけば、そのキャンバス名をテキストフィールドに反映出来ます。「編集」→「変数の挿入」を選択すると、OmniGraffle で使える編集がリストアップされています。 それぞれのページのヘッダーとしてページ名を表記しておきたい場合、わざわざキャンバスとテキストフィールドに2度書かなくても、一括管理が出来、ミスが少なくなります。また、書類の名前や作成者名などフッター情報として欲しいデータも変数から呼び出せます。 共有レイヤーを作成 上記の変数機能は通常版でも実装されている機能ですが、プロ版にしかない機能に共有レイヤーがあります。その名のとおり複数のキャンバスで特定のレイヤーを共有することが可能になります。「編集」

UI

ワイヤーフレーム制作の5つのアプローチ

ワイヤーフレームを作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に5つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早期から導入出来る制作方法で、制作時間もかかりません。ソフトウェアを使って制作することが出来ますが、コンテンツを入れない段階なので、紙上でも素早く作ることが出来ます。ただし想像力を要するタイプなので、情報共有のための補足情報は不可欠になります。 ディテール型 色はほとんど使いませんが、UI 要素や情報をなるべく完成品に近い形にするワイヤーフレーム。コンテンツブロック型に比べると、より多くの方に完成品の形やアイデアを共有しやすいです。しかし、詳細を作ることによって細かいところに目が行ってしまい、全体像に関するディスカッションにならない場合もあるので注意。 ストーリー型 タスクを設定し、開始から達成までの流れが分かるワイヤーフレーム。個々のページの構造より、

IA

効果的なプロトタイプを早く作るコツ

プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。 スゴいコツだ!というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。 使えるパレットを用意する よく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用とPowerPoint用を利用すると手軽です。 テンプレートを用意する OmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成することが出来ます。単位をピクセルにし、グリッド表示にしてあるファイルをあらかじめ用意しておけば、何度も設定する手間が省けます。 リンクを加える PowerPointでもOmniGraffleでもハイパーリンクを加えて別のページへ移動することを可能にします。特定のオブジェクトの表示・非表示も可能なので、工夫次第でページ内の変化も表現することも出来ます。PowerPointであれば、マウスオーバーといった別のインタラクションにも異なるアクションを加えることが可能なのでさらに詳細な表現が可能です。 スタイルを合わせてペースト 文字の大きさや色など、同じスタイルを毎回設定するのは面倒なので、「スタイルを合わせてペースト」を活用。PowerPoint だと、「Ctrl + Shift + V」がありますが、

UI

サイト制作に便利なOmniGraffleステンシル

制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle で作っています。 OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版ではプレゼンテーションモードがあるので、出先で OmniGraffle を使える機会があれば、かなり本物に近い動きのあるワイヤーフレームを作ることが出来ます。 豊富なステンシルがあるのも OmniGraffle の良いところ。単なる四角形を並べるより素早くリアルなオブジェクトを配置出来るので、視覚的にビジョンの共有がしやすくなります。拡大縮小も出来るので自分のサイトに合わせてステンシルの大きさの調整も出来ます。バージョン5 からはソフトウェア上から直接ステンシルをダウンロード出来るようになりましたが、今回は Graffletopia に収録されているウェブサイト制作に役立ちそうなステンシルを紹介します。 SimpleWireFrame ウェブサイトの基本的な UI 要素がすべて揃っています。あまりたくさんステンシルを入れたくないという方はこれだけ入れておけば十分でしょう Mac OS

ソフトウェア

無料で使えるワイヤーフレームツールのまとめ

Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenOffice: Draw OpenOffice にある Draw というスケッチをするためのプログラムは、ダイアグラムやワイヤーフレームを描くのに最適です。swf 形式に書き出せる機能も付いていたりします CmapTools コンセプトマップというマインドマップにも似たダイアグラムを作るのに特化していますが、ワイヤーフレームやプロトタイピングにも使えます。サーバー経由で共同作業も出来るのが魅力 Gliffy ダイアグラムが描ける Web サービスは幾つかありますが、中でも

ワイヤーフレーム

プロトタイピングの基礎の基礎

まだ海外でしかみられない動きですが、有料のセミナーでもオンラインで映像か音声データを無料で入手出来るようになりました。セミナーで発表される情報に値段が付けられているのではなく、同じような考えを持っている方達が集まることで生まれる雰囲気と独特のエネルギーのための金額になっているのでしょうね。大きなイベントであればあるほどいえることですし、結果的に宣伝活動やネットワーク作りにもなると思います。日本でも体験に値段を払うという考えがもっと一般的になってくれると良いですね。 今年に入ってそんな無料で見れる貴重な資料が膨大に出てきたので、消化するのが大変ですが、デザイン関連のネタを中心に幾つか観覧しています。特に2008年2月に開催された Interaction 08 は素晴らしいです。 先日見たビデオは「Effective Prototyping for Software Makers」の著者として知られている Jonathan Arnowitzさんが、Interaction 08 で行った「Effective Prototyping Methods」というセッション。プロトタイピングの基本的な概念の話しでしたが、再確認にもなり大変勉強になりました。 90% スケッチから始めて 90% プロトタイピングで終わる プロトタイプは開発携わる方なら誰でも出来る 誰でもプロトタイピングは出来るがリーダーシップは必要 プロトタイピングはデザインではなくコミュニケーション 最初から明確なビジョンの元でプロトタイピングをしない デザインプロセスの透明化のためにプロトタイプがある プロトタイプの意味を開発メンバーで共有すること 自分が一番よく知っているツールを使う プロタイプが使いやすさを保証する

IA

リンクタイプの構成案

可能な限りフィードバックを得れるような状態にしながら、徐々に方向性を固めて組み立てれるように複数のサイクルで構成されたプロセスを提案しました。今回はその第一弾である「リンク」タイプのデザインに取りかかろうと思います。リンクは「クラフトっぽいアート作品いろいろ」のようにゆるいテーマがあるかもしれないですが、リンクが羅列しているようなエントリーのことを指します。 このタイプのエントリーはあまりブックマークもされることもなく、どちらかというと検索からくる方のほうが多いです。サイトへのロイアリティもあまり高くないので、最近のエントリーやタグリストなどといった全体像が分かるものを省いて、読者が必要しているものをはっきり見せることが必要とされるタイプになります。リンクタイプはイントロダクションのような文章もない単純なリスト(<dl> で記述)なので、文体も統一されています。マークアップ面では完全にパターン化されるので、独自の見せ方もしやすいです。 そのあたりを頭に入れて、とりあえず紙にワイヤーフレームやアイデアを書き込んでいきました。 リンクを紹介しているタイプなので、サイト名の文字を通常より大きくしたりクリックエリアを大きめにとるといった工夫は必須でしょう。また、リンク先のスクリーンショットも見えると良いですね。Snap Shots を使うという手段もあるかもしれませんが、ポップアップはちょっとうるさく感じることがあるので、ここは Simple API の力を借りることになるでしょう。 他に考えているのが、リンク集で扱っているようなサイトのリストアップ。これはタグをキーワードにして Google Ajax Search API

IA

今時のプロトタイピング

この記事は「PowerPoint を使ったプロトタイピング」の続きにあたります。 ページベースの Webサイトを制作するのであれば、多くの方が利用出来るということも含めて PowerPoint や Keynote といったプレゼンテーションアプリが最適だといえます。しかし、Ajax や Flash を利用したページを移動することなくデータにアクセスするサイトや Webアプリケーション、ショッピングサイトのような会員/非会員によって異なるコンテンツやフォームを必要とするサービスでは、ページベースで Webサイトを考えるのは困難です。 ユーザーテストをする際も PowerPoint や Keynote では難しい場合もあるでしょう。共に高度な描写が可能になり見た目の質は高くなりましたが、クリックしたときの動作や、「戻る」「進む」のようなブラウザを介した操作、そしてマウスやキーボードを使った操作までテストすることが出来ません。ページベースでプロトタイプを作るのでインタラクションも平面的になってしまい、テストをしながらプロトタイプを改善させるには少し物足りない場合も出て来るでしょう。 以前、「よりリッチなWebサイトプロトタイピング」で紹介した Axure はひとつの解といえるでしょう。Ajax のようなダイナミックなインタラクションをプロトタイプに付け加えることが出来るだけでなく、サイトマップやフローチャートとプロトタイプと連動させて作ることが出来ます。作成したプロトタイプはブラウザ上で観覧出来るのでユーザーテストも難しくありません。 Axure

IA

拡張性のあるデータ配置を模索する

そろそろ大まかな形でワイヤーフレームを作っていこうと思っているわけですが、その前にいろいろ準備しておきたいことも幾つかあります。そのひとつが、拡張性を考えて、どのようなデータをどの辺りに配置するのがベストかを考えること。これは Webアプリケーション開発において特に重要になってくることだと思いますが、大幅な改変をしなくても、機能やミニコンテンツといったコンポーネントを付け加えることが出来るように設計しておく必要があります。もちろん、すべての可能性を考慮することは不可能ですが、あらかじめ拡張されることを考慮して設計を始めるか始めないかでは大きな違いがあります。 下の図はページを大まかに4つに別けて、異なる配置を考えたものです。 ※ ワイヤーフレームの基盤のような存在なので、実際のサイトのワイヤーフレームを作っているわけではありません。 ナビゲーション サイトのグローバルナビゲーションに当たるエリア。Webアプリケーションにおいては機能を示すことが多い コンテキスト / データセット 現在観覧しているページがどういったページが示していたり、サイト全体からみたページの位置を示しているエリア。パンくずがあるケースも メインコンテンツ ページのなかで最も重要とされるデータ。ブログであればブログエントリーのことを指す 関連データ / フィルター メインコンテンツに何かしらの形で関連したデータであったり、メインコンテンツを操作するためのコマンドがあるエリア どれが拡張する可能性があるのか見極める グローバルナビゲーションはサイト全体を大まかに見渡すことが出来る重要なエリアですが、サイトによっては幾つか増える可能性がある場合もありますし、ネーミングを長くしなければならないこともあるでしょう。そういった場合、ナビゲーションを横に配置すると、2列になってしまうなど限界が出てしまいます。名称が長いと、配置出来るナビゲーションの数も減っていくでしょう。そういう可能性があらかじめ分かっている場合であれば、横ではなく縦に配置したほうが良いです。 例えば Amazon.

powerpoint

PowerPoint を使ったプロトタイピング

プロトタイプを作るソフトウェアは Visio のような高度な機能があるものを含めて複数あります。一番最初の段階であれば紙でも良いと思いますが、Webサイト上でのインタラクションを可能な限りリアルに再現して検証するにはパソコン上で行うのが最も適しています。どのツールが良いか迷っている方もいると思いますが、どうやら Microsoft では PowerPoint 2007 がワイヤーフレームを作るツールとして使っているそうです。 2007年、韓国で開催されたカンファレンスで PowerPoint 2007 を使ったワイヤーフレームに関するセミナーがありました (Silverlight ムービー)。Microsoft には Visio があるのになぜ PowerPoint を使うのかというと、PowerPoint のほうが使える人が圧倒的に多いだけでなく共有もしやすいからだそうです。例えば Expression Blend 2 のプロトタイピングは PowerPoint で行われたそうです。プログラマーとデザイナーが情報交換してプロトタイピングをする場合もあるので Visio より PowerPoint のほうが都合が良いわけですね。 プレゼン用アプリとはいえ、プロトタイピングをするのに便利な機能も既に幾つか揃っています。スライドからスライドへのリンクも可能ですし、グラデーションや光沢といったビジュアルエフェクトも PowerPoint