幾何学模様を描くには？デザイン事例から実際の描き方までを解説

デザインにおいて、汎用性の高いパターンはいくつでも知っておきたいところです。
フリーの素材を取り入れる方法もありますが、自分で自在にパターンを作れるようになれば、オリジナリティのあるデザインへ仕上げることも可能でしょう。
パターンの中でも手軽に描きやすいのが、円や三角形などを組み合わせたシンプルな幾何学模様です。

今回は幾何学模様を使ったデザインの事例と、模様の描き方を紹介します。
シンプルなのでパターンとしても使いやすく、かつ印象的なデザインに仕上げることも可能な幾何学模様を習得してデザインに幅を持たせられるようになりましょう。

目次

1. 幾何学模様とは
2. 幾何学模様の使用例
3. 幾何学模様を描くには
4. まとめ

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

幾何学模様とは

幾何学とは、図形や空間の性質を研究する数学の分野のことで、幾何学模様は図形を利用した模様を指します。

円や三角形、直線や曲線など構成される図形によってパターンは無限大に存在します。

日本においては着物の柄として古くから利用されており、代表的なものとしては「亀甲文（きっこうもん）」「青海波文（せいがいはもん）」などが挙げられます。

着物の伝統柄｜THE KIMONO SHOP

他にも仏教における曼荼羅やイスラム美術におけるアラベスクなど、幾何学模様は宗教的な意味合いを持って利用される場合もあります。

パターンとして空間を埋める形式で使われるだけでなく、ロゴとしても使われています。
各家系の象徴として利用される家紋はその代表例でしょう。

北条五代｜小田原市

戦国時代の大名である北条家では「三つ鱗」という三角形で構成された幾何学模様を家紋として利用していました。
幾何学模様はこのようなシンプルなものから、複数の図形が入り組んだ複雑なものまであります。

参考：
[想像力をかきたてる『不思議な幾何学』!!ー位相幾何学（トポロジー）入門ー｜京都産業大学]
(https://www.kyoto-su.ac.jp/project/st/st01_01.html)

幾何学模様の使用例

ホームページのデザインや商品のパッケージにも、幾何学模様は利用されています。
4つの事例を通して、デザインとしてどのように活用されているかを見てみましょう。

1.リクルートホールディングス

http://www.recruit.jp/

リクルートグループホールディングスのコーポレートサイトでは、背景として淡い色合いの図形をいくつも重ねた幾何学模様を利用しています。

単色の背景よりも印象的で、かつメインのコンテンツとの調和も図られています。

2.キューピー株式会社

http://www.kewpie.co.jp/mayokitchen/

キューピー株式会社では、代表商品である「キューピーマヨネーズ」の商品パッケージに格子状の幾何学模様を採用しています。

1958年にポリボトル容器としてパッケージングされて以来、一貫してこの模様が利用されています。商品によって色を変えることで、統一したイメージを保ちつつデザインの違いを生み出しています。

このように、図案は変えないまま色合いを変えることで複数の図柄が生み出せるのも幾何学模様の特徴と言えるでしょう。

参考：
[キューピーマヨネーズヒストリー]
(http://www.kewpie.co.jp/mayo/history/)

3.女子美術大学

http://www.joshibi.ac.jp/

女子美術大学では、ホームページの背景として三角形や円をちりばめた幾何学模様を利用しています。単色の図形だけでなく、ドットを使って図形の見せ方を工夫しています。

幾何学模様は、色や塗り方を変えるだけでもデザインの幅が広がります。

4.武蔵野美術大学

武蔵野美術大学のホームページは人物写真の目元に円をつけるという印象的な図形の取り入れ方を行っています。
http://www.musabi.ac.jp/

このように幾何学模様を写真やイラスト、文字の中に織り込むことで、新たな見せ方も可能でしょう。

幾何学模様を描くには

定規やコンパスがあれば幾何学模様は誰でも気軽に描けます。
無料イラストソフトのFireAlpacaを利用して、実際にどのように幾何学模様を描くのが実践してみましょう。

使用するブラシを選ぶ

FireAlpacaには「左右対称」と「回転対称」という2種類の形式のブラシを利用できます。

このブラシは幾何学の基本的な要素の1つである「対称性」を使うことで、手軽に複雑な図形を描くことができます。

左右対称

左右対称とは、ある1点で折り返した時にぴったりと重なる図形のあり方です。
シンメトリーとも呼ばれます。

回転対称

回転対称とは、1つの図形を軸を中心として一定の角度回転しても図形の性質が変わらないものを指します。
例えば、正方形は中心を軸にして、90°回転しても形が変化することはありません。

1.描く線のパターンを選ぶ

画面上部にある描く線の形を決めます。
この線の形が軸となって、対称の線が自動的に描かれます。

2.基点を決める

図形の中心となる基点を決めます。

Windowsであれば、「Ctrl」+クリック
Macであれば「Command」+クリック

上記の動作に従って、キャンバスの中心に基点を置きました。

中心の赤い十字の中心が基点となります。

3.模様を描く

左右対称のブラシを利用して、描いてみました。
右側の円のみ自分の手で描いていて、それに対応する左の円はソフトで自動的に描写されます。

回転対称のブラシを利用するとこのような幾何学模様が描けます。
このブラシは、起点を軸にして描く線の数も決めることができます。

4.色を塗る

先ほどの図にさらにオリジナリティを加えるために、図形に色をつけていきましょう。

塗りつぶし機能を利用して色をつけます。
これでオリジナルの幾何学模様が作れました。

その他

作成した模様の背景を透過すれば、透過素材として利用することもできます。
複製したり、サイズを変えたりしてデザインに生かしていきましょう。

このように、模様のサイズを変えるだけでも印象的なデザインを組むことができます。

参考：
[対称ブラシを使ってみよう｜イラストTips集アルパカ学園]
(http://firealpaca.com/topics/%E5%AF%BE%E7%A7%B0%E3%83%96%E3%83%A9%E3%82%B7%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)

まとめ

図形を利用した模様である幾何学模様は、背景として利用するだけでなく、文字や写真と組み合わせて印象的なデザインにすることができます。
シンプルな模様なので、使い回しやすいのも特徴と言えるでしょう。

幾何学模様を描くには、図形をスタンプして構成する方法のほかに、位相を利用して作成する方法もあります。曼荼羅のようなスピリチュアルな図形も簡単に描けるので、ワンポイントとして活用してみるのもいいでしょう。

今回ご紹介したイラストソフトを使うほかにも、コンパスと定規を利用して描写する方法もあります。
写真や画像などの素材に重ね合わせて、図形化してしまうのも面白いでしょう。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

Webデザインを考える

欲しい素材がきっとある！Webデザインパーツのギャラリーサイト29選

パーツのデザインで参考になるギャラリーサイトをまとめてご紹介します。ボタン、フォーム、ヘッダーなど、Webデザインのパーツデザインが決まらない時にぜひ目をとおしてみてください。

すべてはファーストビューで決まる！日本発の美しいヒーローヘッダーのホームページ20選

ホームページのヘッダー部分にイメージ画像を表示する部分のことを「ヒーローヘッダー」と呼びます。 今回は、ファーストビューで印象を引きつける日本の美しいヒーローヘッダーを持つホームページをご紹介します。