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

 2018.03.08  2018.12.10

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

今回はiPad Proの手書きノートアプリ「GoodNotes 4」を使って、見出し、フッター、レイアウトといった要素・パーツごとにノートを作成し、各ノートにデザインをまとめた「デザインスクラップブック」を作成します。手書きノートアプリはGoodNotes 4以外でも応用できると思うので、自分にあったアプリをご使用ください。私はGoodNotes 4の他にNoteshelf 2も使っているので、Noteshelf 2での画像の切り取り方も説明します。

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

私が実際に使っているノートアプリはこちらです!

GoodNotes 4
GoodNotes 4
¥960
posted with アプリーチ
Noteshelf 2
Noteshelf 2
¥840
posted with アプリーチ

デザインを収集する

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

様々なデザインを集めたデザイン系のギャラリーサイトで情報収集するのもオススメです。

AirDropで画像を転送する

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

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

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

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

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

iPad Proのスプリットビュー画面

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

スプリットビュー画面でGoodNotes4のノートを作成する
左側:デフォルトの写真アプリの画像一覧画面、 右側:GoodNotes 4のノート作成画面

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

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

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

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

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

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

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

GoodNotes 4の貼り付けられた画像はサイズを変更できる状態になっています。画像を1回タップすると出現する「切り取る」ボタンをクリックします。

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

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

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

「完了」ボタンを押すと、画像が切り取られます!サイズ変更も可能です。

Noteshelf 2で画像を切り取る場合

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

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

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

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

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

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

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

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

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

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

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

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

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

スプリットビュー画面でGoodNotes4のノートを作成する

画像をトリミングする

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

画像をトリミングする

画像四隅のハンドルを切り抜きたい部分までドラッグして位置を指定します。

画像をトリミングする

写真アプリの画面右下のチェックアイコンをクリックすると、切り抜かれた画像が表示されます!この切り抜かれた画像をコピーして、スプリットビュー右側のGoodNotes 4のノートにペーストします。ドラッグ&ドロップできるといいなぁ…

画像をGoodNotes4のノートにコピー・ペーストする

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

GoodNotes4に画像をペーストする

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

GoodNotes4で切り抜き画像をノートにペーストする

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

GoodNotes4で画像を編集する

GoodNotes 4では、画像の上で長押しすると編集メニューが表示され、サイズの変更や移動などが簡単に行えます。

トリミングした画像は元に戻せる

トリミングした画像は、写真アプリ右上にある「編集」をクリックすると右下に表示される「元に戻す」ボタンで、元の状態に戻すことができます。心配な方は一度複製してから作業してもよいですね。

Noteshelf2で画像をペーストする

Noteshelf 2の場合は、ページ上部のツールバーにある「ペースト」メニューをクリックするとペーストされます。こちらも画像上で長押しすれば、サイズの変更や移動ができます。

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

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

GoodNotes4でデザインスクラップブックを作成する
こんな感じでテーマごとに必要な部分だけを集めたノートを作ります。

GoodNotes4のノート一覧画面

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

GoodNotes4でカテゴリーごとにノートを作成する

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

GoodNotes4でノートを書き出す

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

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

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

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

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

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

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

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

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

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

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

iPad Proの購入経緯はこちらの記事「iPad Pro 10.5インチ×64GBを購入!フリーランス兼母の私がこれを選んだ理由と使い方」に書きましたが、iPad Proを汚れや衝撃から守ってくれるケース(カバー)もあると安心ですよね。私が使っているApple Pencilも収納できるケースを下記のページでご紹介しています。スタンド機能もついているので、資料やノートを見ながら仕事したりとかなり重宝してます!