サイト概要
Project
WordPressの独自テーマを作成し、HTMLで作成した静的データをWordPress化する。
お知らせやブログなど更新したいコンテンツに関しては、WordPress管理画面から更新できるようにすることで、実装後クライアントが運用しやすいサイトを想定して制作。
また、制作作業はローカル環境で行い、完成後に本番環境へデプロイするまでの一連の流れを経験。
お問い合わせフォームはGoogle Formをカスタマイズし、自身のCSSを適用させ利便性を向上させた。
Goal
- HTMLからWordPress化する一連の流れを理解する
- WordPressの独自テーマの作成方法を学ぶ
- WordPressのテンプレートタグの使い方を学ぶ
- WordPressの固定ページデータと投稿データの違いを理解する
- ローカル環境の構築及び、本番環境へのデプロイ方法を理解する
- Google Formのカスタマイズ方法を学ぶ
Details
- 制作時間：1ヶ月
- 使用言語：HTML, Sass, JavaScript, jQuery, PHP, WordPress
- 使用ツール：Visual Studio Code, Photoshop, Local
制作を通して学んだこと
- HTML/CSSの基本的なレイアウトに加えて、データをWordPressの独自のテーマ化とし実装に至るまでの過程を学ぶことができた。
- お知らせ・ブログ部分をWordPress化することを踏まえたレイアウトを採用していたことで、更新する際の文字量に違いがある場合でもレイアウトが崩れないように設計することができた。
- サーバーにアップ後に実機で確認することでレイアウトの崩れに気づき、自分の手にとって確認することの大切さを改めて実感した。
制作の流れ
- 1コンテンツの洗い出しと要件定義の作成
- 2HTML/CSSで静的ページの作成
- 3GoogleFormをカスタマイズし問い合わせフォームを作成
- 4WordPressの構築とテーマの作成
- 5テンプレートタグを使用して動的コンテンツを表示
- 6固定ページをページテンプレート機能で表示
- 7投稿データをお知らせ・ブログ部分に表示
- 8プラグインを使用し本番環境へデプロイ
Google Formをカスタマイズし、オリジナルフォームを作成
Google Formのデザインをカスタマイズし独自のCSSを適用させ、ブランドに合わせたオリジナルの問い合わせフォームを作成しました。EFOを考慮し、ユーザーがスムーズに情報を入力し完了できるようにすることで、離脱を防ぎコンバージョン率を向上させることを目指しました。
フォームのデータはGoogleスプレッドシートに保存されるため、クライアントが管理しやすいようにしています。さらに送信後Ajaxを使い、オリジナルのサンクスページへ遷移させるようにしています。
オリジナルフォーム制作の流れ
- お問い合わせフォームの要件定義
- フォームのデザイン案作成
- HTML/CSSでフォームの実装
- Google Formでの動作確認
- Ajaxを使い、オリジナルのサンクスページへ遷移させる
使用したプラグイン
| プラグイン名 | 用途 | URL |
|---|---|---|
| Lightbox | 画像をモーダルウィンドウで表示 | https://lokeshdhakar.com/projects/lightbox2/ |
| vegas | スライドにアニメーション効果を付ける | https://vegas.jaysalvat.com/ |
| min-max-calculator | 文字サイズにクランプ関数をかける | https://min-max-calculator.9elements.com/ |