Q.

グラデーション背景にアイコン＋テキストのアイキャッチ画像をAutoItとImageMagickで作る方法を教えてください。アイコンはグーグルのフォントから流用することも可能ですか？

A.

このようなアイキャッチ画像（グラデーション背景にアイコン＋テキスト）をAutoItとImageMagickで作る方法は以下の通りです。
Googleフォントのアイコン（Material Icons）を流用することもできます。

🔧 手順概要

  1. 背景画像の作成（グラデーション）
  2. アイコンフォント（GoogleのMaterial Iconsなど）を使ってSVG化
  3. ImageMagickでアイコンとテキストを合成
  4. AutoItで自動化スクリプトを書く

✅ ステップ別詳細

① グラデーション背景の作成（ImageMagick）

magick -size 1735x768 gradient:#2EB39A-#A3D2B0 background.png

これは、左から右に #2EB39A → #A3D2B0 のグラデーション背景を作成します。

② アイコンをSVGで取得

  1. Google Fonts → Material Icons
  2. 例：「home」アイコンをSVGでダウンロード
  3. ファイル名例: home.svg

※このSVGをImageMagickで使うためには、事前にconvertでPNGに変換しておくと便利です。

magick home.svg -resize 128x128 home.png

③ テキストと画像の合成（ImageMagick）

magick background.png \
  home.png -geometry +803+150 -composite \
  -gravity center -font Arial -pointsize 72 -fill white -annotate +0+150 "WebSite" \
  output.jpg
  • +803+150 はアイコンの位置調整
  • +0+150 はテキストの下方向オフセット
  • -font に適当なフォントを指定（Google FontsのProduct Sans等に変えることも可能）

④ AutoItで自動化する例

RunWait(@ComSpec & " /c magick -size 1735x768 gradient:#2EB39A-#A3D2B0 background.png", "", @SW_HIDE)
RunWait(@ComSpec & " /c magick home.svg -resize 128x128 home.png", "", @SW_HIDE)
RunWait(@ComSpec & " /c magick background.png home.png -geometry +803+150 -composite -gravity center -font Arial -pointsize 72 -fill white -annotate +0+150 ""WebSite"" output.jpg", "", @SW_HIDE)

✅ 注意点・補足

  • ImageMagickのバージョンにより、magick or convert を使用します。
  • WindowsでGoogleフォントを使いたい場合：
    • .ttf ファイルをダウンロードし、fontsフォルダに入れたうえで、-font "fonts/ProductSans-Regular.ttf"のように指定可能。
  • SVG → PNGへの変換時にアンチエイリアスが崩れることがあるので、高解像度にしておくのも手です。

ご希望あれば、AutoItの完全スクリプト化や、複数パターンの出力バリエーションにも対応します！必要ですか？

Q.

fontsフォルダに入れたGoogleフォントから文字を選んで指定するにはどうすればいいですか？

A.

いい質問です！ImageMagickでGoogleフォント（.ttfファイル）を直接指定して文字を描画するには、次のようにします👇

✅ フォントファイルの準備

たとえば、fonts/ProductSans-Regular.ttf を使用する場合：

プロジェクトフォルダ/
├── fonts/
│   └── ProductSans-Regular.ttf
└── script.bat や AutoItスクリプト

✅ ImageMagickでフォントファイルを直接指定する方法

magick -background none -fill white -pointsize 72 \
  -font "fonts/ProductSans-Regular.ttf" \
  label:"WebSite" text.png

または、画像に直接描画する場合：

magick background.png \
  -gravity center \
  -font "fonts/ProductSans-Regular.ttf" \
  -pointsize 72 -fill white \
  -annotate +0+150 "WebSite" output.jpg

✅ AutoItからフォントファイルを使う例

RunWait(@ComSpec & " /c magick background.png -gravity center -font ""fonts/ProductSans-Regular.ttf"" -pointsize 72 -fill white -annotate +0+150 ""WebSite"" output.jpg", "", @SW_HIDE)

✅ より詳細な文字指定（Material Symbolsなど）

Google Fontsの「Material Symbols」などアイコンフォント系は、実際の**文字コード（例: \uE88A）**で指定します。

例：「home」アイコン（U+E88A）の場合：

magick -background none -fill white -pointsize 100 \
  -font "fonts/MaterialSymbolsOutlined-Regular.ttf" \
  label:"\uE88A" icon.png

ただし、label:では Unicode エスケープが使えない場合があるので、コマンドプロンプトでは .miff や .svg 経由が安定します。
回避策や、明示的にUTF-8で書いたファイルから読み込む方法もあります。

🔍 ヒント：使える文字を調べる方法

  • .ttf ファイルは FontForge や Character Map で中身を確認できます。
  • また、Google Fontsの公式ページでも文字の一覧やUnicodeが表示されます。

必要なら、指定フォントから選べる文字一覧を自動でリスト化する方法もありますよ（Pythonスクリプトなどで）。必要ですか？