専門的なサービスを、上から読むだけで伝わる1枚に。
アプリに、ポップアップ・チュートリアル・ポイント機能などを手早く実装できるB2Bサービス「モチギア」のサービスサイト。「こんな悩み」から「選ばれる理由」「サービスラインナップ」「導入実績」まで。検討に必要な情報を、上から読むだけで伝わる縦長ページに整理しました。担当は、構成（ワイヤーフレーム）から UI／ビジュアルデザインまでです。
開発者向けの専門的なサービスを、どうやって「これならできそう」に変えたか。悩み→理由→サービス→実績という縦の順序が答えです。
担当したのは、このページの構成（ワイヤーフレーム）と UI／ビジュアルデザインです。コピー・実装・一部素材（イラスト・アプリ画面）は別の担当によるもの。ブランド名・ロゴ・料金等は各権利者に帰属します。
機能を、手早くアプリへ。
モチギアは、アプリに「ポップアップメッセージ」「チュートリアル」「Web view」「ポイント機能」などを、SDKを入れるだけ・ノーコードで手早く実装できるサービスです。運営者・開発者の負担を減らし、月額5,000円から・初月無料で始められる。開発の現場に向けた、B2Bのサービスサイトです。
わたしが担当したのは、このページの 構成（ワイヤーフレーム） と UI／ビジュアルデザイン。何を・どの順番で見せれば検討する人が迷わず理解できるか、情報の設計から見た目の仕上げまでを受け持ちました。
「難しそう」を、「これならできそう」に。
開発者・運営者に向けたサービスは、専門的で「難しそう」に見えがちです。しかもモチギアが提供する機能は「ポモチップ」シリーズとして複数あり、それぞれに使い方も料金もある。情報量は多く、放っておくと専門用語の羅列になってしまいます。
だからこそ、決めることの多くは「順番」と「見せ方」でした。何に悩んでいる人に、どの情報から届けるか。性格の違う複数のサービスを、どう並べれば一目で比べられるか。構成（ワイヤーフレーム）の段階から伝わる順番を組み立てることが、この仕事の中心でした。
考えたこと、決めたこと。
「読む→わかる→試したくなる」まで、迷わせないための3つの判断です。
悩みから入って、順に解く。
「こんなお悩みはありませんか？」で開発現場の“あるある”に共感し、「選ばれる理由（コスト・かんたん・ノーコード）」で不安を先に解く。悩み→理由→サービス→実績→FAQと、上から読むだけで納得に近づく縦の流れを、ワイヤーフレームで設計しました。
複数のサービスを、同じ型で。
ポップアップ／チュートリアル／Web view／ポイント for Shopify。機能の違うサービスを「機能説明・こんな風に使えます・料金」という共通のカードに揃え、左右交互のリズムで、どれも同じ手順で比べられるように整理しました。
元気な赤を、散らからせない。
ブランドの赤は、活力の色。ベタで使うと圧が強くなるので、面で効かせる場所と白であける場所を分けました。情報量が多くても詰まって見えない、余白のある赤に整えています。
悩みから実績まで、ひとつの流れに。
ページは、悩み→選ばれる理由→サービスラインナップ→導入実績→よくある質問→会社概要、という順番で構成。まず共感し、価値を知り、具体を見て、実例で安心する。検討する人の気持ちの動きに沿って、上から積み上げました。
中でもサービスラインナップは、性格の違う複数の機能を同じ型のカードで並べ、左右交互のレイアウトでリズムをつけながら、それぞれを迷わず比べられるかたちにしています。
PCとSP、それぞれに。
開発者・運営者が確認する画面は、PCもスマホもあります。PC（1440px）で横に組んだカードや料金表を、SP（390px）では縦1列に積み直し、モックアップや料金も小さな画面で読める形に設計。PC・SPの2種類を用意しました。
自分が担当したこと。
このプロジェクトでのわたしの役割は、サービスの内容と素材を受け取り、それを「伝わるサービスサイト」に組み立てる構成（ワイヤーフレーム）と、UI／ビジュアルデザインでした。情報の順番づくり、共通カードなどのコンポーネント設計、赤を基調にしたトーンの調整、そしてPC・SPそれぞれへの展開までを担当しています。（コピーライティング・コーディング・一部の素材は、別の担当によるものです。）
順番が決まると、むずかしい話も伝わる。
専門的なサービスほど、「何を言うか」より「どの順番で見せるか」で伝わり方が変わります。悩みから入り、理由で安心し、具体で納得する。その流れを構成から組み立てられたことが、このサイトのいちばんの仕事でした。
華やかな装飾ではなく、伝わる順番と、比べやすい型。cotozuが大切にしている「静かに整える」姿勢が、そのまま開発者・運営者の“わかりやすさ”につながっていく一枚です。