LP
ランディングページ
ナレーター事務所付属養成所
申込導線を整理し、
ユーザーが迷わず行動できるLPを設計・実装。
ナレーター事務所である有限会社ワイワイワイ様の付属養成所「声塾」のランディングページです。
デザインからコーディングまで一貫して担当し、申込までの導線を整理した構成で実装しました。
レスポンシブ対応や軽微なアニメーションを含め、ユーザーが迷わず行動できるよう、情報の配置と視線の流れを意識してコーディングしています。
担当範囲Scope
- デザイン（Photoshop）作成
- HTML / CSS（Sass）によるコーディング全般
- レスポンシブ対応（モバイルファースト設計）
- スクロールアニメーションの実装
- 画像の書き出し・リサイズ対応
使用技術Tech
工夫・実装ポイント
モバイルファーストで設計し、崩れにくいレスポンシブを実現
若年層ユーザーを想定し、スマートフォンでの閲覧を優先して設計。
ブレイクポイントごとにレイアウトが破綻しないよう、シンプルな構造を意識して実装しました。
スクロールアニメーションを自作で実装
ライブラリに依存せず、軽量なJavaScriptでアニメーションを実装。
表示速度への影響を抑えつつ、視認性と演出を両立しました。
Sass設計により保守性の高いCSS構造を構築
変数・mixinを活用し、色・フォント・ブレイクポイントを管理。
修正や追加対応がしやすい構造を意識して設計しました。