このアイコン処理、どっちが正解？ UI・アイコンデザインのセンスを磨こう

現場で通用するデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

グラフィックデザイナーの鷹野です。

デジタルデバイスの画面で毎日目にする「UI（ユーザーインターフェース）」や「アイコン」のデザイン。

実はこれらのデザインには、見た目の美しさだけでなく、運用のしやすさを見据えた選択基準があります。

早速ですが、クイズです。
以下の3つの作例を見て、AとB、あなたはどちらの表現がより適切だと感じますか？

style

seodoc-block-introduction, grid width 8, m spacing

background

#fff

1問目「線画アイコンの拡大縮小」（難易度★）

線画アイコンを縮小するとき、AとB、どちらの縮小が好ましいでしょうか？

style

reading width, l spacing

2問目「引き出し線の端点」（難易度★）

モチーフを重ねるアイコンを作成するとき、AとB、どちらのアイコンが好ましいでしょうか？

style

reading width, l spacing

3問目「アートワークの反転」（難易度★★）

アートワークを反転するとき、AとB、どちらが好ましいでしょうか？

いかがでしたか？

私が考える答えは……

style

reading width, l spacing

1問目の答え：B

style

reading width, l spacing

2問目の答え：A

style

reading width, l spacing

3問目の答え：B

以上が私なりの解答です。

あなたがよいと感じたアイコンやアートワークは、AとBどちらでしたか？

ではここからは、各設問で何が違っていたのかを、具体的に見ていきましょう。

また、作例で用いられていたデザインテクニックについてもご紹介します。

※本コーナーの作例は、Adobe Illustratorを使って作られています。

Illustratorは、ロゴやイラストをはじめ、ポスターや名刺といった紙媒体のデザイン、さらにwebやアプリのUI設計まで対応できるデザインツール。

多くのプロが使っており、最新のAI機能も搭載しています。

ワンランク上のデザインを実現したい方や、プロフェッショナルなデザイナーを目指したい方は、ぜひAdobe Illustratorを使ってみてください。

すべてのデザインクイズを見る

style

reading width, l spacing

1．線画アイコンの拡大縮小は全体の比率をキープする

では、1問目から振り返っていきましょう。

私が考える答えは「B」でした。

塗りつぶしがなく、線だけで表現されているアイコンは、「線画アイコン」「アウトラインスタイル」「ストロークスタイル」と呼ばれることもあります。

なお、アイコンは、「Font Awesome」をはじめとするアイコンフォントやアイコン素材を入手して使いますが、イメージに合うものが見つからない場合は自作することになります。

その際のアイコン作成は、Illustratorが得意とする分野です。

こうしたUIアイコンは単独でなく、複数のアイコンを並べて使うことがほとんどです。

そのため、縮小したときに元の線の太さ（数値）が変わらないAではなく、アイコン全体のバランスを保持したまま拡大・縮小されるBのやり方がセオリーです。

同じ線に見えても、あらかじめ線を「アウトライン化」（＝線から面に変換）しておけば、拡大・縮小で線幅が変わることはありません。

そのため、最終段階では線をアウトライン化するのが一般的です。

しかし、後から細かい調整を行う可能性がある制作途中の段階では、極力、編集可能な「線の状態」をキープしておきます。

style

reading width, l spacing

Illustratorで「拡大・縮小」するときにチェックすべき設定

編集可能な状態のアイコンを拡大・縮小するとき、留意すべきは「線幅」のほかに「角（丸み）」の設定です。

ここでは、「拡大・縮小」の設定方法とチェックすべきオプションをお伝えします。

style

reading width, m spacing

1．「拡大・縮小」ダイアログボックスを開く

次のいずれかの操作で「拡大・縮小」ダイアログボックスを開きます。

ツールバーの「拡大・縮小ツール」をダブルクリック
「オブジェクト」メニューの「変形」＞「拡大・縮小」をクリック

style

reading width, s spacing

2．「拡大・縮小」のオプションを設定する

「拡大・縮小」ダイアログボックスには、アイコンを扱う上で重要な次の2つのオプションがあります。

「角を切り替え」（または「角を拡大・縮小」）
「線幅と効果も拡大・縮小」

同じ比率で縮小しても、これらのオプションの有無によって印象が大きく変わります。

結論からいうと、アイコンのようなデザインを扱う場合は、どちらのオプションも「オン」にして実行するのが正解です。

そうすることで、縮小したときに線が太すぎて潰れてしまったり、角の丸みが変わってシルエットが崩れてしまったりするのを防ぎ、アイコン全体の美しいバランスを保ったまま拡大・縮小することができます。

style

reading width, s spacing

後からの変更に強い「複合シェイプ」の活用方法

作例のフォルダーアイコンは、上部のタブ部分の位置や幅を後から調整することを想定し、2つの図形を「仮合体」した状態にして作業を進めます。

通常、「パスファインダー」パネルの「合体」アイコンをそのままクリックすると、再編集できない状態で完全に合体してしまいます。

しかし、optionキー（Altキー）を押しながら「合体」アイコンをクリックすると、仮の状態での合体となります。

これを「複合シェイプ」と呼びます。

複合シェイプの状態であれば、合体した後でもそれぞれの図形を個別に移動したり、角の丸みを調整したりできます。

最終的にデザインが確定したら、複合シェイプを選択した状態で「パスファインダー」パネルの「拡張」ボタンをクリックすることで、1つの図形として完全に合体させることができます。

この「複合シェイプ」のテクニックを覚えておくだけで、急な変更にもデータの作り直しをすることなく対応できるようになります。

便利なデータ作成のテクニックですので、ぜひ日々の制作に取り入れてみてください。

style

reading width, m spacing

2．モチーフを重ねるアイコンは「ネガティブスペース」で視認性を高める

続いて、2問目を振り返りましょう。

私が考える答えは「A」でした。

アイコンは画面や紙面内でさまざまな使われ方をします。

使われる場所によって大きさも異なり、また、その媒体と目の距離によっても見え方が変わります。

デザインする上で特に考慮したいのは、非常に小さく使う場合です。

1問目では「バランスを保ったまま縮小できて正解」としたはずのアプローチですが、今回の作例のようにモチーフ同士が重なっているデザインでは注意が必要です。

そのまま極小サイズまで小さくしてみると、右下の時計盤がフォルダーアイコンの枠線と完全に一体化してしまい、印象が変わってしまいます。

このように、1つのモチーフに別のモチーフを重ねるアイコンを小さく扱う場合は、単に「線幅を維持して縮小する」だけでは不十分です。

非常に小さく表示されてもそれぞれのモチーフを独立して認識させるために、重なる部分にあらかじめ「隙間（ネガティブスペース）」を空けておくというアプローチが必要になります。

style

reading width, l spacing

非破壊でモチーフを重ね、隙間（ネガティブスペース）を作る

少し高度なテクニックですが、今回のようなモチーフ同士が重なっているデザインにおいて、後から修正しやすいアイコン制作の流れをご紹介します。

style

reading width, m spacing

【手順1】フォルダーとモチーフ（＋削り用図形）を重ねる

まずは、それぞれのパーツをレイヤー上で適切な順番に重ねて配置します。

フォルダーアイコン：線で描かれた、土台となるマーク
重ねるモチーフ：フォルダーの上に重ねたいマーク
削り用の図形：モチーフより一回り大きい「白い塗り」の図形、または、モチーフ自体に太い白線を設定したもの（※フォルダーの線を「隠す（削る）」役割をする）

style

reading width, s spacing

【手順2】グループ化してアピアランス効果を適用する

全体をグループ化し、そのグループに対して「アピアランス」パネルから以下の2つの効果を適用します。

「アピアランス」パネルは、「ウィンドウ」メニューの「アピアランス」で開けます。

「パスのアウトライン」効果：
通常、線のままだとパスファインダーが正しく機能しません。
この効果をかけることで、元のパス（線）のデータを壊さずに、一時的に「塗り」に変換します。
「パスファインダー（合流）」効果：
グループ内の重なりを整理します。
これにより、上に乗っている「削り用の図形（白）」の真下にあるフォルダーの線（黒）が自動的にくり抜かれ、同色の黒いパーツ同士はスムーズに繋がります。

これらはアピアランス効果として適用するため、元データは保持されます（ライブ状態）。

そのため、モチーフの位置をずらせば、フォルダーの削れる位置も自動的に追従して動きます。

style

reading width, s spacing

【手順3】アピアランスを分割して仕上げる

デザインの配置が決まったら、データの仕上げを行います。

アピアランスを分割：
「効果」としてかかっていた見た目を、実際のパスデータ（確定されたオブジェクト）に変換します。

白い塗りを削除：
不要になった「削り用の図形（白）」を選択してデリートすれば、綺麗にフォルダーの線がくり抜かれた（隙間が空いた）アイコンが完成します。

一度アピアランスを分割してしまうと、後から「やっぱりモチーフを右に5px動かしたい」となったときに、フォルダーの線がすでにくり抜かれてしまっているため修正が非常に困難になります。

そのため、分割を実行する前の「いつでも再編集できる状態」のデータのバックアップを、別レイヤーやアートボード外に残しておくことで、仕様変更にも一瞬で対応できます。

style

reading width, s spacing

3．アートワークの反転は「線と面」を再構成する

最後に3問目の振り返りです。

私が考える答えは「B」でした。

近年、スマートフォンやアプリの「ダークモード」が普及したことで、ロゴやアイコンを暗い背景用に最適化する「リバーサル（反転）処理」の作業が生じています。

しかし、ロゴやキャラクター、アイコンを暗い背景に載せるときは、単純にカラーを反転するだけでは不自然になってしまうことがあるので注意が必要です。

左の作例では、黄色の背景の上に青いトラが配置されています。

この配色をそのまま反転すると、Aのようにトラの大部分が黄色になり、線や模様の見え方が元の印象と大きく変わってしまいます。

一方Bでは、元の印象を保つために、単純なカラー反転ではなく、「線として見せたい部分」と「面として見せたい部分」を整理しながら再構成しています。

このように、ダークモードのような暗い背景にアートワークを配置する際は、背景色とモチーフ色を入れ替えるだけではなく、アートワーク内部の抜きや重なりを調整し、反転後も自然に見えるように処理する必要があるのです。

style

reading width, l spacing

Illustratorのアピアランスを使った「リバーサル処理」の手順

暗い背景でもモチーフの印象を損なわないフチ付きのデザインを作る際、オブジェクトを直接パスファインダーでバラバラに分解してしまうと、後からの色変更や修正が難しくなります。

そこで、元のデータを残したまま、暗い背景に映える美しいフチを生成できるアピアランス効果を使ったアプローチをご紹介します。

style

reading width, m spacing

【手順1】色を変更してグループ化し、アピアランスの効果を適用

まずはモチーフ部分の色を、背景上で見せたい色に変更します。

作例では、トラの色を黄色に変更し、グループ化します。

次に、グループを選択した状態で、「アピアランス」パネルのメニューから「新規塗りを追加」し、追加したその塗りに対して以下の2つの効果を適用します。

「パス」＞「パスのアウトライン」
「効果」メニューの「パスファインダー」＞「合流」

これにより、線が塗りに変換され、重なり合った部分が整理されます。
そして、同じカラーで隣り合うオブジェクトは結合されます。

style

reading width, s spacing

【手順2】「中マド」でシルエットを抽出し、「オフセット」でフチを与える

続いて、「効果」メニューの「パスファインダー」＞「中マド」を実行し、「内容」の下に移動します。

これにより、元のオブジェクトの領域のみが塗りで設定したカラーになります。

最後に「塗り」を選択し、「効果」メニューの「パスのオフセット」を実行し、全体にフチを与えます。

元のパスデータを保ったまま、外側に美しい境界線が施されたリバーサル（反転）アートワークが完成します。

単に色をひっくり返すだけでなく、アピアランスの効果を使ってリバーサル処理することで、元のデザインの世界観を壊さずにダークモードへ最適化できるようになりますので、ぜひ活用してみてください。

style

reading width, s spacing

まとめ：UI・アイコンデザイン処理で意識したいポイント

今回は、UI・アイコンデザインを扱ううえで意識しておきたい視点と、それをIllustratorで実現するためのテクニックを紹介しました。

最後に、今回のノウハウをまとめます。

style

reading width, l spacing

1．線画アイコンの拡大縮小は全体の比率をキープしよう

線画のアートワークを縮小・拡大する際は、デザインの「印象」を崩さないために、環境設定（または変形パネル）の2つのオプションを意識しましょう。

「線幅と効果を拡大・縮小」
「角を拡大・縮小」

style

reading width, m spacing

基本のセオリー

アイコンの黄金比やキャラクターの印象を保つため、基本的には両方とも「オン」にして作業します。

style

reading width, xs spacing

2．モチーフを重ねるアイコンは「ネガティブスペース」で視認性を高めよう

フォルダーアイコンに「時計」や「＋」「検索」など別のモチーフを重ねる場合、視認性を高めるためにネガティブスペース（隙間・切り欠き）を設けるのがセオリーです。

style

reading width, m spacing

基本のセオリー

後からの位置微調整や仕様変更に耐えられるよう、すぐにアピアランスを分割せず、「パスのアウトライン」＋「パスファインダー（合流）」効果を組み合わせた非破壊アプローチで作成します。

最終出力の直前でデータを整理（分割・クリーンアップ）し、調整前のアートワークをバックアップとして残す癖をつけましょう。

style

reading width, xs spacing

3．アートワークの反転は「線と面」を再構成しよう

明るい背景（ライトモード）から暗い背景（ダークモード）へアートワークを反転させる際、単純な「カラー反転」は禁物です。

style

reading width, m spacing

基本のセオリー

単に色を入れ替えるだけでは、陰影のロジックが壊れて不自然（ホラー映画のライトアップのよう）になります。

「前景色・背景色・線の役割」を脳内で一度分解し、必要に応じて「外側に一回り太い境界線（オフセット）を追加する」などの再構成を行うことで、視認性と美しさを両立させます。

これらのテクニックは、自分自身の作業スピードを上げるだけでなく、「他のデザイナーや開発者がデータを受け取ったときに、最も扱いやすいデータ」を作るための優しさでもあります。