記事を執筆するときに画像を用いる機会は多いと思います。中には画像を比較検証したり、ビフォーアフターを画像で並べて比較することも少なくないでしょう。しかし、大きな画像などの場合は、縦に並べてスクロールしなければ見られない場合もあります。画像の比較をする際は、極力スクロールせずに、同じ画面で比較したいものです。
今回はそのような問題を解決して、かつスタイリッシュなモーションで、2枚の画像を比較できるプラグイン「Twenty20 Image Before-After」をご紹介いたします。TAKAPONによる動画解説をご希望の方はこちらをご視聴ください。
弊社では以前にも類似のプラグイン「TwentyTwenty」をご紹介いたしました。（下記記事参照）
しかし、2019年7月現在プラグインの最終更新が5年以上前である上に、今回ご紹介する「Twenty20 Image Before-After」の方が、より直感的に操作可能ですので、こちらをお使いいただく方がベターかと思います。
サイトやブログを作成しているとビフォア、アフターの比較画像を表現したいということがあります。できる限り比較画像というのは横並びがいいのですが、横並びに画像を配置すると、１枚の画像が小さくなってしまいます。そのため2枚の画像を縦に連続で並べることがありますがそれではユーザビリティーが悪くなりがちで...
「Twenty20 Image Before-After」のインストール
WordPressの管理画面から、新規追加をクリックして、「Twenty20 Image Before-After」と検索するか、下記ボタンよりダウンロードできます。
「Twenty20 Image Before-After」の使い方
有効化すると、投稿の下記箇所に「Add Twenty20」というボタンが追加されています。
上記のボタンをクリックして、メディア内に保存されている画像か、新たにアップロードする画像ファイルを2枚選択し、右下の「Insert」をクリックします。
右下のInsertをクリックすると、下記画面が表示されます。
何も入力せずに「Insert Shortcode」をクリックするだけで、下記のようなショートコードが作成されます。
[twenty20 img1="（画像を特定する数字A）" img2="（画像を特定する数字B）" offset="0.5"]
そのままプレビューを表示してみてください。下記のようにつまみをドラッグするだけでビフォーアフターが直感的にわかるスライダーが表示されているはずです。
非常に簡単ですね。
詳細の設定
細かい設定は先ほどの画面でそれぞれの項目を入力することで設定可能です。
- Before Text:左側のスライダーの下部に表示されるテキスト
- After Text:右側のスライダーの下部に表示されるテキスト
- Width（スライダーの幅）
- Offset（境界線の位置）
- Direction（境界線の向き）
- Alignment（ブログ記事内に置けるスライダーの位置）
- Move slider on mouse hover（ホバーするだけでスライダーが動くようになる設定）
Before Text/After Textについては、その名の通り、ビフォーアフターの違いを任意のテキストを入力することで閲覧者にわかりやすく見せる機能ですね。その他の機能の活用例は次項で説明いたします。
各種設定の注意点・活用例
アイデア次第で細かく応用が効きそうな設定が用意されています。
Width（スライダーの幅）
こちらに関しては、変更するとはみ出て表示されたり、スマホ環境で表示崩れを起こすことがあるので、デフォルトのままがベターかと思われます。パーセンテージやピクセルで指定できるので、小さく表示する際は便利です。
Offset（境界線の位置）
境界線の位置に関しては、どちらかの画像を全面で表示したい場合に利用できる機能ですね。0.1〜1.0の間で選択できます。0.5がデフォルトの位置でちょうど真ん中にセットされていますが、数値を小さくすれば中央より左側に寄る仕様です。
画像レタッチ等のビフォーアフターを表現したいのではなく、チュートリアル系の記事で、この箇所を操作すれば、この部分が変更されるなどの表現をしたいときに活用できます。一方を全面表示にした方が視覚的にわかりやすいですね。
上記例では、値を0.8に設定した箇所と、表示される境界線の位置を2枚の画像で表現しています。
Direction（境界線の向き）
Vertical（垂直に並べる）かHorizontal（水平に並べる）から境界線の向きを変更できます。
通常は水平で問題なさそうですが、例えば、縦長の画像を活用するアパレルやファッション関係の画像ですと垂直方向に変化させることで、上半身と下半身でコーディネートの変化を表現するような使い方も可能です。その操作をユーザー自身にしていただけるので、適切な画像をセットしておけば、コーディネートのイメージの変化を簡単な操作で体験していただくこともできるわけですね。
Alignment（ブログ記事内に置けるスライダーの位置）
「None」「Left」「Right」からスライダーの位置を任意に設置可能です。「Width（スライダーの幅）」でサイズを小さくしたものを左右どちらかに寄せることができます。
Move slider on mouse hover（ホバーのみでスライダーが動く設定）
境界線をドラッグしなくてもカーソルをホバーするだけで画像を変化させられるようになる設定です。カーソルがスライダー上を通過するだけで画像に変化が起きるので、ユーザーがチェックせずにスルーする可能性は下がりますね。しかしながら、実際に検証してみると止めたい箇所で止めにくくなるので、画像のディテールを見たい際などは、少し煩わしいかもしれません。
まとめ
簡単な操作で、2枚の画像をスタイリッシュに比較できる「Twenty20 Image Before-After」。WordPress初心者でも直感的に操作できそうですね。画像を重ねて美しく比較する為に、2枚の画像を全く同じサイズでセットする点にだけ注意しておきましょう。
普段から写真を多用するカメラマンの方のブログなどでは、2枚の写真の変化の表現や省スペース化に。リフォーム業を営んでいる方などは、ビフォーアフターをスマートに表現することができます。ぜひ当記事を参考に、あなただけの活用方法を見つけてみてはいかがでしょうか。
