【漫画】フリーランスが“やってはいけない”活動名
- フリーランス/個人事業主
- 漫画
- 連載
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）
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）
レスポンシブな動きををプレゼンするのに便利なワイヤーフレームテンプレートです。
29. ECサイト用ワイヤーフレームテンプレート（Sketch）
出典： Dribbble
ECのサイトに適応するワイヤーフレームの素材です。素材の使い道が広く、商品の詳細ページや店舗への案内ページなどを作成できます。
30. 手書きのようなワイヤーフレーム素材（AIおよびEPS）
出典： Hand Drawn Goods
手書きのようなテイストのワイヤーフレームを作るときに便利な素材です。パッケージの素材を用いて、ログイン画面やオンとオフのスイッチなどの部分があります。
31. パソコンとモバイルのWebサイトのワイヤーフレームテンプレート（Sketch）
このテンプレートには、パソコンおよびモバイルの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）
このパッケージに、ワイヤーフレーム素材の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を共有するだけで第三者もアクセスできます。
2. Pop
Popは、スマートフォンで手書きのワイヤーフレームを撮影し、ワイヤーフレームのサイト内のページを紐付けるアプリです。スマートフォンでサイトを確認するときに便利なツールです。
3. MockFlow
ブラウザ上で複数のテンプレートからワイヤーフレームを作成できるMockflow。UIコンポーネントが多いため、コンポーネントをうまく組み合わせる次第、ワイヤーフレームを手軽に作成できます。
4. Justinmind Prototyper
Justinmind Prototyperは、Photoshopのようなインターフェースで、ドラッグ・アンド・ドロップでワイヤーフレームを作成できるツールです。Justinmind Prototyperを開き、いくつかのテンプレートから選んでから作業をスタートします。英語表記です。
5. SimpleDiagrams
自ら画像を描くのか、または500個以上のステンシルを使うことで、伝えたいポイントを伝えられるSimpleDiagrams。普通のワイヤーフレームよりも、ワイヤーフレーム作成の早期に手軽にアイディアを伝えるためのツールです。
6. moqups
moqupsとは、ブラウザ上でステンシルをドラッグ・アンド・ドロップでワイヤーフレームを作成できるツールのこと。登録せずに使えますが、無料で登録すると、PDFやPNGを出力できます。
7. HotGloo
HotGlooは、Webサイト、モバイルアプリ、ウェアラブルの3個をプロトタイプ化できる、オンラインでもオフラインでも使えるツールです。Disney社やIBM社などの大手企業も使っています。
8. Cacoo
日本語に対応している、チームのコラボレーションが可能なCacoo。100種類ほどテンプレートを収録し、各ジャンルの作図を手軽に作成できます。
9. UXPin Prototyping
UXPin Protypingとは、ワイヤーフレームやサービスのプロトタイプを作成できるツールのこと。レイヤーのデータを保存しながら、PhotoshopおよびSketch形式のファイルを出力し、プロトタイプ化できます。
10. Adobe Comp CC
Adobe Comp CCは、Adobe社が開発した、スマートフォンやタブレット端末でもサービスをワイヤーフレーム化できるソフトウェアです。ワイヤーフレームを作成してから、Photoshop、Illustrator、InDesign、Museの形式を出力できます。
まとめ
ワイヤーフレームを作成すると、サイトを作成する前にもサービスの詳細が明確になります。作成ツールも含み、場合に応じるテンプレートを使い、プロジェクトに導く設計図を作成しましょう。
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Way back in October 2007, we initially launched Speckyboy as a small inspirational site for web designers.
この記事はspeckyboyからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
50 Free Wireframe Templates for Mobile, Web and UX Design
