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

ボタン付きパートを実装する

Tips

ボタン(クリック可能)を依頼する際の準備事項

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

注意:これは実装できません

必要な画像ファイル:btn.jpg

上記はシンプルな画像CTAの事例ですが、ボタン部分にクリックアクションやアニメーションを付与することができません。

これはどこからどこまでをボタンとして認識するのか判別するのが困難なために起こります。

そのため、クリック・アニメーションを付与したい部分の画像を分割することで対策が可能です。

ここでは2つの分割パターンを解説していますが、いずれの方法でも実装は可能です。

分割パターン1

必要な画像ファイル:btn.png , btn-bg.jpg(またはimg-[n].jpg)

クリック可能な最小構成は上記のファイル分割です。

この場合、下側に配置されるbtn-bg.jpgにはbtn.pngを配置するスペースを確保する必要があります。

分割パターン2

必要な画像ファイル:btn.png , btn-bg.jpg , img-[n].jpg

上記の分割パターンでは、見出し部分とボタン部分を明確に区分しています。

この方法ではファイル数が多くなりますが

  • CTA部分を区別して制作できる
  • 出力画像に余計な空白が生まれない
  • btn-bg.jpgを明確に背景画像(background-image)として設置できる

という違いがあります。