新ホームページをPWA対応 ホーム画面に追加できるホームページを制作 Webサイト構築事例

  • URLをコピーしました!

「新しく制作するホームページで、「ホーム画面に追加する」を使えるようにしてほしい」とご依頼がありました。ホームページをスマートフォンのホーム画面にアイコンを置いておくことができる「ホーム画面に追加する」を導入することが前提で、Webサイト制作をご依頼いただきました。

ご発注の概要

依頼内容新Webサイトの制作
・「ホーム画面に追加する」ができること
・記事や紹介ページの追加ができること
・日本語・英語の切り替えが全ページ・全コンテンツできること
お客様の業種官公庁(デザイン会社さま経由)
期間5カ月
ご予算100~200万円
目次

背景・課題

官公庁とお取引のあるデザイン会社さんからのご依頼です。新しく観光地を紹介するWebサイトを制作するにあたって、「ホーム画面に追加する」というボタンを設置したいとのことでした。「ホーム画面に追加する」を使えるようにするためには、PWA(Progressive Web Application)という仕組みを使う必要がありました。

課題

  • 「ホーム画面に追加する」ができること
  • 記事や紹介ページの追加がWordPressで管理できる
  • 日本語・英語の切り替えが全ページ・全コンテンツできること

提案・対応

  • Nuxt.jsでPWAを実現 ホーム画面に追加するを実装
  • 記事などのコンテンツをほぼすべてWordPressで管理 ヘッドレスCMSとして利用
  • 日本語・英語切り替えもWordPressでコンテンツ管理

Nuxt.jsでPWAを実現

受注後、すぐに秘密保持契約書(NDA)と業務委託基本契約書を締結しました。

今回のホームページ制作は、一般的なホームページではできないことをいろいろとやらなければならない技術的に複雑な内容となりました。

Nuxt.jsというJavaScriptフレームワークを利用して、Webサイトを制作しました。NuxtでPWA(Progressive Web Application)という機能を実現することで、「ホーム画面に追加する」を実装いたしました。

記事などのコンテンツをほぼすべてWordPressで管理 ヘッドレスCMSとして利用

記事やカテゴリー、画像の管理をWordPressで実施しました。
WordPressそのものの操作については、ご発注いただいたデザイン会社さまがかなりの熟練度でしたので、安心してお任せすることができました。技術的に必要なプラグインをいくつか利用することで、WordPressをヘッドレスCMSとして利用し、今回の課題を解決しました。

NuxtとWordPressの通信はWPGraphQLを利用しました。
WordPressはよくある専用サーバーに構築し、NuxtはNetlifyで公開しました。NuxtのソースコードをGitHubにコミットすると、自動的にNetlifyでビルド→公開されるように設定しました。

こうすることで、

  • 利用される官公庁の担当者さまはWordPressを操作するだけでよい
  • デザインの修正は、NuxtをGitHub経由で変更すればよい

とすみわけができます。

Nuxtの開発環境をDockerで作成することで、担当デザイナーがローカルで動かしてCSSなどの検証ができるように準備いたしました。

日本語・英語切り替えもWordPressでコンテンツ管理

日本語と英語の切り替えにあたっては、WordPress側では「Polylang」を利用しました。
このプラグインを利用することで、記事やカテゴリーなどが日本語と英語の両方が登録できます。
Nuxt側でも日本語と英語の切り替えをローカライズ設定を実施しました。主にアイコンやメニューの情報切り替えです。

上でも記載しましたが、Webサイトの情報を更新する場合には、WordPressを官公庁の担当者さまが、Nuxt側をデザイナーがそれぞれ日本語と英語の切り替え設定を担当することで、運営や保守がすみわけできました。

成果

  • PWAに対応したWebサイトが構築できました
  • headless CMS・Jamstackな開発として、GitHubやNetlifyを利用した自動deployを設定できました
  • WordPressでコンテンツの保守管理がしやすい環境を構築できました

コメント

ツチノコ

「ホーム画面に追加する」をご希望の場合には、PWA化する必要がありました。
観光案内のホームページ制作をしてほしいと見積り依頼をいただいた際に、PWA化は通常のホームページ制作よりも工数がかかる旨をすぐにお伝えできたことで、スムーズに作業が進んだと思います。
デザイン会社様からは数度の更新作業もご依頼いただきました。
Webサイト制作に際して、自分たちではできないちょっと難しいことをやりたいとご検討中のデザイン会社様、ぜひご相談ください!

\ お話しいただければすぐに解決! /

スポンサーリンク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次