■URL http://hideki1516.xsrv.jp/fujioka-office/ ■制作時期 2022年9月 ■制作にかかった期間 約2週間（静的ページ実装／約1週間、WordPrss化／約1週間） ■OUTLINE 架空の行政書士コーポレートサイトを制作。デザインデータ（XD）をもとにHTML・SCSS・jQueryで構築したあと、 WordPressのテンプレートに変換しました。 ■POINT ① Google Maps API Googleマップを表示させるためにGoogle Maps APIを採用。マップ上にオリジナルのピンを設置し、PC・SPで画像のサイズが変わるように設定しました。 ② Animation 行政書士のコーポレートサイト＆スマートなWebデザインに合わせるため、全体的にスタイリッシュなアニメーションを設定。イージングとanimation-delayプロパティを微調整し、自然なアニメーションになるようこだわりました。 ③ CSS設計 スタイルにはSCSSを使用し、CSS設計にはPDFLOCSSを採用。SCSSを「component」「layout」「mixins」「project」に分け、コーディングと運用フェーズの効率化を図りました。 ④ WordPress 今回、WordPress化に初めてチャレンジ。Homeページに「お知らせ」と「ブログ」の投稿一覧をそれぞれ設置し、Blogページには全てのカテゴリの投稿を一覧で表示させました。固定ページにはカスタムページテンプレートを採用しています。プラグイン「WP Multibyte Patch」を併用して抜粋文の文字数を調整しました。プラグイン「All-in-One WP Migration」を使用してローカル環境からテスト環境へのアップロードまで行いました。