【無料】iPadのノートアプリでも使える!ワイヤーフレームやスケッチ用のPDFテンプレートまとめ

※当ブログのリンクには一部広告が含まれています。

Noteshelf テンプレート追加方法手書きノートアプリ「Noteshlef 2」で読み込んだワイヤーフレームのPDFテンプレートでの書き込み例

みなさんは、Webサイト設計時のワイヤーフレーム作成はどのような方法で行なっていますか?

紙とペンのアナログ方式、Adobe XDやSketchなどのソフト、またはオンラインのWebサービスなどなど、多種多様なやり方がありますが、デジタルとアナログの良いとこどりの「iPadのノートアプリとApple Pencilを使って手書きでワイヤーフレームを作成する」方法もオススメです!

この記事ではiPadのノートアプリでも使える、Webサイトの設計やデザインで役立つワイヤーフレームのPDFテンプレートをまとめました。PDFなので、もちろんプリントアウトしても使えます。

この記事でご紹介するテンプレートは様々なサイズがありますが、iPadで使う場合はA4サイズが使いやすいと思います。A4サイズとiPadの画面の比率は異なるので、iPadで表示すると用紙の両側に多少隙間ができますが、使用には全く問題ありません。

ノートやカレンダー、スケジュール帳のリフィルとして使えるテンプレートは、以下の記事でまとめていますので、あわせてご参考ください。

私が実際に使用している手書きノートアプリ「GoodNotes 5」や「Noteshelf」でテンプレートを追加する方法は以下の記事で説明しています。

Responsive Sketchsheets

  • zurb
  • zurb
  • zurb

レスポンシブなサイトのワイヤーフレームって書くのが難しいですよね。こちらのテンプレートでは、デスクトップとスマートフォンの見栄えを一緒に確認できたり、縦に長いサイトでブラウザの外に隠れている部分も分かるような工夫がされています。手書き風で親しみやすいデザインです。

サイトURL
https://zurb.com/playground/responsive-sketchsheets
種類
デスクトップ、スマートフォン、ブラウザの外に隠れているコンテンツをスケッチできるテンプレートなど。

Wireframe Sketch – Small Screen View

レスポンシブのモバイル用ワイヤーフレームテンプレート

縦に長いスマートフォンサイトのワイヤーフレームを書く際に便利なテンプレートです。

サイトURL
https://parashuto.com/rriver/tools/mobile-view-wireframe-a4-sketch-sheet
種類
スマートフォン

PAPER BROWSER

  • PAPER BROWSER
  • PAPER BROWSER

シンプルなブラウザに横幅のサイズ(800, 960, 1024px)が記されています。「Quick Sketch」と「Detailed Sketch」の2種類があり、おおまかなラフを描くときには「Quick Sketch」、詳細を書き込みたいときには「Detailed Sketch」が便利です。

サイトURL
http://www.raincreativelab.com/paperbrowser/
種類
デスクトップのブラウザ

Web sketching template

  • Web Sketching Template 1ページ
  • Web Sketching Template 6ページ

ページ名やプロジェクト名、メモなどが書き込めるスペースがあります。6つのブラウザがあるタイプはこちらからダウンロードできます。

サイトURL
https://www.flickr.com/photos/88005207@N00/3884016462/
種類
デスクトップのブラウザ

KOGNI – Graph Paper

  • KOGNI - グラフ(方眼)のワイヤーフレーム
  • KOGNI - グラフ(方眼)のワイヤーフレーム
  • KOGNI - グラフ(方眼)のワイヤーフレーム

方眼タイプのワイヤーフレーム用テンプレートが揃っています。色はシアンと薄いグレーの2種類です。

サイトURL
http://konigi.com/blog/graph-paper/
種類
ワイヤーフレーム、ドット方眼、ストーリーボード

SNEAKPEEKIT

  • SNEAKPEEKIT ワイヤーフレームテンプレート
  • SNEAKPEEKIT ワイヤーフレームテンプレート
  • SNEAKPEEKIT ワイヤーフレームテンプレート モバイル
  • SNEAKPEEKIT ワイヤーフレームテンプレート タブレット

デスクトップ、スマートフォン、タブレットのワイヤーフレーム用テンプレートです。それぞれ「グリッドあり・なし」が選べます。グリッドのみのテンプレートや縦に長〜いスマートフォンのサイトに合わせたテンプレートもあります。アウトプットを邪魔しないシンプルなデザインで使いやすそうです。

サイトURL
http://sneakpeekit.com/
種類
デスクトップ、スマートフォン、タブレット(グリッドあり/なし)

Wireframe template

ワイヤーフレームテンプレート

ブラウザのイラストが描かれているテンプレートが多い中、こちらはシンプルな枠とメモスペースのみなので、より自由に書けそうですね。ダウンロードファイルには、1ページに1つのブラウザのテンプレートと、2つのブラウザが書かれているテンプレートの2種類が入っています。

サイトURL
https://www.flickr.com/photos/alfonsobozzelli/3949828341/
種類
ブラウザ一般

iPad Air Sketching Templates

  • iPad Air用ワイヤーフレームテンプレート
  • iPad Air用ワイヤーフレームテンプレート

iPad Air用のワイヤーフレームテンプレートがなんと54パターンダウンロードできます。iPad Air用ではありますが、スケッチだけなら他のiPadモデル用としても使えると思います。

サイトURL
https://dribbble.com/shots/1773737-iPad-Air-Sketching-Templates
種類
iPad Air

Responsive Wireframe Sketch Sheet

レスポンシブサイト用ワイヤーフレームテンプレート

モバイル・タブレット・デスクトップのテンプレートが1ページに収まっているので、一目で全デバイスの確認ができます。サイズはA3です。

サイトURL
https://dribbble.com/shots/1647857-Responsive-Wireframe-Sketch-Sheet
種類
モバイル、タブレット、デスクトップ(A3)

QUADERNO(クアデルノ)のテンプレート

  • QUADERNO(クアデルノ)- 絵コンテ PDFテンプレート
  • QUADERNO(クアデルノ)- 記録用 PDFテンプレート

富士通の電子ペーパー「クアデルノ」用のPDFテンプレートですが、GoodNotes 5などのノートアプリに読み込んで使えます。

絵コンテやスライド作成のためのテンプレートやミーティングシートなど、ビジネス系のテンプレートが揃っています。スケジュールやToDoリストなのテンプレートも配布しているので、スケジュール管理もあわせてどうぞ。

サイトURL
http://www.fmworld.net/digital-paper/tool.html
種類
スケジュール(マンスリー・ウィークリー・デイリー)、ToDoリスト、スライドシート、絵コンテ、ミーティングシート、五線譜、タブ譜、原稿用紙、日記、方眼罫、記録ノートなど

無料PDFテンプレートが使えるオススメのiPad用手書きノートアプリ

今の生活でなくてはならない存在となった、私が実際に使っているノートアプリをご紹介します。仕事からプライベートまで1日中使って入るのですが、本当〜に便利で開発者さんには感謝してもしきれません!

というわけで、ノートアプリへの熱い想いを以下の記事でまとめました。

私はこう使っている!ノートアプリの活用例

ノートアプリでは、仕事でアイディアやラフを描いたり、PDFの資料を管理する以外にも、子供の作品やプリント、マニュアルを管理したりと、色々な使い方をしています。

私のノートアプリの活用方法については、以下の記事で詳しくご紹介していますので、ぜひご覧ください!

イラストや絵を描きたいときは、お絵描き・イラスト制作アプリを使おう!

ノートアプリは、メモやノートを取ったり文書を管理するのには最適なのですが、イラストや絵を描くのにはあまり向いていません。(描けることは描けますが)イラストや絵を描く場合は、ブラシや素材が豊富なお絵描き・イラスト制作アプリをオススメします。

様々なシーンで大活躍!iPad活用法

スマートフォンともパソコンとも違う、iPadならではの楽しみ方や便利な使い方を、iPad使用歴の長いiPad大好きな私がご紹介します。読んだらちょっと欲しくなるかも?