集客できるホームページの作り方からSEOまで運用のコツをご紹介

【離脱を防ぐ】スマホメニューのデザインを見やすくリニューアルを行いました

CHACO-WEB公式サイトのスマホメニューのデザインリニューアルを行いました。

この度、CHACO-WEB公式サイトのスマホメニューのデザインリニューアルを行いました。

サイトはこちらからスマホでご覧ください。

なぜデザインをリニューアルしたのか?
理由は2つあります。

1つ目は、操作性の向上です。

スマホを持っていない人はいないくらい「スマホで常にネットに繋がっているのが当たり前」の世の中になりました。
またコロナ禍になってからより一層スマホを使う時間が増えたと言われています。

つまりホームページをスマホで見た時の操作性がウェブ集客においてとても重要になってきているのです。

スマホメニューを押しただけでホームページ全体が理解でき、次の行動へスムーズに誘導できるような操作性を狙いリニューアルしました。

2つ目は、他社との差別化です。

お客様は通常ウェブで仕事の依頼先を探す時、相見積もりといって複数の会社を比較し検討します。

もちろん料金やサービス内容が比較対象として重要なのは言うまでもないのですが、
「あの会社電話での対応が自分に合っていたな」
「メールの返信がとても早くて心地よかったな」
といった直感に訴えかけることが最終的な決断理由になることも多いと思います。

スマホメニューをリニューアルすることは、差別化のほんの1つのことでしかありませんが、お客様が相見積もりをしている時、少しでも頭の片隅に印象として残っていただけたらいいなという思いからリニューアルをしました。

この記事では、スマホメニューのデザインリニューアルで取り組んだ内容についてご紹介していきます。

スマホメニューだけで全体像が見えるからわかりやすさ向上

スマホメニューだけで全体像が見えるからわかりやすさ向上

一般的にスマホはパソコンと異なり、限られた面積で情報を読み取らなければなりません。

そのため、特にページ数の多いホームページなどの場合は、その全体像がわかりにくくなるケースがあります。

今回のデザインリニューアルでは、サイト全体の情報を以下3つのカテゴリーにわけ、スマホメニューから簡単に全体像が見えるようにしました。

1:制作プランの一覧
2:会社紹介などの固定的なコンテンツ
3:お問い合わせ

ホームページを訪れたお客様が何を求めているのか予測をしながら、ホームページの情報を整理することが操作性の良さに繋がると考えています。

アイコン画像を使って親しみやすい雰囲気を作り出します

アイコン画像を使って親しみやすい雰囲気を作り出します

ホームページ制作に関連する用語は専門的になりやすいため、ホームページ制作を考えているお客様が、その用語だらけのページを見て敬遠してしまうことがあると思います。

そこで、文字だけで埋め尽くされているメニューデザインよりも、綺麗な画像が入っているメニューデザインの方が、お客様が長い時間ホームページを見れるのではないかと考え、親しみやすいフルーツや野菜の画像を利用しています。

直感的に操作ができるメニューで離脱を防止する効果

スマホメニューが直感的にわかりやすい作りになっていると、離脱を防ぐことができます。
なぜならストレスを軽減させてくれるからです。

人は、ページを移動する度にストレスを感じます。
ページ移動を重ねるほど離脱率が高くなる傾向があるのはそのためです。

そこでメニューをぱっと見やすくわかりやすい、そして操作しやすいデザインにすることで、お客様はストレスなくいろいろなページを行き来することができます。

せっかくホームページが素敵なデザインでも、メニューが分かりにくければ機会損失を招いてしまいます。
些細なことのように思えますが、集客を増やすにはメニューのデザインにも配慮するべきです。

まとめ

見やすく操作しやすいスマホメニューを作るためには、実際に使ってみてユーザー目線に立ってデザインを考えるのが重要です。

パソコンでのデザインに慣れすぎてしまうと、
・スマホメニューボタンを押しても反応が悪い
・実際に使って見たら指が届かない場所に重要なボタンを配置してしまった
・動きが分かりづらく、使っていてイライラしてしまう
ということがスマホでは発生してしまいます。

・何か不明点があり答えを探している。
・何か困ったことがあり解消したいと思っている。

ホームページに訪れるお客様のニーズは様々ですが、みなさん何かを探しに訪れているわけです。

スマホメニューデザインはその一例に過ぎませんが、スマホサイトをデザインするときには、そういったお客様のニーズを考えながらデザインすることが何より重要なことなのです。


読めば集客力アップ CHACO-WEB
SNSでフォローする