こんにちは、ENOWL（エノウル）のなおです。
Wixでホームページを作った際、一番苦労するのが「スマホ表示（モバイル版）」の調整ではないでしょうか？
「パソコンで見ると完璧なのに、スマホで見るとレイアウトが崩れている…」
「スマホでメニューを開いた時だけ、なんだかデザインが浮いている気がする…」
こういった違和感は、サイトを訪れたお客様に「見づらいな」というストレスを与えてしまい、離脱の原因になってしまいます。
今回は、そんな「スマホ表示の崩れ」や「デザインの違和感」を解消した、ヴァイオリニスト様のホームページ改修事例をご紹介します！
ご依頼の経緯
ご依頼いただいたのは、ヴァイオリニストとしてご活躍されている肝付様です。ご自身でWixを使ってホームページを運営されていましたが、スマホ版の表示についていくつかのお悩みがあり、ご相談をいただきました。
1.トップページのレイアウト崩れ
スマホで見ると、画像と文字が意図しない重なり方をしてしまう。
2.メニューのデザイン
スマホ用メニューを開いた時のデザインが、ホームページ全体の雰囲気と合っていない。
3.ギャラリーの見にくさ
スマホだと画像が細長くなってしまい、写真がよく見えない。
【改修ポイント1】スマホでの「レイアウト崩れ」を修正
Wixはパソコン用の画面を作れば、ある程度スマホ用に最適化してくれますが、完璧ではありません。
特に、画像の上に文字を重ねるようなデザインの場合、画面幅の狭いスマホではレイアウトが大きく崩れてしまうことがあります。
今回は、無理に重ねず縦に並べることで、演奏活動の様子や実績がストレスなく伝わるように調整しました。
【改修ポイント2】スマホ用メニューを「サイトに馴染む」デザインへ
スマホサイトにおいて、メニュー画面（ハンバーガーメニューを開いた状態）は、ユーザーを案内する大切な場所です。
修正前は、ホームページ本体のデザインとスマホ用メニューのデザインがうまく噛み合っておらず、メニューを開いた瞬間に世界観が崩れてしまうような状態でした。
そこで、スマホ用メニューのデザインをリニューアル。
フォントや色使いを本体のデザインと合わせることで、メニューを開いても違和感がなく、サイトの美しい世界観をそのまま感じられるように調整しました。
【改修ポイント3】ギャラリーを「1枚ずつ大きく」見やすく
演奏風景などの写真を掲載している「ギャラリー」部分にも課題がありました。
スマホで見ると、画像が細長く縮小されて表示されてしまい、せっかくの素敵な写真がよく見えない状態だったのです。
そこで、レイアウト設定を見直し、スマホでは写真を1枚ずつ大きく表示するように変更しました。
これにより、お客様がスクロールしながら一枚一枚の写真をじっくり楽しめる、魅力的なギャラリーに生まれ変わりました。
スマホでの表示崩れ、あきらめていませんか？
今はホームページへのアクセスの7割以上がスマホからと言われています。 「パソコンでは綺麗だから大丈夫」と思っていても、実はスマホで見ているお客様を逃してしまっているかもしれません。
「自分で直そうとしたけど、どうしても崩れてしまう…」
「スマホだけ別の見やすいデザインにしたい」
Wixは便利なツールですが、スマホ版の調整にはちょっとしたコツが必要です。ご自身で何時間も悩むより、プロに任せてサクッと解決しませんか？
あわせて読みたい
料金表やスケジュールの「表」がスマホで崩れてしまう方は、こちらの事例も参考にしてみてください。
※ご紹介させていただく事例は、すべてご依頼者様から実績としての掲載許可をいただいております。
.png)
