WordPressプラグインのフォト矢印工房AIちいちゃんとは？AIちいちゃんシリーズ

ブログに設定画面の画像を載せたのに、「どこを押すんだよ！」となっちゃったら、せっかくの説明がもったいないですよね。そこで、矢印を引いたり、「ここをクリック」と文字を入れたりして、読者さんが迷わない画像へ整えられるのがフォト矢印工房AIちいちゃんです。

Ver.0.4.0 HTML版は、ブラウザで画像を1枚ずつ開き、矢印・文字・囲み・モザイク・簡易スタンプを追加できる画像注釈ツールです。切り抜きと画像保存にも対応しています。WordPressへのインストールやAPIキーの登録は不要なので、説明画像を作ってからブログへアップロードする流れで使ってください。

Ver.0.4.0 HTML版の機能と仕様

主役は、読者さんへ注目してほしい場所を伝える矢印です。何でもかんでも飾るより、矢印と短い説明で「ここね！」と分かる画像を作りましょう。Ver.0.4.0では囲みの形が4種類になり、ピンで連続使用を切り替えられます。保存パレットも使うときだけ開く形になったので、編集画面を広く使えます。

項目	できること・仕様
画像の読み込み	PNG・JPEG・WebP。ファイル選択・ドラッグ＆ドロップ・クリップボードの画像貼り付けに対応
矢印	色・線の太さ・先端デザイン・先端サイズ・フチ・影を調整
先端デザイン	標準・シャープ・太めの3種類
文字	文字内容・改行・サイズ・色・太字・フチ・影を調整
簡易スタンプ	OK・NG・★・！・？の5種類。色・大きさを調整
囲み	四角・角丸四角・丸／楕円・直線。色・線の太さを調整。ピンONで連続使用
モザイク	ドラッグした範囲へモザイクをかけ、粗さを調整
切り抜き	選んだ四角い範囲で画像を切り抜く
配置後の修正	選択・移動・サイズ調整・削除。矢印は始点と終点も調整可能
操作履歴	戻す・やり直すに対応。通常の履歴は最大80件
保存パレット	上部の「画像を保存」で開き、「閉じる ×」で閉じる
保存形式	WebP・PNG・JPEG。初期設定はWebP
保存画質	高画質・標準・軽量。初期設定は標準
保存サイズ	元サイズ・長辺1200px・長辺800px。初期設定は元サイズ。小さい画像は拡大しない

初期設定は、矢印の線の太さ15・先端サイズ100％、文字サイズ56・太字ON・白いフチ15・影ONです。矢印のフチはOFFで、影はONになっています。文字のフチや矢印の太さは元画像の大きさで見え方が変わるので、実際に置いてから調整してください。

画像の編集はブラウザ内で行い、画像データを編集のために外部サーバーへ送信する仕組みはありません。HTML自体にも外部ライブラリの読み込みはありません。ただし、使うブラウザがこのツールの画像処理に対応している必要があります。

使い方① HTMLファイルを開いて画像を選ぶ

配布されたHTMLファイルをパソコンへ保存し、ブラウザで開きます。上部または中央の「画像を選ぶ」を押して、編集したい画像を選んでください。中央へ画像をドラッグ＆ドロップしても読み込めます。クリップボードに画像データが入っている場合は、貼り付け操作でも読み込めます。

このツールは画像を1枚ずつ編集します。複数ファイルをドロップしても読み込むのは先頭の1枚です。また、別の画像を読み込むと、それまでの矢印・文字・履歴はリセットされるため、画像を切り替える前に完成画像をダウンロードしてください。

スクリーンショットを撮って、そのまま工房へ貼り付ける

画面の説明画像を作るなら、ファイルを保存して探すより、撮った画像を直接貼り付ける方法が手軽です。先に工房をブラウザで開いておき、撮影したい画面へ切り替えてから、下のショートカットを使ってください。撮影はMac・Windowsの標準機能で、貼り付けて読み込む機能は工房に備わっています。

パソコン	範囲を選んで撮影	工房へ貼り付け
Mac	Control＋Shift＋Command＋4	Command＋V
Windows	Windowsキー＋Shift＋S	Ctrl＋V

Macでは4つのキーを同時に押し、十字のポインターで撮りたい範囲をドラッグします。Windowsではショートカットで切り取りツールを開き、四角形の切り取りを選んで範囲をドラッグしてください。画像がクリップボードに入ったら工房の画面へ戻り、それぞれの貼り付けキーで読み込みます。

Windowsで貼り付けられない場合は、撮影通知から切り取りツールを開き、画像をコピーしてから試してください。MacでShift＋Command＋4だけを使った場合は通常ファイル保存になるので、直接貼り付けるときはControlも忘れずに押しましょう。撮影方法の参考はAppleのスクリーンショット案内とMicrosoftの切り取りツール案内です。

貼り付けも新しい画像の読み込みとして扱われるため、編集中の矢印や文字はリセットされます。別のスクリーンショットを貼る前に、今の画像をダウンロードしてください。

使い方② 表示の大きさを合わせる

読み込んだ画像は、編集エリアに合わせた倍率で表示されます。大きすぎるときは上部の「画面に合わせる」を押すか、「表示」の倍率を変更しましょう。細かい位置を調整するときは大きく、画像全体のバランスを見るときは小さくすると作業しやすくなります。

「選択」ツールで何も選んでいないときは、右側の編集パネルが畳まれて画像表示が広がります。必要なら、その状態で「画面に合わせる」を押して表示を調整してください。保存欄は普段表示されず、保存するときだけ開きます。

ここで変わるのは、編集画面上の表示倍率です。50％表示にしたからといって、保存する画像が半分になるわけではありません。ダウンロードする画像の大きさは、保存欄の「長辺」で別に指定します。

使い方③ 矢印を引く

左の「矢印」を選び、画像上で矢印の始点から、指し示したい場所までドラッグします。離すと矢印ができ、その矢印の編集欄が表示されます。最初は一本引いてから、色・線の太さ・先端の大きさを調整してみましょう。

先端デザインは「標準」「シャープ」「太め」の3種類で、先端サイズは70〜250％、線の太さは1〜80で指定できます。背景に埋もれるときはフチや影も使えますが、まずは指したい場所がはっきり分かるかを優先してください。矢印が主張しすぎて、肝心のボタンを隠しちゃったら本末転倒ですからね（笑）。

一本描いたあとも矢印ツールは選ばれたままなので、続けてドラッグすれば次の矢印を引けます。編集した矢印の太さ・先端・色・フチ・影の設定は、次に描く矢印にも引き継がれます。毎回「矢印」を押し直したり、太さを戻したりしなくて大丈夫です。

使い方④ 文字を入れる

左の「文字」を選び、画像の文字を置きたい場所をクリックします。入力画面で文字を入れると配置され、編集欄で文字サイズ・文字色・太字・フチ・影を変更できます。「ここをクリック」「この設定をON」のように短く書けば、画像の中で読む負担も減らせます。

複数行にしたい場合は、配置後の「文字（改行もできます）」欄で改行を入れてください。文字サイズは10〜350、フチの太さは0〜30で調整できます。「白＋黒フチ」「赤＋白フチ＋影」「黒＋白フチ」のスタイルボタンも用意されています。

スタイルボタンを押すと、文字色だけでなくフチの色・太さ・影も切り替わり、フチの太さは5になります。初期値15をそのまま保つ操作ではないので、好みの見え方へ調整してください。文字の見た目の設定は次の文字にも引き継がれますが、入力する文章はその都度指定します。

使い方⑤ 囲み・モザイク・簡易スタンプを使う

四角・角丸四角・丸／楕円・直線を選ぶ

左の「囲み」を選ぶと、編集欄に4種類の形が表示されます。形を選び、色と線の太さを決めて、画像上をドラッグしてください。四角は設定項目のまとまり、角丸四角はボタン、丸／楕円は注目箇所、直線は下線や区切りに使えます。

丸／楕円は、ドラッグした範囲の縦横の長さで形が変わります。縦横が同じくらいなら丸、横長なら横長の楕円になるので、囲みたい場所に合わせて引いてください。直線はドラッグの始点と終点を結ぶため、斜めにも描けます。

ピンで連続使用を切り替える

「📌 同じ形を連続で使う」がOFFの場合は、1個描き終えると配置した囲みの選択が外れ、囲みの種類と設定のメニューへ戻ります。描いた囲みを修正したい場合は、左の「選択」に切り替えて、その囲みをクリックしてください。

同じ形を続けて使うならピンをONにします。描いた囲みが選択されたままになり、同じツールで次の囲みを続けて描けます。色と線の太さは次の囲みにも引き継がれるので、同じ色の丸を何個も入れる場面でも設定を繰り返さずに済みます。

見せたくない部分へモザイクをかける

左の「モザイク」を選び、隠したい範囲をドラッグします。配置後は「モザイクの粗さ」を4〜100で調整できます。数字を大きくすると粗いブロックになりますが、細かなモザイクでは文字が読める場合もあるため、保存した画像で隠す範囲と見え方を確認してください。

モザイクは読み込んだ元画像に対する加工です。あとから追加した文字や矢印を隠すための機能ではないので、自分で入れた説明を消したい場合は、その文字や矢印を選択して削除しましょう。

OK・NGなどの目印を置く

左の「スタンプ」を選び、種類・大きさ・色を決めて画像をクリックすると配置できます。種類はOK・NG・★・！・？の5つで、大きさは24〜500です。スタンプツールを選んだまま、続けて配置することもできます。

Ver.0.4.0には、指差しやパンチのスタンプ・矢印先端はありません。OKとNGで設定の良し悪しを示したり、「！」で注意点を伝えたりする補助に使ってください。何個も置くより、読者さんが最初に見るべき場所へ絞ると、説明画像がすっきりまとまります。

使い方⑥ 配置したものを移動・修正・削除する

左の「選択」に切り替え、画像上の矢印・文字・囲み・スタンプ・モザイクをクリックします。選択すると編集欄が表示され、ドラッグで移動できます。続けて描くツールを使っている途中で移動したい場合も、先に「選択」へ切り替えましょう。

選択枠の四角いハンドルをドラッグすると、大きさを調整できます。矢印と直線の場合は始点と終点を動かして、方向や長さを変更できます。文字は編集欄で書き直せるほか、画像上の文字をダブルクリックして再入力することもできます。

消したいときは、対象を選んで「選択したものを削除」を押します。文字入力欄などを操作していない状態なら、DeleteまたはBackspaceでも削除できます。背景として読み込んだ元画像は、この選択操作で移動・削除する対象ではありません。

使い方⑦ 必要な範囲だけ切り抜く

左の「切り抜き」を選び、残したい範囲をドラッグします。範囲が決まったら「この範囲で切り抜く」を押して確定してください。確定する前なら「取り消し」で範囲選択を解除できます。

切り抜きを確定すると、その範囲の大きさに画像が変わります。切り抜き後は「戻す」で元へ戻せますが、確定時に、それ以前の通常の編集履歴はリセットされます。迷う場合は先に画像を保存してから切り抜くと、比較しやすくなります。

使い方⑧ 戻す・やり直すを使う

操作を取り消したいときは、上部の「戻す」を押します。取り消した操作を再び反映するには「やり直す」を押してください。間違った場所に矢印を引いても、一から画像を開き直す必要はありません。

操作	Mac	Windows
戻す	Command＋Z	Ctrl＋Z
やり直す	Command＋Shift＋Z	Ctrl＋Shift＋Z

ショートカットは、文字入力欄などにカーソルが入っていない状態で使ってください。また、戻したあとで新しい編集をすると、それまでの「やり直す」履歴は消えます。履歴はブラウザ内の作業中だけのもので、HTMLを閉じたあとに復元するための保存機能ではありません。

使い方⑨ 完成画像をダウンロードする

上部の「画像を保存」を押すと、保存パレットが開きます。そこで「形式」「画質」「長辺」を選び、「画像をダウンロード」を押してください。保存欄を常時表示しないので、編集している間は画像のために画面を使えます。

保存パレットを閉じて編集へ戻るときは「閉じる ×」を押します。保存時には選択用の枠やハンドルは入らず、元画像は上書きされません。スマホなど幅の狭い画面でも、上部の「画像を保存」から同じ設定を開けます。

形式	使い方の目安
WebP	ブログ用の画像に。透明部分も保存可能
PNG	透明背景や細かい文字を残したい画像に。画質選択による圧縮調整の対象ではない
JPEG	JPEG形式で使う画像に。透明部分は白背景になる

画質は「高画質」「標準」「軽量」から選びます。WebP・JPEGでは、それぞれ0.95・0.85・0.68の画質設定で保存しますが、これは容量の削減率ではありません。小さな文字が多い画像は、保存後に文字の輪郭が崩れていないか確認してください。

長辺を1200pxや800pxにすると、縦横の長いほうを基準に、縦横比を保って縮小します。たとえば1600×900pxの画像を長辺800pxで保存すると、800×450pxになります。指定より小さい画像は拡大されず、「元サイズ」なら編集後の画像サイズで保存されます。

保存するファイル名は、元の名前に-chiichanを加えた形です。たとえばsample.pngをWebPで保存するとsample-chiichan.webpになります。保存した画像を開いて、矢印の位置・文字・モザイクを確認してから、WordPressのメディアへアップロードしてください。

使う前に知っておきたいこと

このHTML版は完成画像を保存するツールで、編集途中のデータをプロジェクトとして保存する機能はありません。画面を閉じたり再読み込みしたりすると、編集内容は残りません。完成画像を開き直した場合も、矢印や文字は画像の一部になっており、元の編集部品として選び直すことはできません。

WordPressメディアへの直接アップロードや、複数画像の一括編集もありません。矢印や説明を入れる作業はこのツールで1枚ずつ行い、複数画像の形式・名前・サイズをまとめて整えたい場合は「AIちいちゃん画像一括処理」と使い分けてください。

まずは矢印一本と、短い説明から

最初は画像を開いて、矢印を一本引き、「ここをクリック」と文字を入れて保存するだけで大丈夫です。慣れてから囲みやスタンプを使えば、設定項目に振り回されず、読者さんへ何を伝えたいかに集中できます。

せっかく機能があると、全部使いたくなっちゃうんですけどね（笑）。でも、説明画像の完成は飾りの数で決まりません。読者さんがひと目で「ここを押せばいいんだ！」と分かるところまで整えたら、その画像を記事へ載せましょう。

【作業量9割カット】「アンリミ3.0」の初期設定の壁を1日でぶち破り、最速で収益の自動一本道を作る秘密のオリジナル特典『AI仕様書』の受け取り方