Webデザイナー、UI/UXデザイナーの@sdesignlaboです。
Illustrator(イラストレーター)で正確な麻の葉(あさのは)と桔梗麻の葉(ききょうあさのは)パターンをゼロから自作する方法をイラレ初心者の方に詳しく解説します。
麻の葉は健康や成長・魔除けなどの意味を持ち、桔梗麻の葉は永遠の愛や健康・成長・魔除けといった意味を持つ和柄です。どちらも六角形をモチーフにした幾何学的な文様で、手作業で作画するのは困難。
しかしイラストレーターを使えば正確なパターンが作成可能です!
これからIllustratorを始められる方、より詳しくイラレを学習されたい方にオススメのコンテンツですよ。
何が作れるの?

Illustratorを使って上記の様に正確な麻の葉(あさのは)と桔梗麻の葉(ききょうあさのは)の和柄パターンをゼロから自作できます。
古くは平安時代からこれらの文様は使用されており、現代でも伝統工芸品や和服・暖簾のデザイン、そして和をテーマにしたWebサイトやバナー・チラシなどの印刷物など、様々な和風モノ制作で活用する機会が多い素材ですよ!
麻の葉(あさのは)パターンの作り方
Illustratorを使って麻の葉パターンをゼロから自作する方法を解説します。
イラレ初心者の方にも再現可能ですよ!
Illustratorを導入しましょう
当記事の内容を実践するにはIllustratorが必須です。
未導入の方は
Adobe公式サイトからダウンロードしておきましょう。(7日間の無料体験が可能)
なお、AdobeCCのプランは
コチラの記事で徹底解説しています。
STEP.1
六角形を作成
[
多角形ツール ] で画面をクリックし、下記サイズの六角形を作成しましょう。
半径:50px
辺の数:6
設定後は [
OK ] をクリック。
塗りは無し、線はお好みで設定して下さい。
サンプルの線幅:3pt
線色:#134185
STEP.2
回転コピーする
六角形オブジェクトを選択し、[
回転ツール ] で [
Alt ] (Mac:
Option) を押しながら最下部のアンカーポイント上でクリックします。(
スマートガイドを表示しておくと正確にアンカーポイント上が検出可能です。)
回転のダイアログ画面が開きます。
角度:60°
プレービューを確認し、問題が無ければ [
コピー ] をクリック。
[
Ctrl +
D ] (Mac:
⌘ +
D) で変形の繰り返しを4回行いましょう。
左図のように六角形が6個綺麗に並べられたオブジェクトが作成できました。
STEP.3
直線を追加
ペンツールで各アンカーポイント上でクリックし、左図の様な線を描きます。(サンプルは分かりやすくする為に線の色を変えています。)
六角形の上でクリックするとアンカーポイントが削除されてしまうので、新規レイヤーを作成してから追加しましょう。
微妙に六角形の角から線がはみ出しているので、角の形状を [
ラウンド結合 ] にします。
FINISH
麻の葉パターンを設定して完成
STEP.3で作成した麻の葉を [
選択ツール ] で選択し、スウォッチパネル内にドラッグ&ドロップしてパターンを登録します。
パターンを適用したいオブジェクトを [
長方形ツール ] で作成し、スウォッチに登録した麻の葉パターンをクリックします。(塗りにパターンを適用して下さい。)
スウィッチ内の麻の葉パターンをダブルクリックし、[
パターンオプション ] を表示します。
タイルの種類:六角形(横)
幅:173px
高さ:200px
設定後は画面上部の [
完了 ] をクリック。
以上で麻の葉パターンの完成です。
桔梗麻の葉(ききょうあさのは)パターンの作り方
次はIllustratorを使った桔梗麻の葉パターン作成について解説します。
麻の葉と似たデザインですが、制作工程は異なりますよ。
Illustratorを導入しましょう
当記事の内容を実践するにはIllustratorが必須です。
未導入の方は
Adobe公式サイトからダウンロードしておきましょう。(7日間の無料体験が可能)
なお、AdobeCCのプランは
コチラの記事で徹底解説しています。
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
設定後は画面上部の [
完了 ] をクリック。
以上で桔梗麻の葉パターンの完成です。
高品質な和柄素材
商用利用可能で高品質な和柄素材を厳選しました。
より短時間でハイクオリティな制作を実現できるチート素材ばかりですよ!
#01 和柄のパターンセット(青)
高品質な和柄パターンが14点も収録されたパターン素材です。汎用的に使えるパターンが厳選されており、他のパターン素材よりも多めに収録されているのでお得です。
ダウンロード
#02 シームレス和柄パターン1
20点の汎用的な和柄パターンが収録されたパターン素材です。当記事で紹介している素材の中でも特に持っておきたい素材の1つですよ。
ダウンロード
#03 家紋×100
100点もの家紋が収録されたベクター素材です。IllustratorやPhotoshop等をはじめとしたAdobe製品全般で活用できるベーシックな和柄素材なので押さえておきたいですね。
ダウンロード
#04 Set of Japanese classic sakura and ornaments seamless patterns
赤系の色味でインパクトのある和柄シームレスパターンです。花柄との組み合わせが非常に綺麗ですね。
ダウンロード
#05 高級和フレーム
高級感のある和のフレームが数多く収録されたベクターイラスト素材です。丸型、扇形、矩形、菱形など、よく使う形状の汎用フレーム一式がAI/EPS形式でダウンロード可能ですよ。
ダウンロードする
#06 シンプルな和柄モダンデザインの枠セット
シンプルで繊細な線で描かれた和柄のフレーム素材セットです。はんなりとしたデザインで、和菓子や京料理などのデザイン素材などによく合いそうですね。
ダウンロードする
汎用的な和柄パターンとフレーム素材
上記で紹介しきれなかった和柄パターンと和風の汎用フレーム素材です。
全て商用利用可能!併せてチェックされてみませんか?
ワンランク上のテンプレート素材
Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。
下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。
制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ!
良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!
おわりに
以上、Illustrator(イラストレーター)で麻の葉(あさのは)と桔梗麻の葉(ききょうあさのは)パターンをゼロから自作する方法でした。
どちらも六角形がモチーフの模様ですが、ベースとなる図形は異なります。
基本の六角形や三角形を回転ツールや拡大・縮小ツールでコピーして複雑で正確な幾何学模様を作成。
あとはパターンオプションで並べ方をカスタマイズすれば綺麗なパターンの完成です。
着物や衣類のデザインだけでなく、伝統工芸品のや暖簾(のれん)のデザイン、和をテーマにしたWebサイトやバナー、印刷物など、様々なクリエイティブに使える汎用素材ですよ。
また、noteで麻の葉と桔梗麻の葉のパターン素材を公開しています。是非ご活用ください!
ではまた!
色々な和柄パターンの作り方まとめ
下記リンクで様々な和柄パターンをゼロから作る方法を完全解説しています。
InDesignは活用されていますか?
Illustratorだけでなく、InDesign(インデザイン)も活用されているでしょうか?
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方は
Adobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート42選は
コチラ!
目次一覧
ゼロから始めるシリーズ
現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!