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

 2018.03.08  2019.08.11

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

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

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

手書きノートアプリはGoodNotes 4以外でも応用できるので、自分にあったアプリをご使用ください。私はGoodNotes 4の他に、アップデートされたGoodNotes 5やNoteshelf 2も使っているので、Noteshelf 2での画像の切り取り方も説明します。

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

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

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

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

デザインを収集する

まずは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 5での画像の貼り付けやトリミングについては、以下の記事をご参照ください。

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

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

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

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

GoodNotes4のノート一覧画面

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

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

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

GoodNotes4でノートを書き出す

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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