mcpField
L
layer-typography

layer-typography

github.com/layeraiその他70 回インストール今日更新
リポジトリ

layer-typography について

layer-typographyは、正確な文言やブランドフォントが必要な画像制作向けのLayerスキルです。文字と画像を分けて扱うため、後からの修正や多言語での再利用ができます。

主な機能

  1. 01正確な文字のレンダリング
  2. 02アップロードしたブランドフォントの使用
  3. 03文字と画像のレイヤー合成
  4. 04配置・アンカー・回転の指定
  5. 05画像内の既存テキストの置き換え

活用シーン

  1. 01キービジュアルへの正確なタイトル追加
  2. 02ブランドフォントでの行動喚起文の設定
  3. 03ローカライズ版での画像再利用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/layerai/skills --skill layer-typography

インストール後、Claude Code で/layer-typographyを入力して読み込まれたか確認します。

詳細

レイヤータイポグラフィ

概要

画像モデルは単語を誤記することがあり、フォントファイルも使用できません。コピーを正確に表示する必要がある場合や、ブランド書体で組む必要がある場合は、生成せずに render_text で設定し、compose_image でアートに重ねてください。アートと文字は別々のファイルのままなので、コピーを変更するときは再生成ではなく再レンダリングで済み、同じアートをあらゆる言語で使用できます(layer-localization)。

この2つのツールは、検出するのではなく名前を直接指定します。Layer 独自の決定論的なファイル操作であり、モデルを実行せず、Creative Units も消費せず、見積もりも不要なためです。下地のアートは引き続き課金対象の生成であり、layer スキルの通常の見積もりゲートを通ります。

すべての文字表現がここで扱う対象とは限りません。render_text で設定できるのは、単色のフラットな文字です。シーンに描き込まれたように見せる必要がある文字(彫刻された看板、ネオン管、質感のあるペイント文字のタイトルなど)は生成で扱い、プロンプトの作成方法は layer-image で説明しています。

ここで挙げた関連スキルが利用可能なスキルにない場合は、ユーザーにインストールを依頼してください(npx skills add layerai/skills --skill <name>)。無人で処理を続ける場合は、ツールのスキーマを確認して、不足している旨を明記してください。

クイックリファレンス

必要なもの方法
正確なコピー、ブランドフォント、後から編集可能な状態render_text を実行し、アートの上に compose_image で配置します
イラストの一部として描かれた文字生成(layer-image)
画像にすでに埋め込まれた文字を変更するfilter.use_case: "edit_text" を指定して list_base_models を使用します
ユーザーのディスク上にあるブランドフォントrequest_file_upload_url を実行し、file_id を font_file_id として渡します
公開 URL にあるブランドフォントupload_file を使用します
フォントファイルがない場合font_family に標準フォントまたは Google Fonts のファミリー名を指定します

文字の設定

何よりも先にブランドフォントをアップロードしてください。font_file_id は font_family より優先され、font_weight(100 から 900 まで 100 刻み。400 がレギュラー、700 がボールド)はそのファイル内の書体を選び、イタリック体には italic を指定します。ファイルがない場合、font_family は名前で指定したファミリーにフォールバックします。見た目が似ていても、ブランドの書体とは異なります。その場合はユーザーに伝えてください。

キャンバスのサイズ(width、height。それぞれ最大 4096)は、最終画像に配置したときにほとんど拡大縮小せずに済むよう、テキストが占めるボックスに近い大きさにしてください。小さく設定した文字を拡大するとぼやけ、極端に大きく設定した文字を縮小すると太さが失われます。

テキストが収まらない場合は、必要なサイズを示して拒否されます。そのサイズを確認し、ボックスを大きくするか、font_size を小さくするか、コピーを短くするかを判断してください。収まるまでフォントを黙って縮小しないでください。小さくすることで収まったタイトルは、要件を満たせていません。

2種類の配置設定は、それぞれ異なる役割を持ちます。horizontal_alignment と vertical_alignment はキャンバス上でブロックを配置し、text_align は複数行ブロック内の行を揃えます。改行すると新しい行が始まり、長い行はスペースで折り返されます。line_height で調整できるのは行間だけです。

background_color を設定しない限り、キャンバスは透明です。#RRGGBBAA を指定すると、文字の背後に半透明のプレートが付きます。ごちゃついたアート上でコントラストを確保する最も簡単な方法です。

単色のフラットな文字には、アウトラインもシャドウもありません。ドロップシャドウを付けるには、同じテキストを暗い色と文字色の2色でそれぞれレンダリングし、compose_image で重ねます。暗い色のコピーは数ピクセル下および右にずらします。

配置

compose_image は最大 16 個のレイヤーを下から順に重ね、1 枚のフラットな PNG にします。キャンバスのサイズはデフォルトで最初のレイヤーの画像サイズになるため、アートを最初に置くと、キャンバスのサイズもそれに合います。

  • アンカーは、キャンバスの端からのピクセル単位のオフセットです。left と right を両方設定すると、ボックスはその間に広がります。サイズがわからないテキストを角に固定したり、中央に配置したりするには、4 辺すべてをマージン位置にアンカーし、horizontal_alignment と vertical_alignment を設定します。width と height はレイヤー上で anchors の隣に指定し、anchors の中には指定しません。
  • resize_strategy:テキストやロゴには、歪ませずにボックスに収まるよう拡大縮小する fit_and_pad を使います。全面に広がる背景には fit_and_crop を使います。文字に stretch を使ってはいけません。
  • 回転ではレイヤーを 90 度、180 度、または 270 度回転します。縦書きの背表紙テキストや、カードの反対側の角に上下逆さまに配置する番号などに使えます。

読みやすさ

  • フル解像度ではなく、実際に表示されるサイズで合成画像を確認します。ストアアイコンのラベルやモバイルのボタンは、キャンバスの一部のサイズで読まれます。
  • アートを生成する段階で配置スペースを確保します。タイトルを載せる場所として、落ち着いたディテールの少ない領域を指定します。画面内で最も情報量の多い部分にテキストを重ねるにはプレートが必要ですが、プレートは妥協案です。
  • すべての端から十分な余白を取ります。プラットフォーム側でトリミングされたり、独自の UI が重ねられたりするため、端に置いた CTA は真っ先に失われます。
  • 書体を 1 種類に絞り、ウェイトとサイズで階層を付けると、意図してデザインされたように見えます。3 種類使うと、身代金要求のメモのように見えます。

画像内の既存テキストを変更する

既存のアートに文字が埋め込まれている場合は、list_base_models を use_case: "edit_text" でフィルタリングし、最初の結果を選んで、プロンプトに置き換える文字列を正確に記述します。出力を一文字ずつ確認します。2 回続けてスペルミスが発生した場合は、代わりに古いテキストを消してクリーンなプレートにし(erase_object または inpainting モデルを使用)、そのプレートに render_text と compose_image で文字を載せます。

実例

「このキーアートにブランドフォントでタイトル『Ember Vale』を入れ、その下に『Pre-register now』と入れてください。」

  1. キーアートは前回の実行で生成したものなので、file_id(1920 x 1080)があります。フォントはローカルの .otf ファイルです。request_file_upload_url を使って 2 段階のアップロードを完了し、file_id を保持します。
  2. タイトルには render_text を使います。font_file_id、font_weight: 700、font_size: 160、color: "#FFF4E0" を指定し、キャンバスを 1200 x 240 にします。拒否された場合は、必要なサイズを確認してキャンバスの幅を広げます。
  3. 同じタイトルを #1A0F08 で render_text し、影にします。
  4. CTA には render_text を使います。font_size: 56、半透明のプレート用に background_color: "#000000B3" を指定し、キャンバスを 640 x 112 にします。
  5. 4 つのレイヤーを下から順に compose_image します。アンカーなしのキーアート、top: 124、left: 364、幅 1200、高さ 240 でアンカーした影、その上に top: 120、left: 360 に配置したタイトル、bottom: 96、left: 640、幅 640、高さ 112 でアンカーした CTA です。各テキストレイヤーには fit_and_pad を指定します。
  6. ユーザーが納品するサイズで結果を確認します。ここではどの手順でも Creative Units を消費していないため、見積もりは不要でした。報告時にその旨を伝えます。

よくある間違い

  • スペルミスを修正するために、テキストを設定せずに生成をやり直す。
  • ユーザーに伝えず、指定されたブランドフォントを別の書体に置き換える。
  • キャンバスと最終的なテキストボックスのサイズが大きく異なるため、文字がぼやけたり細くなったりする。
  • 拒否されたテキストを収めるために font_size を小さくし、ボックスや文言のサイズを調整しない。
  • render_text でアウトライン、グラデーション、グローを付けられると思い込む。設定できるのは単色のみです。
  • テキストレイヤーに stretch を指定し、字形を歪ませる。
  • 画面の端や、アート内で最も情報量の多い領域にテキストを配置する。
  • 後でアセットをローカライズする予定なのに、テキストをアートに統合してしまう。

コメント