共栄美装WEBサイト11月アップデート情報～ダイナミックなスライダーが施工実績ページに登場～

広報部1号です。今回は、これまでとはひと味違うスライドショーを制作しました。
今までもスライドショー自体は度々設置しているのですが、レイアウトを組めば組むほど杓子定規だったりテンプレートっぽい仕上がりになってしまいます。

どう杓子定規なのかというと…

コンテンツを2列にしてスライドショーとテキストコンテンツを分けたのが下の図です。縦幅はコンパクトですが、そのぶん文頭から改行までの距離が短く、見出しも説明文も煩雑な印象を与えてしまいます。さらに、テキスト量が短いと下図のようにデッドスペースも生じてしまいます。

こちらはテキストの改行が少なくなりましたが、そもそも横幅を全部とるということは、縦幅もフルで取ってしまいます。これでは、本当に見せたいコンテンツが埋もれてしまいます。

スライドショーやファーストビューには、動きを通じてユーザーの目を引く力があります。その副作用として、より多くのスペースを所有してしまうし、工夫をしないと前述したようなテンプレ臭さが出てしまいます。

かといって「スペースを詰めればいいのか？」と言われるとそれも違います。

もしも狭いところにコンテンツをギュウギュウの満員電車のように鮨詰めするようなレイアウトにしてしまっては、ユーザーも疲れてしまいます。私たちが目指しているのは、そんな姿ではありません。

施工実績と写真を、もっとキャッチーな方法で伝えたい

ここ数日間、営業スタッフから沢山の現場写真を受け取って施工実績ページを更新していました。同時に、私は様々なショッピングサイトやPlayストアをはじめとした、アプリを入れることのできるサービス画面を見ていました。

Microsoftのストアアプリを開いたところ「お！」と思うものがありました。

メインのスライドは大きく表示され、次にスタンバイしている2つ目以降のスライドは縦長に表示されています。このレイアウトに着想を得て、さっそく私たちのWEBサイトを見直してみました。

私たちのブログ記事のアイキャッチ画像は1200×630pxサイズです。SNSで共有した時に出てくるサムネイルのサイズを意識しています。

これをTOPページでは4列×2行で升目状に並べています。もっと行数を増やすことも出来るのですが、そうしてしまうとやはりそのぶん縦幅を沢山とってしまいます。

コンパクトにまとまっているように見えるかもしれません。ですがダイナミックさがなく狭いところに沢山のテキスト(画像化されたものも含めて)が沢山入っていて煩雑な印象を与えがちです。

Microsoftのストアアプリと比べてみると、あちらはスッキリしていて見やすいですよね。

現在は施工実績ページのヘッダーのファーストビューにこんな仕掛けを作りました。

このサイズだからこそ伝わる良さがありますね！

特にメインのスライドは大きく表示させ、横長長方形の現場写真を贅沢に場所をとってダイナミックに伝えています。プラスでサブのスライドも横にスタンバイさせているので、そこまで縦幅を贅沢にとるわけではありません。

スタンバイしている2枚目、3枚目～のスライドは縦長にし、自分の出番が訪れると明るくなりフルサイズで表示されます。

こういう動きのあるスライドは、升目状のレイアウトと比べるとコンテンツの全容を一瞬で伝えることはできませんが、そのぶんユーザーを「お！」っと思わせたり、操作したくなるように出来ているんだなぁと思いました。

特定カテゴリのブログ記事をアイキャッチ画像つきで出力する。やってることは、たったそれだけの事なんですが見せ方って本当に沢山あるんです。

沢山のコンテンツを抱えながら、それでもシンプルさは損なわない。そんな情報発信をこれからも続けていきますね！

また次回のアップデートをお楽しみに！