見やすく、操作性のよいものにリニューアルしたい。

投稿日：2019-03-15

ユーザから見て魅力的なホームページにしたい。具体的には、みやすく、操作性のよいホームページにリニューアルしたい。

というご要望で取り組んだ、ペールメール様の導入事例のご紹介です。

リニューアル前の課題

 

こちらが、リニューアル前のホームページの画面キャプチャです。最近のＰＣで閲覧すると、モニタの解像度があがってきて、横幅が広くなっているため、ちょっと前のデザインのホームページは、幅が狭く、両側の余白が広すぎて、バランスがわるく見えてしまいます。

「配色や雰囲気は、気に入っている」ということでしたので、そのあたりは踏襲しながらも、以下のような具体的な課題を解決しつつ、リニューアルに取り組みました。

• 数年前のデザインのため、全体の幅が狭く、最近のサイトに比べて見づらい
• スマホ対応してない。個人ユーザが多いので、スマホで閲覧しやすくしたい
• トップのお知らせがダラダラと続いてしまう。整理したい
• トップから各ページへの操作を改善し、見やすくしたい

集客の目標としては、雑誌などのメディアで認知して検索する人も多いため、「ペールメール」と検索してホームページを見たときに「ドレスを見て、これを試着してみたい」と思って連絡をもらう、というアクションを想定しました。

そのためにも、ドレスをズラッと並べたい。実際に着た人のギャラリーを一覧で見せたい。更新もしたい。

というご要望のもと制作をスタートしました。

リニューアル後のホームページ

配色、雰囲気は同様にしながらも、メインビジュアルを大きめに見てもらい、小さめの画像（サムネイル）からは、ギャラリー、ホワイトドレス、カラードレス、といった主なドレスの一覧ページへのリンクを用意し、ドレスの実績を見てもらいやすい動線としています。

お知らせ機能は、最新の5件が表示されるように改善しています。一覧は、リンク先の一覧ページで見ることができます。お知らせの更新は、ペールメール様の社内で実施いただけます。

アクションとしては、試着のご予約になります。ので、CONTACTボタンを用意して、連絡先をわかりやすく表示しています。

英文字が多いのは、サイトの雰囲気を優先しているため、日本語はフリガナとして、雰囲気優先で、読みやすさを補足しています。

スマホでも見やすく

従来は、ＰＣページがそのまま縮小表示されていたところを、スマホ対応を実施しています。

トップページは、ドレスの写真の印象を出したい、ということで、スマホ時もスライドショーを表示しています。ただし、横幅が限られてくるため、スライドショー画像については、ＰＣ用とスマホ用をそれぞれ用意して、切り替えて表示しています。縦に長いドレスが全体見えるような高さで表示しています。

スマホでの実績一覧も見やすく改善

こちらは、リニューアル前ＨＰです。ＰＣ用をそのまま表示されるため、サイドバーがメニューになっており、右側のコンテンツは、かなり小さくなっています。見てもらいたかった、ドレスの実績も、スマホで見ると小さくなってかなり操作しづらい状況でした。

そこで、ドレスの実績もスマホ対応を実施したところ。。

このように、一覧画面は、二列で表示。SNSに近い操作で、増えた分は下にスクロールすれば見ていけます。さらにクリックすれば、詳細画面で、他のアングルからの写真も見ることができます。

特にこのような個人のお客さんが利用者となるような場合には、スマホでの閲覧が8割近くになることが多いです。スマホ対応を実施しておくことで、個人客さんからの閲覧、予約の流れを改善することに貢献しています。

事業に合わせた課題明確化とその解決

ホームページのリニューアルいおいては、その事業者さんの販売の流れ、現在の状況などによって、実現したいことが変わってきます。

一般的な集客できるホームページ！というものをただ当てはめるだけですと、有効に活用できない場合もあります。

今回のペールメール様では、「ユーザから見て魅力的なものにしたい。具体的には、みやすく、操作性のよいものにリニューアルしたい。」という前提のもと、「ドレスを見て、これを試着してみたい」と思って連絡をもらう、という流れを目指して取り組みました。実際にお問い合わせフォームからの連絡も入ってきているようです！うまくリニューアルが実現できてよかったです。

今後は、ドレスの掲載、更新も、社内でできる仕組みとなっていることから、日々の仕事を発信することで、アクセスアップにもつながって、じょじょにホームページが育っていくことも楽しみです。サポートしていきますので、ご活用いただけると嬉しく思います。

ありがとうございました。