フロントエンドエンジニア必見! 生成AIを用いたアイコンの作成方法

1. 背景

フロントエンド開発を行う際に、アイコンや画像を使いたい場面が度々あり、素材不足に悩んでいました。
しかしながら、著作権フリーの画像は汎用性がなかったり、読み込みに時間がかかってしまいUI/UXに課題がありました。
そこで生成AIの力を借りてアイコンを作成してみたところ想像以上のクオリティで、是非共有したいと思い本記事を執筆しました。

作成したアイコンによる著作権の侵害についての責任は一切負いません。
著作権に注意して作成&使用してください

本記事で作れるようになるアイコンの例

2. 本記事の対象

• フロントエンド開発で画像の素材に困っている方

• Reactを用いて開発を行っている方(他のフレームワークでも同様の方法で実装出来ると思うので参考になると思います。)

使用する技術スタック

• 言語
  • TypeScript
• フレームワーク(ライブラリ)
  • React
• CSSフレームワーク
  • Tailwindcss

目次

• 1. 背景
• 2. 本記事の対象
• 3. 実装
• 4. アイコンの生成方法
• 5. さいごに

3. 実装

• インポートするファイルのパスは各自設定してください
• Next.jsを使用しているため命名規則が一部異なります

実装するファイル

• type.ts
  • アイコンの型を設定するファイル
• gitHubIcon.tsx
  • 今回作成するファイル
• page.tsx
  • 作成したアイコンを呼び出すファイル

type.ts

• コンポーネントの大きさや色を設定を行います
• 自由に修正、拡張して下さい

type.ts

export const sizeStyle = {
  sm: "w-8 h-8",
  md: "w-16 h-16",
  lg: "w-24 h-24",
  xl: "w-36 h-36",
  "2xl": "w-48 h-48",
  "3xl": "w-64 h-64",
};

export const colorStyle = {
  white: "text-white",
  black: "text-black",
  red: "text-red-500",
  green: "text-green-500",
  blue: "text-blue-500",
  yellow: "text-yellow-500",
  gray: "text-gray-500",
  ash: "text-gray-300",
};

export type IconProps = {
  size: keyof typeof sizeStyle;
  color?: keyof typeof colorStyle;
  className?: string;
};

gitHubIcon.tsx

• SVG形式でアイコンを作成します
• このアイコンの生成方法は4. アイコンの生成方法で紹介します

gitHubIcon.tsx

import { IconProps, colorStyle } from "@/assets/icons/type";

const GitHubIcon = ({ size, color = "black" }: IconProps) => {
  return (
    <svg
      className={`${size} ${colorStyle[color]} font-semibold`}
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
    </svg>
  );
};

export default GitHubIcon;

page.tsx

• 作成したアイコンを呼び出して描画します
• 他にも家、便箋、アップロードのアイコンも作成してみました

SampleComponent.tsx

import GitHubIcon from "@/assets/icons/gitHubIcon";
import EmailIcon from "@/assets/icons/emailIcon";
import HomeIcon from "@/assets/icons/homeIcon";
import UploadIcon from "@/assets/icons/uploadIcon";

const SampleComponent = () => {
  return (
    <div className="mt-12 grid grid-cols-2 items-center justify-center gap-20">
      <div className="flex flex-col items-center gap-8">
        <GitHubIcon size="3xl" color="black" />
        <h1 className="text-5xl font-bold">GitHub Icon</h1>
      </div>
      <div className="flex flex-col items-center gap-8">
        <EmailIcon size="3xl" color="black" />
        <h1 className="text-5xl font-bold">Email Icon</h1>
      </div>
      <div className="flex flex-col items-center gap-8">
        <HomeIcon size="3xl" color="red" />
        <h1 className="text-5xl font-bold">Home Icon</h1>
      </div>
      <div className="flex flex-col items-center gap-8">
        <UploadIcon size="3xl" color="blue" />
        <h1 className="text-5xl font-bold">Upload Icon</h1>
      </div>
    </div>
  );
};

export default SampleComponent;

作成のイメージ画像

SampleComponent.tsxをスクリーンショットした画像です。

4. アイコンの生成方法

基本的には生成AIにプロンプトを投げるだけです。しかし、既存のアイコンのコードとサイズや色の設定の方法を統一させる必要があるため、サンプルのアイコンのコードを見せながら質問すると良いと思います。以下にプロンプトの例を提示します。

プロンプト例

使用した生成AI: ChatGPT-4o,

家のアイコンを作成して欲しい。
以下のコードを参考にコンポーネントを作成して下さい。

import { IconProps, colorStyle, sizeStyle } from "@/assets/icons/type";

const GitHubIcon = ({ size, color = "black" }: IconProps) => {
  return (
    <svg
      className={${sizeStyle[size]} ${colorStyle[color]}font-semibold}
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
    </svg>
  );
};

export default GitHubIcon;

生成AIの回答

以下は、家のアイコンを描画するコンポーネントの例です。このコンポーネントは、指定されたサイズと色を受け取り、家のアイコンを描画します。

typescript
コードをコピーする
import { IconProps, colorStyle, sizeStyle } from "@/assets/icons/type";

const HomeIcon = ({ size, color = "black" }: IconProps) => {
  return (
    <svg
      className={`${sizeStyle[size]} ${colorStyle[color]} font-semibold`}
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
    </svg>
  );
};

export default HomeIcon;

このように簡単にアイコンを作成することが出来ます。生成されたアイコンに不満があれば追加で要求すればある程度訂正してくれました。(なお、生成された家のアイコンは上記の画像のようなデザインです。)

5. さいごに

いかがでしたでしょうか?
個人開発でフロントエンド開発をする際によく起こる画像の素材不足はこの手法を使えば簡単にアイコンを作ることが出来ます。また、画像ではなくSVGタグで作成しているためUXも大幅に向上します。

非常に便利なので是非使ってみて下さい!(著作権に気をつけてね👀)