【iPad活用法】ノートアプリでデザイン収集!GoodNotes 5でオリジナルスクラップブックを作ろう

 2018.03.08  2020.03.24

みなさんは普段どのようにデザインやアイディアをインプットしていますか?

Webサイトから気になるデザインをアプリなどでブックマークしたり、パソコンにストックしたりとデザイン収集も色々な方法があると思いますが、この記事ではiPadの手書きノートアプリの特性を生かしたデザイン収集方法をご紹介します。

今回はiPadの手書きノートアプリ「GoodNotes 5」を使って、見出し、フッター、レイアウトといった要素・パーツごとにノートを作成し、各ノートにデザインをまとめた「デザインスクラップブック」を作成します。

デザイン以外でも、欲しいものカタログ、行ってみたい場所やお店、洋服コーデ集、持ち物リストなどなど、色々な目的に合わせた「スクラップブック」が作れますよ!

注意!このスクラップブックは、あくまで自分のための勉強用参考資料としてのノートのアイディアです。画像などの素材の扱いはご自身の責任でご確認ください。

iPadでノートアプリを用意する

私はGoodNotes 5をメインで使っていますが、画像が読み込めるならGoodNotes 5以外でも応用可能ですので、自分にあったノートアプリをご使用ください。私はGoodNotes 5の他に、GoodNotes 4やNoteshelfも使っており、この記事ではNoteshelfでの画像の切り取り方についても説明します。

GoodNotes 5/GoodNotes 4とNoteshelfのアプリ比較や具体的な使用方法は以下のページでまとめています。

私が実際に使っているノートアプリはこちらです!有料ですが、お値段以上の価値はあります。

GoodNotes 4は2020年1月15日をもって販売終了となり、GoodNotes 5アップグレードバンドルでのアップグレードも利用できなくなりました。詳細は「【GoodNotes 4ユーザー必読】アップグレードするなら今!2020年1月15日から販売中止に」をご確認ください。

GoodNotes 5
開発元:Time Base Technology Limited
¥960
Noteshelf
Noteshelf
開発元:Fluid Touch Pte. Ltd.
¥1,200

デザインを収集する

まずはiPadにまとめたいデザインを集めます。サイトなどのスクリーンショットや雑誌、チラシなどの写真を撮って画像として保存し、ある程度溜まったらiPadに転送します。スマートフォンなら、散歩や通勤中に見つけたデザインも簡単に撮影できますね!

楽天マガジン」 や「Tマガジン」といったネットで読める雑誌読み放題サービスなら、様々なジャンルのありとあらゆる「デザイン」や「モノ」を収集できます。(私も利用中)

Webサイトやグラフィックデザインは、デザイン系のギャラリーサイトで情報収集するのがオススメです。

AirDropで画像を転送する

MacやiPhoneユーザーなら、Airdropで重い画像もiPadへ瞬時に転送できます。

転送したい画像を選択した後、アイコンをクリックすると、同じWifiを使用しているApple製品がAirDropに表示されます。(表示されない場合は、Bluetoothの設定をご確認ください)

転送したい端末をクリックすれば転送が始まります。スピードはメールやクラウドを使うより早いと思います。

Split View(スプリットビュー)で画像アプリとノートアプリを2つ立ち上げる

iPadでデフォルトの写真アプリとGoodNotes 5をSplit Viewで立ち上げます。Split Viewではアプリを2つ同時に立ち上げて表示させることができるんです!Split Viewのやり方についてはこちらの記事で説明しています。Split Viewに対応していないアプリもあるので、その場合はひとつずつ立ち上げて作業します。※今回はiPadは横向きで作業します。

iPadのSplit View

サンプル画像では、スプリットビューの左側にデフォルトの写真アプリ、右側にGoodNotes 5を立ち上げました。次にGoodnotes 5でデザイン収集用のノートを作成します。ここではタイトルデザイン用のノートを作成しました。用紙はクリーム色や白色、方眼など好きなタイプを選びましょう。

iPad Split View画面でGoodNotes 5のノートを作成する
左側:デフォルトの写真アプリの画像一覧画面、 右側:GoodNotes 5のノート作成画面

画像をコピーし、必要な部分を切り取る

画像の一部分を切り取り、ノートアプリに貼り付けます。ここでは、GoodNotes 5やNoteshelfを使った画像のトリミング方法と、iPadのデフォルトの写真アプリを使用する方法をご紹介します。サンプルでは左側にデフォルトの写真アプリを表示させていますが、ブラウザで開いたサイト上の画像もコピー可能です。(著作権に注意してください)

GoodNotes 5で画像を切り取る場合

画像をGoodNotes 5にドラッグ&ドロップしてコピーする

左側の写真アプリでサムネール画像が表示されている状態で、使用したい画像を指でドラッグ&ドロップで右側のGoodNotes 5にコピーします。

GoodNotes 5で画像をトリミングする

GoodNotes 5の貼り付けられた画像はサイズを変更できる状態になっています。画像を1回タップすると表示される「トリミング」ボタンをクリックします。

GoodNotes 5で画像をトリミングする

画像の切り取り編集画面に移行するので、バウンディングボックスを調節して切り取りたい部分を指定します。

GoodNotes 5で画像をトリミングする

「完了」ボタンを押すと、画像が切り取られます!画像右下のマークをドラッグすると、サイズ変更ができます。

GoodNotes 4とGoodNotes 5での画像の貼り付けやトリミングについては、以下の記事でも詳しくご解説しています。

Noteshelfで画像を切り取る場合

Noteshelfで画像編集・トリミングをする

GoodNotes 4同様、写真アプリのサムネール画像をドラッグ&ドロップでNoteshelfにコピーします。

Noteshelfで画像編集・トリミングをする

コピーされた画像を1回タップすると表示される「編集」ボタンをクリックすると、画像編集画面になります。

Noteshelfで画像編集・トリミングをする

バウンディングボックスで切り取りたい画像を指定します。この画面では消しゴムで消したりすることもできます。

Noteshelfで画像編集・トリミングをする

「完了」ボタンを押すと図のようなメッセージが出るので、切り取りに問題がなければ「Yes」をクリックします。

Noteshelfで画像編集・トリミングをする

画像が切り取られました!

Noteshelfでの画像の貼り付けやトリミングについては、以下の記事でも詳しくご紹介しています。

iPadデフォルトの写真アプリで画像を切り取る場合

デフォルトの写真アプリを使うと、切り取った後も画像を元の状態に戻せます。サンプル画像では雑誌のページを例として使わせていただき、「車にイノシシが…」というタイトルを切り取ってみます。

iPadで画像をトリミングする

iPadで画像をトリミングする

写真アプリの右上にある「編集」をクリックすると画面背景が黒くなります。画面下部にある切り抜きのアイコンをクリックすると、画像の四隅にハンドルが表示されます。

iPadで画像をトリミングする

画像四隅のハンドルを切り抜きたい部分までドラッグして位置を指定します。指定後、写真アプリの画面右下のチェックアイコンをクリックすると、切り抜かれた画像が表示されます!この切り抜かれた画像をコピーして、スプリットビュー右側のGoodNotes 5のノートにペーストします。

iPadの画像をコピーしてGoodNotes 5にペーストする

先ほどトリミングした画像を選択してアイコンをクリックすると画面下部にメニューが表示されるので、「写真をコピー」をクリックして画像をコピーします。

iPadの画像をコピーしてGoodNotes 5にペーストする

GoodNotes 5のノート上で長押しすると「ペースト」のメニューが表示されるのでクリックすると…。

iPadで編集後の画像を元に戻す

切り抜かれた画像が貼り付けられました!画像サイズの変更も可能です。このような感じで、収集したい画像をトリミング→貼り付けと繰り返していきます。トリミングされた画像は、「編集」から「元に戻す」でトリミング前の状態に戻すことができます。

GoodNotes 5でフリーハンドで画像をトリミング・切り抜く

トリミングは、選択範囲を自由に描ける「フリーハンド」でも行えます。画像のように、切り抜きっぽく仕上げることもできます。

こんな感じで、画像をトリミングして配置を変えながらページを作っていきます。

GoodNotes 5でトリミングした画像を並べてスクラップブックのページを作成する

ノートアプリでデザインを編集・整理する

ノートアプリによるスクラップブックのサンプル
こんな感じでテーマごとに必要な部分だけを集めたノートを作ります。こちらはGoogNotes 5での使用例

画像はノートに貼り付けた後も自由に移動や変更が可能ですし、もちろん手書きでメモも書けるので、自分好みのページに仕上げることができます。既存のいわゆるブックマーク・収集サービスとは一味違った自分だけのオリジナルスクラップブックの作成は少し手間はかかりますが、情報がきちんと編集・整理されるので、後から読み返すことも増えるのではないかな〜と思います。

GoodNotes 5のサムネール画面

ノートのページはサムネール表示ができるので、見たいページがすぐに見つかります。

GoodNotes 5のノートブック一覧画面

デザインのカテゴリごとにノートを分けてもいいですね。Webサイトならヒーローイメージ、ナビゲーション、フッターなど色々なパーツに分けられそうです。お気に入りの配色、フォントなどまとめてもよいかも。

GoodNotes 5のノート一覧画面でノートを書き出す

GoodNotes 4/GoodNotes 5やNoteshelfのノートは、PDF・png・GoodNotes/Noteshelf形式で書き出しが可能です。PDFでまとめておけば印刷にも便利です。

デザイン以外でも、テーマに沿った画像を集めてオリジナルの資料を作ったりと使い方は無限大。世界でひとつのオリジナルノートを作ってみませんか?

スクラップブックのバックアップやiPad/iPhone/Macで同期する方法

iPadで作ったスクラップブックのバックアップも忘れずにしておきたいですよね!GoodNotes 4/GoodNotes 5とNoteshelfのノートのバックアップ方法は以下の記事でまとめましたので、スクラップブックを作成する前に確認しておくと安心です。

また、iPadで作成したスクラップブックはGoodNotes 4ではiPad/iPhone/Macで、GoodNotes 5やNoteshelfはiPad/iPhoneで同期が可能なので、状況に応じて確認・修正がしやすいです。(iPhoneはApple Pencilが使えないので、どちらかというと閲覧中心になると思いますが…)GoodNotes 4/GoodNotes 5とNoteshelfの同期方法は以下の記事で説明しています。

スクラップブック応用編:ノートアプリで子供の作品をデジタル管理する

子供が描いた絵や作った作品は、放っておくとどんどん増えていきますよね。作品は処分するのも罪悪感があり、写真に撮って保存しても後で見つけにくく、結局見返すこともなくフォルダの奥底へ…。

ノートアプリなら、撮影した作品を後から見返しやすい形で保存できます。PDFで書き出してプリントアウトするなんてことも可能です。子供の作品をスクラップブック風にまとめれば、思い出を楽しくふり返られそうです。

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

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

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

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

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

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

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

iPadのノートアプリを更に使いやすくしてくれるオススメグッズ&アクセサリー

私が実際に使っているiPad向けグッズをご紹介します!

紙のような描き心地が実現!保護フィルム

紙に描いているような描き心地を求めるなら、私も使っているiPadのディスプレイに貼る保護フィルム「ペーパーライク」がオススメです。Apple Pencilで直接ディスプレイに描くとペン先がツルツルと滑るのですが、ペーパーライクのような表面にザラつきのあるフィルムを貼るとペン先に僅かな抵抗が生まれ、紙に描いている感覚に近くなります。細かいところも描きやすくなりますよ〜!

iPadの書き心地がよくなる保護フィルムの使用レビューは以下の記事でまとめています。

iPad Proと一緒にApple pencilを持ち歩こう!

iPad Proを汚れや衝撃から守ってくれるケース(カバー)もあると安心ですよね。私が使っているApple Pencilも収納できるケースを下記のページでご紹介しています。スタンド機能もついているので、資料やノートを見ながら仕事したりとかなり重宝してます!