Works
Case Study

格安SIMを、迷わず選んで申し込める1枚に。

格安SIM「ロケットモバイル」のサービスサイト(トップページ)。料金プランの比較から、選ぶポイント、申し込みの流れ、よくある質問まで。検討から申込までをひと続きにした縦長ページの UI/ビジュアルをデザインしました。担当は、このページのUI/ビジュアルデザインです。

Role構成設計(ワイヤーフレーム)・UIデザイン・ビジュアルデザイン
Year2025
Domainサービスサイト(格安SIM)
Clientロケットモバイル
SurfacePC / SP(レスポンシブ)
ToolsFigma
注目ポイント

全長16,000pxという情報量を、どうやって「比べて選んで申し込む」ひと続きの流れに変えたか。次ページの全体像に、その骨格が出ています。

ロケットモバイルのサービスサイトのファーストビュー。「格安SIMなら業界最安級のロケットモバイル 月額料金328円〜」の見出しと、スマホのイラスト、新規お申込みボタン、グローバルナビゲーション
ファーストビュー(PC)— 業界最安級・4キャリア対応を、まっすぐ伝える

実際に公開されているサービスサイトです。担当したのは 構成(ワイヤーフレーム)〜UI/ビジュアルデザインで、企画・コピー・実装は別の担当によるもの。ブランド名・ロゴ・料金等は各権利者に帰属します。

01 / Overview

格安SIMの、サービストップページ。

格安SIM「ロケットモバイル」のサービスサイト(トップページ)です。業界最安級の料金と4キャリア対応をうたい、料金プランの比較・選ぶポイント・プラン変更・ロケモバポイント・お申し込みの流れ・よくある質問・お役立ち情報まで。検討に必要なものがひと通りそろった、本格的なサービスページです。

わたしが担当したのは、このページの 構成(ワイヤーフレーム)から、UI/ビジュアルデザインまで。決まった企画・原稿・素材を受け取り、情報量の多いサービスの構成をワイヤーフレームで組み立て、「比べやすく・申し込みやすい1枚」として設計する役割です。

02 / Challenge

料金は複雑。しかも、毎月払う。

格安SIMは、料金体系がとても複雑です。低速か高速か、4つのキャリア回線、データか通話か、さらにポイント制度まで。選択肢が多いほど、読み手は「結局どれがいいのか」で止まってしまいます。

そのうえ、毎月お金を払い続けるサービスへの信頼も欠かせません。多い情報を、比べやすく・申し込みやすく・安心して読めるかたちにすること。それが、このページのデザインで向き合った課題でした。

03 / Design decisions

考えたこと、決めたこと。

「選ぶ→申し込む」まで、止まらせないための3つの判断です。

01Compare

用途から入る、料金プラン。

「とにかく安く(低速の神プラン)」「特定のキャリア回線を使いたい(高速)」と、ユーザーの目的から入れるように構成。4キャリア × データ/通話を、ひとつの料金表で見比べられるかたちに整理しました。

02Funnel

検討から申込を、ひと続きに。

「選ぶ4つのポイント」→料金プラン→お申し込みの流れ→よくある質問。疑問を上から順に解きながら、自然と申し込みボタンへ向かう縦の導線としてレイアウトしました。

03Trust

毎月使うものの、安心感。

青を基調に、誠実で落ち着いたトーンで構成。情報量が多くても詰め込みすぎず、余白と区切りで、迷わず読み進められる読み心地を優先しました。

「ロケットモバイルの格安SIMを選ぶ4つのポイント」セクション:業界最安級・プラン変更可能・ロケモバポイント・4キャリア対応の4枚のカード
検討の入り口 — 「選ぶ4つのポイント」で不安を先に解く
04 / Plans & flow

プランも、申し込みも、分かりやすく。

料金プランは、目的から入って料金表で比べられるように。お申し込みの流れは、データプランと通話プランで手順が異なる点(本人確認やMNPの切り替え日など)も、STEPで明快に。「選ぶ」と「申し込む」の両方を、つまずかせないことを考えました。

料金プランの表示:「とにかく月額料金を抑えたい」神プラン。通信容量無制限・200kbps、データプランと通話プランの4キャリア別の月額料金表
料金プラン — 用途から選べる「神プラン」と、4キャリアの料金表
お申し込みの流れ:データプラン(STEP1〜4)と通話プラン(STEP1〜6、本人確認書類の提出やMNP切り替え日の指定を含む)を、STEPカードで示す
お申し込みの流れ — プラン別に、STEPで明快に
05 / Responsive

PCとSP、それぞれに。

格安SIMは、スマホから申し込む人がとても多いサービスです。PC(1440px)で横に組んだ料金表やポイントを、SP(390px)では縦1列に積み直し、料金表やSTEPもモバイルで読める形に設計。PC・SPの2種類を用意しました。

サービスサイトの全体像(PC)。ファーストビューから4つのポイント・料金プラン・プラン変更・申し込みの流れ・FAQ・お役立ち情報・フッターまでの縦長1枚
PC — 全体(枠内をスクロール)
サービスサイトの全体像(SP)。PC版の内容を縦1列に積み直したモバイル向けレイアウト
SP — 全体(枠内をスクロール)
06 / My role

自分が担当したこと。

このプロジェクトでのわたしの役割は、決まった企画・原稿・素材を受け取り、それをサービスサイトとして成立させる構成(ワイヤーフレーム)からのUI/ビジュアルデザインでした。ワイヤーフレームでの構成、全体のトーン設計、料金表・ポイント・申し込みSTEPといった各コンポーネントの設計、情報量の多いページのレイアウト、そしてPC・SPそれぞれへの展開までを担当しています。(企画・コピーライティング・コーディングは、別の担当によるものです。)

担当した範囲
ワイヤーフレーム ビジュアルデザイン UIデザイン レイアウト設計 情報整理(料金・比較) コンポーネント設計 PC+SP対応 Figma
07 / Reflection

「選んで、申し込む」までを、静かに支える。

料金プランが複雑で、しかも毎月払い続けるサービス。だからこそ、比べやすさと、申し込みまでの分かりやすさ、そして安心して読める落ち着きが要ります。情報量の多い商用ページを、迷わせずに申し込みまで運ぶ。その設計が、この仕事のデザインでした。

華やかさよりも、正確さと分かりやすさ。cotozuが大切にしている「静かに整える」姿勢が、そのまま事業の成果につながっていくタイプの一枚です。

Contact

感想やご連絡は、気軽にどうぞ。

Contact

ほかの制作を見る(Works)