- 公開日:
自動生成するロゴマークを刷新 "alogorithm2"
- Authors
- Name
- 代表取締役 宮永邦彦
- @miyanaga
画像軽量化とWebフロントエンドのスピード改善の専門家です。Web系のIT技術大好き。
このサイトではスピード改善のリアルや、日々の技術的な気づきを共有します。
アイデアマンズ株式会社のロゴマークはプログラムで自動生成している。
この度、ロゴマークの生成プログラムを刷新し、alogorithm2としてリリースした。
 |  |  |
 |  |  |
プログラミングへの強みをロゴに込める
2017年にロゴマークのリニューアルに際して、プログラミング技術が強みであるアイデンティティをどう表現するかを考えた。
そこで思いついたのが「プログラムで自動生成する」というアイデアだ。これなら強みをストレートに表現できて意匠に悩まずに済む。
ただし、ロゴマークを動的・可変にするという発想は真新しいものではない。そのことについても最後に少し触れたい。
7年ぶりにリニューアル
先日、OGPアイキャッチ画像を自動生成するプログラムを作成した。
以前はSVGには苦手意識があったが、少し自信になってロゴマークの刷新を思いついた。
GitHubのプロジェクトはこちら。GPL 3.0ライセンスで公開しているので、興味を持った方はぜひ参考いただきたい。
ランダムシードによってロゴが変化
アイデアマンズのロゴマークには、seedというパラメータを渡す。例えば今日が2024年10月15日なら、seed=2024-10-15でもいいし、ブログ用のロゴマークならseed=blogとする。
そのseedのテキストによって宝石のようなマークが変化する。この制御をプログラムが行なっている。
seed=2024-10-15の場合は、
翌日のseed=2024-10-16の場合は、
このように全く違うマークになる。seed=blogの場合は以下だ。
この仕組みによりロゴマークを日替わりにできたり、サブサービスのロゴを簡単に用意できる。
ロゴマークのタイプ
ロゴマークには3つのタイプがある。
インライン
上記で紹介した横長タイプだ。
矩形タイプ
社名を下に配置し、縦横のサイズを自由に指定できる矩形タイプもある。正方形なら、
少し横長にするなら、
このようにマークが変形して指定した枠に収まるように調整される。
アイコンタイプ
マークだけの画像も生成できる。これはFaviconなどに使用する。
利用技術について
全体としてはNode.jsによるプログラムである。特徴的なライブラリやフォントを紹介したい。
trianglify
幾何学的ながら表情豊かな美しいパターンを生成するライブラリがある。
個人的にこの模様が大好きで、ロゴ生成プログラムの以前のバージョンでも利用していた。
blobs
trianglifyが生成したパターンを、次のライブラリが生成した輪郭で切り抜きをする。
これで宝石のようなマークを自動で生成している。
プログラミング技術により、無数のアイデアの原石を生み出したいというアイデンティティにも合致して大変気に入っている。
IBM Plex フォント
社名のideaman'sには、プログラミング向けのフォントIBM Plexを利用させていただいた。
これもプログラミング技術を強みとするアイデンティティの現れである。
動的なビジュアルアイデンティティの例
ロゴマークを自動生成するというアイデア自体は自分で思いついたものではない。
ソニー
かつてソニーのCMで、同時期に多様なビジュアルアイデンティティが展開されたことがあった。
これにシビれたのが自分の中では原体験だった。
MITメディアラボ
MITメディアラボも動的なビジュアルアイデンティティを採用した時期があった。
これは短命に終わったようだが、発想は近い。
ノルドキン
ノルウェーのノルドキンは、現在の気象情報からマークが動的に変わるという興味深い事例である。
レーダーチャートに基づいてパターンを生成している。
メルボルン市
オーストラリアのメルボルン市もMというロゴマークをアレンジする試みを行なっている。
以下のpinterestの類似ピンを眺めていると他にも多くの事例があることがわかるだろう。