先日、写真加工の仕方についての記事で、初めて「比較用のスライダー付き画像」を使った。
写真ブロガーさんやカメラが趣味の人にはお馴染みだと思うが、普段から写真について深い興味がない人は是非一度使ってみて。
▼こういうやつ。スライダーを左右にドラッグしてビフォーアフターが比較できる。
これはWordpressのプラグイン『Twenty20 Image Before-After』。
こういうプラグインはいくつかあるみたいだけど、『Twenty20 Image Before-After』は導入〜実際に使うまでのステップが単純明快だったので、これから使ってみようかなって人にはおすすめ。
このスライダーを使った活用法も紹介するよ。
インストールの仕方
- プラグイン ＞ 新規追加
- プラグインを検索 ＞ 『Twenty20 Image Before-After』で検索
- [今すぐインストール]
- [有効]
▼ここからzipをダウンロードして、新規追加から[プラグインをアップロード]でも可。
使い方
通常の画像を挿入する時と方法は同じ。
▼このボタンが追加されている
画像はビフォーとアフターの2枚を選択。
1つ目に選択したものがビフォー、2つ目がアフターになる。
▼いつも通り画像を挿入する感じで2枚選択するだけ。
2枚選択すると、各種設定画面に切り替わるので任意で設定。
Offset：スライダーの位置（0.1~1.0→左もしくは上からどのくらいの位置にするか）
Direction：スライダーの動く方向（Horizontal→左右、Vertical→上下）
Alignment：画像の位置（基本NoneのままでOK）
▼スライダーを0.5（真ん中）にしておくと、動画の再生ボタンに見えなくもない。少しズラしておいた方がいいかも。
▼設定が完了すると本文中にショートコードが挿入される。
これで挿入完了。
簡単〜！
活用法
写真の加工を見せる
▼Lightroomでの現像ビフォーアフター
言わずもがな、写真編集やフィルターのビフォーアフターを見せるのに効果的。
これならわずかな差でも違いがわかりやすい。
何度でも左右に動かしたらいいさ。
ちなみにこれは上下に動くやつ。
スマホだと画面が動いちゃって全く使えないので注意。
▼ちょっとアンダー目にざらつかせた加工をしてみた
写真でビフォーアフター
まさに「劇的ビフォーアフター」みたいな、変化を見せるのにも良い。
なんということでしょう…バーをスライドするだけであんなに汚い部屋がこんなに綺麗に！
とかやりたかったけど、私の部屋は汚いままなのでやりませーん。
▼色落ちしたスウェードジャケットがこんなに綺麗に！！（買い直しただけ）
他にも、すっぴん→化粧後とか、太った→痩せたとか、二段腹→シックスパックとかもいいね。
もちろん太ったままなのでやりませーん。
2コマ漫画
▼いらすとや「水掛け論」を左右反転させただけ
パラパラ漫画のような見せ方ができるので、絵が描けて面白いこと言える人はぜひ使ってみてほしい。
私はスベる気しかしない。
簡易スライド
2枚目を隠しておけば、簡易スライド的な使い方も。
告知や重大発表とか、ちょっと凝った魅せ方ができるね。
写真ブロガー以外にも楽しめる要素は無限大
イラストやを組み合わせれば誰でも簡単に2コマ漫画が作れると思えば、写真やイラスト系のブロガーさん以外でも楽しめそう。
なんか他に面白い使い方を思い付いたら教えてください。
私はビフォーアフターできるくらい痩せたいね！！