架空英語スクールサイト【XDデザインからのコーディング】

サイトURL：https://daikilog-p.com/engress/

ユーザ名 ：daiki_engress
パスワード：daiki_engress

◯はじめに

こちらのサイトは実際にプロのエンジニアの方に表示確認をお願いし、デザインが崩れていないかチェックしてもらっています。

◯使用ソフト

・Adobe XD
・Visual Studio Code
・local by flywheel
・FileZilla

◯制作期間

2週間

◯特徴

・ホームページ「成功事例」部分の画像・各テキスト及び、「プラン・料金」ページ内の金額部分は、wordpress編集画面のカスタムフィールドから自由に変更可能。

・SNSシェアボタンも実装しており、記事更新時にシェア可能。

・「お知らせ」ページはカスタム投稿タイプで作成。

・フォーム内に未入力欄がある状態で送信ボタンを押すと、エラーページが表示される。

・管理者への確認メール / お問い合わせした方への送信完了メールの挙動は、自身のメールで確認済み。

・「料金・プラン」ページの料金表は、横スクロール可能。

・下層ページにはパンくずリストを設置。

・サムネイル画像が設定されていない場合は、ダミー画像が表示される。

◯意識した点

・ファビコンはナイトモードでもはっきり見えるように、アイコンの色は白、背景色をサイトのテーマカラーであるネイビーに設定。

・管理者への確認メールには、お問い合わせした方の名前/メールアドレス/電話番号/お問い合わせの種類・内容が自動で記述されるように実装。

・テーマユニットテストデータ（日本語）を用い、動的処理によるデザイン崩れがないかチェック済み。

・CSS設計（FLOCSS）を用い、出来るだけセマンティックコーディングを意識。

・Scss記法を使用。

・すべてのデバイス幅で、違和感のないデザインになるようにコーディング。