Tagged

ワイヤーフレーム

A collection of 12 posts

プロセス

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

すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ [http://www.yasuhisa.com/could/article/5-approaches-of-wireframes/] 」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか作ることで何を達成させたいのかを明確にします制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特定のインタラクションを確定させたいのか ワイヤーフレームを作るという
ワイヤーフレーム

OmniGraffleを便利に使うあれこれ

制作のためにいろいろなソフトを使っていますが、数年経っても相変わらず使っているもののひとつに OmniGraffle [http://www.omnigroup.com/products/omnigraffle/] があります。ダイアグラムやワイヤーフレームを手軽に作れますが、多機能なので奥が深いソフトのひとつ。以前もOmniGraffleを使ったテンプレート作り [http://www.yasuhisa.com/could/article/omnigraffle-template/] で便利な使い方を幾つか紹介しましたが、今回も最近（やっと）見つけたものも含めて6つ紹介します。 下準備を忘れずに Webサイトのワイヤーフレームを作るのであれば新規文書をそのまま使わず、キャンバスのサイズをきちんと調整しましょう。ディフォルトではルーラの単位がインチになっている場合もあるので、まずはピクセルに切り替えます。グリッドの間隔もインチではなくピクセルにしておくと設計がしやすくなります。OmniGraffleでは、グリッドをオブジェクトに手前に表示させることが出来るので、厳密な設計を好む方は
ワイヤーフレーム

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

OmniGraffle [http://www.act2.com/products/omni-graffle5.html] は、ワイヤーフレームをささっと書くのに大変便利なツール。以前「サイト制作に便利なOmniGraffleステンシル [http://www.yasuhisa.com/could/roundup/graffletopia/] 」という記事で、高品質のステンシルを幾つか紹介したことがあります。これらを使えば手軽に完成品に近い見た目の絵図を作ることが可能になります。なかなか便利な OmniGraffle ですが、通常版とプロ版の２つあり、どちらか迷っている方もいるのではないでしょうか。今回紹介するハウツーは通常版でもある程度出来ますが、プロ版で効果を発揮するテンプレートの作り方です。 変数を活用する 書類を制作する際に、何度も同じことを書く場合や、ページ番号を挿入したい場合があります。こうした情報を手入力していると大変手間がかかります。OmniGraffle にはテキストフィールドに変数を利用することが出来、ダイナミックに文字や数字を生成することが出来ます。例えば、各キ
UI

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

ワイヤーフレーム [http://bit.ly/HMc0f] を作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に５つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早期から導入出来る制作方法で、制作時間もかかりません。ソフトウェアを使って制作することが出来ますが、コンテンツを入れない段階なので、紙上でも素早く作るこ
IA

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

プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。 スゴいコツだ！というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。 使えるパレットを用意するよく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用 [http://www.yasuhisa.com/could/roundup/graffletopia/]とPowerPoint用 [http://www.yasuhisa.com/could/article/powerpoint-prototyping/]を利用すると手軽です。 テンプレートを用意するOmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成すること
UI

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

制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle [http://www.omnigroup.com/applications/omnigraffle/] で作っています。 OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版 [http://www.omnigroup.com/applications/omnigraffle/provsstandard/] ではプレゼンテーションモードがあるので、出先で OmniGraffle を使
ソフトウェア

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

Firefox 上で動作するワイヤーフレームツール Pencil [http://www.evolus.vn/Pencil/Home.html] をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「 プロトタイピングの基礎の基礎 [http://www.yasuhisa.com/could/article/prototyping-basics/] 」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program [http://www.gnome.org/projects/dia/] UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せますDENIM [http://dub.washington.edu:2007/denim/] タブレットで操作すると快適そうなプロ
ワイヤーフレーム

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

まだ海外でしかみられない動きですが、有料のセミナーでもオンラインで映像か音声データを無料で入手出来るようになりました。セミナーで発表される情報に値段が付けられているのではなく、同じような考えを持っている方達が集まることで生まれる雰囲気と独特のエネルギーのための金額になっているのでしょうね。大きなイベントであればあるほどいえることですし、結果的に宣伝活動やネットワーク作りにもなると思います。日本でも体験に値段を払うという考えがもっと一般的になってくれると良いですね。 今年に入ってそんな無料で見れる貴重な資料が膨大に出てきたので、消化するのが大変ですが、デザイン関連のネタを中心に幾つか観覧しています。特に2008年2月に開催された Interaction 08 [http://interaction08.ixda.org/] は素晴らしいです。 先日見たビデオは「Effective Prototyping for Software Makers [http://www.amazon.co.jp/exec/obidos/ASIN/0120885689/could-22/ref=nosi
IA

リンクタイプの構成案

可能な限りフィードバックを得れるような状態にしながら、徐々に方向性を固めて組み立てれるように複数のサイクルで構成されたプロセス [http://www.yasuhisa.com/could/article/multiple-cycle-process/] を提案しました。今回はその第一弾である「リンク」タイプのデザインに取りかかろうと思います。リンクは「クラフトっぽいアート作品いろいろ [http://www.yasuhisa.com/could/links/craft-art/] 」のようにゆるいテーマがあるかもしれないですが、リンクが羅列しているようなエントリーのことを指します。 このタイプのエントリーはあまりブックマークもされることもなく、どちらかというと検索からくる方のほうが多いです。サイトへのロイアリティもあまり高くないので、最近のエントリーやタグリストなどといった全体像が分かるものを省いて、読者が必要しているものをはっきり見せることが必要とされるタイプになります。リンクタイプはイントロダクションのような文章もない単純なリスト（ <dl> で記述）なので、文体も統一されてい
IA

今時のプロトタイピング

この記事は「PowerPoint を使ったプロトタイピング [http://www.yasuhisa.com/could/article/powerpoint-prototyping/]」の続きにあたります。 ページベースの Webサイトを制作するのであれば、多くの方が利用出来るということも含めて PowerPoint [http://office.microsoft.com/ja-jp/powerpoint/default.aspx] や Keynote [http://www.apple.com/jp/iwork/keynote/] といったプレゼンテーションアプリが最適だといえます。しかし、Ajax や Flash を利用したページを移動することなくデータにアクセスするサイトや Webアプリケーション、ショッピングサイトのような会員/非会員によって異なるコンテンツやフォームを必要とするサービスでは、ページベースで Webサイトを考えるのは困難です。 ユーザーテストをする際も PowerPoint や Keynote では難しい場合もあるでしょう。共に高度な描写が可能になり見た目
IA

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

そろそろ大まかな形でワイヤーフレームを作っていこうと思っているわけですが、その前にいろいろ準備しておきたいことも幾つかあります。そのひとつが、拡張性を考えて、どのようなデータをどの辺りに配置するのがベストかを考えること。これは Webアプリケーション開発において特に重要になってくることだと思いますが、大幅な改変をしなくても、機能やミニコンテンツといったコンポーネントを付け加えることが出来るように設計しておく必要があります。もちろん、すべての可能性を考慮することは不可能ですが、あらかじめ拡張されることを考慮して設計を始めるか始めないかでは大きな違いがあります。 下の図はページを大まかに4つに別けて、異なる配置を考えたものです。 ※ ワイヤーフレームの基盤のような存在なので、実際のサイトのワイヤーフレームを作っているわけではありません。 ナビゲーションサイトのグローバルナビゲーションに当たるエリア。Webアプリケーションにおいては機能を示すことが多いコンテキスト / データセット 現在観覧しているページがどういったページが示していたり、サイト全体からみたページの位置を示しているエリア。
powerpoint

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

プロトタイプを作るソフトウェアは Visio [http://office.microsoft.com/ja-jp/visio/FX100487861041.aspx] のような高度な機能があるものを含めて複数あります。一番最初の段階であれば紙でも良いと思いますが、Webサイト上でのインタラクションを可能な限りリアルに再現して検証するにはパソコン上で行うのが最も適しています。どのツールが良いか迷っている方もいると思いますが、どうやら Microsoft では PowerPoint 2007 [http://office.microsoft.com/ja-jp/powerpoint/default.aspx] がワイヤーフレームを作るツールとして使っているそうです。 2007年、韓国で開催されたカンファレンスで PowerPoint 2007 を使ったワイヤーフレームに関するセミナーがありました (Silverlight ムービー [http://www.microsoft.com/expression/events-training/globalevent/player/Defa