SNSの背景やポスターの装飾に、「少し凝った幾何学模様がほしい」と思う場面は少なくありません。素材サイトを探し回っても理想の一枚は見つかりにくく、デザインソフトでゼロから描くのは手間がかかる…そんな悩みに応えるのが本ツールです。
ASOBOADは、数式から生まれる美しいパターンをブラウザだけで作成できる無料ジェネレーター「DESIGN≒FORMULA」を公開しました。登録もインストールも不要で、スライダーを動かせばその場でパターンが形になります。
どんなツールか
DESIGN≒FORMULAは、リサージュ曲線やバラ曲線、スピログラフといった数式が描き出す幾何学模様を、ブラウザ上で自由にデザインできるツールです。数学の知識は必要ありません。スライダーで形を調整し、色を選び、シャッフルするだけで、唯一無二のパターンが生まれます。
パラメータを変えるとパターンがその場で更新されるため、結果を見ながら理想の形へと追い込んでいけます。完成したパターンはSVGや高解像度PNGとして書き出せるので、資料やSNS、印刷物の素材にそのまま使えます。「美しい模様をつくる」という作業を、触って楽しめるシンプルな体験に落とし込んだ点が本ツールの特徴です。スマートフォンやタブレットのブラウザにも最適化されています。
8種類の数式パターンに対応
DESIGN≒FORMULAは、性質の異なる8種類の曲線を収録しています。2方向の振動を合成した格子模様を生む「リサージュ曲線」、花弁状の対称美が現れる「バラ曲線」、歯車から生まれる繊細なレース模様の「スピログラフ」。さらに、ひまわりの種のような自然界の配列を再現する「葉序（フィロタキシス）」、自然界の多様な形を一本の式で表す「スーパーフォーミュラ」、減衰する振り子が描く「ハーモノグラフ」、そして計算から生まれる有機的な造形「クリフォードアトラクタ」「ドジョンアトラクタ」の2種類のストレンジアトラクタまで。
比較的おだやかな模様から、雲や羽のような複雑な濃淡まで、幅広い表情を切り替えて探求できます。数式の背景を知らなくても問題ありません。それぞれの曲線にはあらかじめ厳選されたプリセットが用意されているため、まずはプリセットから始めて、好みの形へ調整していけます。
思いのままに調整できる
DESIGN≒FORMULAは、つくる過程そのものを楽しめる仕組みを備えています。各パラメータはスライダーで即座に反映され、固定したい値はロックしておけるので、偶然の出会いと意図的なコントロールを両立できます。気に入った値だけを残して「シャッフル」すれば、思いもよらないパターンに出会えます。
配色も自在です。洗練された18種類のカラーパレットに加え、自分だけのグラデーションも作成できます。色の付け方も、順番・中心からの距離・速度・単色から選べるため、同じ形でもまったく違う印象に仕上がります。パラメータやパターンを切り替えると、形が途切れず溶けるように変化する「モーフィング」表示も搭載しており、デザインを探る過程そのものが心地よい体験になります。
使い方は3ステップ
使い方はシンプルで、次の3ステップで完成します。
1. パターンを選ぶ — 8種類から好きな数式を選び、プリセットやシャッフルで出発点を決めます。
2. 調整して色をつける — スライダーで形を整え、パレットや自作のグラデーションで配色します。固定したい値はロックできます。
3. 書き出す — SVGかPNGでダウンロードします。スマホなら画像を長押しして保存できます。
難しい設定はありません。開いて、触って、書き出すだけ。最初の一枚は、触りはじめてすぐに仕上がります。
SVGで書き出せば、再編集も自由
DESIGN≒FORMULAは、ベクター形式のSVGと高解像度のPNGで書き出せます。SVGで書き出せばIllustratorなどのデザインソフトでそのまま編集・拡大でき、線の色や太さを変えたり、ブランドカラーに差し替えたりといった微調整も可能です。
拡大しても画質が劣化しないため、大判のポスターや印刷物の素材にも安心して使えます。PNGはWebやSNSの素材にそのまま貼って使える手軽さが魅力です。用途に合わせて、ベクターとビットマップを使い分けられます。
数式パターンは”引き算”で映える？主役を立てる背景として使う。
数式から生まれるパターンは、それ自体がとても情報量の多いグラフィックです。だからこそ、デザインに取り入れるときに私が気をつけているのは、パターンを主役にしすぎないことです。リサージュやスピログラフの緻密な模様は、単体で見ると魅力的でも、文字や写真と重ねた瞬間に読みにくくなってしまうことがあります。
よくやるのは、パターンの不透明度を落として背景の地紋として敷いたり、画面の隅にあしらいとして配置したりすること。主役のメッセージを引き立てる「脇役」として使うと、途端に洗練されて見えます。配色も、パレットをそのまま使うより、作品全体のトーンに合わせて単色や近い色相でまとめると馴染みやすい。DESIGN≒FORMULAがSVGで書き出せるのはここで効いてきて、書き出したあとに色や太さを調整して、デザイン全体になじませられます。盛るほど良くなるわけではなく、引き算して余白を活かす。その意識ひとつで、同じパターンがぐっと品よく仕上がります。
活用シーン
- SNSの背景やアイキャッチを、手早く用意したいとき
- ポスターやフライヤーに、印象的な装飾を加えたいとき
- Webサイトの背景グラフィックがほしいとき
- ロゴやアイコンのモチーフを探しているとき
- 名刺やカードのあしらい、テキスタイルのパターン素材として使いたいとき
- 数学や図形の教材として、曲線を視覚的に見せたいとき
- ジェネレーティブアート作品づくりの出発点にしたいとき
よくある質問
Q. 利用は無料ですか？
A. はい。完全に無料でご利用いただけます。会員登録もインストールも不要で、ページを開いてすぐに使い始められます。
Q. どんな数式パターンを作れますか？
A. リサージュ曲線、バラ曲線、スピログラフ、葉序（フィロタキシス）、スーパーフォーミュラ、ハーモノグラフ、クリフォード・ドジョンの2種類のストレンジアトラクタの計8種類に対応しています。
Q. 作ったパターンは書き出せますか？
A. ベクター形式のSVGと、高解像度のPNGで書き出せます。SVGはIllustratorなどのデザインソフトでそのまま編集・拡大できます。
Q. スマートフォンでも使えますか？
A. はい。スマホ・タブレットのブラウザに最適化されており、書き出した画像は長押しで保存できます。
ご利用にあたって
生成したパターン（SVG／PNG）は、ご自身の制作物に自由にお使いいただけます。商用利用も可能です。ただし本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、ASOBOAD／AMIXは責任を負いかねます。ブラウザの種類・バージョンや端末環境によっては、表示・動作・書き出し結果が異なる場合があります。本ツールの仕様・内容は、予告なく変更または提供を終了する場合があります。
数式の美しさを、あなたのデザインに。DESIGN≒FORMULAをぜひお試しください。
▶︎ デザイン制作実績を見る / ▶︎ デザインのブログ記事一覧 / ▶︎ デザイン制作のガイド・媒体の特徴
この記事について
こんなページも読まれています
