ソースコードを元にロゴデザインを生成できる「Logo Workbench」を作ってみた
自分用に作ったんだけどせっかくなのでここに載せておく。
先に謝っておくと、使い方が難しくてごめん。
あとデザインについてちゃんと勉強したことないので、このツールは実際の仕事で使えるような機能は備えてないと思う。意見や要望とかあれば取り入れていきたい。
これは何か
GUIの操作を使わず、ソースコード(のような設定データのようなもの)だけでロゴデザインもどきを生成する。
ロゴデザインといっても、画像とかレイヤースタイル芸みたいなやつじゃなく、好きなフォントで好きなテキストを描画して、大文字小文字とか文字ツメとかを調整できるような感じ。
デフォルトでサンプルが出るようになってるので、それを見るのが早いと思う。
logo work bench,2 2 1,50,Myriad_Pro,100,#303030,5 0,-4 -2 -3 0 -4 -3 -2 -1 -2 -4 -4 -3 0,#fcfcfc logo work bench,3,45,Futura,400,#303030,10 0,-5 -3 -3 0 -6 -5 -3 -3 -5 -5 -5 -4 0,#fcfcfc logo work bench,3,40 50,Arial_Black Arial,400,#303030,0,-2 -2 -2 -3 -4 -3 -2 -1 -4 -4 -4 -4 0,#fcfcfc logo work bench,2 2 1,50,Helvetica_Neue,100,#303030,0,7,#fcfcfc logo work bench,2 2 1,50,Times_New_Roman,100,#303030 #c03030 #303030,5 0,-1 -3 -2 0 -7 -1 -1 -1 -1 0 -2 -2 0,#fcfcfc
これがサンプルの元データ。生成するロゴのソースコードのようなもの。
1行で1つのロゴを生成する。だから上記は5つのロゴを生成している。
「表示する文字列」「大文字小文字のルール」「サイズ」「フォント名」「太さ(ウエイト)」「文字色」「単語の間隔」「文字の間隔(ツメ)」「背景色」の順に、各設定をカンマ区切りで指定する。さらに、ひとつひとつの設定はスペース区切りで単語ごとや文字ごとに違う設定にできる。
例えば3行目の
logo work bench,3,40 50,Arial_Black Arial,400,#303030,0,-2 -2 -2 -3 -4 -3 -2 -1 -4 -4 -4 -4 0,#fcfcfc
を見てみると、まず「logo」「work」「bench」の3つの単語でロゴを生成することを設定している。
次は「3」だから大文字で統一(0はそのまま、1は全部小文字、2は先頭だけ大文字、3は全部大文字)。スペースで区切って「logo」「work」「bench」の3つの単語それぞれの大文字小文字を指定できるけど、ここでは1つしか指定してないので全部に適用される。
その次が「40」「50」なので、最初の単語「logo」はフォントサイズ40ポイント、残りの「work」と「bench」は50ポイント。このように単語の数より設定パラメータが少ないときは、足りない分は最後のパラメータが残りのすべての単語に適用される。
その次では「logo」のフォントを「Arial_Black」、残りの「work」と「bench」は「Arial」にしている。フォント名はサンプルとしていくつか画面に書いといたけど、あれはあくまで例で、実際にはPCに入ってるフォントがすべて使える。CSSのfont-familyに指定する書き方で、スペースをアンダースコア( _ )に置き換えて書く。
次は「400」なのでそれぞれのフォントのノーマルの太さにしている。ここも単語ごとに指定することもできる。
次の「#303030」は文字色。これもスペース区切りで単語ごとに指定することもできるけど、1つしか指定してないので今回はすべての単語に適用される。
その次の「0」は単語の間隔。「logo」と「work」、そして「work」と「bench」のそれぞれの間はあけないってこと。
その次が難しい。これが文字ツメ、というか文字の間隔を調整している。それぞれの文字の隙間の増減を指定してる。今回はマイナスの値ばかりなので、それぞれ標準の位置よりも左に詰めているってこと。だいたい文字を詰めると一気にロゴデザインっぽくなるのでこの設定は重要。
そして最後の「#fcfcfc」は背景色。
これで伝わったかな。。。
どういうときに使うか
ワープロソフトでも画像編集ソフトでもドローソフトでもこういうのはやれるけど、自分はGUIだと意外と面倒だなーと感じている。
たくさん生成して比較したり、みんなの意見を聞きながら微調整するときとか、ちょっとだけ変えた別パターンを試したいときとか、GUIだといちいち操作が面倒。
しかしこのツールのように、ソースコードを元に生成する感じだと、コピペしてちょっと直すとか、ソースコードさえあればいつでも同じ状態を復活させられるとか、メリットが多いと思った。
まあプロならある程度まで脳内でシミュレーションしてあとは画像ソフトとかで思い通りに作ったりできるのかもしれないけど、自分の場合はまったくの素人なので、いろいろ見てみないとなにもわからない。っていうか見てもまだわからない。結構リアルなところまで作り込んでみないとイメージできないし、作り込んでからたくさんのバリエーションを試したかったりする。なので、こういうツールが前から欲しいと思っていて、今回いよいよ作ってみたって感じ。
ローカルで動作してます
このロゴの生成は、サーバー側の処理は一切ない。すべてブラウザ上のJavaScriptで処理して、ブラウザ上でそのPCに入ってるフォントを使って生成している。
だから、
- 使いまくってもサーバーが重くならない
- 利用者がどんなロゴを生成しているか、作者でサーバー管理者である私(nacookan)に送信されない
- 未発表の製品名とかのロゴ検討に使っても一応大丈夫ということ
- それでも不安ならHTMLソースを保存してローカル環境や自分のサーバに置いて動かしてもいい
というメリットがあるし、
- 自分のPCに入ってるフォントしか利用できない
- 画像やベクターデータで保存する機能は今のところない
- ロゴデザインが決まったら、別なちゃんとしたソフトで作り直す必要がある
というデメリットがある。
セーブ機能
ちなみに「Save to URL」ボタンを押すと、URLの末尾にハッシュ(# から始まる文字列)の形で全部のデータが記録される。このURLをブックマークでもすれば、あとでまた同じ状態で画面を開くことができる。つまり、サーバー側に保存とかじゃなく、URL自体に全部のデータを含めてそれをブラウザにブックマークすればいいじゃんっていう発想。
また、このデータを含んだURLへアクセスした際も、普通のブラウザは#より後ろの文字列はサーバー側に送ってこない(HTTPリクエストに含まない)ので、ここでもどんな文字でロゴを生成しようとしたのか、作者でサーバー管理者である私(nacookan)には送信されないので安心(念のためGoogle Analyticsも貼ってない。万が一送信されたら嫌なので)。
試しに、どこかで見たことあるロゴを作ってみたので、以下にそのセーブデータのリンクを貼ってみる。
対応するフォントがインストールされてる環境じゃないと再現されないけどね。見れない人用のスクリーンショットを用意したので興味ある人はどうぞ。
もちろん、ロゴってテキストを描画しただけじゃなくいろいろ修正してることが多いと思うので、完全再現は無理。フォントだって似てるだけで違うかもしれないし。
