このプラグインでできること
「アイコン作成プラグイン」は、kintoneのレコード追加・編集画面上でオリジナルのアイコン画像を作成できるプラグインです。
用意されたアイコン素材や、お手持ちのSVGファイルを組み合わせて、枠・背景・色を自由にデザインできます。
作成したアイコンは、レコードを保存すると自動的にPNG画像として添付ファイルフィールドに登録されます。
編集内容も一緒に保存されるため、あとから同じレコードを開いて作り直すことができます。
主な機能は次のとおりです。
- レコードの追加・編集画面で、アイコン作成ツールを全画面表示
- 内蔵アイコン（Material Symbols）の一覧から選んでレイヤーとして追加
- SVGファイルを画面にドロップしてレイヤーとして追加
- 枠（Border）と内側（Inner）の色・グラデーション・太さ・角丸の調整
- レイヤーごとの位置・拡大縮小・回転・不透明度・塗り色・輪郭線の調整
- レイヤーの重ね順の並び替え、表示切替、複製、削除
- 作成したアイコンのPNGファイルダウンロード
- レコード保存時に、PNG画像を添付ファイルフィールドへ自動登録
- 設定内容のJSONファイル出力・読み込み
💡 レイヤーとは、アイコンを構成する部品ごとの層のことです。複数のアイコンを重ねて1つのデザインを作れます。
動作環境・前提条件
2-1. 対象となる画面
このプラグインは、次の画面で動作します。
| 画面 | 動作内容 |
|---|---|
| レコードの追加画面 | アイコン作成ツールが起動します |
| レコードの編集画面 | アイコン作成ツールが起動します（保存済みのデザインを読み込みます） |
| レコードの詳細画面 | アイコンデータを保持するフィールドを自動的に非表示にします |
⚠️ このプラグインはパソコン（デスクトップ）版のkintoneのみに対応しています。モバイル（スマートフォン）版kintoneには対応していません。
2-2. 事前に必要なフィールド
プラグインの設定には、次の3つのフィールドが必要です。
| 設定項目 | 必要なフィールドの種類 | 役割 |
|---|---|---|
| 「アイコン名」 | 「文字列（1行）」 | アイコンの名前を入力します。保存される画像のファイル名にも使われます |
| 「アイコンファイル」 | 「添付ファイル」 | 作成したアイコンのPNG画像が保存されます |
| 「アイコンデータ」 | 「文字列（複数行）」 | 編集内容が保存されます。あとから編集を再開するために使われます |
フィールドをまだ作成していない場合は、設定画面から一括で追加できます。手順は「3-2. フィールドを一括追加する」を参照してください。
⚠️ 上記3つの設定はすべて必須です。1つでも未設定の場合、アプリの画面を開くと「プラグインの設定が完了してません」と表示され、アイコン作成ツールは起動しません。
設定手順
3-1. 設定画面の全体構成
設定画面は、上部の操作ボタンと、中央の設定項目で構成されています。
プラグインの設定画面
上部には次のボタンがあります。
| ボタン | 説明 |
|---|---|
| 「設定保存」 | 設定内容を保存し、アプリを更新します |
| 「設定出力」 | 現在の設定をJSONファイルとしてダウンロードします |
| 「設定読込」 | JSONファイルから設定を読み込みます |
| 「×」（画面右上） | 設定画面を閉じます |
💡 JSON（ジェイソン）とは、設定内容を保存するためのファイル形式です。同じ設定を別のアプリで使いたいときに利用します。
3-2. フィールドを一括追加する
アプリに必要なフィールドがまだない場合は、プラグインが自動でフィールドを作成できます。
⚠️ この操作は、「アイコン名」「アイコンファイル」「アイコンデータ」の3項目がすべて未選択のときだけ表示されます。1つでも選択済みの場合は表示されません。
- 設定画面の下部にある「プラグインの設定に必要なフィールドを一括追加します」という案内を確認します。
- その下の「＋ フィールド一括追加」をクリックします。
「＋ フィールド一括追加」
- 処理が完了するまで待ちます。
作成されるフィールドは次のとおりです。
| フィールド名 | フィールドの種類 | フィールドコード |
|---|---|---|
| 「アイコン名」 | 文字列（1行） | name |
| 「アイコン」 | 添付ファイル | file |
| 「アイコンデータ」 | 文字列（複数行） | data |
フィールドの追加後、プラグインの設定が自動的に保存され、アプリの更新（変更を反映）まで自動で実行されます。処理が終わると設定画面が再読み込みされます。
フィールドが追加され、自動で選択された設定画面
⚠️ アプリにすでに「name」「file」「data」というフィールドコードのフィールドがある場合、追加に失敗します。その場合はエラーメッセージが表示されるので、「閉じる」をクリックし、「3-3. 既存のフィールドを割り当てる」の手順で設定してください。
💡 フィールドコードとは、kintoneが内部でフィールドを識別するための名前です。「アプリの設定」のフォーム設定で、各フィールドの設定画面から確認できます。
3-3. 既存のフィールドを割り当てる
すでにフィールドを作成している場合は、手動で割り当てます。
- 設定画面の「アイコン名」で、使用する「文字列（1行）」フィールドを選択します。
「アイコン名」の選択
- 「アイコンファイル」で、使用する「添付ファイル」フィールドを選択します。
「アイコンファイル」の選択
- 「アイコンデータ」で、使用する「文字列（複数行）」フィールドを選択します。
「アイコンデータ」の選択
💡 各項目の右側には、選択できるフィールドの種類（「文字列（1行）」「添付ファイル」「文字列（複数行）」）が表示されています。プルダウンには、その種類に一致するフィールドだけが表示されます。
3-4. 設定を保存する
- 設定画面の上部にある「設定保存」をクリックします。
「設定保存」
- アプリの更新処理が終わるまで待ちます。
処理が完了すると、設定画面が再読み込みされます。
⚠️ 「設定保存」をクリックすると、アプリの更新（変更を反映）まで自動で実行されます。ほかに未反映の変更がある場合は、それらも同時に反映されます。
⚠️ 更新に失敗した場合は「更新処理に失敗しました」と表示されます。時間をおいて操作をやり直してください。
3-5. 設定をファイルに出力する
現在の設定をJSONファイルとして保存できます。同じ設定を別のアプリで使いたいときに利用します。
- 設定画面の上部にある「設定出力」をクリックします。
「設定出力」
- ブラウザのダウンロード先にJSONファイルが保存されます。
💡 ファイル名は「createicon-config-（アプリID）.json」の形式で保存されます。
3-6. 設定をファイルから読み込む
出力したJSONファイルから設定を読み込めます。
- 設定画面の上部にある「設定読込」をクリックします。
「設定読込」
- ファイル選択画面で、読み込むJSONファイルを選択します。
- 「設定を読み込みますか？」というメッセージが表示されるので、内容を確認します。
「設定を読み込みますか？」の確認メッセージ
- 「読み込む」をクリックします。
- 「設定を読み込みました」というメッセージが表示されるので、内容を確認します。
- 設定画面の内容を確認します。
- 「設定保存」をクリックして確定します。
⚠️ 読み込むと、現在の設定はすべて上書きされます。読み込んだだけでは確定されません。必ず「設定保存」をクリックしてください。
⚠️ 読み込んだ設定のフィールドがこのアプリに存在しない場合、その項目は取り込まれません。「※ このアプリに存在しないため取り込めなかった項目があります：」というメッセージとともに、対象の項目名が表示されます。取り込まれなかった項目は、手動で選択し直してください。
💡 ファイルの内容が正しくない場合は、「読み込みに失敗しました」または「設定ファイルの形式が正しくありません」というメッセージが表示されます。このプラグインの「設定出力」でダウンロードしたファイルを選択してください。
操作手順
4-1. アイコン作成ツールを起動する
- アプリの一覧画面で、レコードの追加ボタンをクリックします。
- アイコン作成ツールが画面全体に表示されるまで待ちます。
保存済みのレコードを編集する場合も、編集画面を開くと同じツールが起動します。このとき、保存されているデザインが読み込まれた状態で表示されます。
⚠️ アイコン作成ツールは画面全体を覆って表示されます。そのため、レコードの追加・編集画面では、アプリの他のフィールドを入力できません。
💡 初回起動時は、アイコン素材の読み込みに時間がかかることがあります。2回目以降はブラウザに保存された素材が使われるため、速く表示されます。
4-2. 画面の構成
アイコン作成ツールは、次の6つのエリアで構成されています。
| エリア | 位置 | 役割 |
|---|---|---|
| ツールバー | 画面上部 | アイコン名の入力、表示テーマの切替、保存、キャンセル |
| レイヤー一覧 | 画面左 | 追加したレイヤーの一覧表示と並び替え |
| プレビュー | 画面中央上 | 作成中のアイコンの表示と、マウス操作による編集 |
| 「Border」「Inner」 | 画面中央下 | 枠と内側の背景のデザイン |
| 「Transform」「Fill」「Outline」「Layer」 | 画面右 | 選択中のレイヤーの詳細設定 |
| アイコン一覧 | 画面右端 | アイコン素材の検索と追加 |
アイコン作成ツールの画面全体
4-3. アイコン名を入力する
- 画面上部の「Icon Name」と表示された入力欄をクリックします。
- アイコンの名前を入力します。
「Icon Name」の入力欄
入力した内容は、設定で指定した「アイコン名」フィールドに保存されます。また、保存される画像のファイル名にも使われます。
💡 アイコン名が未入力の場合、画像のファイル名は「icon.png」になります。
4-4. アイコン一覧からアイコンを追加する
- 画面右端にある開閉ボタン（「＜」の形のボタン）をクリックします。
アイコン一覧の開閉ボタン
- アイコン一覧が開いたことを確認します。
開いたアイコン一覧
- 使いたいアイコンをクリックします。
クリックしたアイコンが新しいレイヤーとしてプレビューの中央に追加され、枠の内側に収まる大きさに自動調整されます。同時に、そのレイヤーが選択状態になり、アイコン一覧は閉じます。
プレビューの中央に追加されたアイコン
アイコン一覧の上部では、次の設定を変更できます。
| 項目 | 説明 |
|---|---|
| 「Search」 | アイコン名（英字）でアイコンを絞り込みます |
| 「fill」 | 塗りつぶしタイプのアイコンに切り替えます |
| 「weight」 | 線の太さを100から600まで、100刻みで変更します（最初は300） |
アイコン一覧の「Search」「fill」「weight」
💡 一覧を下までスクロールすると、アイコンが追加で読み込まれます。
💡 「fill」と「weight」の設定は、同じブラウザタブを開いている間だけ、アプリごとに記憶されます。
⚠️ アイコン素材はGoogleが提供するMaterial Symbolsです。パネル下部に「Material Symbols are provided by Google and licensed under the Apache License 2.0.」と表示されます。
4-5. SVGファイルからアイコンを追加する
お手持ちのSVGファイルをアイコンとして追加できます。
- パソコンのフォルダからSVGファイルをドラッグします。
- プレビューエリア（「このエリアにSVGをドロップして追加可能」と表示されている範囲）にドロップします。
SVGファイルをドロップできるプレビューエリア
ドロップしたSVGが新しいレイヤーとして追加され、枠の内側に収まる大きさに自動調整されます。
💡 SVG（エスブイジー）とは、拡大しても画質が劣化しない画像形式です。
💡 複数のSVGファイルを同時にドロップすると、それぞれが別々のレイヤーとして追加されます。
⚠️ 追加できるのはSVG形式のみです。PNGやJPEGなどの画像ファイルは追加できません。
4-6. 枠と背景をデザインする
プレビューの下にある「Border」（枠）と「Inner」（内側）で、アイコンの土台をデザインします。
「Border」と「Inner」の設定欄
「Border」（枠）の設定項目
| 項目 | 説明 |
|---|---|
| 「Style」 | 「Solid」（単色）または「Gradation」（グラデーション）を選びます |
| 「Color」 | 枠の色を選びます（「Style」が「Solid」のときに表示） |
| 「Gradation」 | 枠のグラデーションを設定します（「Style」が「Gradation」のときに表示） |
| 「Gradation Angle」 | グラデーションの角度を指定します（「Style」が「Gradation」のときに表示） |
| 「Width」 | 枠の太さを指定します |
| 「Radius」 | 四隅の角丸の大きさを指定します |
「Inner」（内側）の設定項目
| 項目 | 説明 |
|---|---|
| 「Style」 | 「Solid」（単色）または「Gradation」（グラデーション）を選びます |
| 「Color」 | 内側の背景色を選びます（「Style」が「Solid」のときに表示） |
| 「Gradation」 | 内側のグラデーションを設定します（「Style」が「Gradation」のときに表示） |
| 「Gradation Angle」 | グラデーションの角度を指定します（「Style」が「Gradation」のときに表示） |
単色を設定する手順
- 「Border」の「Style」で、「Solid」を選択します。
- 「Color」の色見本をクリックします。
色の選択画面
- 表示された色の選択画面で、使用したい色を選びます。
選んだ色がプレビューに即座に反映されます。
枠の太さと角丸を変更する手順
- 「Width」の入力欄に数値を入力します。
- 「Radius」の入力欄に数値を入力します。
「Width」と「Radius」の入力欄
💡 入力欄の左右にある「－」「＋」をクリックすると、数値を1ずつ増減できます。押し続けると連続で増減します。
💡 「Width」と「Radius」は、「－」「＋」で0から240まで調整できます。
4-7. グラデーションを設定する
「Border」「Inner」および後述の「Fill」では、グラデーションを設定できます。操作方法はすべて共通です。
- 「Style」で「Gradation」を選択します。
「Style」で「Gradation」を選んだ状態
- 「Gradation」の帯の下にある丸いつまみをクリックします。
- 表示された色の選択画面で、色を選びます。
グラデーションのつまみと色の選択画面
つまみを左右にドラッグして、色の位置を変更します。
つまみを追加する場合は、次のように操作します。
- グラデーションの帯の右上にある「＋」のアイコンをクリックします。
- 追加されたつまみをドラッグして位置を調整します。
つまみを削除する場合は、次のように操作します。
- 削除したいつまみをクリックして選択します。
- グラデーションの帯の右上に表示されるごみ箱のアイコンをクリックします。
つまみの追加（＋）と削除（ごみ箱）のアイコン
⚠️ つまみは2つ以上必要です。つまみが2つのときは、ごみ箱のアイコンは表示されません。
グラデーションの向きを変える場合は、「Gradation Angle」の入力欄に角度を入力します。
「Gradation Angle」の入力欄
4-8. アイコンの位置・大きさを調整する
調整したいレイヤーを選択してから操作します。レイヤーの選択方法は「4-10. レイヤーを操作する」を参照してください。
マウスで操作する
- プレビュー上のアイコンをドラッグして、位置を移動します。
- プレビュー上でマウスホイールを回して、大きさを変更します。
数値で指定する
画面右の「Transform」で、選択中のレイヤーを数値で調整できます。
「Transform」の設定欄
| 項目 | 説明 |
|---|---|
| 「X」 | 横方向の位置を指定します |
| 「Y」 | 縦方向の位置を指定します |
| 「Scale」 | 拡大・縮小の倍率を指定します |
| 「Rotate」 | 回転の角度を指定します |
| 「Opacity」 | 不透明度を指定します |
変更したい項目の入力欄に数値を入力します。
💡 「Scale」は「－」「＋」で0.05から12まで、0.05刻みで調整できます。「Opacity」は0から1まで、0.05刻みで調整できます。0が完全な透明、1が完全な不透明です。
中央に揃える
プレビュー右上のボタンで、選択中のレイヤーを中央に揃えられます。
プレビュー右上の中央揃えボタン
| ボタン | 説明 |
|---|---|
| 上下方向の中央揃えボタン | 縦方向の位置を中央に揃えます |
| 左右方向の中央揃えボタン | 横方向の位置を中央に揃えます |
| 上下左右の中央揃えボタン | 縦横ともに中央に揃えます |
💡 これらのボタンは、レイヤーがあるときだけ表示されます。
4-9. アイコンの色と輪郭線を変える
画面右の「Fill」（塗り）と「Outline」（輪郭線）で、選択中のレイヤーの見た目を変更します。
「Fill」と「Outline」の設定欄
「Fill」（塗り）の設定手順
- 「Style」で「Solid」（単色）または「Gradation」（グラデーション）を選択します。
- 「Solid」を選んだ場合は、「Color」の色見本をクリックします。
- 表示された色の選択画面で、色を選びます。
「Gradation」を選んだ場合の操作は、「4-7. グラデーションを設定する」を参照してください。
「Outline」（輪郭線）の設定手順
- 「Width」の入力欄に、輪郭線の太さを数値で入力します。
- 「Color」の色見本をクリックします。
- 表示された色の選択画面で、輪郭線の色を選びます。
「Outline」の「Color」と色の選択画面
💡 「Width」に0を指定すると、輪郭線は表示されません。
4-10. レイヤーを操作する
追加したアイコンは、画面左のレイヤー一覧に上から順に表示されます。一覧の上にあるレイヤーほど、プレビューで手前に表示されます。
画面左のレイヤー一覧
レイヤーを選択する
- レイヤー一覧で、操作したいレイヤーをクリックします。
選択中のレイヤーは、青い枠で囲まれて表示されます。
青い枠で囲まれた選択中のレイヤー
💡 プレビュー上のアイコンをクリックしても、そのレイヤーを選択できます。
レイヤーの重ね順を変える
- レイヤー一覧で、移動したいレイヤーをドラッグします。
- 移動先の位置でドロップします。
画面右の「Layer」にあるボタンでも変更できます。
- 対象のレイヤーを選択します。
- 「前面」をクリックすると、1つ手前に移動します。
- 「背面」をクリックすると、1つ奥に移動します。
「Layer」の「前面」「背面」ボタン
💡 一番手前のレイヤーでは「前面」が、一番奥のレイヤーでは「背面」が、灰色になって操作できなくなります。
レイヤーを非表示にする・複製する・削除する
画面右の「Layer」には、次のボタンがあります。
| ボタン | 説明 |
|---|---|
| 「表示」 | レイヤーの表示・非表示を切り替えます |
| 「複製」 | レイヤーを複製します |
| 「削除」 | レイヤーを削除します |
| 「前面」 | 1つ手前に移動します |
| 「背面」 | 1つ奥に移動します |
- 対象のレイヤーを選択します。
- 実行したい操作のボタンをクリックします。
💡 レイヤー一覧の各レイヤーにも、表示切替・複製・削除の3つのアイコンが並んでいます。こちらからも同じ操作ができます。
💡 レイヤーを選択した状態で「Delete」キーを押すと、そのレイヤーを削除できます。「Ctrl」キーを押しながら「D」キーを押しても削除できます（Macの場合は「command」キー）。
⚠️ 削除した内容を元に戻す機能はありません。誤って削除した場合は、もう一度アイコンを追加し直してください。
4-11. ガイドの表示と画面テーマを切り替える
ガイドを切り替える
プレビューには、中央位置を示す点線のガイドが表示されます。
- プレビュー右上のガイドボタンをクリックします。
プレビュー右上のガイドボタン
クリックするたびに、ガイドの表示と非表示が切り替わります。
💡 ガイド線は画面上の目安です。保存される画像やダウンロードする画像には含まれません。
画面テーマを切り替える
- 画面上部右側にあるトグルスイッチをクリックします。
画面テーマのトグルスイッチ
クリックするたびに、明るいテーマと暗いテーマが切り替わります。
暗いテーマで表示したアイコン作成ツール
💡 選んだテーマは、アプリごとにブラウザに記憶されます。次回以降も同じテーマで表示されます。
4-12. PNGファイルとしてダウンロードする
作成中のアイコンを、レコードに保存せずに画像ファイルとして保存できます。
- プレビュー右上のダウンロードボタンをクリックします。
プレビュー右上のダウンロードボタン
- ブラウザのダウンロード先にPNGファイルが保存されます。
💡 ファイル名は、入力した「Icon Name」の内容が使われます。未入力の場合は「icon.png」になります。
4-13. 作成したアイコンをレコードに保存する
- 画面上部右側にある保存ボタン（フロッピーディスクの形のアイコン）をクリックします。
画面上部右側の保存ボタン
- 保存処理が終わるまで待ちます。
保存すると、次の処理が自動的に行われます。
- 入力した「Icon Name」の内容が、「アイコン名」フィールドに保存されます
- 編集内容が、「アイコンデータ」フィールドに保存されます
- 480×480ピクセルのPNG画像が作成され、「アイコンファイル」フィールドに登録されます
保存後のレコード詳細画面（添付ファイルフィールドに画像が登録された状態）
⚠️ 保存するたびに、「アイコンファイル」フィールドの添付ファイルは、新しく作成された画像1件に置き換わります。以前の画像は残りません。
⚠️ 保存をやめる場合は、保存ボタンの右にあるキャンセルボタン（×の形のアイコン）をクリックします。編集内容は破棄されます。
4-14. 作成済みのアイコンを編集する
- アプリの一覧画面で、編集したいレコードを開きます。
- レコードの編集ボタンをクリックします。
- アイコン作成ツールが起動し、保存済みのデザインが読み込まれるまで待ちます。
- 「4-4」から「4-11」の手順でデザインを変更します。
- 画面上部の保存ボタンをクリックします。
💡 レコードを再利用して新しいレコードを作成した場合も、元のレコードのデザインが読み込まれた状態で起動します。
制限事項・注意点
5-1. 対応環境に関する制限
- パソコン（デスクトップ）版のkintoneのみに対応しています。モバイル（スマートフォン）版kintoneでは動作しません。
- アイコン作成ツールは、レコードの追加画面と編集画面でのみ起動します。レコードの詳細画面や一覧画面では起動しません。
5-2. 設定に関する注意
- 「アイコン名」「アイコンファイル」「アイコンデータ」の3項目はすべて必須です。1つでも未設定の場合、アプリの画面を開くと「プラグインの設定が完了してません」と表示され、ツールは起動しません。
- 「設定保存」をクリックすると、アプリの更新（変更を反映）まで自動的に実行されます。
- 「フィールド一括追加」は、3項目すべてが未選択のときだけ利用できます。
5-3. 操作に関する注意
- アイコン作成ツールは画面全体を覆って表示されます。表示中は、アプリの他のフィールドを入力できません。
- 「アイコンデータ」に指定したフィールドは、レコードの詳細画面・追加画面・編集画面で自動的に非表示になります。
- 「アイコンデータ」フィールドの内容を直接書き換えないでください。編集内容を読み込めなくなる可能性があります。
- 追加できる画像ファイルはSVG形式のみです。PNGやJPEGなどはドロップしても追加されません。
- 元に戻す（Undo）機能はありません。削除や変更を取り消すことはできません。
- 作成される画像のサイズは480×480ピクセルで固定です。変更はできません。
- プレビューに表示される点線のガイドは、保存・ダウンロードされる画像には含まれません。
5-4. 保存に関する注意
- レコードを保存するたびに、「アイコンファイル」フィールドの添付ファイルは新しい画像1件に置き換わります。
- 画像のファイル名は「Icon Name」の入力内容が使われます。未入力の場合は「icon.png」になります。
5-5. アイコン素材について
- 内蔵のアイコン素材は、Googleが提供する Material Symbols です。Apache License 2.0 のもとで提供されています。
- 検索は英字のアイコン名に対して行われます。日本語では検索できません。
- アイコン素材は初回読み込み時にブラウザへ保存されます。初回のみ表示に時間がかかることがあります。