こんな方にオススメ
- Web制作会社に勤めるWebデザイナー
- フリーランスでWeb制作している方
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
GoodNotes 5で使えるサイト制作用のワイヤーフレームのPDFダウンロードサイトを紹介します。また、ワイヤーフレーム用のテンプレート自作方法も解説します。
はじめに
知っておきたい前知識
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
どういうページのワイヤーフレームを描くかで、オススメのテンプレートが変わります。
こんな場合 | オススメ |
---|---|
新規サイト を作る場合 | 様々なサイトで配布されている、汎用的なテンプレートを使うのがオススメ |
既存サイトの 新規ページ を作る場合 | 既存サイトのキャプチャを元に、テンプレートを自作するのがオススメ |
ワイヤーフレーム用のPDFを配布しているサイト
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
実はワイヤーフレームのPDFを配布しているサイトは少ないんです。SNEAKPEEKITは、PC、タブレット、スマホ用のワイヤー用PDFが手に入るのでオススメです。
GoodNotes 5で使える
ワイヤーフレームのテンプレートを自作する手順
テンプレートの自作に
必要なもの
- iPad
- Googleスライド
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
既存サイトのページのワイヤーを手描きするときは、運用しているサイトのテイストの中で手描きできたほうがイメージを膨らませやすいです。
- もちろん、iPadでのテンプレート作成手順を紹介していますが、パソコンも同じです。
既存サイトのワイヤーフレームを作る場合は、既にあるページのデザインをもとにワイヤーを作ると良いです。
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする](https://tegaki.app/wp-content/uploads/2022/02/20230410223905726912.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする](https://tegaki.app/wp-content/uploads/2022/02/20230410223905726912.png)
今ほどキャプチャしたページの画像を「Googleスライド」に貼り付けます。トリミングでサイズなどを調整しましょう。
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - 必要な部分のみトリミングする](https://tegaki.app/wp-content/uploads/2022/02/20230410223906922754.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - 必要な部分のみトリミングする](https://tegaki.app/wp-content/uploads/2022/02/20230410223906922754.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - キャプチャしたページをトリミング調整する](https://tegaki.app/wp-content/uploads/2022/02/20230410223905872423.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - キャプチャしたページをトリミング調整する](https://tegaki.app/wp-content/uploads/2022/02/20230410223905872423.png)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
トリミングで調整したものがこちら。余計な部分を取ると、ワイヤーをのびのび使えますよ。
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - キャプチャしたページのトリミング調整完了](https://tegaki.app/wp-content/uploads/2022/02/20230410223906028641.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - キャプチャしたページのトリミング調整完了](https://tegaki.app/wp-content/uploads/2022/02/20230410223906028641.png)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
最後に、白い図形をメインカラムに敷きましょう。こうすることで、ヘッダーやサイドバーを残しつつ、メインコンテンツは無地になりました。
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - キャプチャのメインコンテンツを無地にするために白色の図形を置く](https://tegaki.app/wp-content/uploads/2022/02/20230410223907108953.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - キャプチャのメインコンテンツを無地にするために白色の図形を置く](https://tegaki.app/wp-content/uploads/2022/02/20230410223907108953.png)
Googleスライドで作ったワイヤーフレーム用のシートをPDFでGoodNotes 5に書き出します。
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
「共有とエクスポート」 → 「PDF」 → 「GoodNotesで開く」の順にタップしていきます。
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - 「共有とエクスポート」をタップする](https://tegaki.app/wp-content/uploads/2022/02/20230410223906188336.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - 「共有とエクスポート」をタップする](https://tegaki.app/wp-content/uploads/2022/02/20230410223906188336.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - 「PDF」をタップする](https://tegaki.app/wp-content/uploads/2022/02/20230410223906377882.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - 「PDF」をタップする](https://tegaki.app/wp-content/uploads/2022/02/20230410223906377882.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - 「GoodNotesを開く」をタップする](https://tegaki.app/wp-content/uploads/2022/02/20230410223906579473.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - 「GoodNotesを開く」をタップする](https://tegaki.app/wp-content/uploads/2022/02/20230410223906579473.png)
GoodNotes 5に読み込んだ
ワイヤーフレームには手書きできる
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
詳しい手順をまとめたので、こちらのPDFもご覧ください。
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - GoodNotes 5に読み込んだPDFテンプレート](https://tegaki.app/wp-content/uploads/2022/02/20230410223906768044.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - GoodNotes 5に読み込んだPDFテンプレート](https://tegaki.app/wp-content/uploads/2022/02/20230410223906768044.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - 自作のワイヤーフレームテンプレートに実際に書き込む](https://tegaki.app/wp-content/uploads/2022/02/20230410223900979160.png)
![GoodNotes 5で使えるワイヤーフレームの無料テンプレート&自作方法 - ワイヤーの元になるページをキャプチャする - 自作のワイヤーフレームテンプレートに実際に書き込む](https://tegaki.app/wp-content/uploads/2022/02/20230410223900979160.png)
GoodNotes 5はPDFファイルと相性が良い
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
![](https://tegaki.app/wp-content/uploads/2022/10/20221029092130756230-150x150.jpeg)
PDFファイルさえあれば、GoodNotes 5で読み込んで手書きできてしまうのが良いところです。こちらの記事も今回の内容と関係ありますので、ぜひご覧ください。
![](https://tegaki.app/wp-content/uploads/2022/08/20230410223859820724-300x158.png)
![](https://tegaki.app/wp-content/uploads/2022/08/20230410223859820724-300x158.png)
![](https://tegaki.app/wp-content/uploads/2022/11/20230410223900478146-300x158.png)
![](https://tegaki.app/wp-content/uploads/2022/11/20230410223900478146-300x158.png)