図像学の超簡単ガイド

カスタムアイコンをデザインするのに平均してどれくらい時間がかかりますか？

数分？ 10分？ より長いです？ 10分以内に10個の素晴らしいアイコンを作成する方法を紹介したとしたらどうでしょうか。

図像学は、ブランドの視覚言語に追加されるコミュニケーションの形式であるため、カスタムアイコンセットは、単純で一般的なものよりも意味があり、魅力的です。 ほとんどのデザイナーは、カスタムアイコンの作成方法をわざわざ学ぶことはありません。これは、主に、それが学習キューに追加するもう1つのコースだからです。

そこで私は、10分以内に図像学の基本を学ぶのに役立つ非常にシンプルなガイドの作成に着手しました（つまり、それを意味します）。

カスタムアイコンを作成できるようになると、プロジェクトの複雑な形状の作成を開始するためのまったく新しい世界が開かれ、他の群衆からあなたを区別し、デザイナーとしての競争力を得ることができます。

もともと、私はMorgan Allan KnutsonからのこのGIFによってこのガイドを作成するように促され、数秒で位置情報サービスアイコンを作成する方法を示しました。 私はそれがさわやかで、スマートで、そして速いと思いました。 カスタムアイコンを作成するプロセスをわかりやすく説明し、それがいかに簡単であるかを示します。 アイコンは、実際には、正方形、三角形、円などの基本的な形状の組み合わせまたは変形から生じる可能性のある幾何学的形状です。 ロゴやアイコンのデザインの経験則は、物事をシンプルに保つことです。

この記事の目的は、単純な形状のみを使用して、それぞれ10秒以内に10個のアイコンを作成することです。

重要な注意：この投稿ではAdobe Illustratorを使用しますが、SketchまたはFigmaを使用しても同じ結果を得ることができます。 図形のポイントを追加または削除する必要があるときはいつでも、「ペンツール（P）」を使用します。 ポイントの選択と移動は、「直接選択ツール（A）」を使用して行います。

目のアイコン

図のように、色を変えながら最大から最小に向かって4つの円を中央揃えにします。 最大の円で、後ろに向かって、左と右のポイントを中心から引き離します。 最後に、最小の内側の円を次の円の端に移動して、虹彩に照明効果を作成します。

ヒント：白い円を使用する代わりに、（パスファインダーパネルを使用して）2つの円をそれぞれの下の円から差し引くだけです。 背景にきれいな結果を作成します。

矢印アイコン

最初の正方形のエッジにこれらの余分なポイントを追加する場所がすべてです。 ヒント：別の方法として、矢印のような形の細い線を描くこともできます。

バッテリーアイコン

ストロークで1つの正方形を使用し、塗りつぶしで2つの正方形を使用します。 ストロークの形に1つの塗りつぶされた正方形を含め、2つ目の正方形を外側に置いてバッテリーの先端を形成しながら、プロポーションで遊ぶだけです。

ヒント：視覚的なバランスを維持するために、ストロークの太さとパディングを試してみてください。

箇条書きアイコン

単純な正方形から始めます。 右に1回複製します。 長い長方形に変形します。 全体を選択し、1つの正方形のサイズのスペースを挟んで2回複製します。

ヒント：正方形を円に置き換えて、より柔らかな外観を作成します。

クラウドアイコン

3つの異なるサイズの円を描きます。 2つの最小の円を下に揃えてベースを作成し、その間に最大の円を高い位置に配置します。 小さな円の1つを変形して、雲の底を作成します。

ヒント：さまざまな円のサイズを使用して、より有機的な外観のクラウドを取得します。

フォワードプレイアイコン

長い長方形を描きます。 左端の中央にポイントを追加し、上下のポイントを削除します。 三角形が1つできたので、その形状を右に1回複製して、アイコンを完成させます。

ヒント：これをさらに高速に行うには、正方形ではなく三角形から始めます。

じょうごアイコン

長い長方形から始めます。 左端と右端の中心に点を追加します。 これで、上端を水平方向に伸ばすと完了です。

ヒント： 2つの正方形を端から端まで配置し、最上部の端を水平に伸ばすだけです。

再生/一時停止アイコン

平行な3つの長い長方形から始めます。 最も幅の広い長方形を三角形に変形します。

ヒント：または、1つの三角形を描画し、その後に2つの平行な長方形を描画します。

位置矢印アイコン

これは、モーガンの位置情報サービスアイコンのリミックスです。 正方形を1つ描いてから、左下の点を対角線方向に引き、反対の点を通過するまで上に移動します。

ヒント： Illustratorでは、Shiftキーを押しながらポイントをドラッグすると、対角線の角度を正しく保ちながら対称性を保つのに役立ちます。

位置ピンアイコン

大きな円の内側の円をノックアウトします（パスファインダーパネルを使用）。 一番下の点を真下にドラッグし、形成された角度を鋭くします。「ペンツール（P）」に切り替え、「Shift」キーを押しながらその点をクリックします。

ヒント：その転換点で丸みを帯びた角を使用して、外観を柔らかくします。点が選択されている間に、[変換]オプションパネルで[角の半径]の値を調整します。

サウンドアイコン

じょうごのアイコンと同じですが、90度回転しています。

ヒント：じょうごアイコンをコピーして貼り付け、時計回りに回転させます。

波のアイコン

直線を描き、その長さ全体に等距離で点を追加します。 変化するポイントを下にドラッグし、すべてがスムーズになるまで、すべてのコーナーを最大に丸めます。

ヒント：ラインのヒントを丸めて、さらに滑らかな外観にします。

Toptalアイコン

これはボーナスアイコンです。

十分な太さのストロークで正方形を描きます。 はさみツールを使用して、右上と左下のポイントをカットします。 これにより、形状が2つに分割されます。 下半分を上に動かし、全体を反時計回りに45度回転させます。

ヒント：線の太さ、およびロゴの内側に形成される空白に注意してください。

アイコンは1,000語の価値があります。

画像は千の言葉に値するとよく耳にします。 これはアイコンに非常に当てはまります。アイコンは長い文や単語を置き換えて、視覚的なスペース、使いやすさ、美しさを最適化します。 シンプルで効果的なアイコンのセットを作成する方法を知ることは、大いに役立ちます。 そして、基本的な形状のセットを観察して利用することで、それがいかに迅速かつ簡単にできるかを見てきました。

要約すると、図像学の10の主要なルールは次のとおりです。

• 象徴的で意味のあるものにします。
• あなたはそれを聞いたことがあります：それを単純にしてください。 スタイルは読みやすさを損なうべきではありません。
• 意図的かつ思慮深くしてください。 作成する前に考えてください。
• さまざまなサイズで機能することを確認してください。
• 均一性を念頭に置いてください。
• ベクトルのみお願いします！
• 必要な場合にのみ色を使用し、慎重に行ってください。
• 基本的なジオメトリを知るのに役立ちます。
• デザインされたアイコンが全体的なデザインに役立つことを確認するために「アフォーダンス」を考えてください。
• 図像学は普遍的であるべき言語です。
• ボーナス：アルファベットは26個のアイコンのセットです。

一緒に遊んで、10秒以内に何ができるか見てみましょう。

•••

Toptal Designブログでさらに読む：

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法