眠れなくなるほど面白い心理学 - 日常で使える心の科学
河合義寛（YoshihiroK）
Re:じぶん再起動ノート
イラレの変形効果で作る円形デザイン16パターン｜線1本と数字3つ、初心者向け手順と動画
河合義寛（YoshihiroK）
このページには広告・アフィリエイトリンクを含みます。
イラレの変形効果を使うと、円を1本描いて数字を3つ入れるだけで、下のような円形デザインが作れます。
同心円、渦巻き、点が放射状に並ぶ模様まで、全部が線1本からできています。
この記事では、Illustratorを開いたばかりの人でも迷わないように、円の描き方から順番に、操作画面の写真と作成動画つきで説明します。
作り方の土台は4パターンです。
この4つを覚えれば、数字を変えるだけで何通りでも作れます。
上から順にパターン1〜4です。
操作はIllustrator 2026（Mac版）で行いました。
Windows版でもメニューの場所は同じです。
メニュー
スポンサーリンク
まず動画で流れを見る（約4分）
最初に全体の流れを動画で見ておくと、あとの手順が頭に入りやすくなります。
音声はありません。
画面の下に、いま何をしているかの字幕を入れています。
結論：変形効果で触る数字は3つだけ
イラレの変形効果は、選んだ線を「少し小さくして、少し回して、何本も増やす」機能です。
ダイアログにはたくさんの項目がありますが、この記事で触るのは下の3つだけです。
パターン4だけ基準点も使います。
3つの数字の意味
- 縮小率：90%なら、1本増えるたびに90%の大きさになります。
数字を小さくするほど、中心に向かって一気に縮みます。 - 角度：1本増えるたびに回す角度です。
0°なら同心円、角度を付けると渦巻きになります。 - コピー：何本増やすかです。
多いほど密度が上がりますが、動作は重くなります。
もう1つ大事なのは、「効果」なので元の線は1本のまま残るという点です。
あとから数字を変えれば、形がその場で変わります。
失敗しても作り直す必要がないので、初心者でも気軽に試せます。
全部、楕円形ツールで描いた円から作ります。
共通の準備：円を描いて、線だけにする
4パターンとも、最初の手順は同じです。
新しいドキュメントを作ったら、次の3つを行います。
STEP 1楕円形ツールで正確な円を描く
ツールバーの楕円形ツールを選びます（キーボードのLでも選べます）。
アートボードの上を1回クリックすると、大きさを入力する画面が出ます。
幅と高さに320ptと入れてOKを押します。
ドラッグで描くより、数字で入れたほうがきれいな正円になります。
STEP 2塗りを「なし」、線を白にする
ツールバー下の塗りと線のアイコンで、塗りを「なし」（赤い斜線のアイコン）にします。
線の色は白にします。
塗りが残っていると、あとで線を複製したときに円の中が塗りつぶされてしまいます。
STEP 3線幅を決める
画面上部のコントロールバーにある「線」の数字を変えます。
パターンごとの線幅は、それぞれの章に書いています。
背景には、見やすいように紺色の四角を敷いてロックしています。
白い線は、白い背景の上だと見えないためです。
パターン1：太さが変わる線の円
1つ目は、線の太さが途中で変わる円を複製するパターンです。
太い部分と細い部分が重なって、立体感のある渦になります。
左2つは実線、右2つは破線にしたものです。
STEP 1線の位置を「中央」にそろえる
コントロールバーの「線」という文字をクリックすると、線パネルが開きます。
「線の位置」の3つのボタンのうち、左の「中央」を押します。
ここでつまずきやすい
- プロファイルの欄が灰色で選べないときは、線の位置が「内側」か「外側」になっています。
今回の録画中にも、ここで一度止まりました。
「中央」にすると選べるようになります。
STEP 2プロファイルで「先細り」を選ぶ
線パネルの一番下にある「プロファイル」の一覧を開きます。
上から5つ目の、三角形のような形を選びます。
円の一部が太く、反対側に向かって細くなります。
三角形の形を選ぶと、線が先細りになります。
STEP 3効果＞パスの変形＞変形を開く
円を選んだまま、画面上部のメニューから「効果」を開きます。
「パスの変形」にマウスを合わせ、右に出る一覧から「変形…」を選びます。
「パスの変形」はクリックせず、マウスを乗せるだけです。
STEP 43つの数字を入れる
ダイアログの左下にある「プレビュー」にチェックを入れます。
拡大・縮小の水平方向と垂直方向に90%、コピーに15を入れます。
「線幅と効果を拡大・縮小」にチェックを入れると、内側の線ほど細くなって奥行きが出ます。
最後に角度に30°を入れてOKを押します。
数字を入れたらTabキーを押すと、プレビューがすぐ更新されます。
太い部分がずれて並び、渦になりました。
角度が0°のままだと、太い部分が同じ方向にそろった同心円になります。
角度を入れると太い部分が少しずつずれて、渦巻きになります。
この違いを見比べるのが、変形効果のいちばん楽しいところです。
パターン2：点線（破線）の円
2つ目は、線を点線にしてから複製するパターンです。
点が放射状に並ぶ、ドット模様の円になります。
線端と線分の長さを変えると、丸・四角・線の3種類の粒になります。
STEP 1円を描いて線幅8ptにする
共通の準備と同じ手順で、320ptの円を描きます。
線幅は8ptにします。
STEP 2線端を「丸型」にして破線にチェック
線パネルを開いて、線端の3つのボタンのうち真ん中の「丸型線端」を押します。
その下の「破線」にチェックを入れます。
線分に0、間隔に16を入れます。
線分が0でも、線端が丸いので点として見えます。
STEP 3変形効果で複製する
パターン1と同じく、効果＞パスの変形＞変形を開きます。
縮小90%、コピー15、角度15°を入れてOKを押します。
粒の形を変えるには
- 四角い粒：線端を「突出線端」（右のボタン）にします。
線幅10pt・線分0・間隔19・角度17°で作りました。 - 細長い線：線端を「線端なし」（左のボタン）にして、線分22・間隔12にします。
線幅は3ptと細めにします。 - 何も選択していない状態で変形効果を選んでも、何も起きません。
先に円を選んでおきます。
パターン3：すき間のある円
3つ目は、円の線を2か所だけ消してから複製するパターンです。
すき間が扇形に並んだり、渦巻きになったりします。
すき間の位置と角度で、扇形にも渦巻きにもなります。
STEP 1先細りの円を用意する
320ptの円を描き、線幅12pt、線の位置を中央、プロファイルを先細りにします。
ここまではパターン1とほぼ同じです。
STEP 2ダイレクト選択ツールで線を2か所消す
ツールバーの白い矢印（ダイレクト選択ツール）を選びます。
いったん何もないところをクリックして選択を外します。
円の右上の線をクリックして、Deleteキーで消します。
同じように左下の線も消します。
ここでつまずきやすい
- 円全体が選ばれたままDeleteキーを押すと、円ごと消えます。
今回の録画中にも一度やってしまい、⌘＋Z（Windowsは Ctrl＋Z）で戻しました。
必ず選択を外してから、線を1本だけクリックします。
STEP 32本の線をグループにする
⌘＋A（Windowsは Ctrl＋A）で全部を選び、⌘＋G（Ctrl＋G）でグループにします。
グループにしないと、2本の線がそれぞれ自分の中心で縮んでしまい、形がばらばらになります。
STEP 4変形効果で複製する
効果＞パスの変形＞変形で、縮小85%、コピー12、角度0°にします。
弧が中心に向かって縮みながら並び、扇形の模様になります。
ここで縮小を80%、角度を20°に変えると、扇形がほどけて渦巻きになります。
同じ線でも、角度を足すだけで渦巻きに変わります。
パターン4：4分の1の円弧
4つ目は、円を4分の1だけ残した円弧を複製するパターンです。
細い線が何十本も回りながら縮んでいく、いちばん繊細な模様になります。
右2つはコピーを60本に増やしています。
STEP 1円を描いて線幅4ptにする
320ptの円を描き、線を白、線幅を4ptにします。
STEP 2右と下のアンカーポイントを消す
ダイレクト選択ツールで、円の右端にある小さな四角（アンカーポイント）をクリックしてDeleteキーを押します。
続けて円の下端のアンカーポイントも消します。
左上の4分の1だけが残ります。
STEP 3変形効果で数字を入れる
効果＞パスの変形＞変形で、縮小95%、コピー30、角度100°を入れます。
ここで一度、線がからまった形になります。
失敗ではありません。
次の基準点の設定で直ります。
STEP 4基準点を「右下」にする
ダイアログの左下、コピーの左にある9つの小さな四角が基準点です。
右下の四角をクリックします。
円弧を囲む四角の右下の角は、もとの円の中心と同じ場所です。
そこを軸に回るので、円弧が円に沿ってきれいに並びます。
同心円のように並びました。
右下の角が、もとの円の中心と重なっています。
さらに縮小97%、コピー60、角度125°にすると、線の密度が上がって渦巻きになります。
コピーを増やすほど動作が重くなるので、60本くらいまでにしておくと安心です。
16パターンの数値一覧
冒頭の16パターンは、すべて下の数字で作りました。
円の大きさはどれも320ptです。
線の色は白、背景は紺色です。
| 作品 | 線の設定 | 縮小 | コピー | 角度 |
|---|---|---|---|---|
| 1-1 | 14pt・先細り | 90% | 15 | 0° |
| 1-2 | 14pt・先細り | 90% | 15 | 30° |
| 1-3 | 14pt・先細り・丸型／線分0・間隔20 | 90% | 15 | 0° |
| 1-4 | 1-3と同じ | 90% | 15 | 30° |
| 2-1 | 8pt・丸型／線分0・間隔15 | 90% | 15 | 0° |
| 2-2 | 2-1と同じ | 90% | 15 | 15° |
| 2-3 | 10pt・突出線端／線分0・間隔19 | 90% | 15 | 17° |
| 2-4 | 3pt・線端なし／線分22・間隔12 | 90% | 15 | 25° |
| 3-1 | 12pt・先細り・2か所切る | 85% | 12 | 0° |
| 3-2 | 5pt・先細り・2か所切る | 80% | 12 | 20° |
| 3-3 | 10pt・先細り・丸型／線分0・間隔16 | 90% | 15 | 20° |
| 3-4 | 3-3と同じ | 90% | 15 | 0° |
| 4-1 | 4pt・円弧・基準点右下 | 95% | 30 | 100° |
| 4-2 | 6pt・丸型／線分0・間隔12 | 95% | 30 | 100° |
| 4-3 | 2pt・円弧 | 97% | 60 | 125° |
| 4-4 | 6pt・線端なし／線分16・間隔9 | 97% | 60 | 125° |
表の「先細り」は、線パネルのプロファイルで三角形の形を選んだものです。
パターン4は4つとも基準点を右下にしています。
一覧のパターン3は、切れ目を小さめ（それぞれ35°ほど）にしました。
動画では右上と左下の4分の1ずつを消しているので、見た目が少し違います。
切る長さを変えるだけでも印象が変わります。
できあがった模様を使うときの注意
イラレの変形効果で増えた線は、見た目だけの状態です。
ほかのソフトに渡したり、1本ずつ色を変えたりしたいときは、線を実際のパスにします。
STEP Aアピアランスを分割する
模様を選んで、オブジェクト＞アピアランスを分割 を選びます。
増えた線が、1本ずつ選べる普通のパスになります。
分割すると数字は変えられなくなるので、元の円をコピーして残しておくと安心です。
STEP Bあとから数字を変えたいとき
ウィンドウ＞アピアランス でパネルを開きます。
「変形」の文字をクリックすると、同じダイアログがもう一度開きます。
この記事のアイキャッチも動画のタイトル画面も、Illustratorで作った模様をそのまま使っています。
Illustratorをまだ持っていない人は、料金プランを一度見ておくと判断しやすくなります。
スポンサーリンク（PR）
Illustratorが入った Adobe Creative Cloud の料金プランを見る（PR）
※上記はアフィリエイトリンクです。
Illustratorの機能の説明は、Adobe公式のIllustratorヘルプでも確認できます。
よくある質問
Q. 変形効果のメニューが灰色で選べません。
何も選択されていない可能性があります。
選択ツール（黒い矢印）で円をクリックしてから、もう一度メニューを開いてください。
Q. プロファイルが灰色で選べません。
線の位置が「内側」か「外側」になっています。
線パネルで「中央」にすると選べます。
Q. プレビューが変わりません。
数字を入れたあとにTabキーを押すと更新されます。
ダイアログ左下の「プレビュー」にチェックが入っているかも確認してください。
Q. オブジェクト＞変形＞個別に変形 とは何が違いますか。
個別に変形は、コピーを実際のパスとして作ります。
イラレの変形効果は「効果」なので、元の線1本のまま、あとから数字を変えられます。
形を探しながら作るなら、変形効果のほうが向いています。
Q. パソコンが重くなりました。
コピーの数を減らしてください。
破線と先細りを組み合わせたうえでコピーを60本以上にすると、動作が重くなりやすいです。
まとめ：イラレの変形効果は線1本と数字3つ
この記事のポイント
- 数字は縮小・角度・コピーの3つだけ。
- ベースの線は4つ。
先細りの円、点線の円、すき間のある円、4分の1の円弧。 - プロファイルが選べないときは、線の位置を中央にする。
- 2本以上の線はグループにしてから効果をかける。
- 円弧は基準点を右下にすると、円の中心で回る。
まずはパターン1の円を1つ描いて、角度だけを0°、15°、30°と変えてみてください。
数字1つで形が変わるのが分かると、ほかのパターンもすぐに作れるようになります。
ほかのIllustratorの作例は、同心円グリッドで作るWi-Fiマークの作り方と、マスキングテープの作り方でも紹介しています。
Illustratorを安く使う方法は、Adobeを安く買う方法のまとめに書きました。
この記事の写真と図解について（Adobe Stock）
写真4点はすべてAdobe Stockの無料素材
この記事の写真4点は、Adobe Stockの無料素材から選びました。
操作画面だけが続くと、どうしても読み疲れします。
間に写真を1枚はさむだけで、読みやすさが変わります。
ただ、無料の範囲だけでは、狙った構図の写真が見つからないこともあります。
スポンサーリンク（PR）
※上記はアフィリエイトリンクです。
操作画面と図解は自分で作っている
操作画面の写真と作成動画は、実際にIllustratorを動かして録画したものです。
図1〜図3も自分で作りました。
手順を図に起こしてみると、どこでつまずきやすいかが見えてきます。
50代から始めるなら、どこから手をつけるか
道具の選び方
- 写真だけ必要なら、Adobe Stock 単体で足ります。
- この記事のような模様を自分で作るなら、Illustratorが入った Creative Cloud を検討します。
- まず手を動かしてみるだけなら、Adobe Express から始めます。
スポンサーリンク（PR）
Adobe Creative Cloud の料金プランを見る（PR）
※上記はアフィリエイトリンクです。
最後に1つだけ。
ツールを買っただけでは何も変わりません。
自分はWEBデザインのオンラインスクールに通いましたが、そこからは1円も稼げませんでした。
先に作りたいものを決めて、それから道具を選んでください。
スポンサーリンク（PR）
※上記はアフィリエイトリンクです。
スポンサーリンク
Profile
こんにちは、河合義寛（YoshihiroK）です。53歳で早期退職し、54歳のいまはAdobeとブログで人生を再起動中。医療業界30年の営業経験を土台に、50代からの学び直し・デザイン副業・ブログ収益化のリアルを実体験で発信しています。「今からでも遅くない」そんな再スタートを応援するブログです。
