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

 2018.04.20  2018.09.04

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

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

この記事ではiPad(Pro)のノートアプリでも使える、Webサイトの設計やデザインで役立つワイヤーフレームのPDFテンプレートをまとめました。PDFなので、もちろんプリントアウトしても使えます。ノートやカレンダー、スケジュール帳のリフィルとして使えるテンプレートは、以下の記事でまとめています。

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

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

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)

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

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

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