1. home
  2. /tutorial
  3. /image tools

image.json生成ツールの使い方

Tips

画像設定ファイル生成ツール(image.json生成ツール)のドキュメント

※本ドキュメントの内容は本サービス向けの内容になります。

image.jsonファイルとは

当サービス独自の画像用設定ファイルです。

  • 画像を連番ではなく自由に設定可能
  • 画像表示順序のミス削減
  • CTAの表示順序を調整可能
  • 画像の表示幅を設定可能
  • PC/SP画像の表示切り替えが可能

image.jsonを設定することで上記のメリットがあります。

※本ツールは開発中です。ドキュメントと実際のツール画面・挙動に差異がある場合があります。

ツールはこちら

出力ファイル名の設定

初期設定では「image.json」が出力されます。

案件名を半角英数字、記号(["-","_"]のみ)で入力可能で、最大15文字まで設定できます。

空欄以外の場合、自動的に「image-{案件名}.json」の形で出力されます。

画像最大幅の設定

画像表示の最大幅を自由に設定可能です。

SP表示設定(ON/OFF)

SP表示をONにすると最大幅が768pxで固定されます。OFFにすると画像の横幅は100%に設定されます。

画面サイズが最大幅より大きくなる場合、背景色が表示されます。背景色はデフォルトでは白色になります。

※OFFにした状態で下記最大幅を設定している場合、最大幅設定の数値が反映されます。

最大幅設定(Number)

画像の最大幅を任意に設定したい場合、こちらの数字を設定してください。設定単位はpxです。

0以上の数字を入力すると入力した値で表示され、0の場合は100%で表示されます。

※SP表示をONにしている場合、SP表示の設定が優先されます。最大幅を設定したい場合はSP表示設定をOFFにしてください。

SP/PC用画像の設定

※開発中の画面です。実際の画面と異なる可能性があります。

  1. 拡張子を一括で変更できます。既存の拡張子が全て上書きされます。
  2. ドラッグ&ドロップで画像の並び替えが可能です。
  3. 画像名を設定します。連番である必要はありません。CTAを設定したい場合は「btn」を入力します。
  4. 画像の拡張子を設定します。JPG/PNG画像を設定した場合、HTMLファイル生成時に次世代型画像フォーマット(webp/avif)に自動的に変換されます。
  5. 各列が削除できます。
  6. 画像を挿入する空の列を追加します。
  7. CTA用のボタン画像を追加します。自動的に「btn」「.png」が入力されます

取り扱い可能な拡張子は以下になります。

  • jpg
  • png
  • webp
  • svg
  • gif

※上記以外の画像形式で制作する場合はご依頼時の要望欄にご記入ください。

※動画(mp4)を入れる場合は静止画を「movie.jpg」として記入してください。

ツールはこちら