スタッフブログ STAFF BLOG

スタッフブログ STAFF BLOG

Webサイトの構成とレイアウトを考える

2024/07/10

繁盛している他社サイトの理由を分析して、有効な部分だけを取り入れる。

 

スマートフォンベースのデザインのポイントはいくつかあります。

・ボタンは押しやすい形にしよう

ボタンの押しやすさは大切です。スマートフォンでは私たちは人差し指や親指でタップを行います。そのため、印象の良いボタンは横長よりも、正方形や、円が中心になります。横に長細いリンクなどは非常に押しにくいです。

これだけで、クリック率などに大きな影響を及ぼしてきます。

 

・情報は横に並べないようにしよう

次に、情報はなるべく横に並べずに、上下にスワイプするだけで、さらっと見られるようにするという点です。

スマートフォンでは上下の画像遷移はさほど苦なことではありません。

LINEやTwitter、Facebookなど主要なSNSがそうであるように、私たちの目線も上下移動になれているのです。

一方で、横にたくさん細かく情報が詰め込まれていると疲れてしまうことから、バナーを横に複数並べる、テキストボックスを複数並べるなどすると、ごちゃごちゃして視認性も操作性も悪くなってしまいます。

また、上下にすぐにスクロールされてしまうので、結果的にバナーを横にスライドしてもらえず、見てほしい情報を見てもらえない可能性が高くなります。

 

・メニュー表示をわかりやすくしよう

最後に、メニュー表示ですが、スマートフォンでサイトでは、ハンバーガーメニューというものがよく使われています。これは、PCサイトのサイドバーメニューをスマートフォンのレスポンシブウェブデザインが勝手にアイコンとしてまとめてしまうことから起きています。これだと、アイコンをクリックするまでどんなメニューがあるかわからず、使いにくいサイトになってしまいます。

特に閲覧してほしいページ、ニーズのあるページは、画面の下部もしくは上部に別途アイコンと合わせてメニューを制作するとよいでしょう。ハンバーガーメニュー部にも「メニュー」と文字を入れるとさらに分かりやすいです。

 

・フォントの大きさに注意しよう

スマートフォンの場合は、画面サイズの関係から利用するフォントのサイズにも注意が必要になります。極端に画面を専有せずに、はっきり視認できるおすすめのフォントのサイズは、15pxから16pxです。最低でも12px以上の大きさを確保するとよいでしょう。

 

・訪問者に実行してほしいアクションを明確にしよう

スマートフォンサイトはPCサイトに比べ、ながら利用や通勤電車など気が散る環境での利用、通信環境による表示の遅さなどからユーザーの離脱率が高いです。そのため、訪問者にどういったアクションを取ってほしいかをPCサイト以上に厳選して絞り込む必要があるのです。

スマートフォンサイトはPCサイトより商品購入率や問い合わせ率が下がるケースが多いので、出来る限りライトなオファー、具体的には「LINEの登録」「メルマガの登録」をトップページの目立つところに準備します。

また「初回限定のお得なセット商品」「混月の最も売れている商品、今ならおまけつき」といったように、迷わずに購入に結び付ける商品を用意して目立たせるなどの工夫も重要でしょう。

 

・他社サイトから「使いやすさ」の特徴を集めてみよう

Webサイトの制作・リニューアルを考える際に最も重要な考え方の1つは、「よくできたサイトを参考にする」ということ。

とりわけ初めてサイトをつくるときは、自社の事業や商品、デザインの構想ばかりを考えて、周りが見えなくなりがちです。参考になるものが何もない中で一から作り始めるよりも、同業でうまくいっているサイトを徹底的に研究してしまった方が、成功率はぐっと上がるでしょう。

Webビジネスで成功する人は、競合サイトや似たような売り方をしているサイトを徹底的に研究して、うまくいっている理由を探り、よい部分を上手に取り入れます。

再考にするサイトは、次の3種類に分けて、それぞれ10ずつリストアップしてみるのがよいでしょう。

・同業で繁盛していそうなサイト・業種は異なるが、商品の販売方法や傾向が似通っているサイト・まったく関係ないが、自分が注目している有名なサイトです。

調査対象の本命は、何といっても同業サイトになります。競合他社の探し方は、とりあえず自社の取り扱うサービス名や商品名、解決できる悩みなどのキーワードで検索の結果、上位に表示されるサイトを片っ端からチェックしていくことです。

家具販売を取り扱う会社であれば、家具販売でのネット上の露出が多いサイトを研究しましょう。実際に閲覧・利用しながら、売れていそうなサイトや、使いやすいサイトは何が違うのか、隅々まで調べていきましょう。

「お客様の声」がたくさん集まっている、新商品や新情報が頻繁に更新されている、目を引くキャッチコピーがあふれているなどが、売れているサイトの見分け方です。サイトの全体像を把握したい時は、サイトマップを見てみましょう。Googleの検索エンジンで「サイト名+サイトマップ」で検索すると、同業サイトのサイトマップに検索結果からアプローチすることができます。

隣接業種は、同業種のライバルが気が付いていないアイデアが隠されていることが多いです。

page top