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

 2018.12.03  2019.08.11

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

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

Noteshlef 2
Noteshelf 2
開発元:Fluid Touch Pte. Ltd.
¥1,200

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

まず初めに、ノートを開いている状態でノートに画像を貼り付ける方法を説明します。ノート上部のツールバーにある「+」メニューをタップし、「写真」を選択します。「Noteshelf2が写真へのアクセスを求めています」という表示が出たら、「OK」をタップします。ちなみに、カメラアイコンをタップするとカメラが起動し、「撮影→追加」が可能です。

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

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

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

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

Noteshelf 2で画像を編集する(回転)

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

Noteshelf 2で画像を編集する(回転)

このように「+」メニューから「画像」を選ぶと、ノートのページ上に画像が貼り付けられますが、「+」メニューの「ドキュメントをインポート > Photoアルバム」を選択すると、ページの上ではなくて画像そのものが1ページとして、フル画面で追加されます。「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の使い方や特徴、他のノートアプリとの比較

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

Noteshelf 2以外のオススメのiPad手書きノートアプリはこちらです!

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

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

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

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

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

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

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

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