訪問していただきありがとうごさいます。
- 選択したオブジェクトに黄金比の三分割法を適用させたい
- 黄金比率を計算するのが大変
- ラインを作る手間を減らしたい
黄金比は、美しい構図を生み出すために広く活用されています。デザイナーの多くはこの比率を取り入れ、視覚的な魅力を追求していますね。
ただし、Illustratorで黄金比の三分割法を利用するには、オブジェクトの比率計算やラインの引き方に手間がかかります。
そこで、今回は【選択したオブジェクトに黄金比の三分割法を適用する】Illustratorスクリプトをご紹介します。このスクリプトを使えば、黄金比の三分割法をデザインに組み込む作業がスムーズに進み、時間を短縮できるでしょう。
この記事でご紹介するスクリプトは、記事内からダウンロード可能です。スクリプトの動作フローや処理条件が理解しやすくなるように、ソースコードも併せて掲載しています。
それではどうぞ
Profile
この記事を書いている私は、DTPデザイナーとしてIllustratorの操作経験が15年以上あり、スクリプトも自分の業務で必要になったものを自ら作成し、デザイン作業の効率化を図っています。
最近では、当ブログでも自作スクリプトを公開しています。
関連記事:【無料】Illustratorスクリプト集|単純作業を自動化して制作時間を1/10に!
近年、Illustratorスクリプトのような「自動化」にアンテナを張っているデザイナーの間では、生成AIをワークフローに組み込み、効率をさらに数倍へ高める動きが加速しています。
もし、あなたが「単なる作業の短縮」だけでなく、「AIを使いこなして一歩先のクリエイティブを仕掛けたい」と考えているなら、今最も注目されているスクールをチェックしてみてください。
【PR】超実践型オンラインAIスクール「byTech(バイテック)」
【黄金比の三分割法】スクリプトの概要

ここでは、【黄金比の三分割法】スクリプトの概要について解説していきます。
まず、本スクリプト(スクリプト名: golden_ratio_9.jsx)は、私がJavaScriptをベースに自作したIllustrator用のスクリプトです。
スクリプトの特徴
このスクリプトは、選択したオブジェクトの比率を計算して自動で三分割のラインを作成してくれるものです。
・選択したオブジェクのサイズを自動取得
・取得したサイズの黄金比率を自動で計算
・比率に応じたラインを作成してくれる
スクリプトの入手方法
本スクリプトは、下記からサンプルとしてダウンロードすることができます。
ダウンロードと使用については「注意事項と免責事項」に記載していますので、必ずお読みください
ダウンロード:golden_ratio_3.jsx
スクリプトの使い方
本スクリプトは、下記のSTEPで使うことができます。
STEP1.オブジェクトを選択
STEP2.ファイルメニューからスクリプトを選択
STEP3.【golden_ratio_9.jsx】を起動

なお、次の記事ではそもそもIllustratorスクリプトってどうやって使えばいいのか、活用事例を交えながら紹介しているので良ければ参考にしてください。
次のセクションでは、スクリプトのソースコードを公開します。
【黄金比の三分割法】スクリプトのコード

ここでは、スクリプトの動作フローと処理条件がわかるソースコードを紹介します。説明用のコメントアウトも含まれていますので、参考にしてください。
なお下記の記事では、Illustratorスクリプトを自作する方法についてサンプル事例を交え解説しているのでよければ参考にしてください。
ソースコード
var docObj = app.activeDocument; //選択中ドキュメント
var selObj = docObj.selection; //選択中オブジェクト
if(selObj.length === 0){
alert ("オブジェクトが選択されていません");
}else{
app.coordinateSystem = CoordinateSystem.ARTBOARDCOORDINATESYSTEM;//アートボードの座標を基準にするように設定
for( var i = 0; i < selObj.length; i++){
//オブジェクトの座標値 ここから
var left = selObj[i].geometricBounds[0]; //オブジェクトのX座標 左
var top = selObj[i].geometricBounds[1]; //オブジェクトのY座標 上
var right= selObj[i].geometricBounds[2]; //オブジェクトのX座標 右
var bottom = selObj[i].geometricBounds[3]; //オブジェクトのY座標 下
//オブジェクトの座標値 ここまで
//縦ライン ここから
var selWidth = selObj[i].width;
drawLine ([right - ratio(selWidth), top],[right - ratio(selWidth), bottom]);
drawLine ([left + ratio(selWidth), top],[left + ratio(selWidth), bottom]);
//縦ライン ここまで
//横ライン ここから
var selHeight = selObj[i].height;
drawLine ([left, bottom + ratio(selHeight)],[right, bottom + ratio(selHeight)]);
drawLine ([left, top - ratio(selHeight)],[right, top - ratio(selHeight)]);
//横ライン ここまで
};//for
};
//線描画 ここから
function drawLine(startPoint,endPoint){
line = docObj.activeLayer.pathItems.add(); //パスアイテム追加
line.setEntirePath ([startPoint,endPoint]); //線:setEntirePath(始点[X座標、Y座標],終点[X座標、Y座標]])
line.strokeColor = setCMYKColor(0,0,0,30);
return line;
};
//線描画 ここまで
//黄金比の計算 ここから
function ratio(split){
return split * 61.8 /100;
};
//黄金比の計算 ここまで
function setCMYKColor(c,m,y,k){
var CMYK = new CMYKColor();//CMYKの初期化
CMYK.cyan = c;
CMYK.magenta = m;
CMYK.yellow = y;
CMYK.black = k;
return CMYK
}
注意事項と免責事項

本記事で紹介したスクリプトは、商用利用可能です。ただし使用につきましては、下記の注意事項と免責事項を必ずお守りください。
注意事項
・予期せぬエラーやデータ損失を防ぐために、スクリプト実行前には必ずデータを保存してください。
・事前にスクリプトの動作確認を行い、環境に適しているか確認してください。
・Illustratorのアップデートによりスクリプトの動作が変わる可能性があります。アップデート後の不具合についてはサポートできませんので、あらかじめご了承ください。
免責事項
・ご利用はすべて自己責任でお願いいたします。
・スクリプトの使用によるトラブルや損失について、当方は一切の責任を負いません。
・商用利用における成果物の品質や結果に関しては、一切の責任を負いません。
・本スクリプトの著作権は制作者に帰属します。無断で転送・販売・配布することは禁止いたします
【黄金比の三分割法】スクリプトのまとめ

本記事では、「選択したオブジェクトに黄金比の三分割法」を適用してくれるIllustratorスクリプトを紹介しました。
以下は、このスクリプトの主なポイントです。
・選択したオブジェクのサイズを自動取得
・取得したサイズの黄金比率を自動で計算
・比率に応じたラインを作成してくれる
黄金比の三分割法をデザインに取り入れる際に、このスクリプトを使用すれば作業がスムーズに進み、時間を短縮できるでしょう。
なお、ここまで読んでIllustratorスクリプトについて詳しく知りたくなった方は、次の記事でおすすめの書籍とWEBサイトについて紹介しているので良ければ参考にしてください。
というわけで今回は以上です。
『黄金比の3分割法を自動で描く!Illustratorスクリプト』を最後までお読みいただきありがとうございました。
あなたの「働き方」も、アップデートしませんか?
スクリプトで作業がラクになると
「もっとクリエイティブに時間を使いたい」
「ルーチンに縛られない働き方をしたい」
そんな思いが自然と出てきます。
実がこれ、働き方を見直すサインです。
そう感じているなら、デザイナーに特化した転職サービス”HIGH-FIVE”が相性抜群です。
”HIGH-FIVE”が選ばれている理由は、次の3つです。
●量より質にこだわったデザイナー向け求人
●クリエイティブ領域に精通した担当者がサポート
●企業と密な関係性があるため、内部のリアルがわかる
まずは、”今の自分の価値”を知ることから始めてみなせんか?
【HIGH-FIVE】|デザイナー向け求人を見る「無料」
「いきなり登録はちょっと・・・」という方へ
まずは、情報を集めたい方のために、下記の記事でデザイナーのキャリアをサポートする厳選3社を紹介しています。




















PAGE TOP