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

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

ご発注の概要

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

背景・課題

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

提案・対応

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側をデザイナーがそれぞれ日本語と英語の切り替え設定を担当することで、運営や保守がすみわけできました。

成果

コメント