【100回作って100回壊す？】Mac App Icon制作に初挑戦！半年間の軌跡と芽生えたデザインのスタンス

はじめに

こんにちは！Goodpatch UIデザイナーのmineです。

いきなりですが、先日公開された（渾身の）企画記事「“小さな美しさ”を追求するアイコンデザイナー、マイケル・フラルップが考える「デザインの力」」はもうご覧いただけたでしょうか？

アイコンデザイナーであるマイケル・フラルップにインタビューをしたことで、App Iconというのは生活のすぐそばに溶け込んでいる、本当に小さなアートだと強く実感するようになりました。

日本ではまだまだ魅力が認知されていないApp Icon。その美しさや制作へのスタンスをふんだんに紹介していますので、この記事を読んだあとに（帰ってきてくれるなら読む前でもいいですよ！）気になったらぜひ、読んでみてください。

さて、マイケルとやりとりをする中で、私自身もApp Iconへの関心がより高まり「制作してみたい！」と強く思うようになりました。

今までは個人的に仲間と作っていたiOS App Iconを数点デザインしたことはあったものの、恥ずかしながらしっかり向き合ったことはありませんでした。しかし、この小さな正方形の中にどれだけの情熱が込められているのか、マイケルと会話し、自分でも調べているうちにその哲学に魅了され、自分もいま一度、このスクエアに向き合いたいと思ったのです。

そんな時でした。

なんと社内のプロジェクトでソフトウェアデザイナーのusagimaru氏から「Mac Appのアイコンを作って欲しい」と声をかけてもらうことができました。まさにタイムリーな機会に2秒で快諾し、それから数ヶ月経った今でも絶賛制作を続けています。まだまだブラッシュアップをする過程ですが、この記事で、私がApp Iconに向き合った制作秘話や思考の過程をご紹介できたらと思います！

よりリッチな表現を目指して

ことの始まり

2022年の半ばに「App Iconを描いて欲しい」と声をかけてもらい、そこから長い制作が始まりました。前述したとおり、制作の対象はmacOSのApp Iconです。今まで自主制作でiOSのアイコンをデザインしたことはあるのですが、macOSは初めて。加えて、macOSのアイコンはiOSに比べて自由度が高くよりリッチ（リアルな質感）な表現を求められるものが多く、その点でも今回のアイコン制作はたくさんのチャレンジをすることになりました。もともと関心高く情報収集してはいたものの、いざ作るとなると何から手をつけるべきか…とかなり悩んだのを今でも覚えています。

しかし、usagimaru氏が「mineが考えてることを素直に表現していいよ。それを期待している」とおっしゃってくれたのもあり、まずは気負わずたくさん試して作ってみようと動き始めました。それから現在2023年の2月。こんなにこのアイコンと睨めっこすることになるとは思ってもいませんでした（笑）。

自分でプロダクトを作った時にデザインしたApp Icon（左：Affirewiter、右：Banana）

最適なツールを探す

制作に入る前に、まずは最適なツールを探す旅に出ました。

App Iconは元来、メタファーを表現したリッチなアイコンデザインが多く見られます。 iOSはシャドウやグラデーションを多様しないフラットなデザインも多くあるのですが、macOSはやはり歴史が長いのか、リアルな表現をしているアイコンが多いです。そしてその「リアルさ」がmacOSっぽさを作り上げているともいえます。

ということもあり、「リアルな質感を表現できるか」を軸に探して、最初に目をつけた制作ツールは 3Dモデリングツールの「Blender」でした。当然、触ったこともありませんでしたが、制作風景をYouTubeでよく見ていたこともあり、個人的な馴染みがあったのだと思います。

これは昔からですが、新しい表現を目指すのに新しいツールを学ぶことには全く抵抗はありません。そもそもこういうグラフィックツールは触ること自体が楽しかったりしますし、失敗も案外面白かったりします。そしてそういう体験ができるのは初心者の頃だけ。意外と、この「何もできない時」はクリエイターにとって重要な時間だと考えています。

Blenderを学ぶ際は、まずは素直に「App Icon Design Blender」などの単語で検索をかけて調べてみました。いくつかヒットはしましたが実際に使われるためのアイコンデザインのチュートリアルがなかったので、それを求めるのはやめました。

初めてBlenderで作ったApp Icon

表現を試す、書き出し方を試す

1から全てを学ぶには到底長い道のりだったため、最初から実践でBlenderを使うために、習得するスキルを以下に絞りました。

基本機能を把握し、使えるスキル

複雑な形状を実現できるスキル

質感を表現できるスキル

実装に組み込める形に書き出すスキル

ツール把握はWasted Veggies – TutsのチュートリアルをYouTubeで見てやりました。一本終えるごとに、習った機能を使って別のものを自分で考えて作る……という作業を繰り返しました。

少し複雑な形状を作る時は、Illustratorでグラフィックを作る時の考え方と一緒で幾何学をベースにくっつけたり離したりする方法を学んである程度身につけることができました。これは学生の時に熱心にやっていた鉛筆デッサンなどの考え方も影響していたと思います。経験が助けてくれました。

質感を表現することについては、短期間で理想を習得することが難しかったため自分で表現することはせずに、公開されたリソースを使用することにしました。商用利用OKのBlenderファイルを見ながら、エフェクトを研究して真似する、ということを繰り返していきます。

書き出しについては、少々苦労しました。背景透過の方法がいくつかあり、結局最適な方法にたどりつけなかったからです。この課題を克服できなかったことが後に「Blenderを使わない」という意思決定の一つにもなりました。（カメラの扱いや光の扱いの勉強も非常に大変でした。）

ここで、当時作った試作品のいくつかをご紹介しましょう。

初めてBlenderで作った今回のプロジェクトのmacApp Icon Draft

質感を試すために表現を模索するDraft2（このmacを筐体を彷彿とさせるメタリックが最終的な案にも起用されることになります）

理想の形が自分で作れるか試すためにトレースしたThings 3のAppIcon

今見ると、本当に雑ですね。。。。しかしこの駄作の量産が大事だったりするのです。
その後もたくさんのアイコンをBlenderで試行錯誤しながら、イメージの解像度を上げつつスキルを身につけました。

Blenderが慣れてきた頃に制作したAppIcon。できることの中で表現を獲得していくフェーズです。

たくさん見て、たくさん作りながら考える

「っぽい」を目指す

Blenderの練習をしながら、アイコンをどのような構成にするかも同時に考えました。「Mac Appっぽさ」を感じるために、世界中のMac App Iconをリサーチするネットの長い旅にも出ました。

その中で得た「Mac Appっぽさ」を構成するいくつかの要素は、制作のクオリティを上げてくれるとともに、こだわれるが故の苦悩を感じさせてくれました。特徴的なものをいくつかご紹介します。

普通の角Rとは違う！？滑らかなシェイプを実現するスムースカーブ

App Iconは角丸のスクエアの形状をしています。しかし、ただ円ベースの角R（四角形のそれぞれの角を丸くする処理のこと）の指定では実現できません。これがmacOS / iOS App Iconの特徴でもある「スムースカーブ」という考え方です。

実は角Rが多用されるApple製品の現UIにもこのスムースカーブが使用されています。スムースカーブが用いられることで、違和感のある尖った部分をなくし、滑らかな曲線を再現することができます。

App Iconを制作する時にもスムースカーブの戦いはありました。プライベートでデザインしたiOS App Iconの場合は、組み込み時には角Rをつけずに正方形塗りつぶしの状態で実装し、Appleの素晴らしい仕様によりいい感じにRをつけてもらってました。

しかしMac App Iconは必ずしもスクエア角Rの形状をしている必要がルール上なく、指定のサイズの中央にアイコンを配置した背景透過pngで実装されます。なので、App Iconの形状を作る場合は自作でスムースカーブを実現しなければならないのです。SketchやFigmaにはスムースカーブを再現する機能があるのですが、Blenderの再現に苦労したのを覚えています。

それぞれの縮尺はデザインの関係で変更しています。

はみ出してもいい！？デザインの可能性がぐんと広がる自由なルールとお作法

macOSのApp Iconではモチーフが2つ存在するものが多いです。Xcodeは青写真とトンカチ。GarageBandはキャビネットとES-335。テキストエディットはノートとペンといったように、一般的な「App Icon」のような角丸のスクエアとは別に「ツール」を象徴するようなものが付与されるグラフィックになります。
そして、このツールの表現こそリアルな再現が求められる部分でもあります。

アプリケーションのアイコンに実際のオブジェクトを描く場合は、それらが物理的な素材でできていて、実際の質量があるように見せてください。

Apple Human Interface Guidelines – App Icons –

masOSのAppIconにはスクエアの部分と道具の部分が分かれているものがお作法の一つとしてあります。（出典：Human Interface Guidelines）

他にもMac App Iconでは透過を前提に表現するのでドロップシャドウがアイコンにかかっていたり、ツールが上に乗る場合は背景との関係にもシャドウが生じます。前述しましたが、きっとこれらの構図がApp Iconっぽくさせているんだろうと長いリサーチの末に理解することができました。リッチかつツールをを付与する。人々が身近に思えるアイコンをデザインするにはこれらの手法を踏襲し、構図もお作法を大事にすることを決めました。

とはいえまずは、「どんなモチーフを採用するか？」というところが考えられていないわけですが……

モチーフはあの映画のサンプリング

それから間もないうちに、モチーフは意外と早く決まりました。発端はGoodpatchのソフトウェアデザイナーであるusagimaru氏が書いた記事、「インターフェイス上に流れる時間を捉えるには」を見返していた時です。

この記事では、ソフトウェア特有の階層構造による時間軸を映画「インセプション」の夢階層に沿って書かれています。この記事では主にモーダル、モードレス、ネスト構造からの脱出をテーマに書かれていますが、ソフトウェアデザインにおける「階層」という表現は意外にも至るところで使われているような気がします。

有名なのはデザインの5段階モデルでしょうか。戦略から表層までの5段階を表している図です。あれも図の表現としては階層です。そしてモデルベース的な解釈もそれぞれの階層が影響し合い、最も大きな影響は最下層が強く与える可能性があることを示唆しています。

…というのをお風呂に入りながらつらつらと考えていた時に、もうあっさりと「インセプションに出てくるトーテムをモチーフにしよう！」と思いました。そしてそれが今後のアイコンのメインモチーフになります。（勢いは大事です！）

映画インセプションは夢かどうかを判断するためにトーテムという道具を扱います。人によって種類が違うのですが、主人公のコブ（レオナルド・ディカプリオ）が使っているのはSpinning Topと言われるおもちゃのコマです。非常に美しい形をしています。

劇中ではこれが回り続けていると夢、回転が止まると現実。というように判別します。つまり「自分の現在地の把握と把握による次の行動」を決定づける道具と言えるわけです。ソフトウェアデザインも自分が行っているデザインの居場所と影響範囲を知るということが何より重要です。どこに作用を与えるのかを理解していなければ、何を作るべきかを見失うからです。そういう側面もあり、トーテムはこのプロダクトのモチーフにはぴったりだと思いました。

構図は千差万別。普通に収まらないアクセントを目指す

そこからというもの、トーテムをモチーフにたくさんのアイコンをひたすらに作り続けました。とにかく「App Iconっぽい質感」を自分が扱えるようになるまで、欲しい構図が決まるまで。

美しいトーテムの形、色、傾きなどをたくさん試しながら制作しました。そしてここでツールにも変化が起きます。Blenderは習熟度の問題もありつつ、やはり質感を自由に操れるスキルがないことと書き出しに不安があるということで制作のスピードが落ちてきました。なので後半はUIデザインツールの「Figma」や「Sketch」を採用することになります。最初は「素早くパターンを作る」ことが目的だったのですが、UIデザインツールでアイコンを作るという行為がこのあと自分の制作における重要なスタンスにもなります。

トーテムを採用した初のアイコンのDraft。まだシェイプが野暮ったい印象がある。

パターンをひたすらに制作する。ここからツールも模索するBlender、Illustrator、Figmaなどで制作を続けます。

出来上がり！からが勝負

制作を続けていくと、だんだんと筋の良いものが上がってくるようになりました。拡大縮小を繰り返しながら美しいか？を確認し、よだれの出るようなシズル感を再現できている時は嬉しくなります。しかし、デザインは「できた！」となってからが勝負です。気を抜かず、より詳細な表現を模索しました。並行して依頼してくれたusagimaru氏にもコンセプトとデザインを逐一共有しながら、イメージに近いか？をディスカッションしていきます。その対話で生まれた方向性を加味しながら、さらにパターンや質感をブラッシュアップします。

後半、ブレイクスルーを迎えた時のアイコン。ここからクオリティが1つ上に変わった気がします。

遠くから見た時のまとまりと近くで見た時の繊細さ。AppIconには2つの楽しみ方がある。形には非常にこだわりました。

FigmaでもらったFB。まとまりやクオリティが上がった分。あとは何を表現するか？を重視して模索していきます。

制作する時の状態を重要視する

設計しすぎない。絞りすぎない。ただずっと発散している状態を保つ

これは長い時間制作に充てられたことの恩恵でもありましたが、初挑戦の場合は実験の期間を長く保つことが重要でした。決め切ることは作るモチーフのみ、あとは表現を見つめてツールスキルを磨いたり、自分で絵を描いたりもしました。ちょうどApp Icon Bookが発売され、それを隅々まで読んだりもしました。

表現の幅を広げるために、このプロジェクト以外のApp Iconを自主制作としてたくさん作り始めます。世の中の全てがアプリアイコンに見えてきたり、夢の中でもデザインをしていたりしました。

この状態は特にゴールもなくただアイデアを発散している状態でしたが、この状態を長く作れたのはかなりクオリティに寄与したんじゃないかと思います。あらゆるチャンスを捨てないプロセスも時には重要ですし、表現という単一のものを突き詰める時間もクリエイターにとって重要だと考えています。

本筋のアイコンをデザインするために自主制作的に違うアイコンを作る。あらゆる方向性に脱線しながら経験を持って帰ってくることを意識します。

表現を模索するために全てFigmaだけでデッサンをしました。モチーフは鉄球

やり方を模索する過程で手に入れた表現方法

大体の場合、今の世の中では制作の「やり方の手の内」はいろいろな方法でわかります。YouTube、Twitter、Instagramなど。Figmaはファイルを覗くことができるものがたくさんありますし、検索すれば手法はすぐ出てきます。それらは、やりたいことをすぐに実現するためには確かに重要なことなのですが、危険性もあると思っています。

なぜなら、やり方の成功を目指して最短で獲得したスキルは「欲しかった結果」しか得られないからです。グラフィックという分野は特に、表現方法で「失敗」という概念は存在しないと思っています。むしろその外在的な失敗が、いつもなら試さなかった表現であり、それをたくさん知ることが自分のスキルの幅やオリジナリティを増やす方法だったりするのです。

私もチュートリアルでツールを把握したりはしますが、ある程度把握したら基本的に作り方に固執することはあまりありません。グラフィックやイラストは特に、突発的で、外在的で、偶発的な、再現性のない表現が必要になります。もう二度と自分でさえ作れない唯一の美しさを作るために、それに出会うために、それが自分に降ってきますように。と願って試行錯誤を続けるのがいいと思うのです。

これらは私がモノを作る上で大事にしている考え方です。

初めて挑戦することでも、焦らないで取り組むことが重要です。「今すぐにうまくなれる方法」や、30minの動画に詰め込まれているTIPSは誰もが等しく、簡単に獲得できるスキルです。だからこそ、探究を大事にしたいと考えています。答えのない深い沼に突入し、ただ理由もなく表現を追い求めるテーマがあると私というクリエイターは常に幸せです。

意味や設計方法、再現性という今日ではより重要視される部分に加えて、ただひたすらに美しい形を作る研鑽を絶やさないことが重要です。この記事の中でもたくさんのアウトプットの過程を紹介してきましたが、僕もこのアイコン制作を始めたころを見返すと、アウトプットはひどいものでした……笑

アウトプットの最初と今付近。数ヶ月向き合うことでここまで変わります。

ツールを思想で選定する

今回は最終的にUIデザインツールだけで作ることを決めました。

理由は仕様上や制作プロセス上の問題もありますが、結果的には「ソフトウェアプロダクトの一部であり、アイコンもUIの一部だ」と個人的に解釈したからです。UIを書くにはUIデザインツールが最適です。そしてアイコンもUIと捉えるなら、きっと私はUIデザインツールで作ることが肌に合うのだと感じました。

SketchのプロダクトLPには、アイコンのコンテンツも多くフィーチャーされています。UIデザインツールが主な使い方でありつつも今なお、多くのアイコンデザイナーに愛されているツールです。この「ある分野に特化したツール」が持つ制約の中で作られる美しさが、結果的にソフトウェアらしい質感の醸成にもつながると思ったのです。

小さなキャンバスにプロダクトの夢を描く

今回のMac App Iconの制作はまだ途中であり、絶賛磨き込み中です。第一弾は2月中に完成し、さらにバリエーションを出したアイコンセットを用意する方向で制作を続けています。

この数ヶ月間、App Iconに向き合い、制作することで、制作に深く魅了されるデザイナーが多いのも納得がいきました。App Iconのデザインは小さな四角の中にプロダクトの夢を描くことだと感じます。アイコンがあることでプロダクトを象徴する。そのアイコンが玄関になる。出会う顔になる。

そしてアプリケーションが使えなくなっても、アイコンだけはなんとか保存することができる。こうして歴史に残すことができる。App Iconはプロダクトの入り口であり、最後に残るUIコンポーネント……なのかもしれませんね。

現段階のデザイン。まだまだ良くなる兆しがある。