イラレで歯車を作る方法4選！噛み合わせ計算から3D化までプロが解説

設定画面のアイコンや機械系インフォグラフィックス、UIデザインにおいて、登場頻度が極めて高い「歯車（ギア）」。一見すると複雑な幾何学形状に見えますが、Illustratorの機能を正しく把握していれば、初心者でもわずか1分足らずで狂いのない美しい歯車を作成できます。

一方で、現場のデザイナーからは「歯と歯の噛み合わせがズレてしまう」「後から歯数を変えたいのに再作成する羽目になった」という声も少なくありません。本稿では、スターツールやパスファインダーを使った基本の型抜きから、アピアランスを用いた非破壊編集、さらには歯数計算に基づいた正確な噛み合わせ設計と3D立体加工まで、現場で即戦力となるプロの手法を体系的に解説します。

📌 【この記事の重要ポイントまとめ】

• 最速作成の王道：スターツールや回転コピーとパスファインダーの合体・型抜きを組み合わせれば、1分で綺麗な歯車アイコンが完成する。
• 後からの修正に強い技：アピアランス機能や破線設定を活用すれば、数値を打ち直すだけで歯数やサイズをいつでも非破壊で変更可能。
• 噛み合わせと3D化の極意：歯車の噛み合わせは「360度÷歯数÷2」の回転位相ずらしが必須であり、最新の3D（押し出し・マテリアル）効果で重厚な立体ギアデザインへ昇華できる。

【手法別】イラレで歯車を作る4大アプローチと比較検証

Illustratorで歯車を制作するアプローチは、目的や求める精度によって大きく4つに分かれます。フラットなUIアイコンを素早く作りたい場合と、修正が頻発するWebパーツ、あるいは精密な機械機構を表現する場合では、選択すべき機能が異なります。

【最速1分】スターツールとパスファインダーで作る基本の歯車アイコン

「イラレで歯車の作り方が分からない…」と悩む初心者が最初に取り組むべき最も直感的な方法が、イラレ スターツール 歯車の作成テクニックです。星形の内径・外径の比率を調整し、円で型抜きを行うだけで、整った歯車アイコンが完成します。

制作手順は以下の通りです：

1. スターツールの設定：ツールバーからスターツールを選択し、アートボード上を1クリックします。ダイアログが開いたら、「第1半径：50mm」「第2半径：40mm」「点の数：8（歯の数）」と入力してOKを押します。
2. 中央のベース円を重ねる：楕円形ツールに切り替え、星形の中心から「直径70mm」の正円を作成します。
3. パスファインダーで合体：星形と円を選択し、パスファインダーパネルの「合体」をクリックします。これで尖った谷の部分が円で埋まり、歯車の外枠が形成されます。
4. 軸穴の型抜き：中心にさらに小さめの円（直径25mmなど）を配置し、すべてを選択した状態でイラレ 歯車 型抜き（パスファインダーの「前面オブジェクトで型抜き」または「中マド」）を実行します。

Adobe公式のアップデート情報によると、2024年3月リリースのバージョン28.3以降、スターツールにライブコントロール機能が強化され、オブジェクト作成後でもバウンディングボックスのウィジェットをドラッグするだけで、内径半径や角数をインタラクティブに変更できるようになりました。この新機能により、スターツールを用いたイラレ 歯車 アイコン 作り方の作業効率は格段に向上しています。

【精密設計】回転コピーと正確な角度計算で美しいギアデザインを作る手順

歯先が丸みを帯びた台形や、四角く角張った本格的な機械ギアを描きたい場合は、長方形ツールとIllustrator 歯車 回転コピーを組み合わせる手法が最適です。この方法では、イラレ 歯車 正確な角度の計算がクオリティを左右します。

歯数を決めたら、イラレ 歯車 歯数 計算の基本公式「360度 ÷ 作りたい歯数」を用いて1ステップあたりの回転角度を算出します。例えば、12枚の歯を持つギアを作成する場合、計算式は「360 ÷ 12 = 30度」となります。

正確なギアデザインの構築ステップは以下の流れです：

1. 基準となる円と歯を配置：歯車の胴体となる円（例：直径100mm）を中心点（X:0, Y:0など）に配置します。その真上（12時の位置）に、歯となる長方形（例：幅15mm、高さ20mm）を中心が揃うように配置します。
2. 回転ツールの基点を中心に固定：歯となる長方形を選択し、回転ツール（ショートカットキー「R」）を選びます。Altキー（MacはOptionキー）を押しながら円の中心をクリックします。
3. 角度入力と連続コピー：回転ダイアログが表示されたら、角度欄に「360/12」と数式を直接入力（イラレは自動計算します）し、「コピー」をクリックします。
4. 変形の繰り返し：ショートカットキー「Ctrl + D（MacはCmd + D）」を連続で押し、円の周囲を一周するまで歯を複製します。
5. パスファインダーで統合：すべてのオブジェクトを選択し、イラレ 歯車 パスファインダーの「合体」を適用後、中央に穴用の円を置いて型抜きします。

歯先を台形にすぼめたい場合は、最初の長方形に対して「自由変形ツール」や「ダイレクト選択ツール」で上辺のアンカーポイントを内側に少し寄せてから回転コピーを行うと、よりリアルな機械用Illustrator ギア デザインへと仕上がります。

【後から修正自在】アピアランスと破線でつくる非破壊編集の歯車テクニック

実務のデザイン現場において、クライアントやディレクターから「やっぱり歯の数を倍にして」「歯の長さをもう少し短くして」といった修正指示が入るケースは日常茶飯事です。パスファインダーで一度合体させてしまうと形状の再調整が困難になりますが、イラレ 歯車 アピアランスおよびイラレ 破線 歯車 作り方をマスターしておけば、数値を打ち直すだけで何度でも非破壊で修正できます。

アピアランスを使った「パスの変形」による歯車構築

1つの円オブジェクトに対し、アピアランスパネル上で効果を重ねていく手法です。

• 正円を1つ描き、アピアランスパネルで「効果」→「パスの変形」→「変形」を選択。
• 回転角度を「30度」、コピー数を「5」などに設定して放射状のベースを作ります。
• さらに「パス」→「パスのオフセット」や「パスファインダー」効果を重ねることで、1つのベクターパスを保ったまま複雑なギア形状を保持できます。
• デザインコミュニティの実践知見でも指摘されている通り、アピアランスパネル内の効果の並び順には注意が必要です。「変形」や「切り抜き」のスタック順が狂うと意図した輪郭にならないため、効果レイヤーをドラッグして上下関係を正しく整理することが安定描画の鍵となります。

破線（線パネル）を利用した超高速アピアランス歯車

最も手軽な非破壊アプローチが、太い線の「破線設定」を利用する方法です。

1. 塗りなし・線ありの正円を描きます。
2. 線パネルを開き、「線幅」を歯の高さ分（例：20pt）に設定します。
3. 「破線」にチェックを入れ、線分を「10pt」、間隔を「15pt」のように設定し、「コーナーやパス先端に破線を整列」アイコンを有効にします。
4. アピアランスパネルで新規線を追加し、細い線幅で歯車の内輪を描き足します。

この手法であれば、破線の数値を変更するだけで歯の密度や太さを一瞬でコントロールできます。

【実態検証】歯車同士がピタリと連動する「噛み合わせ」の計算法則

グラフィック上で複数の歯車を並べる際、多くの人が直面するトラブルがイラレ 歯車 噛み合わせの違和感です。適当な角度で並べると歯先同士が衝突し、物理的に回転不可能な「不自然なイラスト」になってしまいます。

機構学に基づいた正確な噛み合わせを実現するには、以下の2つのルールを厳守する必要があります。

1. ピッチ円と歯のピッチ（モジュール）を統一する

歯車同士が滑らかに噛み合う絶対条件は、「歯のサイズ（幅と高さの比率）」が一致していることです。大ギアと小ギアを作る場合、歯数を変えるなら円の直径も歯数に比例させます。

• 大ギア（歯数16）：基準直径 160px
• 小ギア（歯数8）：基準直径 80px
• ギア間の中心距離：(160 + 80) ÷ 2 = 120px

このように中心間距離をきっちり設定することで、幾何学的に正しい位置関係で配置できます。

2. 噛み合う相手の「回転位相」を半ピッチずらす

2つの歯車を横に並べた際、一方の「歯（凸部）」に対して、もう一方は「谷（凹部）」が噛み合わなければなりません。この位相差の計算式は以下の通りです：

ずらす角度 ＝ 360度 ÷ 歯数 ÷ 2

例えば、歯数が12のギアであれば「360 ÷ 12 ÷ 2 = 15度」だけ、配置後に回転ツールで回転させます。このわずかな15度のオフセット処理を加えるだけで、プロの図面のように完璧に噛み合ったギアアニメーションやグラフィックが完成します。

【表現力を高める】3D（押し出し・ベベル）で重厚な立体感を生み出す裏技

フラットな2D歯車が完成したら、Illustratorの強力な「3Dとマテリアル」機能を用いて、工業製品のようなリアルな質感を持つイラレ 歯車 3D 立体表現へとグレードアップさせましょう。

1. 2Dパスをグループ化：型抜きまで完了した単一の歯車オブジェクトを選択します。
2. 3D（押し出し）の適用：上部メニューの「効果」→「3Dとマテリアル」→「押し出しとベベル」を選択します。
3. 奥行きとベベルの調整：
   • 「奥行き」でギアの厚み（例：30px）を設定します。
   • 「ベベル」を「クラシック」または「ラウンド」に設定し、幅をわずかに持たせることで、金属の面取り（C面・R面）をリアルに再現します。
4. マテリアルとライティングの設定：
   • 「マテリアル」タブで「真鍮（ブラス）」や「アルミニウム」などの金属プリセットを選択、あるいは粗さ・メタリックの数値を引き上げます。
   • 「ライティング」タブで光源の位置を斜め上に設定し、環境光とシャドウを有効化することで、金属特有のエッジのハイライトを際立たせます。
5. レイトレーシングによるレンダリング：パネル右上の「レイトレーシングでレンダリング」をONにすると、精密な影と反射が計算され、CGソフト顔負けのハイクオリティな立体ギアが書き出されます。

一般に知られていない盲点とネットの誤解｜失敗しないためのプロの基準

Web上のチュートリアルや知恵袋等のコミュニティでは、「とりあえず回転コピーして合体すればOK」と短絡的に紹介されるケースが散見されます。しかし、プロダクション現場の観点から見ると、後工程でのトラブルを引き起こす重大な盲点が存在します。

誤解1：最初からパスを合体（アウトライン化）してしまう

パスファインダーの合体処理は不可逆なベクター統合です。一度合体させると、後から角丸（ライブコーナー）の個別調整や歯の比率変更ができなくなります。マスターデータは必ず「アピアランス」または「グループ状態」で別レイヤーに保管し、Web書き出し用の実データのみ合体させる運用が現場の鉄則です。

誤解2：Webアイコン用途なのにピクセルグリッドを無視している

16px〜32pxなどの微小なUIアイコンを作成する際、奇数の歯数や極端な斜め配置を行うと、ピクセル境界がアンチエイリアスでぼやけ、視認性が著しく低下します。UI用途の歯車は「歯数4・6・8」などの偶数設計を基本とし、水平・垂直ラインがピクセルグリッドに綺麗に乗るようスナップ設定を行う必要があります。

【イラレ 歯車 作り方】に関するよくある質問（FAQ）

Q1：歯車の「歯の角」を丸くして柔らかい印象にするにはどうすれば良いですか？
A1：オブジェクトを選択し、「ダイレクト選択ツール（A）」に切り替えると各頂点に「ライブコーナーウィジェット（二重丸のマーク）」が表示されます。それを内側にドラッグするか、「変形パネル」のコーナー半径に数値を入力（例：1.5mm）することで、すべての歯先を均一に丸めることができます。

Q2：異なる歯数を持つ3つの歯車を連続して噛み合わせるコツは？
A2：まずすべての歯車で「モジュール（直径÷歯数）」を一致させてください。次に、隣接するギアの中心同士を結ぶ直線上に接点を配置し、接点位置において「一方が山のとき、もう一方が谷」になるよう、それぞれの歯車を「360÷歯数÷2」の基準で回転オフセットさせます。

Q3：アピアランスや破線で作った歯車をSVGや他ソフトに書き出すと崩れてしまいます。
A3：アピアランス効果や破線はIllustrator独自の内部レンダリングであるため、書き出し前にオブジェクトを選択し、「オブジェクト」メニューから「アピアランスを分割」を実行してください。完全に単一の塗りパス（パスのアウトライン化）へ変換することで、どの環境でも崩れず正確に表示されます。

まとめ：目的とワークフローに応じた最適な歯車作成術を選ぼう

Illustratorにおける歯車デザインは、単に見た目をトレースする作業ではなく、幾何学的なルールとツールの特性を理解することで圧倒的に効率化できます。

スピード重視のUI制作にはスターツールや破線、後からのバリエーション展開にはアピアランス、そして正確無比な連動グラフィックには回転コピーと角度計算といった具合に、プロジェクトの目的に応じて最適なアプローチを使い分けてみてください。本稿のステップと数式を活用することで、狂いのない洗練されたギアデザインを自在に描き出せるようになるはずです。 （出典: イラレ 歯車 作り方（Yahoo!ニュース））