【Noteshelf 2】画像の貼り付け(読み込み/コピー)やトリミングの方法

 2018.12.03  2018.12.10

この記事では、Noteshelf 2での画像の読み込みや貼り付け、画像のトリミング(切り取り)方法を説明します。

Noteshelf 2では、iPhoneやiPadで撮った写真を簡単に貼り付け、編集ができるので、情報豊かで楽しいノートや資料が簡単に作れます。デイリースケジュールのPDFテンプレートを使えば、写真日記のような使い方もできます!

画像をNoteshelf 2のノートのページ上に追加する

まず初めに、ノートを開いている状態でノートに画像を貼り付ける方法を説明します。ノート上部の「+」メニューをタップし、「写真」を選択します。

画像をNoteshelf 2のノートに追加する

「Noteshelf2が写真へのアクセスを求めています」という表示が出たら、「OK」をタップします。

画像をNoteshelf 2のノートに追加する

すると、iPadの写真アプリに保存されている画像が表示されるので、貼り付けたい画像をタップして選択します。

画像をNoteshelf 2のノートに追加する

バウンディングボックスが表示された状態で画像がノートに貼り付けられました!画像の四隅をドラッグするとサイズが変更できます。画像下部にあるオレンジの回転マークを円を描くようにドラッグすると…。

Noteshelf 2で画像を回転する

画像を回転させることができます。

Noteshelf 2で画像を回転する

このように「+」メニューから「画像」を選ぶと、ノートのページ上に画像が貼り付けられますが、「+」メニューの「ドキュメントをインポート > Photoアルバム」を選択すると、ページの上ではなくて画像そのものがフル画面で追加されます。

画像をNoteshelf 2のノートにフル画面で追加する

画像に直接メモを描きたい場合はこちらの方が適していますが、後述する画像の編集(トリミング・切り取り)はできません。

画像をNoteshelf 2のノートにフル画面で追加する

「ドキュメントをインポート」でDropbox上にある写真は追加できませんでした。iPadの中にある写真のみ追加が可能なようです。これはちょっと不便ですよね〜…。Dropbox上の写真は一旦iPadにダウンロードしてから貼り付けるのはちょっと面倒です。(なぜできない!)

画像をNoteshelf 2のノートブック一覧ページに追加する

画像はノートブックの中だけでなく、ノート一覧ページでも追加可能です。ノート一覧ページの右上にある「+」メニューをタップし、「ドキュメントをインポート」を選択します。

Noteshelf 2で画像をノートブック一覧ページに追加する方法

画像がノートブックと同じように追加されました!この方法では1枚画像がフル画面で表示されます。ドキュメントとして画像を読み込む場合は、フル画面で読み込まれるようです。(但し、クラウドからは読み込めない)こちらの方法で読み込んだ画像も編集(トリミング・切り取り)はできません。

Noteshelf 2で画像をノートブック一覧ページに追加する方法

ブラウザで表示しているサイトから画像をコピーしてNoteshelf 2に貼り付ける

ネット上で見つけた画像をNoteshelf 2にコピーして貼り付ける方法です。iPadの画面を2分割する機能「スプリットビュー(Split View)」と「Slide Over(スライドオーバー)」を使うと、ドラッグ & ドロップで簡単にコピーができます。サンプルでは左側にブラウザ、右側にNoteshelf 2を表示させます。画像の著作権や使用方法については必ず確認をしましょう!

今回はフリー素材を配布しているサイト「吹き出し素材専門サイト「フキダシデザイン」」さんと「EVENTs Design」さんの画像をサンプルとして拝借しました。写真やイラスト、アイコンのフリー素材サイトは以下の記事でたくさんご紹介していますので、ぜひご覧ください!

画像をサイトからNoteshelf 2へドラッグ & ドロップする

iPadでの「スプリットビュー(Split View)」と「Slide Over(スライドオーバー)」のやり方については、こちらをご参照ください。

Noteshelf 2にPDFの手帳用のテンプレートを読み込み、クリスマスのデイリーページに画像を追加してみます。左側にサイトを表示させたブラウザ、右側にNoteshelf 2を立ち上げ、貼り付けたい画像をサイトからノートにドラッグ&ドロップします。ノート上の画像を長押しすれば、サイズ変更などの編集が可能となります。

サイト上の画像は、背景画像として使われている場合はドラッグ&ドロップできません。

ブラウザからNoteshelf 2に画像をコピーする

ブラウザからNoteshelf 2に画像をコピーする

かわいいサンタさんもドラッグ&ドロップ!

PDFの手帳・スケジュール用テンプレートの読み込みについては、以下の記事で詳しく説明しています。

写真アプリから画像をコピーしてNoteshelf 2に貼り付ける

iPadのデフォルトの写真アプリからも、Split ViewやSlide Overとドラッグ&ドロップで簡単にコピーできます。

ブラウザからNoteshelf 2に画像をコピーする

こんな感じで、画像の貼り付けと手書きのページを作ってみました!

Noteshelf 2で手帳用テンプレートに画像を貼り付けた例

Noteshelf 2での画像のトリミング(切り取り)方法

Noteshelf 2での画像のトリミング(切り取り)方法は「矩形」「消しゴム」「フリーハンド」の3種類です。

矩形による画像のトリミング(切り取り)方法

写真の上で長押しすると出現するメニューの「編集」をタップすると、編集画面に切り替わります。

Noteshelf 2で画像をトリミング・切り取る方法

画像四隅をドラッグして、サイズを変更します。

Noteshelf 2で画像をトリミング・切り取る方法

サイズを調整後、右下の「完了」をタップして終了します。

Noteshelf 2で矩形で画像をトリミング・切り取る方法

Noteshelf 2で画像をトリミング・切り取る方法

こんな感じでトリミングができました!

消しゴムによる画像のトリミング(切り取り)方法

画像編集画面で「消しゴム」を選択し、消したい部分を指やペンでなぞった後、右下の「完了」をタップします。

Noteshelf 2で消しゴムで画像をトリミング・切り取る方法

消しゴムで消した部分が透けています。アイディア次第で色々な使い方ができそうですね。

Noteshelf 2で消しゴムで画像をトリミング・切り取る方法

フリーハンドによる画像のトリミング(切り取り)方法

フリーハンドは指ではできないので、Apple Pencilなどのペンが必要です。画像編集画面のハサミマークをタップし、切り取りたい部分をペンで囲んだ後、右下の「完了」をタップします。

Noteshelf 2で画像をフリーハンドでトリミング・切り取る方法

「別のオプションに進む前に、画像に変更を適用しますか?」というダイアログが表示されるので、「Yes」をタップします。

Noteshelf 2で画像をフリーハンドでトリミング・切り取る方法

Noteshelf 2で画像をフリーハンドでトリミング・切り取る方法

自由な形で切り取られました!

ノートアプリでの画像活用方法

ノートアプリで画像を楽しく使う方法をご紹介します!

Noteshelf 2(手書きノートアプリ)でスクラップブックを作る

気になるデザインを画像で保存し、カテゴリー別に1冊のノートにまとめれば、自分だけのオリジナルデザインノートのできあがりです!私は職業柄デザインの画像が多いですが、どんな画像でもOK。仕事でアイディアに詰まった時にもとても役に立ちます。

デザインスクラップブックの作成方法は以下の記事で詳しく説明しています。記事中ではGoodNotes 4というアプリを使っていますが、Noteshelf 2など他のノートアプリでも応用できます。

Noteshelf 2(手書きノートアプリ)でスケジュール管理をする

iPadのノートアプリでも使える!ノートやスケジュール・カレンダーの無料PDFテンプレートまとめで紹介したスケジュール・手帳用テンプレートを使って、アナログ手帳のように手書きでスケジュール管理をする方法です。日々の写真やアイコンなど、画像が活かせる場面がたくさんあります。デジタルとアナログのいいとこ取りで、アイディア次第で便利に使えますよ〜。

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

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

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

Noteshelf 2の使い方や特徴、他のノートアプリとの比較

Noteshelf 2は手書きでノートやメモが残せて、大量のPDFファイルもスムーズに読み込んでくれるので、仕事でもプライベートでもかなり頻繁に使っています。Noteshelf 2の特徴や活用方法について色々と書いているので、是非ご覧くださいませ〜。