ウェブの画面設計に使えるまとめ
構築するウェブサイトの規模が大きくなればなるほど、画面設計はとても大切なものになりますね。
要素の抜けや、動作的な矛盾が無いかを確認したり、デザイナーはその設計書を元にデザインをおこすので、設計書の善し悪しが、最終的にそのサイトの善し悪しに直結するのではないでしょうか？
今回は、画面設計の際に使えそうなサイトをいくつかピックアップしてみました。
PowerPoint Prototyping Toolkit
Office PowerPoint 2007をお持ちの方には便利なツールキットです。あらかじめ、よく使いそうな要素が用意されているので、とっても便利なキットです。
きれいなフォーム要素などが用意されています。
こちらはウインドウのプリセット。PowerPointで作ったとは思えないくらいとってもきれいに作られていますね。
Tools – Information Architecture Institute
こちらは、いろいろなタイプのツールがVisioやPDF、PowerPointなどで用意されてます。試しにCavazzaWireframe.pptというファイルを開いてみました。フォームの部分などそのまま使えそうな感じです。
Interactive Prototypes with PowerPoint
PowerPointのサンプルが公開されています。
Description of Enterprise Dashboard
ダッシュボードのサンプルです。
PowerPointのテンプレートは、以前このブログで、ご紹介した『PowerPointテンプレートサイトいろいろ』からどうぞ〜。
Design Stencils – Yahoo! Design Pattern Library
Yahoo!が提供してくれている、キットはOmniGraffle,Visio,PDF,PNG,SVG形式で公開されているので、いろいろなソフトでそのまま使えて、とっても便利ですね。
オムニグラフ [Omni Graffle]
Macをお使いの方々は、Omni Graffleがいろいろなツールなどが公開されているので便利かも。
![オムニグラフ [Omni Graffle]](http://www.designwalker.com/img/wireframe/wireframe08.jpg)
Graffletopia
Omni Graffle用のシンボルやシェイプ、パターンなどがダウンロードできるサイトです。
SimpleWireFrame
Graffletopiaで人気のSimpleWireFrameは必要要素が網羅されているので、とっても便利。
OmniGraffle Wireframe Palette
こちらのパレットも便利そうなツールですね。
PDF Prototypes: Mistakenly Disregarded and Underutilized
PDFで画面設計を書く方も多いのではないでしょうか？こちらでサンプルがダウンロードできます。
DUB – DENIM
こちらは、ワシントン大学が開発したUIデザイン用のツールです。手書きで書き進めていく感じのツールです。
|
|
|
5月 30th, 2008 at 1:57 AM
[...] ウェブの画面設計に使えるまとめ – DesignWalker http://www.designwalker.com/2008/05/wireframe.html [...]
6月 1st, 2008 at 10:47 PM
初めまして、以前から色々と参考にさせていただいています。今回のテーマにしているUI設計などに関して、これまでユーザビリティなどに特化してコンサルをしている企業から雑誌が出るらしいです。DesignWalkerさんもぜひお読みになって感想をまたブログにしていただければと思います。DESIGN IT! magazineというそうです。これからも役に立つ情報、楽しみにしております。
6月 2nd, 2008 at 4:07 AM
ウェブ画面デザインのTIPS…
今日の『気になるニュース』 ~今日あったニュースの中から、注目ニュースをPickUp~ [一覧] ・ウェブの画面設計に使えるまとめ [DesignWalker] Design Stencils – Yahoo! Design Pattern Library がカッコイイ。 これはメモ。 以前から感じていましたがDes…..
6月 5th, 2008 at 5:24 PM
グッときたオフィス2007…
最近も話に出てきたオフィス2007ですがそれに関しておもしろいサイトを見つけましたデザインワーカーここのサイトではオフィスの様々なツールやテンプレートが落とせますそれもかなりの情報量です（管理人の方に感謝）2007を使い慣れていない私には大変勉強になりました覗き…
6月 6th, 2008 at 3:31 PM
[...] ウェブの画面設計に使えるまとめ – DesignWalker [...]
2月 27th, 2009 at 2:50 PM
[...] DesignWalkerhttp://www.designwalker.com/2008/05/wireframe.html [...]
1月 13th, 2010 at 11:35 PM
[...] http://www.designwalker.com/2008/05/wireframe.html ダウンロードして使える素材が多めです。 [...]