Woks
仮想LP
CodeCanvas
ホームページ
summary
概要
お客様
CodeCanvas
媒体
仮想LP
Figmaデザイン
GitHub
業種
プログラミングスクール
地域
＊＊＊＊
製作年
2025年
製作期間
約1週間
ポイント
未経験からITエンジニアを目指す層をターゲットとした、架空のオンライン・プログラミングスクール「CodeCanvas」のLPを制作しました。本プロジェクトでは、企画・設計といった上流工程から、Figmaでのデザイン、SassやJavaScriptを用いたフロントエンド実装までを一貫して担当しました。
コンセプト・戦略
- AI（Gemini）の活用による効率的な要件定義 本プロジェクトの企画・要件定義の初期段階では、AI（Google Gemini）を活用しました。ペルソナ設定、サイト構成案、ライティングといった上流工程をAIと協働することで、戦略立案の精度とスピードを向上させています。これにより、よりユーザーの課題解決にフォーカスしたクリエイティブな実装作業にリソースを集中させることができました。
- UI/UXデザイン ターゲットが抱える「未経験からの挑戦への不安」を払拭するため、信頼感を与えるダークブルーを基調としつつ、アクセントカラーで未来への希望を表現。専門用語を排した誠実なライティングと組み合わせ、安心して次のステップへ進めるようなUI/UXを追求しました。
実装のポイント（制作会社様へ）
実務でのチーム開発を想定し、可読性・保守性・再利用性を重視したコード設計を行いました。
セマンティックなHTML header, main, sectionといったセマンティックタグを適切に使用し、文書構造を論理的にマークアップしました。これはSEO効果を高めるだけでなく、コードの可読性を向上させ、チームメンバー間の円滑な共同作業に貢献します。ぐことができるよう、ANDoU Designは心から応援しています。
Sass(SCSS)による効率的で保守性の高いCSS設計 CSSの設計においては、Sass(SCSS)を全面的に採用し、コンポーネントベースの管理しやすいスタイリングを実践しました。
モジュール化: _header.scssや_footer.scssのように機能単位でファイルを分割し、@useで読み込むことで、コードの見通しを良くし、影響範囲を明確にしました。これにより、改修や機能追加が容易な設計となっています。
変数とMixinの活用: 色やブレークポイントを変数化し、メディアクエリやflexboxの指定をMixinとして定義しました。これにより、サイト全体でデザインの一貫性を保ちつつ、コードの重複を排除し、効率的な開発を実現しています。
BEMを意識した命名規則: testimonials-block-textBlockのように、BEM（Block, Element, Modifier）を意識したクラス名を付けることで、どの要素に対するスタイルか直感的に理解しやすく、意図しないスタイルの上書きを防ぎます。
JavaScriptによるインタラクティブなUI実装 ユーザー体験を向上させるため、JavaScript（jQuery含む）を用いて多彩な動的要素を実装しました。
スクロール連動アニメーション: 画面に要素が入ったタイミングで発火するフェードインアニメーションを実装し、ユーザーを飽きさせない視覚的な演出を加えました。
UIコンポーネント: ハンバーガーメニュー、アコーディオン、スムーズスクロール、トップへ戻るボタンなど、現代的なWebサイトに求められるUIコンポーネントを、ユーザビリティを考慮して実装しています。
まとめ
本プロジェクトは、単にデザインを形にするだけでなく、「なぜその技術を選ぶのか」「どうすれば将来的に管理しやすくなるか」といった設計思想を大切にしながら実装に取り組んだ実績です。この経験を活かし、品質と開発効率の両面からチームに貢献できるWeb制作に携わりたいと考えております。
