- 制作背景
-
実在企業様の新規ランディングページ制作を担当しました。（現在制作途中です。）
副業やフリーランスを対象に、税務処理の課題を解決するチャットボットAIサービスの利用促進を目的としたランディングページを制作しました。
専門知識がなくても「簡単に使える」という安心感を伝えるとともに、登録までの導線を明確に設計することを意識しました。
- ターゲット
-
副業・フリーランスになったばかりで、確定申告や税務処理に不安を抱える20〜30代
- デザインコンセプト
-
淡い青を基調に清潔感と信頼感を演出し、イラストを多用することで専門的すぎない親しみやすさを表現しました。さらに、ボタンや重要なコピーにはオレンジを使用することで、視認性を高めつつ視線を自然に行動ボタンへ導くデザインを目指しました。
- 制作プロセス
-
・リサーチ：既存の税務関連サービスのLPを調査し、「信頼性をどう伝えるか」「難しさをどう払拭するか」が共通の課題であると分析しました。その中で、人の写真を多用したページは堅い印象を与える傾向があり、イラストを使用することでより親しみやすさを表現できると考えました。
・構成設計：ユーザーが自然にサービス登録へ進めるように、「悩みの提示 → 解決策の提示 → 利用手順の説明 → FAQ」というストーリー設計を行いました。また、ページの各所に登録ボタンを複数回配置し、どの位置からでも行動に移れるよう工夫しました。
・素材制作：必要なイラスト素材を購入し、Illustratorで調整を加えました。さらにPhotoshopで切り抜きや色味の調整を行い、全体のトーン（青基調＋オレンジのアクセント）に統一感を持たせました。
・実装：HTML・CSS・JavaScriptを用いてコーディングし、PCとスマホの両方で最適に表示されるようレスポンシブ対応を実装しました。
・改善点・気づき：初稿では全体を整った印象に仕上げましたが、クライアント様から「もっとインパクトのある、大きめのデザインに」とのフィードバックを受けました。そのため、イラストやフォントサイズを全体的に拡大し、よりダイナミックで印象に残るデザインへ改善しました。このプロセスを通して、ユーザー視点だけでなく依頼者の意図を反映させる重要性を学びました。
- 工夫した点
-
・難しい印象を避けるため、イラストを用い、直感的に理解できる親しみやすい構成にしました。
・利用手順の説明は、スマホでの閲覧時に、Swiper.jsを実装することでスライド形式で大きく見やすくしました。
・「登録ボタン」をページ内の複数箇所に配置し、どの位置からでもスムーズに行動へ移せる導線を設計しました。
・青とオレンジのコントラストを用いて、清潔感・安心感を与えつつ、同時に行動を促す強さを演出しました。
- 制作時間
-
デザイン：5日
コーディング：2週間
- 使用ツール
-
Illustrator／Photoshop／PhpStorm
