サイト用ビフォーアフタースライダー

サイト用ビフォーアフタースライダー: 用途

理容室、洗車、リフォーム、クリーニングなど、見た目を変えるサービスでは、同じ写真でビフォーとアフターを見せるほうが、どんな文章よりも説得力があります。

2枚の写真を貼り付けると、指やマウスでドラッグできる分割線、ラベル、初期位置、色を備えた比較ツールが作成されます。分割線は内部ではinput rangeなので、キーボードの矢印キーで操作でき、スクリーンリーダーにも読み上げられます。切り抜きはclip-pathで行い、ライブラリは不要です。

使い方

1. ビフォーとアフターの写真のアドレスを貼り付けます。
2. ラベル、説明、初期位置を入力します。
3. コードをコピーしてページに貼り付けます。

使うタイミング

• 理容室と美容室。
• 洗車やカーディテイリング、板金。
• リフォーム、塗装、清掃。

よくある質問

どんなビジネスに向いていますか？

理容室、美容室、洗車・カーディテイリング、リフォーム、塗装、ソファのクリーニング、審美歯科、造園など、見た目を変えるサービスすべてに向いています。同じ写真で違いを見せるほうが、別々の2枚より説得力があります。

アクセシビリティはどうなっていますか？

分割線は内部で本物のinput rangeなので、キーボードの矢印キーで動かせ、スクリーンリーダーが割合を読み上げます。2枚の写真には代替テキストも付きます。

写真は同じでないといけませんか？

同じ縦横比で、できれば同じ場所から撮った同じ構図が必要です。縦横比が異なる場合は、上の写真が収まるようにトリミングされます（object-fit: cover）。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール