ホームページを自分たちで作ってみたものの、改めてきちんとした Webサイトを制作したい。
施工事例などの情報も、自分たちで更新できるようにしたい。
今回は、株式会社 吉田工務店 様 （以下、吉田工務店様） のホームページ制作事例をご紹介します。
ご依頼いただいたのは、Wix で作成していたホームページに代わる、新しい Webサイトの制作です。
サイト全体のデザインやページ制作に加え、WordPress と Cocoon を活用したサイト構築、サーバー・ドメインの契約や設定まで担当しました。
また、工務店のホームページで重要な施工事例を、お客様自身で追加・更新できるよう、専用の投稿機能とページテンプレートも作成しています。
この記事では、吉田工務店様のホームページ制作で担当した内容と、施工事例を更新しやすくするために行った工夫をご紹介します。
吉田工務店様のホームページ制作概要
| 項目 | 内容 |
|---|---|
| クライアント | 株式会社 吉田工務店 様 |
| ご依頼内容 | ホームページのリニューアル |
| 旧サイト | Wix で作成したホームページ |
| CMS | WordPress |
| WordPress テーマ | Cocoon |
| 主な対応業務 | サイトデザイン、ページ制作、WordPress カスタマイズ |
| 独自機能 | 施工事例用のカスタム投稿タイプ・テンプレート |
| インフラ関連 | サーバー・ドメインの契約や設定 |
| スマートフォン対応 | レスポンシブ対応 |
ホームページのデザインやページ制作だけでなく、サイトを公開するための環境構築から、公開後にお客様自身で情報を更新するための仕組みづくりまで、一通り対応しました。
Wixで作成していたホームページを新しく制作
吉田工務店様では、以前は Wix を使ってホームページを作成されていました。
今回は、そのホームページに代わる新しい Webサイトを制作することになりました。
制作にあたっては、サイト全体のデザインや各ページの構成を整え、 WordPress を利用したホームページを構築しました。
工務店のホームページでは、会社の基本情報だけでなく、施工事例などを通して、実際にどのような仕事を手がけているのかを伝えることも大切です。
そのため、見た目を整えるだけでなく、施工事例を掲載し、継続して情報を追加できることも考慮して制作を進めました。
WordPress と Cocoon を活用したホームページ制作
新しいホームページには、 WordPress を採用し、テーマには Cocoon を使用しました。
WordPress は、管理画面からページや記事を管理できるCMS（コンテンツ管理システム）です。
サイトの公開後も、内容の追加や更新を行いやすいことが特徴です。
今回は、 Cocoon をベースにサイト全体のデザインや各ページを構築し、必要な部分にはカスタマイズを加えました。
また、スマートフォンやタブレットなど、異なる画面サイズでも閲覧しやすいよう、レスポンシブ対応も行っています。
ホームページは、パソコンで見たときのデザインだけでなく、スマートフォンからアクセスした場合の見やすさも重要です。
さまざまな端末から閲覧されることを考慮して制作しました。
施工事例を自分たちで更新できる仕組みを作成
今回の制作で力を入れた点のひとつが、施工事例を掲載するための仕組みづくりです。
工務店のホームページでは、施工事例が会社の仕事や実績を伝える大切なコンテンツになります。
新しい施工事例が増えたときに、その都度ホームページ全体を編集しなければならないのでは、更新の負担が大きくなってしまいます。
そこで、 WordPress のカスタム投稿タイプを利用し、施工事例を通常の投稿とは分けて管理できるようにしました。
さらに、施工事例を表示するための専用テンプレートも作成。
管理画面から施工事例を追加し、所定の項目に情報を入力することで、サイト上に掲載できる仕組みを整えました。
このように、掲載する情報の種類に合わせて管理方法や表示方法を設計することで、更新作業を進めやすくしています。
WordPress の管理画面から施工事例を追加
施工事例を掲載する際には、毎回ページのデザインや HTML を一から作るのではなく、用意した仕組みに沿って情報を登録できるようにしました。
これにより、サイトの構造を毎回編集することなく、施工事例の追加・更新を行えるようにしています。
ホームページは、公開時に完成していればよいというものではありません。
お客様自身が継続して情報を発信できるよう、管理画面の使い方や更新の流れまで考えておくことも大切です。
管理画面内に施工事例の投稿マニュアルを用意
施工事例を自分たちで更新できる仕組みを作る際には、投稿機能を用意するだけでなく、実際に操作する方が迷わず使えることも大切です。
そこで、WordPress の管理画面内に、施工事例の投稿手順をまとめたマニュアルページを作成しました。
管理画面の「施工事例」メニュー内に「マニュアル」の項目を追加し、クリックすると投稿手順を確認できるようにしています。
施工事例を登録する際の操作方法を管理画面からすぐに確認できるため、別途マニュアルのファイルを探したり、操作方法を毎回確認したりする手間を減らせます。
このように、投稿機能のカスタマイズだけでなく、使い方を確認できる環境もあわせて整備しました。
ホームページは、制作することだけでなく、公開後にお客様自身で無理なく運用できることも重要です。
更新機能と操作マニュアルをセットで用意することで、継続的な情報発信を支える仕組みづくりを行いました。
サーバー・ドメインの準備から公開環境の設定まで対応
ホームページを公開するには、 Webサイトの制作だけでなく、サーバーやドメインなどの環境も必要です。
今回は、ホームページ制作にあわせて、サーバー・ドメインの設定も担当しました。
サーバーとドメインの準備、サイトを公開するための設定など、 Webサイトを運用するために必要な作業をまとめて対応しています。
ホームページを新しく制作する場合、デザインや掲載内容を考えるだけでなく、公開に必要な技術面の準備も発生します。
こうした作業も含めて対応することで、ホームページ制作に関わる作業を一貫して進められるようにしました。
制作後も施工事例を更新できるホームページに
今回のホームページでは、施工事例を追加・更新するための仕組みを整えました。
納品後は、吉田工務店様ご自身で施工事例の更新を行っています。
ホームページを制作しても、更新のたびに制作担当者へ依頼しなければならない状態では、新しい情報を掲載するまでに手間がかかります。
施工事例のように、今後も追加していくことが想定されるコンテンツについては、公開後の運用まで考えて仕組みを整えることが重要です。
今回の制作では、 WordPress のカスタマイズによって、施工事例を管理画面から更新できる環境を構築しました。
更新するコンテンツに合わせたサイト設計
今回の吉田工務店様のホームページ制作では、 Wix で作成していたサイトに代わる Webサイトを構築し、 WordPress と Cocoon を活用したページ制作、レスポンシブ対応、サーバー・ドメインの設定まで担当しました。
また、施工事例用のカスタム投稿タイプと専用テンプレートを作成し、お客様自身で施工事例を追加・更新できる仕組みを整えました。
ホームページ制作では、デザインや見た目だけでなく、公開後にどのような情報を更新していくのかを考え、それに合った管理方法を用意することも大切です。
WordPress の標準機能だけでは対応しにくい部分も、カスタマイズによって運用に合わせた仕組みを作ることができます。
ホームページの新規制作やリニューアルをご検討の際には、見た目だけでなく、公開後の更新方法も含めて考えてみてはいかがでしょうか。
ホームページ制作・ WordPress カスタマイズのご相談
ホームページを新しく作りたい、既存のホームページをリニューアルしたい、施工事例や実績を自分たちで更新できるようにしたい。
このようなお悩みがありましたら、お気軽にご相談ください。
WordPress を利用したホームページ制作をはじめ、テーマのカスタマイズ、投稿機能の追加、サーバー・ドメインの設定など、ご希望や運用方法に合わせて対応いたします。
制作時のデザインだけでなく、公開後の情報更新も見据えたホームページづくりをお手伝いします。