スタンプメーカー

スタンプメーカーでは、サイトのスタンプ画像に自分の文字を加えられます。画像のバージョンを選び、文字のレイヤーを 1 つ以上配置し、組み合わせた結果を PNG としてダウンロードします。ツールはブラウザー内で動き、何もインストールする必要はありません。

最初のスタンプを作る

1. スタンプを選ぶ を開きます。
2. 選択画面で日本語、英語、繁体字中国語、簡体字中国語、韓国語、または 文字なし を選びます。スタンプのカードをクリックするとそれを使い、選択画面が閉じます。
3. 文字 に短い文を入力します。書字方向、フォント、サイズ、色を選びます。
4. プレビューで文字をドラッグして配置します。正確な位置、回転、縁取りは 位置・縁取り で設定します。
5. 書き出しサイズ を選び、PNGを書き出す をクリックします。

スマートフォンでは、画像の選択とプレビューは表示されたまま、編集パネルだけがスクロールします。残りの操作はパネルの中をスクロールしてください。編集はこのブラウザーにローカルの下書きとして保存されます。ツールを開き直すと画像と文字のレイヤーが戻り、PNG をダウンロードすると組み合わせた見た目が保存されます。

画像とその言語を選ぶ

新しく作るときは 文字なし から始まります。言語のバージョンを選ぶとき、既定はページの言語に従い、自分で選んだ言語はそのまま保持されます。選択画面は右上のボタンか Escape で閉じます。

言語と 文字なし は、スタンプを選ぶ の中の同じセレクターの選択肢です。これは編集する画像を選ぶもので、画面の言語は変わりません。たとえば画面は中国語のまま、英語のスタンプを使えます。

カードには実際の画像のバージョンが表示されます。言語をまたいで共通の画像もあり、それらは元のアートワークのままです。文字なし には確認済みの利用可能な画像が並ぶため、言語ごとの一覧と内容が異なることがあります。元の文字入りの画像に戻すには、別の言語を選んでください。

文字を加えてもサイトの元画像はそのままです。文字のフィールドで編集するのは新しく加える文字です。元の文字を置き換えたい場合は、文字なしの画像を選ぶか、文字の背景を使ってください。

画像はサイトのスタンプカタログから取得します。画像のアップロードは受け付けません。ローカルのフォントは フォント の横のコマンドで読み込めます。

画像と文字のレイヤーを扱う

文字のレイヤーはそれぞれ、文、フォントと使える太さ、色、縁取り、位置、回転、書字方向、任意の背景を持ちます。画像の別々の場所に文を置くときは、レイヤーを分けてください。

操作	内容
レイヤー	番号と文でレイヤーを選ぶ。一覧は前面のレイヤーから並ぶ。
文字を追加	現在の文字のスタイルで空のレイヤーを作って選ぶ。背景はオフ。
レイヤー操作 → レイヤーを複製	選んだレイヤーの文とスタイルを背景も含めてコピーする。元と分けやすいよう少しずらして置く。
レイヤー操作 → レイヤーを削除	選んだ文字のレイヤーを消す。文字のレイヤーは最低 1 つ残る。
一つ前面へ / 一つ背面へ	選んだレイヤーの描画順を 1 つ動かす。
選択したレイヤーをリセット	文はそのままで選んだ文字のスタイルを戻す。または画像を中央、拡大率 100%、回転 0 に戻す。

画像を移動、回転、拡大縮小するには、レイヤー で スタンプ画像 を選びます。画像の拡大率は 10%〜300% で、100% は 512 ピクセル四方のキャンバス内での実際の元の寸法です。小さな元画像は透明な余白付きで中央に置かれます。画像は文字のレイヤーの間で前後に動かせ、プレビューと書き出す PNG は同じ順序を使います。画像のレイヤーは 1 つ、文字のレイヤーは最低 1 つ残ります。

エディターは文字のレイヤーを 12 個まで、各文字のフィールドを 500 文字まで扱えます。プレビューで文字の領域をクリックするとそのレイヤーを選んでドラッグできます。領域が重なっているときは上のレイヤーがクリックを受け取るので、下のものは レイヤー で選んでください。

正確に配置するには 位置・縁取り を開きます。水平・垂直の位置は画像キャンバスに対する割合、回転は度で指定します。プレビューにフォーカスがある状態で矢印キーを押すと選んだレイヤーが 1 ポイント、Shift を押しながらだと 5 ポイント動きます。中央に配置 でアンカーを中央に置きます。

横書きと縦書き

書字方向の操作には 横書き、縦書き ←、縦書き → があります。矢印は列の順序を表し、左向きは右から、右向きは左から始まります。

縦書きでは改行で次の列に移ります。長い列は次の列に折り返します。CJK の文字は正立し、ラテン文字の並びは横倒しになり、1〜2 桁の ASCII 数字は 1 マスに正立して収まることがあり、句読点は列に合わせて位置や向きを変えます。レイヤーごとに方向を変えられます。

プレビュー、ポインターでの選択、PNG は同じ文字組みを使います。特に複数の文字体系を混ぜるときや長い文のときは、プレビューを見ながらフォントサイズと位置を調整してください。

フォントとキャラクターの色

フォント からフォントを選び、読み込みが終わってから書き出してください。使えるフォントの用途は次のとおりです。

フォント	用途と使える太さ
YurukaStd	参考にしたセカイのスタンプツールで使われるフォント。用意されているのは UB、太さ 900。
SSFangTangTi	セカイのツールの尚首方糖体。用意されている太さは 400。
Roboto	可変の太さ 100〜900。
Noto Sans SC / TC / JP / KR	地域別の CJK ゴシック体。可変の太さ 100〜900。
Noto Serif SC / TC / JP / KR	地域別の CJK 明朝体。可変の太さ 200〜900。
ゲーム内 UI · Pretendard SemiBold	Our Notes のゲーム内 UI の書体。実際の太さは 600。

可変フォントでは 太さ の操作が使え、最も太い値から始まります。固定のフォントは用意された太さのままです。収録文字はフォントによって異なるので、文字が欠ける場合は適した地域のフォントを選んでください。

セカイのフォントは参考にしたツールの書体を示し、Pretendard はゲーム内 UI の書体を示します。Our Notes の元のスタンプの文字は画像の一部で、作成に使われたフォントは特定されていません。どちらの名前も、その焼き込まれた文字の書体を示すものではありません。

フォントの欄の横にある ローカルフォントを読み込む で、端末の WOFF2、WOFF、TTF、OTF を読み込めます。読み込んだフォントはファイル名で表示され、現在のページで使われます。フォントファイルは 1 つ 32 MiB までです。そのフォントを使う下書きを復元するときは、ファイルを読み込み直してください。

文字色 には、名前、立ち絵、実際の色見本を持つキャラクターのプリセットがあります。スタンプに関連するキャラクターの色が最初の色になることがあり、一覧のどのキャラクターでも カスタム色 でも選べます。色の選択は選んだ文字のレイヤーごとです。

既存の文字を文字の背景で隠す

選んだレイヤーの 位置・縁取り → 文字の背景 を開き、背景をオンにします。キャラクター色のプリセットかカスタムの背景色を選び、次を調整します。

• 背景の不透明度: 100% で不透明になり、低くすると画像が透けます。
• 背景の余白: 実際の文字とその縁取りの外側の余白。0 から始まり、縁にぴったり合います。
• 背景の角丸: 四角形の角の丸み。

背景はそのレイヤーの位置と回転に従います。元の文字の上に置き、隠したい範囲を覆っているか確認してください。これは文字のレイヤーの四角形で、下の元画像はそのままです。背景なし に戻すと四角形はなくなります。

縁取りの色と太さも同じサブパネルにあります。プレビューの選択ガイドは編集の補助で、ダウンロードする PNG には入りません。

ローカルの下書きを保存・復元する

編集すると、選んだスタンプ、画像の言語、画像の位置と拡大率、文字のレイヤーのスタイルと描画順がこのブラウザーに保存されます。ツールを開き直し、リソースの読み込みを待つと下書きが戻ります。下書きのメニューから、最後に保存した内容の復元や、ローカルの下書きの消去もできます。

下書きはこの端末のブラウザーに属します。サイトのデータを消去すると消え、ほかの端末とは同期しません。フォントがないという通知が出たら、ローカルのフォントファイルを読み込み直してください。元のスタンプのリソースが利用できない場合は、画像の通知を確認して別のスタンプを選んでください。文字のレイヤーは編集できるまま残ります。PNG の書き出しは組み合わせた画像を、下書きは編集できる設定を保存します。

正方形の PNG を書き出す

書き出しサイズ は 128 × 128、256 × 256、384 × 384、512 × 512 ピクセルです。どの組み合わせも同じ正方形のキャンバスを使います。元画像の寸法にかかわらず、最大のダウンロードは 512 × 512 です。

346 × 398 の元画像は、512 × 512 のキャンバスの中央にその大きさで置かれ、周りは透明な余白になります。大きな元画像はキャンバスに収まるように縮小されます。組み合わせるときに 画像の拡大率 で意図的に拡大できますが、拡大しても元の細部は増えません。

小さいサイズで書き出すと、画像、文字、縁取り、背景を含む全体が縮小されます。書き出しは開始時点の全レイヤーの設定と順序を使い、透明部分を保ち、選択ガイドは含めません。ダウンロードした PNG には組み合わせた画像が保存されます。

例: 見出しと添え書き

1. スタンプを選ぶ で利用できる文字なしのスタンプを選びます。
2. 最初のレイヤーに短い横書きの見出しを書きます。フォントとキャラクター色を選び、キャラクターの上にドラッグします。
3. 文字を追加 で添え書きを入力し、縦書き ← を選びます。最初の見出しを変えずにキャラクターの横に置きます。
4. 文が重なったら、レイヤー で目的のレイヤーを選び、一つ前面へ か 一つ背面へ を使います。
5. メインの画像は 512 × 512 px で、小さな PNG が必要なアプリ向けには小さいサイズで書き出します。

調整が必要なとき

状況	対処
画像が読み込めない	再試行 を使う。選択画面を開き直して別の画像を選んでもよい。
フォントが読み込めない	再試行するか別のフォントを選ぶ。フォントの読み込みが終わると書き出しが有効になる。
文字が欠ける・違って見える	その文字体系を収録したフォントを選ぶか、適したローカルフォントを読み込む。
文字が画像の外にはみ出る	そのレイヤーを選び、サイズを小さくする、位置を調整する、または 中央に配置 を使う。
下の文を選べない	レイヤー から選ぶか、レイヤーの順序を変える。
元の文字が見えたまま	文字なしの画像を選ぶか、元の文字の上に不透明な文字の背景を置く。
もっと大きいダウンロードサイズがない	最大サイズの 512 × 512 px を選ぶ。