作品ページの基本構成
- 作品URL https://oekaki-school.net
- 作品タイトル 川崎アートスクールアトリエさつき
- 制作年2025年
制作の目的・背景
- 実際に運用しているサイトを全面改装。
- 目標は「無料体験の申し込み数を増やす」こと。
- スマホ対応（レスポンシブ化）が不十分だったため、UI/UXを改善。
- ページの読み込み速度向上のため、画像最適化や軽量なCSS設計を採用。
- 問い合わせフォームのスパム対策を強化し、管理の手間を削減。
使用技術
- フロントエンド: HTML / CSS（Bootstrap5） / JavaScript（ハンバーガーメニュー実装）
- バックエンド: PHP（ヘッダー・フッター分割、OGPタグ自動化）
- SEO: Googleアナリティクス、OGPタグ設定
- その他: PHPライブラリを活用した問い合わせフォーム作成
制作プロセス
- 調査・分析: 既存サイトの問題点を分析し、スマホ対応とSEO最適化が必要と判断
- ワイヤーフレーム作成: Adobe XDで画面設計
- デザイン: PhotoshopでUIデザインを作成し、ユーザーが直感的に操作できるよう調整
- コーディング: Bootstrap5でレスポンシブ対応、PHPで共通パーツを分割し作業効率化
- 最適化: 画像の圧縮、OGPタグの自動設定、Googleアナリティクスの導入
制作プロセス
- コンバージョン率向上: 申し込みフォームのUI改善で、離脱率を低減。
- 作業効率化: PHPによる共通パーツ管理で、更新作業の負担を軽減。
- 技術的スキルアップ: Bootstrap5の活用により、レスポンシブデザインの知識を深めた。
- SEOの実践: OGPタグの最適化やGoogleアナリティクス設定を行い、検索エンジン対策を強化。
制作ついての感想
- 限られた時間の中で、SEOやデータ解析の導入を優先した結果、デザインに十分な時間を割けなかった。ただし、この経験を通じて、機能とデザインのバランスを取ることの重要性を学んだ。
- 今後は、初期段階でデザインの方向性を固めた上で、開発と並行して調整する計画。また、スマホ利用時の操作性を向上させるため、レスポンシブデザインの調整を進める予定。
- さらに、Googleアナリティクスで取得したデータを分析し、申し込み率の向上につながるUI改善を継続的に行う。これにより、より効果的なスケジュール管理と運用を実現していく。