自作のタスク管理ツール「TaskClear」にロゴ追加しました。
見た目が良くなるとテンションが上がる法則
プログラムに限らないのですが、何かものづくりする時って見た目が良くなると妙にテンションがあがります😀私はどちらかというとデザインより実益重視なので見た目は二の次のような考えがベースにはあるのですが、それでもデザインが良いとやっぱり嬉しくなります。そんなわけでTaskClearにロゴを付けてみました。
ロゴデザインができるまで
私は元々プログラマ出身なのでデザインは専門外なんですが、最近はアップルやGoogleがフラットデザインとかマテリアルデザインとかいろいろガイドライン出しているので、そのあたりをチラ読みして得た知識でイチからデザインできるかチャレンジしてみました。いきなりツールを駆使して書き始められるほど手慣れていないのでまずは手書きでラフを描いてみることにしました。こういうときにiPad ProとApple Pencilあると便利ですねー。TaskClearの設計するときにも使っていたGood Notes 5でまずはデザイン。
まずは最初は安易にTaskClearの頭文字TCを使ってみたが、難しいので早々にこの方向はやめた。ユニバーサルデザイン的には文字を使ったロゴは言語の壁があるのでお勧めしない的なものも見たことあるし。次に思いついたのがTaskClearのタスクが並んでいるイメージをベースにしたデザイン。完了済、実行中、予定の三つのタスクと状態表すアイコン並べたら良いかなーと思って書いてみた。
色も塗ってイメージ掴みたくなってきたのでPaperという水彩チックな絵が描けるアプリに切り替えてみた。画材無しで水彩画っぽく描けるのはデザイン本業でなくて家に道具がない自分にとってはありがたいですな。シンプルに2段にしてみたり三つ並べみたり。
タスクシュートはやっぱりタスクがずらーっと並んで、どりゃーと上から下にタスクをこなしていく感じなのでスターウォーズのオープニングのように😀タスクが迫ってくる感じも試してみた。
アプリのアイコンは正四角形なのでスターウォーズはやめて正方形デザインの方向を模索。Macbook Proのタッチバーのようにアイコンを二色で表示する風潮があるので、色数も抑える方向で。ちなみに自分でデザイン描いて、自分で手書きでツッコミのコメント入れています。これなんか自分がディレクターになったみたいな気がしておもしろいよ😎。右のデザインはTaskClearの画面の上下の緑のバーとタスク開始ボタンをイメージした。
緑の上下のバーとタスク開始ボタンモチーフの方向性でいろいろ試行錯誤。 正方形から逸脱してみた😀。タスクをイメージした白いバーを強調してタスク開始ボタンを真ん中に持ってきたけど動画アプリみたいでやめた😅。それならと開始ボタンを左端に持ってきたらなんか安定感ない。ログインページのど真ん中に表示されるのイメージしたら違和感あるかなと。
ど真ん中に三角があると動画アプリみたいなので左端に寄せて先端が真ん中あたりに来るようにしてみたら、不思議と動画アプリ感がなくなったように思える😀。左は2色に拘りすぎて何かよくわからなくなったので、フラットデザインでは使わない影をつけて、いうなればマテリアルデザイン的な高さの表現で2色に無理矢理収めたのが右。一応、右の案ベースに清書することにしました。
Inkscapeで清書
最終的にはSVG形式にしたかったのでIllustrator的なツールを探してみた。オンラインにもいくつかツールがあるんだが角を丸く書いてくれるツールが見つからなくて結局定番のInkscapeをWindowsにインストール。しかし4K高解像度ディスプレイに対応して無くてアイコンが小さすぎるので、ディスプレイの解像度を1920 x 1080に落とした😅。正解のやり方かわからないがInkscapeではストロークのスタイルというのがあって幅により角丸の直径を指定できる。
そしてできたのがこれ。
素人仕事にしてはなかなかキュートなロゴができたのではないだろうか(どうしても動画再生アプリ感はあるが)。
iPhoneでみるともさい…
我ながらうまくいったものだと自己満足に浸ってPWAの設定に組み込んでiPhoneでホームに追加して様子を見てみた。
なんかすっきりしてないというか、バランスが悪い。他のアプリのアイコンと見比べると理由がわかった。iPhoneのアイコンは角が丸くなっているのだけど、角が丸くなっている箇所にはデザイン要素が入っていなくて中央部分にデザインが集中している。Safariみたいに面積フルにつかっている例外的なものもあるけど、EvernoteもTwitterもそんな感じでデザインされている。
アイコンリファイン!
ここまでやったんなら最後までこだわろうと思いInkscapeでデザイン修正。ネットで調べみるとiPhoneのアイコンの角丸の半径は横幅の1/4.5ぐらいのようだ。Inkscapeのストロークの幅は直径なので倍の数値を入れて修正。ただこれを変えると全体のサイズも変わってしまうので両方を少しずつ地道に調整した。
修正版がこれ。結局、三角マークは真ん中に位置してしまいましたね😅。縦帯の高さもバランス考えてほぼ三等分にしました。
デザインのせいなのかまだ横にのっぺりしてる印象があるのですが、前よりは安定感が出ました。もうちょっと三角を小さくしてもいいかも。まだカーブのところに三角のデザインが入り込んでいて窮屈な感じがする。
PWA推進派のGoogle謹製Pixel3ではこういう残念な表示になりました。フルに表示させる方法あるのかな。
最初のアイコンとしてはこんなもんで
過去にもこのサイトのロゴやNEMCHIなどアイコン作成したことはあったのですが、スマホ時代のアプリアイコン作成は初めてでした。もう少し微調整したいところもありますが、初めてにしてはなかなか良い物ができたので満足です。最近のアプリは AppleやGoogleのデザインガイドライン に沿っていて似たようなテイストの参考になるサンプルがたくさんあるので良いですね。デザインもやってみると結構楽しかったのでみなさんも挑戦してみてはどうでしょうか?
