【アイコン修行中】アイコン作成時に意識している4つのポイント

アドベントカレンダー5日目の担当は、デザイナーの龍神です。

最近、プロジェクトでアイコンを作成する機会が重なり「アイコンって奥が深い…」と痛感しています。

日々アイコン作成に奮闘している私が、アイコンを作る中で意識していることをご紹介します。

また、せっかくの機会なのでneccoで働く他のデザインメンバーにもアイコン作成で気をつけているポイントをインタビューしてみました。

アイコンといってもイラストのように書き込みの多いものなど様々なデザインがあるかと思いますので、あくまでも一つの例として読んでいただけると幸いです。

1.参考調査で「〜らしい要素」を探す

アイコン作成に入る前に、毎回参考を集めます。

見るポイントは主に「何の要素が入っていると、表現したい内容っぽく見えるのか」です。

例えば、「クリスマス」を表すアイコンを作成するとします。

複数のアイコン素材サイトやGoogle検索で調べてみると以下のアイコンがでてきます。

• クリスマスツリー
• ソリ
• サンタクロース
• くつした
• プレゼント

など「クリスマスっぽい要素」がどんなものなのかを知ることができます。

アイコンでは少ない線や塗りでもわかりやすいことが大切なため、要素の選定はあまり奇抜なものではなく多くの方にとって「〜らしい」と感じるものを選ぶようにしています。

2.塗りと線画のバランスを統一する

アイコンの参考を調べてみると、大きく分けて２種類のものが存在しています。

塗り：中の要素が塗られているアイコン
線画：要素が線で構成されているアイコン

また、ベースは線画で一部塗りで構成されているものもあります。

この塗りと線画のバランスを意識して作成することで、統一感のあるアイコンを作成することができます。

3.他デザインに合わせた角丸・書き込み量を意識する

アイコンを使用するウェブサイトやパンフレットのデザイントーンに合わせてアイコンを作成することも重要です。

これまでアイコン制作をする中で意識しているポイント、そして社内レビューで指摘していただくことが多いポイントは主に2つです。

• 角丸を統一する
• 書き込みの量のバランスを合わせる

角丸を統一する

丸・三角・四角などアイコンごとにベースとなる図形は異なりますが、それぞれの角丸の雰囲気を統一することでアイコン群としてまとまりが出ます。

数値で合わせてしまうと図形によって角丸の大きさが違って見える場合もあるため、使用するサイズや場所を考慮して目視で合わせていく方が綺麗に仕上げるようにしています。

書き込みの量のバランスを合わせる

書き込みや要素の数・複雑性にばらつきがあるとアイコン同士のまとまりがなくなり、ごちゃごちゃした印象になります。

時間＝時計や評価＝星など簡単な図形のみでも伝わるものがある一方で、一つの要素だけだと表現しにくいものもあるためバランスを取りながら要素を足し引きしていきます。

4.動きのイメージも想定する

neccoでは、Lottieを使ってアイコンに動きをつけることが多いです。

そのため、アイコンを作る時から「こんな風に動いたら、よりアイコンの意味が伝わりやすいかな」など動きのイメージを想定しておくことも大切です。

デザイナーの長野さんがアイコンに動きをつけてくれることが多いのですが、動きがループした時にも境目がなくスムーズに見えるため違和感なくウェブサイトに馴染んでいて感動しました！
それ以降、自分で動きをつける際にも意識しています。

デザインメンバーにアイコン作成で意識していることを聞いてみました

ここまで私がアイコン作成する時に意識していることをご紹介してきましたが、まだまだ日々迷いながら奮闘しているところです。

そこで、neccoの他デザインメンバーにも「アイコン作成する時に意識していること」をインタビューしてみました！

中川 小雪さん（デザイナー/UIデザイナー）

最近アイコンのグリッドについての記事を読み、余白感やサイズのルールについて意識するようになりました！

最初にベースとなるグリッドを何パータンか用意し、線の太さや隙間の余白感を統一することで一貫性のあるアイコンになるように心がけています。

Figma 「再利用可能なアイコングリッドを作成する」
Material Design「システムアイコンの設計ルール」

✍️龍神コメント
中川さんがアイコンのグリッドに関する記事を共有してくれてから、早速チームみんなで活用しています。
余白に規則性が生まれることで、複数のメンバーで一緒にアイコン作成を行う時にも大きさやトーンがより統一しやすくなりました！いつも率先してアイコンをコンポーネント化することで、チームでのデザイン展開をしやすくしてくれる優しい中川さんに感謝です💪

長野 真理さん（デザイナー/3DCGデザイナー）

• リアルなものを知ること、知ったうえでそのものらしい部分を誇張する。
• 人間のアイコンだと顔と体のバランスや顔の形をデザインのトーンに合わせて変える。
  • 洗練されたデザインだと顔を縦長で小さめ、カジュアルよりなデザインだと顔は正円など
• 毎回オリジナルのものを作る

✍️龍神コメント
長野さんはいつもレビューの時に「リアルなものを知る」「どこまで誇張するのか」を一緒に考えて相談してくれてとっても勉強になっています。写真などをじっくりと観察することで、見せたい要素の特徴を掴むことができてより伝わりやすいアイコンになるように感じています✨また、長野さんがLottieでアイコンを動かすときの自然なアニメーションいつも素敵で見とれてしまいます！

今 聖菜さん（デザイナー/イラストレーター）

デザインの随所に登場するアイコンですが、小さな部分にも気を配ってひと工夫することでデザイン全体のクオリティがグッと上がると思います！

• アイコンだけでデザインの世界観・らしさを表現できる特徴を持たせる。
• どこをピックアップすれば分かりやすいかを意識して、強調する部分を決める。
• 小さいサイズで見たときに伝わりやすいか、視認できるか、つぶれないかを検証しながら、描き込み具合の粒度を調整する。

✍️龍神コメント
今さんは同じオフィスで働いているので、アイコン作成で困った時に「ここどう思いますか？」　と相談することも多いです。どんな時でも手を止めて一緒に考えてくれる今さんに大感謝です😭実際にアイコンを使用する場所に入れて一緒に実機で確認することで、スマホや小さい使用箇所でもしっかりと伝わるアイコンになっているかを改めて確認することができています。

まとめ

2024年はアイコン作成の機会が多い1年でした。

シンプルで簡単なようにも見えるアイコン作成ですが、やればやるほど奥深く難しいものだと感じています。

今後もスキルアップを続けて、さらに誰にとってもわかりやすいアイコン作成ができるように頑張っていきます。

明日のアドベントカレンダーの記事もお楽しみに！

---

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

• フロントエンドエンジニア
• アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

（2024年11月時点）