【無料】Goodnotesで使えるワイヤーフレーム/スケッチ用テンプレートまとめ

2024.06.12

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

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

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

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

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

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

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

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

【この記事を書いた人】

写真畑出身のフリーランスWebデザイナー。Goodnotesを始めとするノートアプリやApple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細

Responsive Sketchsheets

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

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

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

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

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

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

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

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

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

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

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

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

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

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