概要
スケジュールや名刺をデジタル化するサービス「e-tiga」を紹介するランディングページのサンプルサイトです（仮想案件）。
担当はコーディングで、Figma
の支給デザインから実装しました。複数の機能を持つ Web サービスの魅力を、限られた画面のなかで整理して伝える構成にしています。
制作会社さまの視点では、情報量の多いサービス紹介を、わかりやすく整理して実装できる構成力を確認いただける一例です。
課題
複数の機能を持つ Web サービスは、すべてを一度に並べると情報が渋滞し、肝心の魅力が伝わりにくくなります。
限られた画面のなかで機能ごとの情報を整理し、サービスの世界観を崩さず伝えることが、想定した課題でした。
解決アプローチ
情報整理： タブによる画面表示の切り替えを実装し、機能ごとの情報を切り分けて提示しました。利用者は知りたい機能だけを選んで見られるため、情報量の多さがそのまま負担にならない構成にしています。
操作性への配慮： フリックとボタンの両方に対応したスライダーを併用し、PC・スマートフォンの双方で自然な操作感を確保しました。
デザイン再現性への配慮： レスポンシブデザインに配慮した実装で、サービスの世界観を崩さず、どの画面サイズでも整った表示を保っています。
工夫したポイント / 想定効果
タブ切り替えで情報を整理したことで、機能の多いサービスでも一つひとつを落ち着いて理解してもらえる構成にできた点が工夫です。
機能理解が進むことで、サービスの利用検討につなげられることが期待できます。