2019の16日目の投稿になります。個人サービスを作る時のアイコンの作り方について書いて行きます。Nativeなどを触りながらフリーランスとしてお仕事させて頂いています。その傍らPaPyrusという個人アプリを開発しています。いい感じのイケてるアイコンを作ることができませんでした。アイコンを作るまでのプロセスについてまとめていこうと思います。他で個人開発をされる方の参考になればという形です。PaPyrusについて現在開発中のPaPyrusはElectronで開発されたMac上で動作する(今のところMacでしか動作確認できていません)マークダウンメモアプリです。ズボラな私は「ノートを書くのは良いもののノートが整理できない」という問題に頭を抱えていました。「落書きをしたりアイデアをまとめる裏紙」みたいなアプリが必要でした。「ちょっと機能を足したアプリが欲しい・・・」ということでstickiesにマークダウンを足した付箋型メモアプリを作りました。ベータ版を公開中で会員登録をして頂ければアプリをダウンロードして使って頂けます。改善の余地の多いアプリですが、興味あれば触っていただけると嬉しいです。PaPyrusのアイコン前をきはこれぐらいにして、早速アイコンの話に移ります。PaPyrusはデザインも実装も自分でやっているのですが、もちろんアイコンも自分がデザインしました。そんなPaPyrusのアイコンはこちらです。ダサくなってしまっていました。部分がぼんやり見えたので、ここで言語化しておくことにしました。知り合いのデザイナーさんにアイコンの作り方を相談しました。そのアドバイス+一部ググった内容+をまとめると下記のような手順になります。抽象化したスケッチをもとに清書アイコンの元になる対象物を決めるこれはほぼ、ググった内容と試行錯誤の結果から考えついたものですが、まずはじめにサービスの元となるイメージから対象となる物を決めます。Appleは実直に「りんご」を書いていますし、Sketchはなんでかわからないですが、「ダイアモンドっぽいもの」を書いていますね。Slackのロゴは何をイメージして書かれているのかわからないですが今のアイコンは花っぽいですし、初期の頃は「シャープ」を抽象化しているようにみえます。このようにして最初の工程はどういった物体を元にアイコンを作るのかと決めるというものです。Evertnoteのように、「象+紙」みたいにモチーフを複数決めて組み合わせるのも面白そうですが、慣れないうちは一つにきめてやるのがよいでしょう。いずれにせよ、モチーフを二つ以上にする場合は、後の工程でひとつずつ物体をスケッチするとそれぞれを組み合わせる時にアイディアのイメージがつきやすいように思います。デザイナーさん曰く「アイコンを作るときはイラレとかを先に開くのではなく、まずスケッチからですね」そういえば確かに、これまではアイコンを作るためにいきなりイラレで書いて細部が書ききれずイマイチなものになっていた。ものは試しようなのでとりあえず、スケッチってどんなものだっけという感じで定番の手のスケッチを書いてみました。スケッチのやり方なんてわからないので文明の利器に頼って、Youtubeでスケッチのやり方をみたりしながらスケッチしてみました。この手のスケッチを終えてみたところで疑問がわきます。「これで良いアイコンができるのか?」そんな不安を抱えながら、また別の機会にデザイナーさんにスケッチのやり方や意識する点を聞いてみたのですが、スケッチを行う目的は観察力を磨くためらしいです。うまく書くことができません。(物体を紙に写している時のイメージが間違っていたら、そりゃうまくかけないですよね。アイコンをトレースしてみたり、スケッチしてみたりしました。ある程度経験値が溜まったところでいよいよ前工程で選んだ「紙」を書いてみようといことで書いてみました。?紙感を出すためにちょっと巻いてみました。今見ると紙にしては、ちょっと固そうですが、今回はうまくスケッチすることが目的ではないのでまぁいいでしょう。自分なりに合格点だったのでこれをもとに次工程で抽象化させてアイコンを作っていきます。ちなみに、最初に紙を書いた時に自分の下手さに辟易して途中でやめてしまったものがこちらです。紙感より春巻き感の方が強く出てしまっています。こんな感じで失敗もしつつ、工程を楽しんでやれると良いかと思います。次の工程では先ほどのスケッチを抽象化して、アイコンに近づけていきます。これまでのスケッチはiPadアプリのProcreateを使って書いていたので、引き続きProcreateで作業していきます。最初の案がこちらです。これは色ついてしまっているのですが、最初は線だけ書く感じで抽象化されたものを書いてその後に必要な色を足していきました。抽象化する時には巻いている感じを強くデフォルメして書いていきました。Papyrusのイメージカラーを使ってまとめていきました。ここまでで大分イメージついてきたのですが、線がずれていたりするので微修正はイラレでやっていくことにしました。前段階できっちりアイコンとして使えるものができてしまえばそのままで良いのですが、僕の場合はイラレで清書しました。これが最終的に清書したものです。色々な色で試してみたかったので、何パターンか用意して最終的に一番しっくりする左上のものをアイコンに採用するよう決めました。黒も個人的には渋くて好きなのですが、ちょっとアプリのイメージとかけ離れているこちらの採用は見送りました。清書がおわったら気に入ったアイコンを書き出して完了です。最後にスケッチしたものと最終版を並べて載せておきます。抽象化やデフォルメをする時のアイデアの土台や出発地点が明確になるので一度試してみていただけると良いと思います。逆に日頃落書きしたりしてある程度日常のものをささっとかけてしまう人は事前にスケッチしたりする必要もないのかもしれません。さいごにというわけで、プログラミング的要素ゼロの内容になりましたが、この記事が個人開発の手助けになれれば嬉しいです。そちらについてもおいおい記事がかければなと思います。version1この記事が役に立ちましたらシェアをお願いします。2019フリーランスを退職します。