■担当範囲
ディレクション / Webデザイン / フロントエンドエンジニア
■使用ツール・言語
JavaScript / CSS / Adobe XD
作品説明 万有興産株式会社様の事業サービス(または採用情報)を、マンガを用いて分かりやすく解説するランディングページを新規構築いたしました。
【Direction & Design (Adobe XD)】 「文字だけでは伝わりにくいサービス内容を、ストーリー形式で直感的に理解してもらう」ことを目的に設計しました。 Adobe XDを用いて、マンガのコマ割りとWebコンテンツが違和感なく融合するレイアウトを検証。 スマートフォンでの閲覧時でも文字が小さくなりすぎず、ストレスなく読み進められるよう、コマの配置や余白のバランスを徹底的に調整しました。また、マンガの続きが気になる構成にし、離脱を防ぎながらコンバージョン(問い合わせ)へ誘導する導線設計を行っています。
【Development (CSS / JavaScript)】 マンガというビジュアルコンテンツが主役であるため、読み込み速度やスクロールの挙動には特に配慮しました。 JavaScriptを用いて、スクロールに合わせて次のコマや吹き出しが心地よいタイミングで現れる演出を実装。ユーザーを飽きさせず、最後まで物語を読むようにサービス理解を深めてもらうためのインタラクションを構築しています。