皆様こんにちは。ベイちゃんです！
最近、悪役令嬢が出てくる漫画にハマっていて、ついつい夜更かししてしまい絶賛寝不足ですw
今回はConoHa WINGの「モバイル改善」 に携わったお話をしようと思います！
INDEX
モバイルに適したUIに改善せよ
きっかけは「TOPページの直帰率・離脱率を改善したい」という課題。
その中で、まずはモバイルからの閲覧体験をより快適にすることを目指すことになりました。
しかも今回はコンテンツデザイン自体を大きく変えるのではなく、モバイルUIとしてより適した形に整えるというもので…
つまり、今ある良さはそのままに、モバイルユーザーに優しくする感じです。
むずかし
改善提案の内容
私が提案した改善は、主に以下4つです👇
- 画像軽量化
- ボタンの位置を正しく
- ヘッダーをスマートに
- TOPに戻るボタンの仕様変更
この中でも特に大きな成果が出たのが…画像の軽量化でした！
「画像軽量化」でユーザーのストレスを減らせ！
離脱率や直帰率の改善には「どんな環境でも快適にページが開けること」が大切です。
モバイルユーザーは、
- 通勤中の電車で見たり…
- Wi-Fiのないカフェで見たり…
- 通信制限中に見たり…
と、さまざまな環境でアクセスします。
だからこそ、通信環境が悪くても快適に閲覧できるサイトにすることが重要でした。
Step 1：現状を把握する
まずは現状の画像サイズとロード時間を確認！
コーダーさんに教えてもらいながら、Chromeの「検証ツール」で調べました。
手順はとっても簡単👇
- 1. Chromeで見たいサイトを開く
- 2. 右クリック→「検証」
- 3. 「Network」タブを開く
- 4. 「Disable cache」にチェック（キャッシュ無効化）
- 5. 「Slow 4G」を選択（悪回線を想定）し、リロード
- 6. 「Size」を2回クリックして画像サイズの大きい順に並べ替え
これで「初回アクセス」かつ「悪回線」時のリアルな状況が確認できます！
そして出てきた結果がこちら👇
いや、画像サイズでか！！！！！！！！！！！
Step 2：どの画像をどのように軽くするか？
重い画像がどれか分かったので、重い順から、以下の方法で軽量化を実施することに👇
- 圧縮
- リサイズ
- SVG化
それぞれどんな方法で軽量化するか考えるため、軽量化対象とそれに適した軽量化方法を表にまとめました！👇
地味にめんどくさかった！
そして、まとめた通りに軽量化を行い………
Step 3：結果
画像軽量化対応の結果、ページの読み込み時間 が約39秒から約24秒（約15秒短縮）し、転送データ量も6,870 KB → 4,102 KB（約40％削減）しました🥳
- ※すべて「Slow 4G」で比較
しかも、改善した日からCLS（表示のズレ）も大幅に改善しており、予期せぬ副産物でした。
画像軽量化は、地味な作業で「Theデザイナー！」という感じではないですが、この地味な作業がサイト全体に影響するくらい大事なことなんだと思いました。
「ボタンの位置」を正しく
次に行ったのが「ボタンの位置」の改善です。
「お申し込みボタン」と「機能一覧をもっと見る」などの詳細ボタンですが、実は改善前のサイトではお申し込みボタンが下に配置されていました…！
私も今回の改善で学んだことなんですが、いろいろなデザインガイドを見ていると「2種類のボタンを縦積みする場合、プライマリ（重要な操作）は上、セカンダリは下」に配置することが推奨されていたんです。
つまり、ユーザーに最も押してほしい「お申し込みボタン」を上に置く方が良いということ！
この変更によって、CTAの優先度がより明確になりました。
UIとは奥深い...学び...
「ヘッダー」をスマートに
次に行ったのが「ヘッダー」の改善です。
改善前のサイトでは、ヘッダーが上部固定だったため、モバイルの小さい画面では表示領域を圧迫していました。
しかも、ヘッダー内にもCTAがあり、スクロール時に出てくるCTAとヘッダーのCTAでCTAの重複状態！
UXの原則では「1画面1アクション」が望ましいとされているので、ヘッダーを以下のように改善しました。
- 下にスクロール→ヘッダー非表示
- 上にスクロール→再表示
これで可視領域を広く確保しつつ、必要なときにすぐにナビゲーションへアクセスできるようになりました！
「TOPに戻るボタン」は本当に必要？
次に行ったのが「TOPに戻るボタン」の改善です。
モバイルで常に追随する「TOPに戻るボタン」は、誤タップの原因になりやすいです。
また、ConoHa WING TOPは各セクションにお申し込みボタンがあるため、上に戻る必要も少ない。
そのため今回は、ヘッダー同様に
- 下にスクロール→非表示
- 上にスクロール→表示
という仕様にしました。
学生の頃は、なんとなく他のサイトにもあるから〜と「TOPに戻るボタン」を真似して入れていましたが、
今は「その要素、本当に必要？」と考えられるようになりました。
これが成長…
まとめ
今回のモバイル改善を通して学んだのは、小さな改善が、大きな体験につながるということです。
ユーザーの利用環境を想像し、根拠をもってUIを調整することで、小さな改善でも大きな体験を生み出せると感じました。
「画像を軽くする」「ボタンを少し動かす」、そんな一つ一つの工夫が、快適な体験をつくる第一歩なんです！
これからも、なんとなく入れようではなく、なぜそれが良いのかを考えながらデザインしていきたいと思います。
ここまで読んでくださりありがとうございました！この記事が誰かの学びになると嬉しいです！
