Webディレクター必見！ワイヤーフレームテンプレート46選＆作成用ツール10選

Webサイトやサービスを制作する初期段階に必要なワイヤーフレーム。

ワイヤーフレームは、Webサイトやアプリケーション、サービスなどのレイアウトを定める設計図です。骨組みを作ることでサービスの詳細を明確にしやすくなります。

今回は、ワイヤーフレームの作成に便利なテンプレートとワイヤーフレーム作成ツールをご紹介します。

ワイヤーフレーム作成時の注意点

1. チームメンバー各自でアイディア考える

最初の段階では、チームとしてではなく、各自でアイディアを出しましょう。なぜなら、最初からチームでワイヤーフレームを作成すると、メンバーひとりひとりが考えてくれるアイディアを明確になれないためです。アウトプットの形は、ポストイットやホワイトボードなど、特にこだわらないべきです。

2. サイトマップを構築するときに、競合相手や他社を参考にする

同じ業界の企業のサイトを参考したら、必要なページやサイト構成が分かるようになります。一度他社のサイトをワイヤーフレームに書き直してみるのも勉強になります。

3. サイトのデザイン構築に、デザインサイトを活用する

競合サイトはもちろんのこと、デザインギャラリーサイトを使うと、最新トレンドをピックアップできます。たとえばmuuuuu、81-webなど。デザインの引き出しがあれば、サイトを作成するスピードも向上できます。

4. ビジュアルの配置をイメージしておく

レイアウトを組むときに、合わせてデザイン面を後回しすることです。サイトの配色まで考えなくても、「アイキャッチはここ」「広告」「写真」などのビジュアルを想像させるメモを入れると、より想像しやしくなります。

5. パソコンとモバイルのワイヤーフレーム作成を別々にする

Webサイトのモバイルへの対応は必須になりましたすまた、モバイルとパソコンにおけるサイト構成が異なるため、パソコンとモバイルのデザインを別々でデザインするほうがユーザーのニーズに合わせます。

6. デザインの段階から、コーディングの担当も参加する

ワイヤーフレームの段階では、レイアウトやデザインを重視しますが、コーディングの担当もデザインプロセスに参加すべきです。完成像のイメージを持ってもらえる上に、実現可能なのか、どれくらいの時間がかかるのか、などもデザイナーたちに教えられます。

7. ホワイトボードの写真を議事録にする

サイト作成ではしばしば、ホワイトボードのようなデザイン手法を使います。よって、ホワイトボードなどの写真を撮ると、議事録よりも効率的に、プロジェクトの概要をメンバーに共有できます。

 

モバイルのWebデザイン用ワイヤーフレームテンプレート

Appleのスマートフォンやタブレット端末などのワイヤーフレームテンプレートは次のようです。

1. iPhone 6のVector形式ワイヤーフレームテンプレート（AI）

出典：Dribbble

無料で個人や企業のプロジェクトに使えるテンプレートです。種類が多いため、さまざまなプロトタイプに使えます。

2. iOS8のワイヤーフレームテンプレート（Sketch）

出典：Design Hooks

iOSを想定したワイヤーフレームを作成するのに便利なファイルです。

3. Flowのワイヤーフレームテンプレート（Sketch）

出典：Dribbble

ホームスクリーンやログインメニュー、商品詳細ページなど、モバイルのECサービスを構築するときに使える素材がたくさんあるワイヤーフレームです。

4. 手軽なiPhone 6のワイヤーフレームテンプレート（Sketch）

出典： Dribbble

この素材は、iPhone 6のワイヤーフレームを作成しているときに使うのだけではなく、ワイヤーフレームを説明するための素材も含まれているパッケージです。

5. Turbo社のワイヤーフレームテンプレート（Sketch）

出典： Sketch App Sources

iPhoneのインターフェイスを用いて、画面素材10個でアプリを構築できます。各UXデザインの素材も豊かです。

6. Apple Watchのワイヤーフレームテンプレート（AI）

出典： Dribbble

Apple Watchサイズの画面20個と、UIの素材があります。Apple Watchのワイヤーフレームはまだ少ないため、Watchのアプリを開発する場合、このワイヤーフレームテンプレートを使いましょう。

7. 白黒のApple Watchのワイヤーフレームテンプレート（Sketch）

出典： Dribbble

画面6個があり、自由に色をつけられるプロトタイプです。初代のApple Watchをベースにしているデザインです。

8. 戦略図用テンプレート（AI）

出典： Dribbble

このiPhone 6のモックアップは、ひとつの画面しかないですが、2色パターンが入っています。説明書を作成しているときに、サービスのホーム画面のみが必要な場合、このワイヤーフレームを活用できます。

9. iPad用ワイヤーフレームテンプレート（Sketch）

出典： Gumroad

iPad MiniおよびiPad Proに対応できるパッケージです。また、Apple社の公式なサイズのガイドラインで開発されました。

10. 複数サイズのiPhoneのワイヤーフレームテンプレート（Sketch）

出典： Gumroad

iPhone SE、 6、 6s、6 Plus、6s Plus、7、7 Plusのどれかがのワイヤーフレームを作成したいとき、この素材を使えます。また、Apple社の公式なサイズのガイドラインで開発された素材です。

11. iPhone 6のワイヤーフレームテンプレート（PSD）

出典： Dribbble

このワイヤーフレームのテンプレートは、印刷にも対応できるファイルです。

12. iPhone 6s、6s Plus、iPad Air 2のワイヤーフレームテンプレート（PNG、SVG、EPS）

出典： Behance

iPhoneおよびiPad端末のテンプレートです。また、各iOS用のアイコンも含まれているワイヤーフレームです。

13. iPhone 6と多様な素材のあるワイヤーフレームテンプレート（Sketch）

出典： Github 

モバイル端末におけるインターフェイスはもちろんのこと、このテンプレートでは、説明資料用の素材も含まれています。そのため、ひとつのテンプレートで、作成からプレゼンテーションまで準備できます。

14. モバイルUIのワイヤーフレームテンプレート（PSD）

出典： 365 PSD

このパッケージに、iPhoneの端末をベースに、ボタンやカレンダーなどの素材が収録されています。モバイルアプリに入っている素材の基礎が入っているため、すぐに骨組みを作成できます。

15. 白黒のモバイル用ワイヤーフレームテンプレート（Sketch）

出典： Dribbble

画面同士をせんでツナ蹴られるので、画面同士の関係性を示すのに便利です。スマートフォンのアプリのインターフェイスでよく使われている素材も収録されています。

16. 画面20枚と素材50個が収録されるモバイル用ワイヤーフレーム（Sketch）

出典： Gumroad

このワイヤーフレームテンプレートに、多くの画面と素材が収録されています。そのため、スピード重視でアプリの骨組みを開発できます。このテンプレートから、記事ページやメンバーページ、メッセージのやり取りなどをワイヤーフレームに入れられます。

17. 50枚以上収録されているアプリ用ワイヤーフレームテンプレート（Sketch）

出典： Dribbble

このパッケージに、ユーザーの登録や記事などのようなもっとも使われているモバイルのUIの素材が収録されています。

18. フローダイアグラムとモバイル用ワイヤーフレームテンプレートが収録されるパッケージ（Sketch）

出典： Behance

このパッケージで簡単にサービスのワイヤーフレームのフローチャートを作成できます。線のスタイルのような素材などの調整できます。

19. iPhone 6のUXのワイヤーフレームテンプレート（AI）

出典： Dribbble

iPhone 6をベースにアプリのフローを示すためのワイヤーフレームテンプレートです。矢印のような素材も収録されているため、すぐにフローを把握できます。

20. 多種のデバイスのあるワイヤーフレームテンプレート（AIおよびEPS）

出典： Dribbble

このパッケージに、AppleのiPhoneやiPad、SamsungのGalaxy、各端末のブラウザなど、多種の端末が収録されています。

21. カラフルなモバイルのテンプレート（AI）

出典： Dribbble

通常の白黒に限らず、赤や黄色などの色の素材が収録されています。ワイヤーフレームにもっと色が欲しい場合、このテンプレートを使うと効果的です。

22. モバイルのフローチャートのテンプレート（Sketch）

出典： Dribbble

複数の色を導入できるモバイルアプリのフローチャートです。アイコンのサイズがいくつかあり、矢印などのフローを把握するための素材もさまざまです。

23. ユーザーのアプリ内の行為を見せる素材（Sketch）

出典： Dribbble

アプリ内のフローチャートを示すのに便利なワイヤーテンプレートです。ディテールを書き込みづらいので、開発の初期に使うのに向いています。

24. WireflowsのモバイルUIテンプレート（Sketch）

出典： Gumroad

このパッケージに、ワイヤーフレームテンプレートおよびフローチャートがあります。画面57個に加え、注記するための素材もあり、十分ディテールがあります。

パソコンのWebデザイン用ワイヤーフレームテンプレート

次のワイヤーフレーム集と素材の数々は、パソコン用テンプレートです。

25. Webサイトのワイヤーフレームテンプレート（Sketch）

出典： Dribbble

白、黒、灰色の3色を用いているワイヤーフレームテンプレートです。多くのサイトのセクションのテンプレートがあるため、効率よくサイトを構築できます。

26. BootstrapのUIワイヤーフレームテンプレート（Sketch）

出典： Sketch Frames

Twitter風のデザイン素材を用いながら、高質でワイヤーフレームを早く作れるスピード感を実現できるワイヤーフレームです。Sketchに対応しています。

27. Sketch形式のワイヤーフレーム素材（Sketch）

出典： Dribbble

Webデザインによく使う素材の多さがピカイチのテンプレートです。

28. レスポンシブ性のあるサービス用ワイヤーフレームテンプレート（Sketch）

出典： Sketch App Sources

レスポンシブな動きををプレゼンするのに便利なワイヤーフレームテンプレートです。

29. ECサイト用ワイヤーフレームテンプレート（Sketch）

出典： Dribbble

ECのサイトに適応するワイヤーフレームの素材です。素材の使い道が広く、商品の詳細ページや店舗への案内ページなどを作成できます。

30. 手書きのようなワイヤーフレーム素材（AIおよびEPS）

出典： Hand Drawn Goods

手書きのようなテイストのワイヤーフレームを作るときに便利な素材です。パッケージの素材を用いて、ログイン画面やオンとオフのスイッチなどの部分があります。

31. パソコンとモバイルのWebサイトのワイヤーフレームテンプレート（Sketch）

出典： Sketch App Sources

このテンプレートには、パソコンおよびモバイルのWebサイトによく使われているテンプレートやナビゲーション、タブやボタンのようなUI素材があります。

32. 選択肢のボタンが入っているワイヤーフレーム素材（Sketch）

出典： Dribbble

このパッケージに、記入欄や選択肢のボタンなどの素材が収録されています。WordPressのUIを参考にしている素材ですが、幅広くサイトのワイヤーフレームテンプレートに使えます。

33. ボタンや記入窓などのワイヤーフレーム素材（PSD）

出典： Behance

記入欄や選択のボタンなどのワイヤーフレーム素材です。また、素材がVectorとSmartObjectによって構成されているため、自由にサイズを調整できます。

34. ワイヤーフレームの骨組みを作成できるワイヤーフレーム素材（Sketch）

出典： Github

このワイヤーフレームテンプレートには、ボタンやSNSのアイコン、数字、ファイルのアップロードを設ける項目などの素材がたっぷりです。また、SketchのSymbolsに対応しているため、素材を複数のプロジェクトで使えます。

35. 文章を真似するワイヤーフレーム素材（Sketch）

出典： Dribbble 

文章のテキストを真似するワイヤーフレーム素材です。また、素材がVectorとSmartObjectによって構成されているため、自由にサイズを調整できます。

36. ランディングページのためのワイヤーフレームテンプレート（PSD）

出典： Dribbble

このパッケージに収録されているワイヤーフレームテンプレートは、ランディングページを作成するときに活用できます。パソコンとモバイルに適応しています。

37. アトミックデザインのワイヤーフレームテンプレート（Sketch）

出典： Dribbble

この素材は、Pattern LabというアトミックデザインでWebサイトの完成版を生成するソフトウェアを提供する企業によるワイヤーフレームテンプレートです。素材は、モバイルではなく、パソコンのサイトに適応しています。

38. 7色のワイヤーフレーム素材（Sketch）

出典： Sketch App Sources

このパッケージに、ワイヤーフレーム素材の7色ほどバリエーションがあります。また、素材がVectorとSmartObjectによって構成されているため、自由にサイズを調整できます。

39. スターターのワイヤーフレームテンプレート（Sketch）

出典： Devbridge 

シンプル且つスピード重視でサイトの構成を作成するときに、このワイヤーフレームテンプレートが役に立ちます。より些細な調整の場合、ほかの素材を組み合わせるべきです。

40. モノトーンのワイヤーフレーム素材（Sketch）

出典： Dribbble

モノトーンの色をベースにしている素材が収録されているパッケージです。アイコンの数がたくさんあります。

41. サイトマップのためのワイヤーフレーム素材（AI、EPS、SVG）

出典： Pixel Buddha

このパッケージに、100個以上のカードを形にしているワイヤーフレーム素材が収録されています。それぞれは、404ページやメンバーページなどのページです。それらのカードを使い、簡単にサイトマップを作成できます。

42. フローチャートも含む海外デザインサイト・Speckyboy用開発されたワイヤーフレームテンプレート（AI）

出典： Speckyboy

パソコン用のレイアウトは21個で、モバイル用のレイアウトは8個が収録されているパッケージです。フローチャートのテンプレートも入っています。

43. フローチャート用のワイヤーフレーム素材（Sketch）

出典： Dribbble

複数のページのテンプレートが収録されているパッケージです。いくつかの素材もパッケージに入っています。

44. Webデザインのフローチャート用のテンプレート（PSD）

出典： Gumroad

このパッケージに収録されている素材は、フローチャート用のカードです。エラーページや料金プランを選ぶページなどのテンプレートを選び、気軽にフローチャートを作成できます。

モバイル＆パソコン両用ワイヤーフレームテンプレート

モバイルおよびパソコンの体系に対応しているワイヤーフレームテンプレートは次のようです。

45. Adobe XD用ワイヤーフレームテンプレート（Adobe XD）

出典： Behance

モバイルのワイヤーフレームテンプレート170個、パソコンのワイヤーフレームテンプレート90個、素材240個。非常に素材数の多いテンプレートのパッケージです。パッケージがSketchに適応していませんが、Adobe XDを使っている人であれば、使う価値はあります。

46. さまざまな要素のあるフローチャートムのテンプレート（Sketch）

出典： Dribbble

このパッケージに、フローチャートを作成するための素材が収録されています。素材がカラフルで数も多いため、フローチャートを作るときは素材を選び放題です。また、素材がVectorとSmartObjectによって構成されているため、自由にサイズを調整できます。

便利なワイヤーフレーム作成ツール

ワイヤーフレームを作成すると、使えるツールは非常に多くあり、どのツールを使えばいいのかを迷います。そんなときのために、便利なワイヤーフレーム作成ツール10選をまとめました。

1. Wireframe.cc

ブラウザ上で簡潔なインターフェースでワイヤーフレームを作成が可能なWireframe.cc。作成作業が簡単であり、プロジェクトのURLを共有するだけで第三者もアクセスできます。

Wireframe.cc

2. Pop

Popは、スマートフォンで手書きのワイヤーフレームを撮影し、ワイヤーフレームのサイト内のページを紐付けるアプリです。スマートフォンでサイトを確認するときに便利なツールです。

Pop

3. MockFlow

ブラウザ上で複数のテンプレートからワイヤーフレームを作成できるMockflow。UIコンポーネントが多いため、コンポーネントをうまく組み合わせる次第、ワイヤーフレームを手軽に作成できます。

Mockflow

4. Justinmind Prototyper

Justinmind Prototyperは、Photoshopのようなインターフェースで、ドラッグ・アンド・ドロップでワイヤーフレームを作成できるツールです。Justinmind Prototyperを開き、いくつかのテンプレートから選んでから作業をスタートします。英語表記です。

Justinmind Prototyper

5. SimpleDiagrams

自ら画像を描くのか、または500個以上のステンシルを使うことで、伝えたいポイントを伝えられるSimpleDiagrams。普通のワイヤーフレームよりも、ワイヤーフレーム作成の早期に手軽にアイディアを伝えるためのツールです。

SimpleDiagrams

6. moqups

moqupsとは、ブラウザ上でステンシルをドラッグ・アンド・ドロップでワイヤーフレームを作成できるツールのこと。登録せずに使えますが、無料で登録すると、PDFやPNGを出力できます。

moqups

7. HotGloo

HotGlooは、Webサイト、モバイルアプリ、ウェアラブルの3個をプロトタイプ化できる、オンラインでもオフラインでも使えるツールです。Disney社やIBM社などの大手企業も使っています。

HotGloo

8. Cacoo

日本語に対応している、チームのコラボレーションが可能なCacoo。100種類ほどテンプレートを収録し、各ジャンルの作図を手軽に作成できます。

Cacoo

Cacoo Store

9. UXPin Prototyping

UXPin Protypingとは、ワイヤーフレームやサービスのプロトタイプを作成できるツールのこと。レイヤーのデータを保存しながら、PhotoshopおよびSketch形式のファイルを出力し、プロトタイプ化できます。

UXPin

10. Adobe Comp CC

Adobe Comp CCは、Adobe社が開発した、スマートフォンやタブレット端末でもサービスをワイヤーフレーム化できるソフトウェアです。ワイヤーフレームを作成してから、Photoshop、Illustrator、InDesign、Museの形式を出力できます。

Adobe Comp CC

まとめ

ワイヤーフレームを作成すると、サイトを作成する前にもサービスの詳細が明確になります。作成ツールも含み、場合に応じるテンプレートを使い、プロジェクトに導く設計図を作成しましょう。