ウェブの画面設計に使えるまとめ

構築するウェブサイトの規模が大きくなればなるほど、画面設計はとても大切なものになりますね。

要素の抜けや、動作的な矛盾が無いかを確認したり、デザイナーはその設計書を元にデザインをおこすので、設計書の善し悪しが、最終的にそのサイトの善し悪しに直結するのではないでしょうか?

今回は、画面設計の際に使えそうなサイトをいくつかピックアップしてみました。

PowerPoint Prototyping Toolkit

Office PowerPoint 2007をお持ちの方には便利なツールキットです。あらかじめ、よく使いそうな要素が用意されているので、とっても便利なキットです。


PowerPoint Prototyping Toolkit

きれいなフォーム要素などが用意されています。


PowerPoint Prototyping Toolkit

こちらはウインドウのプリセット。PowerPointで作ったとは思えないくらいとってもきれいに作られていますね。


PowerPoint Prototyping Toolkit

Tools – Information Architecture Institute

こちらは、いろいろなタイプのツールがVisioやPDF、PowerPointなどで用意されてます。試しにCavazzaWireframe.pptというファイルを開いてみました。フォームの部分などそのまま使えそうな感じです。


CavazzaWireframe.ppt

Interactive Prototypes with PowerPoint

PowerPointのサンプルが公開されています。


Interactive Prototypes with PowerPoint

Description of Enterprise Dashboard

ダッシュボードのサンプルです。


Description of Enterprise Dashboard

PowerPointのテンプレートは、以前このブログで、ご紹介した『PowerPointテンプレートサイトいろいろ』からどうぞ〜。

Design Stencils – Yahoo! Design Pattern Library

Yahoo!が提供してくれている、キットはOmniGraffle,Visio,PDF,PNG,SVG形式で公開されているので、いろいろなソフトでそのまま使えて、とっても便利ですね。


Design Stencils - Yahoo! Design Pattern Library

オムニグラフ [Omni Graffle]

Macをお使いの方々は、Omni Graffleがいろいろなツールなどが公開されているので便利かも。


オムニグラフ [Omni Graffle]

Graffletopia

Omni Graffle用のシンボルやシェイプ、パターンなどがダウンロードできるサイトです。


Graffletopia

SimpleWireFrame

Graffletopiaで人気のSimpleWireFrameは必要要素が網羅されているので、とっても便利。


SimpleWireFrame

OmniGraffle Wireframe Palette

こちらのパレットも便利そうなツールですね。


OmniGraffle Wireframe Palette

PDF Prototypes: Mistakenly Disregarded and Underutilized

PDFで画面設計を書く方も多いのではないでしょうか?こちらでサンプルがダウンロードできます。


PDF Prototypes: Mistakenly Disregarded and Underutilized

DUB – DENIM

こちらは、ワシントン大学が開発したUIデザイン用のツールです。手書きで書き進めていく感じのツールです。


DUB - DENIM

デザインblogランキング

コメント 7 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



7 Responses to “ウェブの画面設計に使えるまとめ”

  1. 何でもできる人 - N voice Says:

    […] ウェブの画面設計に使えるまとめ – DesignWalker http://www.designwalker.com/2008/05/wireframe.html […]

  2. sky77 Says:

    初めまして、以前から色々と参考にさせていただいています。今回のテーマにしているUI設計などに関して、これまでユーザビリティなどに特化してコンサルをしている企業から雑誌が出るらしいです。DesignWalkerさんもぜひお読みになって感想をまたブログにしていただければと思います。DESIGN IT! magazineというそうです。これからも役に立つ情報、楽しみにしております。

  3. センスの良い商品の紹介と感想とよた話 Says:

    ウェブ画面デザインのTIPS…

    今日の『気になるニュース』 ~今日あったニュースの中から、注目ニュースをPickUp~ [一覧] ・ウェブの画面設計に使えるまとめ [DesignWalker] Design Stencils – Yahoo! Design Pattern Library がカッコイイ。 これはメモ。 以前から感じていましたがDes…..

  4. イーアシスト二等兵~下・剋・上~ Says:

    グッときたオフィス2007…

    最近も話に出てきたオフィス2007ですがそれに関しておもしろいサイトを見つけましたデザインワーカーここのサイトではオフィスの様々なツールやテンプレートが落とせますそれもかなりの情報量です(管理人の方に感謝)2007を使い慣れていない私には大変勉強になりました覗き…

  5. diigo2ZerockBlog 06/07/2008 « ZerockBlog Says:

    […] ウェブの画面設計に使えるまとめ – DesignWalker […]

  6. ぶろろぐ » Blog Archive » ウェブの画面設計に使えるまとめ Says:

    […] DesignWalkerhttp://www.designwalker.com/2008/05/wireframe.html […]

  7. ワイヤーフレームを作るのが好き アプリや素材、参考サイトなどのまとめのまとめ | 技術関係ブログ | 技術関係のニュースなどをご紹介 Says:

    […] http://www.designwalker.com/2008/05/wireframe.html ダウンロードして使える素材が多めです。 […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ