- 担当範囲
- コーディング
- 使用技術
- HTML5, CSS3(Sass), JavaScript, WordPress, PHP
- 制作時間
- 4週間程
- 価格目安
- ￥50000
- プロジェクト概要
- グローバル人材育成をテーマとしたコーポレートサイトを想定したデモサイトとして制作しました。 ビジネス英語研修・異文化コミュニケーション・海外留学支援などのサービス内容を、ユーザーに分かりやすく伝えることを目的としています。
- 実装のポイント
-
- ファーストビューではスライダーとアニメーションを用いて視覚的なインパクトを持たせ、サービス内容や導入事例へスムーズに遷移できる構成としました。 また、「資料ダウンロード」「お問い合わせ」への導線を各所に配置し、コンバージョンを意識した設計としています。 WordPress化を前提に、更新性の高い「お知らせ」「導入事例」などはカスタム投稿タイプを用いて構築し、運用しやすい構成にしました。
- ■ WordPress化（オリジナルテーマ開発） 静的HTMLからWordPressテーマ化を行い、投稿・カスタム投稿タイプ（導入事例・お知らせ）を用いた動的サイトとして構築しました。管理画面からの更新を想定した設計にしています。
- ■ カスタム投稿タイプ・タクソノミー設計 導入事例はカテゴリごと（ビジネス英語研修・異文化コミュニケーション・留学プログラム）に分類できるよう、カスタム投稿タイプとカスタムタクソノミーを実装。トップページから該当セクションへスムーズに遷移できる設計にしました。
- ■ JavaScriptによるインタラクション実装 ・Swiperを用いたファーストビューのスライダー ・スクロール連動のフェードインやクリップアニメーション ・ドロワーメニューの開閉制御 ユーザーの視線誘導と体験向上を意識して実装しています。
- ■ レスポンシブ対応 PC・タブレット・スマートフォンそれぞれで最適なレイアウトになるよう設計。画像の切り替え（picture要素）なども用いてパフォーマンスにも配慮しました。
- ■ アニメーション実装
- デザインの意図に沿って、スクロール時のフェードインやスライダーなどのアニメーションを実装しました。
- 過度な演出にならないよう配慮しつつ、視線誘導やコンテンツの理解を促す役割として取り入れています。
- ■ コンポーネント設計（BEMベース） CSSはBEMをベースに設計し、再利用性・保守性の高いクラス設計を意識しました。セクションごとに責務を分け、拡張しやすい構造としています。
- ■ UI/UXと導線設計 「資料ダウンロード」「お問い合わせ」などのCTAをヘッダー・フッター・各セクションに配置し、ユーザーの行動を促す導線設計を行いました
