ワイヤーフレーム作成時に役立つツールや素材、参考になるショーケース

  • Posted on
  • Category : Material
ワイヤーフレーム作成時に役立つツールや素材、参考になるショーケース

ワイヤーフレームとは、簡単に説明するとコンテンツやレイアウトなどを示した設計図や構成図のことを言い、これをしっかり作っておくことでデザインやコーディングといったその後の作業をスムーズに進めることができます。単にワイヤーフレームと言っても「ツールやソフトを使用する」「基本的に全て手書きで行う」など人によって作り方は違うと思いますが、個人的にワイヤーフレーム作成時に便利だなと感じたツールや素材を紹介します。また、専門ギャラリーや参考になるショーケースなども併せて紹介するので、あまりワイヤーフレームを見たことないという人は、そちらも参考にしてみてください。

ワイヤーフレーム作成時に役立つツールや素材、参考になるショーケース 目次

  1. 便利ツール
  2. テンプレート素材
  3. ワイヤーフレーム素材
  4. ブラウザフレーム素材
  5. フォント素材
  6. 参考になるショーケース
  7. その他 参考サイト

1. 便利ツール

インストールしたりソフトへの拡張機能として使うものなどもありますが、今回はオンラインで使用するツールを紹介します。
中には使用する為には登録が必要なものや場合によっては有料になるツールもありますが、ほとんどフリーで作成も保存もできるものです。

Cacoo

Cacoo

ワイヤーフレームだけでなくサイトマップやマインドマップ、フローチャートといった図の作成にも適しています。
チームメンバーやクライアントと作成したものを共有したり、1つの図を複数人が同時に編集するリアルタイムコラボレーションの機能などもあります。
使用にはアカウント登録(無料)が必要で、PDFやPPTでのエクスポートやユーザー管理なども行いたい場合は有料プランを契約する必要があります。

Mockup Designer

Mockup Designer

シンプルな見た目で、操作も直感的にできるのが特徴なオンラインツールです。
画面左に各パーツがあるので、使いたいパーツをドラッグ&ドロップで移動させて使います。
テキストは日本語も問題なく使用でき、作成したものは画像でエクスポートも可能です。

wireframe.cc

wireframe.cc

こちらも同じくシンプルな見た目のツールですが機能が豊富で、フレームのサイズ変更も容易にできたり、左上にあるアイコンでiPhoneやiPad向けのフレームに変更することもできます。
また、右クリックやショートカットキーでコピー&ペーストといった機能を使用したりもでき(Winでのみ確認)、テキストは日本語も問題なく使用できます。
作成したものを保存するのも簡単で、画面上部にある「Save」ボタンを押すとURLが発行されるので、作成したものを共有するなども簡単に行えます。

Website wireframes: Mockingbird

Website wireframes: Mockingbird

検索ボックス、タブコンテンツ、ボタン、リストなど、フレーム作りに便利なパーツが多数揃っているのが特徴で、他にもマップ、グラフ、ソーシャルアイコンなども珍しいものも多数あります。
簡単な操作で使用可能で、日本語も問題なく使用できます。
作成したワイヤーフレームの保存やシェアは登録が必要になります。

Quick Introduction to Moqups · Moqups

Quick Introduction to Moqups · Moqups

こちらも先程と同様でフレーム作りに便利なパーツが多数揃っているのが特徴のツールですが、全体的にこちらのパーツの方が見栄えがいいものが多いです。
ショートカットキーなどの機能も使用でき(Winでのみ確認)、テキストは日本語も問題なく使用できます。
同じく作成したワイヤーフレームの保存やシェアは登録が必要になります。

目次へ

2. テンプレート素材

基本的にワイヤーフレームは手書きでという人向けの素材で、形式はPDFで用意されています。
PCだけでなくiPhoneやiPadなどそれぞれのデバイス向けのものやグリッドラインがあるものなど種類も多くあり、テンプレートによってはA4やA3といったサイズも豊富に用意されています。

Wireframe Sketch Sheets

Wireframe Sketch Sheets

※種類多数

Sneakpeekit

Sneakpeekit

※種類多数

iPhone Application Sketch Template v1.3

iPhone Application Sketch Template v1.3

iPad Application Sketch Template v1

iPad Application Sketch Template v1

iPhone App Wireframe Template

iPhone App Wireframe Template

Wireframe template

Wireframe template

Concept7 sketching paper A4・A3

Concept7 sketching paper A4・A3

Paper Browser

Paper Browser

960 Grid System

960 Grid System

INTERFACE SKETCH

INTERFACE SKETCH

目次へ

3. ワイヤーフレーム素材

PhotoshopやIllustratorなどのソフトを使って作成する人向きの素材です。
シンプルなものから手書き風なものまでいろいろあり、中には簡単なサイトであれば少し色付けなど手を加えればそのままデザインカンプとしても使用できるようなキットもあります。

Wireframe Kit

Wireframe Kit

The Ultimate Wireframe UI Kit

The Ultimate Wireframe UI Kit

Webpage Wireframe Stencil

Webpage Wireframe Stencil

Free Photoshop Wireframe Kit

Free Photoshop Wireframe Kit

Mini wireframing kit

Mini wireframing kit

Wireframe / Blueprint Kit

Wireframe / Blueprint Kit

iPad Sketch Elements AI

iPad Sketch Elements AI

WireKit

WireKit

iPhone Wireframe UI Kit

iPhone Wireframe UI Kit

Sqetch, an Illustrator Wireframe Toolkit

Sqetch, an Illustrator Wireframe Toolkit

iOS 7 Wireframe Kit

iOS 7 Wireframe Kit

Sketching Android’s Gingerbread

Sketching Android's Gingerbread

目次へ

4. ブラウザフレーム素材

いらないと言えばいらないんですが、クライアントなどに見せる際により近い形で見せたい時などに。
最近流行りのフラットデザインなものや通常のブラウザの見栄えをそのまま再現しているものなどあります。

Flat Chrome

Flat Chrome

Flat Firefox

Flat Firefox

Chrome UI Kit

Chrome UI Kit

chrome—960.gs

chrome---960.g

7 Free Web Browser Frames

7 Free Web Browser Frames

Web Browser PSD’s

Web Browser PSD's

目次へ

5. フォント素材

ワイヤーフレーム向けに作成されたフォント素材です。
普段原稿がない時などに「テキストテキストテキスト」とか「この文章はダミーです」とかのように一時的なダミーを入れることがある人は多いと思いますが、それの代わりになるフォント素材です。

正直文字間だとか全体のバランスを考えると、例えダミーだとしても特に日本語の場合は何か入れといたほうが良いと思いますが、発想が面白いと思ったので紹介します。

BLOKK fontBLOKK font

BLOKK fontBLOKK font

Redacted-Font

Redacted-Font

※全4タイプ

目次へ

6. 参考になるショーケース

ワイヤーフレームばかりを集めた専門ギャラリーや参考になるショーケースをまとめたエントリーです。
ツールなどを使用してしっかり作られたものから全て手書きなものまで様々なタイプがあります。

Wireframe Showcase

Wireframe Showcase

I ♥ wireframes

I ♥ wireframes

Wireframes (wireframes) on Pinterest

Wireframes (wireframes) on Pinterest

Flickr: I ♥ wireframes

Flickr: I ♥ wireframes

18 Great Examples of Sketched UI Wireframes and Mockups

18 Great Examples of Sketched UI Wireframes and Mockups

15 amazing wireframe & mockup sketches

15 amazing wireframe & mockup sketches

目次へ

7. その他 参考サイト

それぞれワイヤーフレームについてのエントリーで、関連するリソースをまとめたものやこのエントリーでは紹介していないツールの紹介などあります。
(このエントリーを書く際にもいろいろ参考にさせてもらいました)

特に「Webクリエイターボックス」さんのエントリーでは、簡単にですが「Cacoo」と「iPlotz」を実際に使用しての説明もあるので、これらのツールを使用しようと考えている場合は参考になるかと思います。

Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する | Webクリエイターボックス

Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する | Webクリエイターボックス

Webサイト設計図 – ワイヤーフレームの作り方 | Webクリエイターボックス

Webサイト設計図 – ワイヤーフレームの作り方 | Webクリエイターボックス

35 Excellent Wireframing Resources – noupe

35 Excellent Wireframing Resources - noupe

全部無料で試せる!厳選ワイヤーフレーム作成ツール10 | Find Job ! Startup

全部無料で試せる!厳選ワイヤーフレーム作成ツール10 | Find Job ! Startup

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。