格安SIMを、迷わず選んで申し込める1枚に。
格安SIM「ロケットモバイル」のサービスサイト(トップページ)。料金プランの比較から、選ぶポイント、申し込みの流れ、よくある質問まで。検討から申込までをひと続きにした縦長ページの UI/ビジュアルをデザインしました。担当は、このページのUI/ビジュアルデザインです。
全長16,000pxという情報量を、どうやって「比べて選んで申し込む」ひと続きの流れに変えたか。次ページの全体像に、その骨格が出ています。
実際に公開されているサービスサイトです。担当したのは 構成(ワイヤーフレーム)〜UI/ビジュアルデザインで、企画・コピー・実装は別の担当によるもの。ブランド名・ロゴ・料金等は各権利者に帰属します。
格安SIMの、サービストップページ。
格安SIM「ロケットモバイル」のサービスサイト(トップページ)です。業界最安級の料金と4キャリア対応をうたい、料金プランの比較・選ぶポイント・プラン変更・ロケモバポイント・お申し込みの流れ・よくある質問・お役立ち情報まで。検討に必要なものがひと通りそろった、本格的なサービスページです。
わたしが担当したのは、このページの 構成(ワイヤーフレーム)から、UI/ビジュアルデザインまで。決まった企画・原稿・素材を受け取り、情報量の多いサービスの構成をワイヤーフレームで組み立て、「比べやすく・申し込みやすい1枚」として設計する役割です。
料金は複雑。しかも、毎月払う。
格安SIMは、料金体系がとても複雑です。低速か高速か、4つのキャリア回線、データか通話か、さらにポイント制度まで。選択肢が多いほど、読み手は「結局どれがいいのか」で止まってしまいます。
そのうえ、毎月お金を払い続けるサービスへの信頼も欠かせません。多い情報を、比べやすく・申し込みやすく・安心して読めるかたちにすること。それが、このページのデザインで向き合った課題でした。
考えたこと、決めたこと。
「選ぶ→申し込む」まで、止まらせないための3つの判断です。
用途から入る、料金プラン。
「とにかく安く(低速の神プラン)」「特定のキャリア回線を使いたい(高速)」と、ユーザーの目的から入れるように構成。4キャリア × データ/通話を、ひとつの料金表で見比べられるかたちに整理しました。
検討から申込を、ひと続きに。
「選ぶ4つのポイント」→料金プラン→お申し込みの流れ→よくある質問。疑問を上から順に解きながら、自然と申し込みボタンへ向かう縦の導線としてレイアウトしました。
毎月使うものの、安心感。
青を基調に、誠実で落ち着いたトーンで構成。情報量が多くても詰め込みすぎず、余白と区切りで、迷わず読み進められる読み心地を優先しました。
プランも、申し込みも、分かりやすく。
料金プランは、目的から入って料金表で比べられるように。お申し込みの流れは、データプランと通話プランで手順が異なる点(本人確認やMNPの切り替え日など)も、STEPで明快に。「選ぶ」と「申し込む」の両方を、つまずかせないことを考えました。
PCとSP、それぞれに。
格安SIMは、スマホから申し込む人がとても多いサービスです。PC(1440px)で横に組んだ料金表やポイントを、SP(390px)では縦1列に積み直し、料金表やSTEPもモバイルで読める形に設計。PC・SPの2種類を用意しました。
自分が担当したこと。
このプロジェクトでのわたしの役割は、決まった企画・原稿・素材を受け取り、それをサービスサイトとして成立させる構成(ワイヤーフレーム)からのUI/ビジュアルデザインでした。ワイヤーフレームでの構成、全体のトーン設計、料金表・ポイント・申し込みSTEPといった各コンポーネントの設計、情報量の多いページのレイアウト、そしてPC・SPそれぞれへの展開までを担当しています。(企画・コピーライティング・コーディングは、別の担当によるものです。)
「選んで、申し込む」までを、静かに支える。
料金プランが複雑で、しかも毎月払い続けるサービス。だからこそ、比べやすさと、申し込みまでの分かりやすさ、そして安心して読める落ち着きが要ります。情報量の多い商用ページを、迷わせずに申し込みまで運ぶ。その設計が、この仕事のデザインでした。
華やかさよりも、正確さと分かりやすさ。cotozuが大切にしている「静かに整える」姿勢が、そのまま事業の成果につながっていくタイプの一枚です。