Webflowで画像比較スライダー（ビフォーアフタースライダー）を追加する方法

画像比較スライダーは、あなたの仕事の成果を見せる最も手軽な方法のひとつです。閲覧者は仕切りをドラッグするだけで、リデザインやリノベーション、レタッチの効果を確認できます。横並びの画像をじっと見比べたり、間違い探しをしたりする必要はありません。結果がその場で一目瞭然です。

エージェンシーを運営している方でも、フリーランスのデザイナー、フォトグラファー、アーティスト、施工業者など、成果をアピールしたい方にとって、ビフォーアフタースライダーは最適な手段です。しかし、最も高機能なウェブサイトビルダーのひとつであり、デザイナーにも人気のWebflowには、ネイティブの画像比較スライダー機能がありません。Webflowで画像比較スライダーを追加するには、コミュニティの「クローナブル」をインストールする、無料のホスティング型ウィジェットを埋め込む、またはWebflowのネイティブインタラクション（IX2）エンジンを使ってゼロから構築する、という3つの方法があります。

以下では、それぞれの方法を詳しく解説します。

方法1：Webflowのクローナブルを使う

まず思いつくのは、Made in WebflowショーケースやFlowbaseのようなサイトで「クローナブル」を探すことでしょう。この方法でうまくいくこともありますが、手間がかからないわけではありません。

最大のデメリットは、他の人が作った仕組みに縛られることです。クローナブルの既存のアーキテクチャや命名規則に厳密に従う必要があります。カスタム属性、CSSルール、絶対配置に依存するケースもあり、どれかひとつでも間違えると正しく動作しません。デザインの最後に追加しようとすると、他の要素を見直さなければならなくなることもあります。

それでもこの方法で進めたい場合は、以下の手順でクローナブルを追加できます。

1. 積極的にメンテナンスされていて、利用が許可されたライセンスのビフォーアフタースライダーのクローナブルを見つけます。それを自分のプロジェクトにクローンします。

2. 自分の画像に差し替えます。ネストされたdivの並び替え、名前の変更、整理などは行わないでください。スライダーが壊れる原因になります。
3. サイトを公開してテストします。デスクトップとモバイルの両方で正しく動作するか確認してください。何かを誤って変更してしまうと、状況によってはJavaScriptが正しく実行されない場合があります。

総合的に見ると、この方法は機能しますが、シンプルなビジュアルコンポーネントにしては非常に手間がかかります。また、思い通りにコントロールできない可能性が高いです。デザインを変更するたびに、制御スクリプトを書き直さない限り、元の構造に従わなければなりません。

方法2：無料のノーコードスライダーウィジェットを使う（推奨）

ネストされたdivブロックの操作、カスタム属性の設定、そして問題が発生した場合に他の人が書いたJavaScriptのデバッグ——こうした手間を避けたいなら、最も簡単な方法はJotformのビフォーアフタースライダーウィジェットのようなホスティング型の埋め込みを使うことです。セットアップが非常に簡単で、クローナブルの多くの問題を解決してくれます。

Jotformを使ってWebflowに画像比較スライダーを追加する方法は以下のとおりです。

1. Jotformビフォーアフタースライダーウィジェットにアクセスし、Jotformアカウントにログインします。アカウントをお持ちでない場合は、セットアップ中に無料で登録できます。

2. ウィジェットにタイトルを付け、比較する画像ペアを追加します。画像は直接アップロードするか、URLから追加できます。必要に応じて、各画像ペアにキャプションを追加したり、ラベルを変更したりすることも可能です。次に、ビフォーアフターの表示をハンドルのドラッグで行うか、ホバーで切り替えるかを設定します。設定が完了したら、続行をクリックします。

3. 次に、スライダーのスタイルを設定します。カラー、ブランディング、フォント、外観を変更できます。仕上がりに満足したら、再度続行をクリックします。

4. 最後に、レイアウトを設定します。水平スライダーか垂直スライダーか、仕切りの初期位置、スライダーの幅、モバイルデバイス・デスクトップデバイス・またはその両方で表示するかを選択します。設定が完了したら、あなたのウェブサイトで無料で試すをクリックします。

5. コードをコピーをクリックして埋め込みコードをクリップボードにコピーし、Webflowサイトに戻ります。

6. Addメニューを開き、Code Embedを選択します。埋め込みコードを貼り付け、ブロックをサイト上の希望の位置に配置します。Publishをクリックすれば、サイト上で公開されます。とても簡単です。

ご覧のとおり、無料のノーコードによる方法は、クローナブルを使う方法よりもはるかにシンプルです。スタイルの調整も簡単で、カスタム属性や厳密なクラス名、JavaScriptを気にする必要もなく、そのまま動作します。何か変更したい場合は、Jotformに戻ってビフォーアフタースライダーの設定を編集するだけです。

方法3：Webflowインタラクションを使って手動で構築する

他の人が書いたJavaScriptや外部ウィジェットを使わず、完全にコントロールしたいWebflow上級者には、Webflowのネイティブインタラクションエンジン「IX2」を使ってスライダーを構築する方法があります。Webflowでカスタムコードの画像比較スライダーを構築するのは、圧倒的に高度で複雑な方法ですが、見た目や動作を細部まで自由にコントロールできます。

IX2を使って独自のWebflow画像比較スライダーを構築するには、相対配置されたコンテナ内に2つの画像を重ね、それぞれの画像を個別のdivブロックに配置する必要があります。上側の画像では、divブロックがマスクの役割を果たします。

次に、Webflowのビフォーアフターインタラクションとして、マウス移動インタラクションを作成する必要があります。トリガーをMouse Xに設定し、ターゲットをマスク用のdivに指定します。アニメーションプロパティをWidthに設定し、0〜100パーセントの範囲で変化するようにします。これにより、マウスのX軸の動きが2つの画像の重なり具合を制御します。

もちろん、2つの画像の間に仕切りを表示したい場合は、それも自分で作成する必要があります。さらに、マウスの動きと完全に同期させるには、Webflowの高度なアニメーションスキルが求められます。

Webflowの組み込みツールでも実現は可能ですが、すべてを正しく仕上げるには多くの微調整とWebflowの深い理解が必要です。また、モバイルデバイスでも動作させたい場合は、別のアニメーションを設定しなければなりません。コントロールを得る代わりに、手軽さを犠牲にすることになります。

スマートなノーコードウィジェットでWebflowサイトを強化しよう

Webflowに画像比較スライダーを追加する最も手軽で簡単、そして便利な方法は、Jotformビフォーアフタースライダーウィジェットを使うことです。Webflowのクローナブルを使う際のデメリットがなく、IX2で自作するよりもはるかにシンプルです。堅牢なサーバーレスのソリューションを活用することで、開発時間を大幅に節約でき、毎回確実にレスポンシブなデザインを実現できます。

さらに、Jotformにはサイトをさらにレベルアップさせる無料のウェブサイトウィジェットが豊富に揃っています。Googleレビュー、アクセシビリティコントロール、シンプルなトップに戻るボタンなど、数十種類の便利な機能を追加したい場合は、ウィジェットディレクトリをご覧ください。また、JotformとWebflowの連携を使えば、Jotformの強力なデータ収集ツールをサイトに直接接続することもできます。