施工事例の画像にカーソルを合わせるとbefore after が切り替わるように変更してみた

トップページがあまりにだらだらと長いことがずっと気になっていた。

無駄な画像、無駄な説明、無駄な情報。

先日も少々いじったのだが、その際にはFAQやメニューの変更、フッターの配置など軽微なものだったが、本日割とがっつりといじり倒して、徹底的に無駄をなくせるようにし、動きのあるものを取り入れることでサイトの質を高めてみることにした。

まだ施工事例は少ないが、最新3件を上部に配置。パソコンの場合にはカーソルを画像に合わせることで、beforeとafterを見ることができる。

スマホの場合には、長押しとまではいかないが、ちょっと長めに押すと画像が変わってくれる。ページに行かなくてもちょっとのぞく程度のことができ、ちょっとした面白さを感じていただけるのではないだろうか。チラ見もしつつ、他の事例もながら見できるイメージだ。どんな施工があるのかを一通り見たい人向けの機能ともいえる。

詳細ページへ飛ぶと、その他の画像（業者様が掲載した画像の数）も見ることができる。

画像を押すことで大きな画面で画像を見ることができ、矢印を押しても次の画像が出てくるが、横スワイプで次の画像も見ることができる。いちいちい画像を閉じて、次の画像を拡大して・・・という手間がない仕様にしてみた。

左上には施工前、施工中、施工後　という表示も出ているので、どの工程かも確認できる。

これまでは施工事例一覧は一般的というか、平凡というか、ただの一覧の表だったため、全く施工事例の良さが出ていなかったため、画像をメインとして配置し、見ていただくことを第一に考えて修正を加えてみた。

こうしてみると、まだまだ細かな修正・改善が必要なところは山ほどありそうだ。

どうすれば業者様の良さを最大限引き出せるのかを考えなくてはいけない。