【Illustrator】麻の葉と桔梗麻の葉パターンの作り方

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator（イラストレーター）で正確な麻の葉（あさのは）と桔梗麻の葉（ききょうあさのは）パターンをゼロから自作する方法をイラレ初心者の方に詳しく解説します。

麻の葉は健康や成長・魔除けなどの意味を持ち、桔梗麻の葉は永遠の愛や健康・成長・魔除けといった意味を持つ和柄です。どちらも六角形をモチーフにした幾何学的な文様で、手作業で作画するのは困難。
しかしイラストレーターを使えば正確なパターンが作成可能です！

これからIllustratorを始められる方、より詳しくイラレを学習されたい方にオススメのコンテンツですよ。

この記事の目次

何が作れるの？

Illustratorを使って上記の様に正確な麻の葉（あさのは）と桔梗麻の葉（ききょうあさのは）の和柄パターンをゼロから自作できます。
古くは平安時代からこれらの文様は使用されており、現代でも伝統工芸品や和服・暖簾のデザイン、そして和をテーマにしたWebサイトやバナー・チラシなどの印刷物など、様々な和風モノ制作で活用する機会が多い素材ですよ！

麻の葉（あさのは）パターンの作り方

Illustratorを使って麻の葉パターンをゼロから自作する方法を解説します。
イラレ初心者の方にも再現可能ですよ！

Illustratorを導入しましょう

当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。（7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

六角形を作成

[ 多角形ツール ] で画面をクリックし、下記サイズの六角形を作成しましょう。

半径：50px
辺の数：6
設定後は [ OK ] をクリック。

塗りは無し、線はお好みで設定して下さい。
サンプルの線幅：3pt
線色：#134185

作成した六角形を [ 回転ツール ] や [ バウンディングボックス ] で正確に90°回転しましょう。

STEP.2

回転コピーする

六角形オブジェクトを選択し、[ 回転ツール ] で [ Alt ] (Mac：Option) を押しながら最下部のアンカーポイント上でクリックします。（スマートガイドを表示しておくと正確にアンカーポイント上が検出可能です。）

回転のダイアログ画面が開きます。
角度：60°

プレービューを確認し、問題が無ければ [ コピー ] をクリック。
[ Ctrl + D ] (Mac：⌘ + D) で変形の繰り返しを4回行いましょう。

左図のように六角形が6個綺麗に並べられたオブジェクトが作成できました。

STEP.3

直線を追加

ペンツールで各アンカーポイント上でクリックし、左図の様な線を描きます。（サンプルは分かりやすくする為に線の色を変えています。）

六角形の上でクリックするとアンカーポイントが削除されてしまうので、新規レイヤーを作成してから追加しましょう。

微妙に六角形の角から線がはみ出しているので、角の形状を [ ラウンド結合 ] にします。

以上で麻の葉パターンのベースが作成できました。

FINISH

麻の葉パターンを設定して完成

STEP.3で作成した麻の葉を [ 選択ツール ] で選択し、スウォッチパネル内にドラッグ＆ドロップしてパターンを登録します。

パターンを適用したいオブジェクトを [ 長方形ツール ] で作成し、スウォッチに登録した麻の葉パターンをクリックします。（塗りにパターンを適用して下さい。）

スウィッチ内の麻の葉パターンをダブルクリックし、[ パターンオプション ] を表示します。
タイルの種類：六角形（横）
幅：173px
高さ：200px

設定後は画面上部の [ 完了 ] をクリック。
以上で麻の葉パターンの完成です。

OMAKE

パターンの色変更とサイズ変更

麻の葉のパターンサイズを変更したい時は [ 拡大・縮小ツール ] で可能。パターンの色変更は [ オブジェクトの再配色 ] を使えば簡単にできますよ。

桔梗麻の葉（ききょうあさのは）パターンの作り方

次はIllustratorを使った桔梗麻の葉パターン作成について解説します。
麻の葉と似たデザインですが、制作工程は異なりますよ。

Illustratorを導入しましょう

STEP.1

正三角形を作成

[ 多角形ツール ] で画面をクリックし、下記サイズの正三角形を作成しましょう。

半径：35px
辺の数：3
設定後は [ OK ] をクリック。

塗りと線はお好みで設定して下さい。
サンプルの線幅：2pt
線色：#ffffff
塗色：#134185

STEP.2

三角形を縮小コピーする

三角形オブジェクトを選択し、[ 拡大・縮小ツール ] で [ Alt ] (Mac：Option) を押しながら中心の上でクリックします。（スマートガイドを表示しておくと正確に中心点が検出可能です。）

拡大・縮小のダイアログ画面が開きます。
縦横比を固定：40%
※オプションは初期設定のまま

プレビューを確認し、問題が無ければ [ コピー ] をクリック。

左図のように大小の正三角形が作成できました。
パスのオフセットを使って作成する事も可能です。

新規レイヤーを作成し、[ ペンツール ] で直線を追加します。各三角形のアンカーポイント上を繋ぐ直線を描きましょう。

STEP.3

回転コピーする

STEP.2で作成したオブジェクトを全て[ 選択ツール ] で選択します。

[ 回転ツール ] で右下のアンカーポイント上にカーソルを合わせ、[ Alt ] (Mac：Option) を押しながらクリックすると回転のダイアログ画面が開きます。
角度：60°
[ コピー ] をクリックした直後に [ Ctrl + D ] (Mac：⌘ + D) を4回押して変形の繰り返しを行いましょう。

結合部分にバリがあるので、角の形状を [ ラウンド結合 ] に変更し、滑らかにします。

すると桔梗麻の葉パターンのベースが完成しました。

作成したパターンは全て選択し、回転ツールやバウンディングボックスで90°回転させましょう。

FINISH

麻の葉パターンを設定して完成

STEP.3で作成した桔梗麻の葉をスウォッチパネル内にドラッグ＆ドロップしてパターンを登録します。

パターンを適用したいオブジェクトを [ 長方形ツール ] で作成し、スウォッチに登録した桔梗麻の葉パターンをクリックします。（塗りにパターンを適用して下さい。）

スウィッチ内の桔梗麻の葉パターンをダブルクリックし、[ パターンオプション ] を表示します。
タイルの種類：六角形（横）
幅：105px
高さ：122px

設定後は画面上部の [ 完了 ] をクリック。
以上で桔梗麻の葉パターンの完成です。

OMAKE

パターンの色変更とサイズ変更

桔梗麻の葉のパターンサイズを変更したい時は [ 拡大・縮小ツール ] で可能。パターンの色変更は [ オブジェクトの再配色 ] を使えば簡単にできます。

高品質な和柄素材

商用利用可能で高品質な和柄素材を厳選しました。
より短時間でハイクオリティな制作を実現できるチート素材ばかりですよ！

#01 和柄のパターンセット（青）

高品質な和柄パターンが14点も収録されたパターン素材です。汎用的に使えるパターンが厳選されており、他のパターン素材よりも多めに収録されているのでお得です。

ダウンロード

#02 シームレス和柄パターン1

20点の汎用的な和柄パターンが収録されたパターン素材です。当記事で紹介している素材の中でも特に持っておきたい素材の1つですよ。

ダウンロード

#03 Set of Japanese classic sakura and ornaments seamless patterns

赤系の色味でインパクトのある和柄シームレスパターンです。花柄との組み合わせが非常に綺麗ですね。

ダウンロード

#04 高級和フレーム

高級感のある和のフレームが数多く収録されたベクターイラスト素材です。丸型、扇形、矩形、菱形など、よく使う形状の汎用フレーム一式がAI/EPS形式でダウンロード可能ですよ。

ダウンロードする

#05 シンプルな和柄モダンデザインの枠セット

シンプルで繊細な線で描かれた和柄のフレーム素材セットです。はんなりとしたデザインで、和菓子や京料理などのデザイン素材などによく合いそうですね。

ダウンロードする

汎用的な和柄パターンとフレーム素材

上記で紹介しきれなかった和柄パターンと和風の汎用フレーム素材です。
全て商用利用可能！併せてチェックされてみませんか？

【Illustrator】商用可！高品質な和柄のシームレスパターン35選【継ぎ目の無い背景パターン素材】

【Illustrator】高品質な和風フレーム素材36選【商用利用可】

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ！

AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能！
様々なフライヤーのテンプレート50選

デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

ロゴ作成とIllustratorの相性は抜群！
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選

単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり！
商用利用が可能で高品質なテキストエフェクト50選

継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK！作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Illustrator（イラストレーター）で麻の葉（あさのは）と桔梗麻の葉（ききょうあさのは）パターンをゼロから自作する方法でした。
どちらも六角形がモチーフの模様ですが、ベースとなる図形は異なります。

基本の六角形や三角形を回転ツールや拡大・縮小ツールでコピーして複雑で正確な幾何学模様を作成。
あとはパターンオプションで並べ方をカスタマイズすれば綺麗なパターンの完成です。

着物や衣類のデザインだけでなく、伝統工芸品のや暖簾（のれん）のデザイン、和をテーマにしたWebサイトやバナー、印刷物など、様々なクリエイティブに使える汎用素材ですよ。

ではまた！

InDesignは活用されていますか？

Illustratorだけでなく、InDesign（インデザイン）も活用されているでしょうか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート42選はコチラ！

Illustratorの操作方法

イラレ基本操作