大船渡テレワークセンターのWebサイトをリニューアルしました
こんにちは！地活研の種延です。
この度、地活研が管理・運営している大船渡テレワークセンターの公式Webサイトをリニューアルしました。リニューアルにあたって考えたことや実施したことなどを共有することで何かお役に立てればと思い、今回記事にしています。
そこそこ突っ込んだ技術寄りの話もそれなりに出してしまうのですが、よくわからない小難しい単語は適当に読み飛ばして読んでいただければ幸いです。今回のリニューアルに関して伝えたいことは、WordPress以外の選択肢があるということ、Webページの役割を明確化して、そこから必要な技術を選定することで安価でより効果的に運用できる可能性があることを示すことです。
リニューアルの要件
脱WordPress
旧サイト構成で最も課題に感じていたのがWordPressです。WordPressは全世界のWebの43.2%で使われている技術で、日本語圏のCMS市場では82.4%のシェアがあります。地方だとさらにこの傾向は強く、Webサイト関係の案件＝WordPress案件という印象が強いです。
WordPressにはもちろん様々なメリットがあるのですが、今回は割愛してWordPressに感じていた課題について書いておきます。一つは保守・管理コストがかかることです。WordPressが高いシェアを誇っているということはそれだけ攻撃の標的になりやすいということです。WordPressをはじめとしてWeb上で動作するCMSは攻撃の入口が多く、運営者はセキュリティ対策やセキュリティアップデートが必要です。ここでのアップデートは、Wordpress本体に加えて、テーマやプラグインなど、WordPressの便利な機能に求められるものです。
ここで問題となるのが、実際の運用場面ではアップデートを躊躇してしまうシーンが頻繁に発生してしまうことです。本体、テーマ、プラグインが複雑に絡み合う事が多く、ある部分を最新版にすることで他の要素がうまく動かなくなるということが稀に発生します。そのため、テスト環境と本番環境を切り分けて運用することが求められますが、自社運用している地方の事業者がこの辺りの運用を上手に行えるかというとなかなか難しい面もあるのではないかと思います。
結果としてアップデートは放置され、セキュリティに問題のある状態が続いてしまうというのがWordPress運用のよくある景色となります。保守・管理コストの高さに付随するセキュリティリスクが２つ目に挙げられます。
今回のリニューアルでWebサイトの要件を見直すことで、そもそもCMSを必要としないサイト構成にすることで脱WordPressをしていくことにしました。
公式サイトとSNSとの役割分担
旧デザインはWordPressのブログテーマを用いてトップページからお知らせが並ぶ形になっていました。このお知らせの内容を見ていくと、お盆・年末年始等の休館情報がほとんどです。施設情報を見るにはトップのメニューから部屋情報などを探す必要があります。
ここの設計から見えるのは、公式サイトの役割が明確化されていないということです。Webサイトの流入元は基本的には検索とSNSです。SNSのフォロワーは施設を訪れたことがあるなど、ある程度センターについて知っている人が多く、またお知らせ等の情報はSNSを通じたほうがより効果的に届けることができます。一方、検索については既に知っている人に加えて、まだ訪れたことのない新規の訪問者の存在が大きいです。「大船渡 コワーキングスペース」「大船渡テレワークセンター」などで施設についての情報を得ようと検索してやってくるわけですから、最初のランディングページでどのような施設であるのかのまとまった情報を与えて、実際の施設の訪問につなげることが何よりも重要になります。
ここで最新の情報を提供するチャンネルとしてSNSが存在することが重要です。テレワークセンターはFacebook, Instagram, Twitter, LINE公式アカウントの各アカウントがあるため、既存訪問者についてはこれらのチャンネルを通じて情報発信をするほうがより効果的です。公式サイトは初回訪問者の疑問を解消して施設来所につなげ、さらにこれらのSNSのフォローによってリピート利用につなげる、という役割分担が浮かび上がってきます。元々の情報発信がほぼ休館情報ですが、これらはブログ形式である必要がありません。あるシーズンに休館情報を載せたり、カレンダーで対応できます。この点において、役割を明確化するということは、何をやるかよりも何をやらないかで、昨年度の産学官地域課題研究会のような話にもつながってきますね。
ここで公式サイトからコンテンツの更新機能を省くことができる→脱WordPressの要件を満たすことができます。ここで「やってることに対してシステムが過大」である状態を解消する方向性が見えてきました。
安価でそれなりのパフォーマンスを出す
サイトの役割を明確化して脱WordPressですが、実際にはどうするのでしょうか？一つは技術が成熟してきているSTUDIO等のノーコードWebツールを使うことです。今回はこの方法は取らなかったのですが、地方こそWebを制作会社に丸投げせずに、難しい技術周りはすでに用意された状態でビジネスフォーカスできるこのようなツールが必要なのではないかと感じています。
今回採用したのはもう少し技術寄りなルートで、静的サイトジェネレーターと呼ばれる技術を使いました。WordPress等のCMSはサーバー側でユーザーのリクエストに応じてページを生成して返している「動的」な仕組みです。「2023年6月の記事一覧を見せて」といういうと2023年6月の記事データを引っ張ってきてそれを表示しているイメージです。一方で、「静的」なWebサイトでは2023年6月の記事一覧ページを予め作成していて、ユーザーはそのHTMLファイルを表示しています。これは元々の基本的なWebページの構造そのものです。サーバー側で動的な計算する必要がないので一般に動的サイトよりも高速になり、よりセキュアなのがメリットになります。
静的なページがいいからといって全てのページを昔ながらの製法で作っていると保守・管理コストが高くなってしまうので、ここで使われるのが静的サイトジェネレーターです。これは手元で動的にページを作成して、出来上がった静的サイトをサーバーにアップするようなイメージです。出来上がりはただのHTML・CSS・JavaScriptのファイル群でこれらをサーバーに配置します。
静的サイトジェネレーターにはHugoを使用しました。GatsbyやNext.jsのようなイケイケの新しい技術もあったのですが、ほどよく枯れていて成熟している点と、今回サーバー構成的にも最終的な静的ファイル群を配置するだけのものだったので、成熟している技術を選びました。
ソースコードをGithubにpushにするとGithub Actionsが走ってサーバーに更新されたファイルが配置される仕組みです。ここでCMSのメリットだった「誰でも更新しやすい」が現在の構成だと一見死んでいるように見えます。これに対する答えとしては、役割分担によって更新がそれほど必要のないページにしたというのがまず一つあります。もう一つはGithub Actionsによってビルドは自動化できているので、技術者の工夫次第では誰でも更新できるサイトも可能な余地があります。例えば無理やり無料の範囲でなんとかしようと思えば、GoogleスプレッドシートをデータソースにしてGoogle Apps ScriptでAPIサーバーを立てて、Hugoでビルドする際にそこから情報を読み取るようにするというのが一つ考えられます。スプレッドシートの更新でWebhook経由でGithub Actionsを起動することで、「スプレッドシートを更新したらWebサイトにそれが反映される」状態になるので非技術者でもそれなりに扱えるのではないかと思います。just ideaなのでなにか穴はありそうですが😂
どのようにリニューアルしたか
技術寄りの話ばかりしてもあれなので、更新後どうなったかについて簡単に触れておきます。
リニューアル後の構成は基本的にペライチのランディングページっぽくしました。想定するユーザー像は、大船渡でインターネット環境のある作業場を探している人で、スマホから「大船渡 コワーキング」等の検索ワードでページに辿り着きます。彼らに十分な情報を提供して施設来所につなげるのが目的なので、基本的な情報はトップページをスワイプすれば一覧できるようにすることが重要です。今回は上から順にセンターの特徴、各部屋の設備の説明、よくある質問、予約状況カレンダー、アクセス情報、各種SNSのフォロー、営業時間、連絡先などの施設基本情報と続くようにしました。
各部屋については運用も色々と変わっており、予約不要の部屋と要予約の部屋、有料設備などをわかりやすく表示するようにしました。
予約状況カレンダーは、社内で共有している予約情報から個人情報部分を抜き取ったものを自動で生成するようにプログラムしています。予約をとるときに参照できるようにしたのですが、ここに休館情報も乗せたほうが便利だと今気づいたのでそのうち載せようと思います。
フッター部分で最新情報が受け取れる各種SNSのフォローを促すようにしました。この公式サイトの目的は施設に実際に来てもらい利用者になってもらうことと、利用者に最新の情報を受け取れるようにSNSをフォローしてもらうことです。この点で、LINE公式アカウントを最近になって開設したので是非登録してください。LINEの方にも便利な機能を色々と追加予定です。
Webサイトのパフォーマンスはリニューアル前と比べていい数字が出るようになりました。Hugoによる静的化だけでなく、Cloudflareを使用したCDNを使用するなど各種チューニングを適当に施してLighthouseでそれなりのスコアが出るようになったので満足です(あまりLighthouseの数字に固執すべきではありませんが)。サーバー自体が貧弱なので限界はあるのですが、安価でもそれなりにパフォーマンスが出せることがわかったのが今回の収穫です。
さて、ここまで書いたのですが、まだまだ足りていない部分が多いのでまだまだ手を加える必要があります。大船渡にも市民が利用できるシェアスペースは増えてきており、どのような利用シーンに適しているのかを積極的に示すことが利便性につながってくると感じてきています。なかなか情報発信に手が回らないこともありますが、だからこそ運営・保守・管理コストを最適化して、利用者に利便性向上につなげていきたいと思っています。
この記事が気に入ったらサポートをしてみませんか？