MENU

【サイト模写&観察】効果的なスライダーとメガフッター

2021 12/03
【サイト模写&観察】効果的なスライダーとメガフッター

今回は駐車場のサービスサイトです。ページ数や項目のをスライダーやメガメニュー、余白でスッキリ整理されていて見やすいです。

素敵な見本サイト様:https://www.amano.co.jp/corp/outline.html

目次

PCのデザイン模写

画像のない状態でフラットに構成を見たかったので写真はなしで模写しました。
引いてみるとより余白が視線の通り道の役割を果たしていることがわかります。

想定のターゲットと目的

ターゲット
デパートやマンション、病院など、施設に駐車場の導入を検討している企業・団体。30代~50代くらいの施設管理者、経営者。駐車場のことは種類や導入方法もよくわからない。BtoBでスマホよりPCユーザーの方が多そう。

目的
・一問一答の「かんたん診断」によって顧客自身で悩みを具体化・自覚してもらい、最適な製品ページに飛ばす。メールや電話で悩みを聞いておすすめ製品の説明をするより営業の人件費が省けてスムーズなお問い合わせや依頼に繋がりそう。
・お問い合わせ、見積り依頼、資料請求フォームに飛ばす。
・カタログ、資料をダウンロードフォームに飛ばして、顧客情報を得て分析や次のアプローチに繋げる。

気付いたこと

ファーストビュー

ヘッダー

  • PC版は導入事例以外はマウスオーバーでメガメニューが表れる。一覧ページへのリンクはイラスト付きでわかりやすい。詳細ページへの直接リンクボタンはテキストと下線、矢印。ページ数が多くてもまとまりがあり、ヘッダーから探しやすい。
  • マウスオーバーで色だけでなくsvgアイコンのデザインが少し変わる。疑似要素before→afterでbackgroudに指定した画像を切り替えしている。
  • お問い合わせページは右上にグレー背景で少し目立たせる。

MV(PC版)

左のMVゾーン
  • MV + 一言 + 詳しくみるボタンで丸っと下層ページのリンクボタン。MV=6種類の画像に切り替わる、イラストや透過色は目次の左側のラインと連動していることで関連性を強調。
  • 一言=h2タグ20字程度の長さで端的に下層ページの内容を示すもの。高さを固定。ボタンもしくは帯の色は目次の左側のラインと連動で関連性を示唆。
  • 詳しくみるボタンは、MVや一言にホバーで丸が小さくなり、青orグレー→白に変化。
右の目次ゾーン
  • MVと目次が連携して切り替わる(slick-sliderサムネ付き)⇒右に目次があることで全体像がわかる、目的のページに早くたどり着ける。表示中orホバーで左の枠線の色がMVのタイトル帯と連携していて統一感がある。左の帯と文字色がMVの表示orホバーで一つだけ#000、それ以外はグレーで選択中のものとそうでないものをはっきり分けている。
  • 目次の文字はliタグに疑似要素で入れて中央に、buttunタグで下層ページにリンク

MV(SP版)

  • 右の目次はなしでMV、一言とボタンのみ。slick-sliderのページネーションで該当ページは青くなり総ページ数と読み込み時間がわかる。

サービスの概要

PC版

  • innerの上270px下370px(見た目は上140下222位)、1366px中央揃えで左右の余白⇒上下左右に十分な余白があり、中央の要素に注目できる
  • イラストと下の薄水色の帯は一枚の画像。真ん中より-15em上⇒下に薄水色の帯を置いて視線を左に誘導。帯からイラストを少し上にはみ出すことでイラストの高さを出し、左上→右下で見やすい流れを作っている。
  • テキスト要素を左右のpaddingで画像に少し被せている⇒イラストとテキストの距離が近くなり視線が散らばらず、単調すぎずゆとりを感じる。
  • h3見出し(36px)はアクセントカラーの濃い青で基本20~30字前後3行までの端的な文章⇒イラストや写真だけでは抽象的にも感じるが、内容の要約がわかりやすく丁寧な印象。スクロールエフェクトで視線を集める。

SP版

  • 左右に余白を入れつつ、背景色を左寄せで右に抜け道を作っている。テキストも左寄せでスッキリ読める。

製品・施設・お悩みから探す

PC版

  • 背景に薄水色の帯、右に背景の余白⇒上から続く余白の流れを切らず、下に視線を誘導できる。
  • 〇〇から探す下層ページの各一覧の要素をトップページにも横に並べて左に流す⇒タブ切り替えと動きで下層とは見せ方を変えつつ詳細ページへの導線を確保。下に長すぎることもなく、興味がある人へのアプローチができる。
  • 製品、施設はアイソメトリックイラスト、お悩みは手書き感のあるゆるいイラストの2種類⇒製品と施設は平面だとわかりにくいが、斜め上から見た立体感のあるイラストの方が細かい点まで表現でき、わかりやすい。機能面を強調するイラスト。
  • お悩みのイラストは②のものと同じテイストであたたかみがある。堅めのデザイン、イラストと差別化できていて目を惹く。
  • aタグをマウスオーバーした時の動き⇒イラスト:transform: translateY(-1em);で上に動く、文字:黒→濃い青に変化、丸ボタン:svgの切り替わりでグレーの枠線が濃い青に変化

SP版

  • 自動ループスライドのまま、要素が複数あることがわかる。
  • 「〇〇から探す」のタブボタンが上下にあり、スクロールで戻らずボタンを押せる工夫がされている。
  • スクロールで左にオレンジのお問い合わせボタンが現れる。「お問い合わせはこちら」の吹き出しが一瞬出て消える。青の補色で目立つ。

管理・運営・保守

  • 下層ページのリンクボタン。アイコンと文字、丸矢印ボタン、下に下線⇒マウスオーバーでアイコン含めて濃い青に変わり、→は右に動き、下線が0.33→0.45emに太くなる⇒シンプルだが、左右の余白とマウスオーバーの動きでボタンだとわかり押しやすい。四角の枠ではなく、太い下線と右の点線で上を開けることで見出しからスムーズにボタンに視線が行く。

導入事例一覧への導線

PC版

  • 左寄せで長方形の画像2枚(施設1枚+駐車券のゲート1枚)3種類をswiper自動スライド⇒導入事例の画像を抜粋で大きく入れることで上下の同サイズで画像を並べたセクションと区別する。ここがないと同じ構成で単調になる。スライドにすることで様々な施設があることをアピール。
  • 右に見出し、テキストと導入事例一覧へのボタン⇒【サービスの概要】と同じ幅で左右に余白があり、下のセクションに視線を逃がしている。
  • 背景に薄水色の円を右寄せで配置⇒真ん中の余白で下への抜け道を作っている。無いと余白が際立ちすぎる。四角形でなく円であることで長方形の画像とのメリハリが生まれリンクボタンに丸が使われているので違和感なく馴染む。

SP版

  • 上がテキスト、下に画像。テキストの両側、画像の右側に余白があるのでスマホで見ても圧迫感がない。

ピックアップ導入事例

PC版

  • 左上に見出し、右上にスライドボタン⇒上にまとめることで省スペースになる。
  • 自動で要素がスライド、【導入事例一覧への導線】の続きとして背景は白のまま⇒【製品・施設・お悩みから探す】だけだと実例が見えず信頼性が低くなる。写真とクライアント名までトップに出すことできちんと実績のある会社であることを示す。
  • 下層ページへのリンクボタンはマウスオーバーで円線が時計まわりで濃い青に変わる。

SP版

  • 自動スクロールでなく、手動でスライドできる。要素を1.5個分見せることでスライドできることを示唆。

アマノの強み

  • バナーリンクとして背景にドロップシャドウをかけて少し強調している。「強み」より「自慢」というワードの方が目を惹く。
  • フラットデザインの中でここだけドロップシャドウ付きの画像。浮き上がっている感を出すと少し目立つ。

よくあるご質問

  • 背景に薄水色の帯、右に余白と右下にグレーの四角形⇒上のセクションと区別されて見やすい。右に余白と■があることで下に目線を誘導する流れを作っている。
  • 左に悩みカテゴリ+質問、右に丸矢印で5つの質問を抜粋でトップにも載せて、一覧へのリンクボタン⇒質問の中でも特によくあるもの、強調したいものを前に出して依頼しようか悩む顧客の不安を早めに取り除く。悩みがカテゴライズされていて後の質問が理解しやすい。

お知らせ

  • 下層ページはなし。今後は最新のものだけここに入れて他は削除or下に連なる?
  • 上に線と上下に余白あり、⑦と別セクションであるとわかる。

アマノからのおすすめページ

PC版

  • 量が多い下層ページも5つ抜粋してスライドにすることで、何となく興味を持ったけどどこからみたらよいかわからない顧客を下層ページに誘導できる。
  • スライドは【ピックアップ導入事例】と同じレイアウトで背景は濃い青、文字は白抜き⇒濃い青が背景にあることで他のセクションと区別できる。濃い色は上より下部にあるほうがバランスよく感じる。

SP版

  • 要素を左右から少し見せることで手動でスライドできることを示唆。

ページナビとページトップに戻るボタン

  • 全ページ共通のCTAより前にある方がわかりやすい。濃い青からCTAに行くよりも白でワンクッション挟めるので見やすい。
  • トップはアイコンにすることで省スペースにもなる。下層ページでは矢印はかなり薄いグレー、該当ページは太字。

CTA(かんたん診断、お問い合わせ、総合カタログDL・資料DL)

PC版

  • ブロックの大きさ、色を変えて最適な下層ページに誘導する。ブロックなのでレスポンシブ化もしやすい。
  • かんたん診断は、下層で使われているイラストを出しつつたくさん項目があって迷う顧客をここから誘導できる。かんたん診断ページは一問一答でおすすめ製品を提示してくれる。
  • お問い合わせ、見積り依頼、資料請求の3つのボタンを白線白抜きボタンで提示。マウスオーバーでボタンが白くなる。
  • かんたん診断の様に説明やお問い合わせの様にボタンを選ぶ必要がないのでブロックごとボタン。アイコン付きでカタログと資料のイメージができるのでわかりやすい。マウスオーバーで左から背景色のみ薄くなる。

SP版

  • 上にかんたん診断のブロック、下にお問い合わせとDLボタンのブロック。
  • お問い合わせのボタンはスマホでは常に白⇒ボタンだとわかりやすい。

メガフッター

PC版

  • 背景はすべて黒、白ではなく、ナビ部分は白背景、CopyrightとPAGE TOPボタンは黒背景⇒ナビは量が多いので黒より白の方が見やすい。下に濃い色を持ってくると重さが出てしっくりくる。
  • PCでは、左にロゴ、電話番号とCTAボタン、会社概要などのナビ、関連サイトへのリンク右にページナビで、下層ページのさらに下のページも部分的に出している⇒ページ数が多い×PCだと目的でページを探しやすく、読み終わった後すぐ次のページへ行けるので便利

スマホ版

  • ナビはなし。ロゴとコーポレートサイトのリンクのみで省スペース

まとめ

複数のスライダーでも見せ方を変えると見やすくなるんだなと思いました。Slick SlideやSwiperのコーディングをする際にも参考にしたいです。デザインのときからどういう動きがしたいのか、どうやったらできるのかもっと意識して作成する必要があるそうです。

また、最近見た記事ではメガフッターが来年のトレンドだそうで、導線として理にかなっているので特にページ数が多いときほど取り入れていきたいなと思います。

今回はここまで。それではまた!

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる