パラメトリックVIという考え方で作ったロゴの話

2023年7月7日 20:46

デザインスタジオである STARRYWORKS inc. は17周年を機にVIおよび各種ツール、Webサイトをリニューアルしました。このリニューアルにおいて新しいVIの作り方を考えたので紹介したいと思います。

パラメトリックVIとは？

建築ではパラメトリックデザインという手法があります。アルゴリズムやルールを決めて、パラメータ（変数）の調整により形状を作成する手法です。
また、数学やアルゴリズムによりビジュアルを作成するジェネラティブアートの世界ではプログラムのパラメータによりアウトプットのビジュアルはさまざまに変化します。
今回弊社の17周年に合わせVI刷新を行うにあたり、こういったパラメータ調整による設計思想をグラフィックデザインに適用してみようと、社内プロジェクトを立ち上げました。（ちなみに「パラメトリックVI」は勝手につけた名前です）

そもそもなぜ星型なのか？

太陽のようにメラメラした強いものももちろん魅力的ですが、星明かりのように暗闇で輝く美しさをもったものを作りたいという願いと、設立日の7月7日にちなんでSTARRYWORKSという社名にした経緯もあり、ロゴは星型をモチーフにしています。

46種類のパラメータ

この形状は以下の46種類のパラメータ（変数）により決定されます。位置や回転角度といったシンプルなパラメータもあれば1つのパラメータの変化によりベジェ曲線の複数の要素が連動して変化するものもあります。

以下の6つのパラメータ × 7つ分（42種類）
- 凸部分の角度
- 凸部分の長さ
- 凸部分の太さ
- 凹部分の深さ
- 凹部分のなめらかさ１
- 凹部分のなめらかさ２
星全体の回転角度
文字に対する横方向の位置
文字に対する縦方向の位置
文字に対する星の大きさ

この46種類のパラメータによって形状が決定するアルゴリズムを作成し、それを自由に調整できるソフトウェアを開発を行いました。

画面下部にパラメータが並んでおり、これらの数字を調整することで星形の形状が変化します。また、星形にマウスを乗せると表示されるUIでより直感的に形状を調整することもできます。
保存ボタンを押すとシリアル番号が発行され、パラメータがサーバに保存されると同時に、Illustratorで開けるSVG形式のデータをダウンロードできます。

需要はないと思いますが、ツールはこちらで公開しています。
https://www.starryworks.co.jp/parametric-vi

星は球体なのになぜ⭐︎なのか？

少し話がそれますが、星は球体である恒星の光であるはずなのに、なぜ⭐︎←この形なのかということを調べていると面白い動画を見つけました。

カメラで撮影した光源が星型に見える光芒と同じように、眼球の中にある縫合線という筋により円形の光源がぎざぎざに見えるということが原因だということです。
さらにその形は人によって違うため、光源が星型に見える形も全員異なるそうです。

なぜパラメトリックVIなのか？

"光芒と同様、全員見えている形が違う星という形状にちなんで、社員一人一人がそれぞれ自分が良いと思う形を作る"

建築のパラメトリックデザインは最終的にパラメータを確定して図面を作成するための手法ですが、私が考えた仕組みはパラメータにより変化するVIです。
会社としてのアイデンティティと社員個人の個性を両立することを目的に、これを仕組み化したものが、パラメトリックVIです。

ただしアルゴリズムやルールがあるからといって、適当にパラメータを操作するだけでは良いわけではなく、バランスの取れた形状を作成するためには細かな調整が必要です。
（実は、2年前に機械学習により無限に「良い感じのバランス」のロゴを生み出す仕組みを試してみたのですが、それではどうしても「あと一歩足りない」ものしか生成できず、細かなバランスの調整はやはり人間の手が必要だという気づきがあり、この仕組みに落ち着きました。）

今回このソフトウェアを使って、ディレクターやエンジニアなど非デザイナー職を含むスタッフ全員に自分でロゴを作ってもらいました。