英会話スクールのコーポレートサイト(XD/コーディング/WordPress)

OVERVIEW

独自デザインのサイトをWordPressで運用することを想定し、教材のXDカンプを元に「コーディング8ページ分〜WordPress構築」の一連の流れを習得しました。

YEAR 2022

実際のサイトはこちら →

※BASIC認証(ユーザー:life-gear パスワード:life-gear510)



CONTENTS

-スクリーンショット画像

-制作概要

-使用スキル

-使用プラグイン

-作品へのこだわり



-スクリーンショット画像

※トップページのみ掲載。下層ページご覧の場合は実際のサイトをご覧ください。


実際のサイトはこちら →

※BASIC認証(ユーザー:life-gear パスワード:life-gear510)



-制作概要

  • 教材:【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】  https://note.com/samuraibrass/m/mad296098d928
  • 制作範囲:コーディング(レスポンシブ)、ローカル環境でのWordPress構築/サーバードメイン取得、サーバーアップロード
  • 制作期間:20日(コーディング12日、WordPress構築〜サーバーアップロード8日)
  • トップページと下層ページ含め8ページ構成



-使用スキル

HTML / CSS / Sass / JavaScript / jQuery / PHP / WordPress / Adobe XD



-使用プラグイン(WordPress)

カスタムフィールド :Advanced Custom Fields

カスタム投稿:Custom Post Type UI

お問い合わせフォーム:MW WP Form

ページナビゲーション:WP-PageNavi 

SNS:WP social Bookmarking Light



-作品へのこだわり

  • ピクセルパーフェクト※一部合理的な理由を添えてデザイン変更あり
  • クロスブラウザ対応(Chrome、Safari、FireFox、Edge)
  • カスタム投稿タイプによるお知らせ一覧とお知らせの個別記事追加
  • カスタムフィールドによりトップページの生徒情報、料金ページの料金をユーザーで変更可能
  • スマホサイズでは料金表の横スクロールをScroll Hintにより実装
  • ブログの個別記事に関連記事とおすすめ記事を掲載
  • サムネイル及び個別記事内のカテゴリーのクリックによりカテゴリーに属したブログ一覧を表示可能
  • 電話番号クリックによる発信
  • 記事をSNSで共有可能
  • トップページのよくある質問にアコーディオンメニューを実装
  • お問い合わせフォームの実装し自動返信メールも設定
  • 20以上のチェック項目により品質を担保


実際のサイトはこちら →

※BASIC認証(ユーザー:life-gear パスワード:life-gear510)