- ターゲット
- 20~40代 性別問わず
- 目的
-
- コミュニティの効果的な使い方を伝え、初参加者の不安を軽減
- コミュニティへの参加者増加
- 活用法の認知向上
- サイト構成
- この作業会に参加するメリットを最優先で伝えるため、「Advantage」をトップのセクションに配置しました。
また、興味を持ったタイミングですぐお問い合わせできるよう、固定ヘッダーにCTAボタンを設置。
作業会の雰囲気を直感的に感じてもらえるよう、トップページ内に必要な情報を集約し、詳細な使い方は個別ページに分けました。
- デザイン
- ローディングアニメーションでは、孤独に学習している寂しさからMeta Leafに出会い、気持ちが晴れる瞬間を表現。
集中力を高めつつ心を落ち着かせる効果のある柔らかい青をメインカラーに採用し、仲間と出会える喜びをアクセントカラーのオレンジで表現しました。
- 制作のこだわり
- 「State」セクションでは、複数の写真をバランス良く見せるためにグリッドデザインを採用。大小の写真を組み合わせ、作業会の楽しさと活気を表現しました。
「How to use」では、利用手順に沿ったスライドアニメーションを実装し、レスポンシブ時には縦並びに合わせてアニメーション方向も変化するよう工夫しています。
Footer」では、ContactとInformationを並列に配置し、概要と行動喚起を同時に提示。アバターには他セクションと異なる揺れるアニメーションを加え、仲間と楽しく参加する雰囲気を演出しました。
- 制作体制
- 3名での共同開発。全体設計とUIは全員で担当し、私は「State」「Footer」「How to
use」各セクションのデザインとコーディングを担当。Gitを用いたバージョン管理で、効率的かつ円滑な共同開発を実現しました。
- 制作期間
- 企画 / 情報設計 / WF 1週間
デザイン ０．５週間
コーディング １週間
- 使用ツール
- Figma / VScode /Git,GirHub
一覧にもどる
