飴(あめ)
飴(あめ)
Profile
iPad(とiPhone)でのんびり物書きしています。
二次創作の同人小説本を作っていました。今は、ブログが物書きとしての活動の場です。
全部PC不使用。iPadだけでできました。
プロフィールを読む

ランキング参加中

よければポチッとお願いします↓

ブログランキング・にほんブログ村へにほんブログ村

Pagesでデザイン

【Pages】図形ツールの使い方 基本編|絵を描かずに作るデザイン、イラスト

当ブログのリンクにはアフィリエイトリンクが含まれています。
ame
ame

図形ツールを使いこなして、表現の幅を広げたい!

イラストを配置したり紙面をデザインすると文章は伝わりやすくなるので、少しは取り入れたい。

の、ですが。

絵を描くのは好きなものの、得意かどうかは別問題。

そこで、絵が描けなくてもPagesの図形ツールでそれっぽいことができる方法を考えました。

今回は『図形ツールの使い方基本編』として、図形ツールでどんなことができるかを簡単に説明していきます。

後日、応用編として『独自の図形(マイシェイプ)の作り方』を書く予定。これが使えるようになると、もっと自由度が増します。

以前記事にした装飾付き扉の作り方でも図形ツールを使っています。

【同人小説本】装飾付き扉の作り方
【同人小説本】装飾付き扉の作り方

それと併せて、その他の既存図形の使用例&作り方を載せました。

ドリンクのアイコン
影絵

多様な使い方を見つけたので、使用例だけでもぜひ見ていってください。

スポンサーリンク

図形ツールの基本

Pagesのファイルで、右上の「+」→「□○」を選択し、図形ツールを呼び出します。

iPadOS 16/Pagesバージョン12.2を使用中の方

図形は中央ツールバーにあります。

図形の種類
  • テキストボックス
  • 直線・曲線
  • 図形(シェイプ)

図形はカテゴリごとにタブ分けされています。

図形のカテゴリ
  • 基本
  • 幾何学的
  • 動物
  • 自然
  • 食べ物
  • 記号
  • アート
  • 科学
  • 人々
  • 場所
  • 活動
  • 旅行
  • 仕事
  • オーナメント
  • マイシェイプ(作った図形を保存した場合に追加されるカテゴリ)

正直、このカテゴリ分けはわかり辛いです。検索窓を使用した方が早いことも。

例:「星」と検索した結果

図形の詳細設定

設定したい図形を選択し、右上の「刷毛アイコン」から詳細設定に入ります。

設定できることは大きく3つ。

詳細設定できること
  • スタイル・・・図形の見た目の設定
    ※直線・曲線は内容が異なる
  • テキスト・・・図形内に打ち込んだテキストの設定
    ※直線・曲線にはない
  • 配置・・・図形の位置やサイズなどの設定
    ※直線・曲線は内容が異なる

直線・曲線と他の図形とでは仕様が異なっていたり、そもそも設定がない場合もあります。

それぞれ見ていきましょう。

スタイル

図形を選択した状態で「刷毛アイコン」→「スタイル」
設定項目内容直線・曲線の場合
塗りつぶし図形の面に対する設定
プリセット、カラー、グラデーション ⇒ 色
イメージ ⇒ 画像
なし
枠線図形の枠に対する設定
線のスタイル・・・実線、点線、その他
カラー ⇒ 色
幅 ⇒ 枠線の太さ
追加設定あり
矢印(先端の形状)設定
接続(線の形状・・・直線、曲線、コーナー)の設定
シャドウ図形につける影のON/OFF設定
6種類
あり
反射図形の下側につく反射のON/OFF設定
反射濃度が調整可能
あり
不透明度図形全体の不透明度の調整あり
タイトルとキャプションタイトル、キャプション表示のON/OFF設定
各テキストは書式設定可能
タイトルは表示場所を上部・下部で選べる
なし

スタイルと言う名前の通り、見た目に関する設定です。

テキスト

図形を選択した状態で「刷毛アイコン」→「テキスト」
下にスクロールした部分

書式設定は通常のテキストとほとんど同じです。

  • 上下位置(図形内のテキスト表示位置)の調整
  • 余白(テキストと図形の枠との間にある余白)の調整

は図形のテキスト特有です。

配置

図形を選択した状態で「刷毛アイコン」→「配置」
設定項目内容直線・曲線
前面
背面
複数の図形が重なっているときに、どれを前に表示させるかという設定
図形の数だけ目盛が増える
あり
サイズ
位置
図形のサイズ、位置を数値で表示
数値指定が可能
位置はX座標(横軸)、Y座標(縦軸)で表示
サイズはなし
位置はXYそれぞれの始点、終点で表示
縦横比の固定縦横比固定のON/OFF設定
正円や正方形、既に形を整えた図形など、縦横比を変えずに拡大縮小したいときは固定をONにする
なし
回転45°ずつ、フリー、数値入力で図形の回転ができるなし
左右・上下反転図形を左右、または上下で反転させられるあり
ロック図形の詳細設定ロックのON/OFF設定あり
テキストと共に移動書類設定が「書類本文」のときに出現
テキストに追従するかどうかのON/OFF設定
なし
テキスト折り返し図形に対するテキストの動きを設定できる
自動、周辺、上下の3種類+なし
あり
余白図形の外側の余白あり

複数の図形を選択しているときにしか出ない設定もあります。

設定項目内容直線・曲線
グループ選択した複数の図形をグループ化する
一括で移動したり拡大縮小できる
あり
整列して均等に配置選択した複数の図形を中央揃いなど均等に配置できる
縦軸、横軸それぞれで配置設定可能
あり
図形を統合選択した複数の図形を結合したり、型抜きしたりできる
打ち込んだテキストは無効になる
なし

「図形を統合」に関しては、マイシェイプの記事で説明しています。

「グループ」と「整列して均等に配置」を見ていきます。

「グループ化」と「解除」の仕方

1.1つ図形を選択し、「オブジェクトを選択…」を選択 → グループ化したい図形を選択

キーボードの場合、[shift]押しっぱなしで図形選択できます。

2.配置設定から「グループ」を選択

3.グループ化したら、オブジェクト選択を終了する

4.解除するときは、配置設定から「グループ解除」を選択

「整列して均等に配置」

オブジェクト選択したのち、配置設定から任意の「整列して均等に配置」を選択

バラバラな位置に配置された図形を、縦・横に整列できます。

参考:「書類本文」と「ページレイアウト書類」設定について

覚えておくとお役立ちな「書類本文」設定についても書いておきます。

「書類本文」を「ページレイアウト書類」に変換することで、本文テキスト使用不可(テキストボックスや図形等のオブジェクトを使用したテキストのみ有効)の状態になります。

この設定は、「…アイコン」→「書類設定」→「書類」→「書類本文」から変換できます。

画像は、「書類設定」を選択したあとの表示
iPadOS 16/Pagesバージョン12.2を使用中の方

書類設定はファイ名の階層にあります。

OFFにするとポップアップが出るので、「変換」を選択するとページレイアウトに変換される

「ページレイアウト書類」に変換されたあとは

  • 背景は、何も選択していない状態で「刷毛アイコン」から設定可能
  • ページの追加は左下の「+」から可能
  • ページは全て異なるセクションになる
  • 「テキストと共に移動」の設定がなくなる

⇒ いちいち設定する手間がはぶける

  • 「書類本文」と「ページレイアウト書類」は混在させられない

⇒ たとえば同人誌を作る際、本文を「書類本文」、表紙を「ページレイアウト書類」で作りたい場合、ファイルを分ける必要がある

この設定は、書類全体に影響します。「書類本文」と「ページレイアウト書類」を混在させることはできません。

図形ツールしか使わないときにご活用ください。

既存図形の使用例&作り方

ここからは、使用例と作り方を書いていきます。

小説の中扉

使用した図形
  • 「基本」カテゴリ
    • 四角
    • テキストボックス
    • 直線
  • 「オーナメント」カテゴリ
    • 2種類

作り方はコチラ↓

【同人小説本】装飾付き扉の作り方
【同人小説本】装飾付き扉の作り方

ドリンクのアイコン

炭酸飲料にストローとオレンジが付いている
使用した図形
  • 検索「飲み物」
    • グラス
    • ストロー
  • 「食べ物」カテゴリ
    • オレンジ
  • 「基本」カテゴリ

作り方

1.図形ツールから「飲み物」で検索し、グラスとストローを選択

2.グラスをコピペし、1つはグラス(入れ物)、1つは中に入っている飲料になるよう、色、サイズ、位置を調整する

グラス:塗りつぶしなし、枠線あり
飲料:塗りつぶしあり、枠線あり

3.ストローの色、サイズ、角度、位置を調整し、最背面に設定

ストローは最終的に色を薄いグレーにしました

4.ストローが透けて見えるよう、グラスと飲料の不透明度を調整

5.図形ツールから、「基本」カテゴリの円を選択

6.色、サイズを調整して、炭酸飲料の泡を作る

7.泡を複数コピペし、サイズと位置を調整して配置

8.ここまでの図形全てを選択、グループ化し、全体のサイズを調整

ちょっと大きくしました

9.図形ツールの「食べ物」カテゴリから、オレンジを選択

10.オレンジの色、サイズ、角度、位置を調整

完成です!!

影絵

ビル群と夕焼け、川の上に架かる橋を渡る車
使用した図形
  • 「場所」カテゴリ
    • ビル群
  • 「旅行」カテゴリ
    • 車(作り方の中では「車」と検索しています)
  • 「基本」カテゴリ
    • 四角
あわせてどうぞ

影絵の作成画面を録画した動画(倍速に編集したもの)をYouTubeに公開しました。

手順や使っている色が少し異なりますが、こちらもぜひご覧ください!

作り方

1.図形ツールの「場所」カテゴリから、ビル群を選択

2.サイズ調整後コピペして計3つのビル群を並べて配置し、グループ化する

少し重ねたり、左右反転したりしています。はみ出してOK。

3.図形ツールの「旅行」カテゴリから、橋を選択

4.サイズ調整、反射の設定後コピペして計2つを並べて配置し、グループ化する

画像では反射の設定をする前にコピペしてしまっていますが、1つ目の橋を調整している時点で反射ONにしてください。

そうしないと、あとで手間です……。

グループ化解除しないと反射の設定ができず、二度手間でした……

5.グループ化した橋をコピペし、少しずらして配置

6.図形ツールの「基本」カテゴリから、四角を選択

7.分かりやすい色に変えてビル群のうしろへ配置(最背面に設定)

8.塗りつぶしを「グラデーション」にし、夕焼け空になるよう色を選択

9.夕焼け空をコピペし、橋のうしろに配置
水面に反射した夕焼けの色をイメージして、「グラデーション」の色を変更

10.図形ツールの「基本」カテゴリから、四角を選択

11.塗りつぶしを「イメージ」にし、「カラーオーバーレイ」をON → 塗りつぶしの色を黒にし、オーバーレイの不透明度を調整

参考

図形の塗りつぶしの「イメージ」「カラーオーバーレイ」についてはコチラ↓

【Pages】背景を入れる方法|画像挿入、背景色の設定
【Pages】背景を入れる方法|画像挿入、背景色の設定

記事の中の『背景の入れ方:イメージ』をご参考ください。

12.配置位置の前後を1つ下げる(橋の間に挟まるように配置)

13.橋全体をカバーできるようサイズ、位置を調整

これをすることで、車がちゃんと見えるようになります

14.図形ツールの「旅行」カテゴリ(または検索)から、好きな車を選択(画像では「車」と検索しています)

スクロールすると、バスやトラックも出てきます

15.橋の上を走っているイメージで、サイズ、位置を調整

16.他の車を追加して、コピペしたり左右反転したりして位置を調整し、対向車線にも車を配置する

トラックを入れたり、普通車の車体を変えるとそれっぽく見える

17.図形ツールの「基本」カテゴリから、四角を選択

18.図形の塗りつぶしを「イメージ」にし、「カラーオーバーレイ」をON →「カラーオーバーレイ」の色、不透明度を調整したら、図形を書類サイズいっぱいの大きさにする

これがフィルターの役割を果たします

19.いい感じのフィルターになるよう、図形の「不透明度」を下げる

「カラーオーバーレイ」の色によって雰囲気が変わります。

暗い水色にしたら、全体的に青みがかった絵になりました

20.「カラーオーバーレイ」の塗りつぶしを黒、不透明度を35%にする

21.図形の不透明度を39%にする

完成です!!

追記:麻の葉模様、平行四辺形で創るリピートパターン

麻の葉模様
平行四辺形のリピートパターン

どちらも、基本的な図形操作で作れます。

作っている様子は動画にしてYouTubeで公開しました。

麻の葉模様の方は、詳細な作り方を記事にしています。

【 YouTube】麻の葉模様を創る倍速動画|Pages【手順を簡単に解説】
【 YouTube】麻の葉模様を創る倍速動画|Pages【手順を簡単に解説】

平行四辺形の方は作り方を細かく記事にはしていません。代わりに、動画に簡単なテロップをつけました。

ご興味ありましたら、ポチッとご覧ください〜!

さいごに

イラストが描けなくても、Pagesの図形ツールを使うことでデザインやイラストが作れました!

これが既存の図形だけで作れるのだから驚きです。

少しでも物書きさんのお役に立てば嬉しいです〜。

では!

飴(あめ)
飴(あめ)
Profile
iPad(とiPhone)でのんびり物書きしています。
二次創作の同人小説本を作っていました。今は、ブログが物書きとしての活動の場です。
全部PC不使用。iPadだけでできました。
プロフィールを読む

お問い合わせ

質問等あれば、こちらからお送りください。

記事更新の参考にさせていただきます。

もちろん、「記事が役に立った」などの感想メッセージも大歓迎です!

メッセージをいただいた方へは、お返事をさせていただきます。

    ランキング参加中

    よければポチッとお願いします↓

    ブログランキング・にほんブログ村へにほんブログ村

    記事URLをコピーしました