Webサイトリニューアル（CMS導入）の概要

本案件は東京都政策企画局様のWebサイトリニューアルです。1,000ページ以上の静的ページで構成される大規模WebサイトのCMS導入、移行を短期間で行いました。

CMS選定

リニューアルに際して様々な必須要件がありました。本案件では、ご要望に対して最適なCMSの選定からはじめました。

（昨今は「CMS ≒ WordPress（ワードプレス）」という傾向がありますが、セキュリティやサイトの構成によっては、WPが最適なCMSとは限りません）

→最適なCMSを導入しカスタマイズすることで、セキュリティ面をはじめとする様々な要件や問題に対応しました。

Webデザイン、UI設計

Webサイトリニューアル以前はページデザインやナビゲーションがページごとに異なり、わかりにくい箇所もありました。

→構造分析、デザインの配慮と統一により、万人に見やすく使いやすいサイトを構築することができました。

CMS導入の目的と効果、注意事項

情報発信の性質が強い東京都政策企画局様のようなWebサイトは、更新が頻繁にあり、部署異動により担当者が変わることも多いです。そのため、Webサイトを簡単に更新できるCMS導入が急務でした。

CMSとは

CMSとは「コンテンツ・マネジメント・システム」の略称で、htmlやCSSのようなWebサイトの制作に必要な専門知識を必要とせず、テキストや画像などの情報を入力するだけで、サイト構築を自動的に行うことができるシステムのことです。著名なCMSにはWordPress（ワードプレス）があります。

CMS導入の効果（メリット）

• 記事を簡単に作成できる
• 更新の自動化
• 日時指定公開
• ディレクトリが煩雑になりにくい
• デザインの一貫性
• コンテンツを復元できる
• SEOに強い
• コスト削減
• 更新スピードの向上

CMSを導入することで様々なメリットがあります。

○記事を簡単に作成できる

直観的に記事を作成できるので、html、CSSの知識がない人でも更新可能です。

○更新の自動化

静的ページは１か所修正したら、他にもあちこちを修正しないといけないですが、１か所修正すれば別の箇所も自動で反映されるなど、自動化される部分が多いです。

○日時指定公開

特定のページの日時指定更新ができます。あらかじめ準備して予約しておけばよいので、担当者の負担が削減できます。

○ディレクトリが煩雑になりにくい

企業のご担当者様が直接HTMLを修正しているWebサイトでよくある課題として、「ディレクトリが煩雑になっていたり、アップロードの際にミスが発生している」ということがあります。

CMSなら、初期にしっかりと設計していればディレクトリを意識せずに更新が可能です。

○デザインの一貫性

CMSを利用すると、新規ページを作成するときもデザインの統一感を損ねることがありません。

○コンテンツを復元できる。

更新する記事のバックアップをいちいちとらなくても数世代前に戻ることができます。

○SEOに強い

CMSは、検索エンジンから評価してもらえる正しい標準のWebサイトを作成しやすいので、Webサイトの品質が高くなります。Webサイトの品質はSEOに大きく影響します。

（もちろんSEOを意識したCMS設計も必須になります）

○コスト削減

ある程度の外部委託作業も残りますが、一般的な更新は担当者レベルでできるため、外部への委託が減り、コストを削減できます。

簡易更新は自社で行い、技術力、デザイン力などが必要になる箇所は外部に委託することで効率的な予算の使い方が実現出来ます。

○更新スピードの向上

CMSにより簡易な更新は自社で行うことが出来るため、サイトの運営・更新スピードが向上します。

CMS導入の注意事項

CMSはメリットばかりと思われがちですが、そうではありません。CMS導入の目的をはっきりさせ、その目的に沿った設計が必要です。最初にある程度のコストをかけてしっかりしたWebサイトとCMSの設計を行い、スムーズな運用につなげる工夫が必要です。

• 構造やデザインの設計、CMSの運用方法を初期にしっかりと決める必要がある
• 更新担当者のスキル、リテラシーに応じた柔軟なCMS設計
• CMSの基本操作に慣れないといけない
• 静的サイトからの移行の場合、ページの移行作業が必要
• SEO対策は別途必要

×構造やデザインの設計、CMSの運用方法を初期にしっかりと決める必要がある

CMSは単に導入すれば簡単に運用できるというものではありません。簡単に、そして効率的に運用するための設計を予めしっかり行っておく必要があります。

「CMS構造、Webサイト運営」を意識した「Webデザインとページ設計」

×更新担当者のスキル、リテラシーに応じた柔軟なCMS設計

更新担当者のスキルや今後のWebサイトの拡張性を考慮したCMS設計を行うことで、効果的なWebサイト運営を可能にします。

×CMSの基本操作に慣れないといけない

CMSはブログ感覚で直観的なページ作成ができますが、一般的なブログほど簡単でもないので、操作に慣れないといけません。運用の仕方にある程度の統一ルールも必要です。その統一ルールの策定やマニュアル化、さらに運用開始初期は慣れないことも多いので、設計者にフォローアップしてもらうことが大事です。

×静的サイトからの移行の場合、ページの移行作業が必要

CSVで一括登録などができたりするものの、そういった一括処理にはある程度の専門知識が必要です。また、大規模で構造が複雑なサイトほどCMSへの移行作業は人的リソースを伴います。

×SEO対策は別途必要

CMSがSEOに強いといっても構造上強いだけであり、実際のSEO対策にはページのコンテンツ内容の強化、サイト設計、などなど様々な施策が必要になります。CMSを導入すればSEO対策が万全というわけではありません。

Webサイトリニューアル（CMS導入）の要件と課題

CMSを導入することでWebサイト運営の色々な問題を解決することができますが、他にも必須要件、解決すべき課題がありました。

Webサイトの必須要件

CMSを導入することでWebサイト運営の色々な問題を解決することができますが、本案件はCMS導入、カスタマイズ以外にもリニューアルに際して必須要件がありました。その中には公共機関のサイトに特有の要件もいくつかありました。代表的な要件は以下の通りです。

• 高セキュリティ
• アクセシビリティ（JIS X 8341-3:2016準拠）
• 承認フロー
• 複数の編集者による更新
• サポート体制

○高セキュリティ（最重要要件）

Webサイトを狙った改ざんや情報漏えい等は後を絶ちません。とくにCMSの脆弱性は狙われやすくWordPress（ワードプレス）のプラグインの脆弱性を狙った改ざん攻撃はよく知られています。行政や自治体のサイトや大手企業のサイトというのは、悪意のあるサイバー攻撃者のターゲットになりやすいサイトでもあるので、適切なセキュリティを考慮したWebサイトを作成することが必須でとても重要視されています。セキュリティに関しては必須要件の中でも特に優先度の高い条件でした。

○アクセシビリティ（JIS X 8341-3:2016準拠）

行政機関や自治体など公共機関のサイトでは、高齢者や障がい者の方も含めた誰もが公開されている情報を取得できるようにアクセシビリティに配慮した作りであることが望ましいとされています。どの公共機関のサイトでもアクセシビリティの共通指針であるJIS X 8341-3:2016準拠は必須要件です。imgタグのaltに説明を入れる、文字の大きさの変更といった基準がJIS X 8341-3:2016に定められており、達成基準AAをクリアすることが望まれました。また、運営時に基準を達成しているか簡単にチェックできるツールも必要でした。

○承認フロー

公共機関という性質上、信頼のある情報を提供することが求められるため、作成したページは責任者・決裁者の承認が必要です。こちらも必須要件でした。

○複数の編集者による更新

複数の部署や委託会社がコンテンツを作成するので、部署毎に権限の異なる操作アカウントが必要でした。部署毎に更新ページ範囲を制限する必要もありました。

○サポート体制

不測の事態に備えたサポート体制も必須要件でした。

旧サイトの問題点

東京都政策企画局様のサイトは、新たな政策が策定されるたびに新コンテンツが追加されていくという性質があります。
また、コンテンツはそれぞれの担当部署が作成をするので、その部署のルールで作成される傾向がありました。統一的なルールがないため以下のような問題が発生していました。

• ナビゲーションがわかりにくい
• デザインの統一感がない
• マルチデバイス対応していない
• 更新が煩雑

×ナビゲーションがわかりにくい

継ぎ足しのコンテンツが乱立するためナビゲーションがわかりにくくなっており、サイト内で迷子になりやすく目的の情報にたどりつけないという問題がありました。
（現状、他の自治体からのアクセスは多いですが、一般の方のアクセスが少ないとの分析があり、一般の方のアクセスを増やすためにはわかりやすいサイトナビゲーションが急務でした。）

×デザインの統一感がない

部署毎に担当するページが分かれているため、全体的なデザインの統一感がありませんでした。

×マルチデバイス対応していない

あえて項目を設けるまでもなく、現在のWebサイト制作においてマルチデバイス対応は必須であり、本案件も例外ではありませんでした。 また、Javascriptが使えない環境でもメニューを展開して表示させておくなどのご要望もありました。

×更新が煩雑

静的サイトなので一つの箇所を更新するときに他の箇所も更新しなくてはならないなど、煩雑さがありました。 また、部署毎に異なる方法やデザインルールでサイトを作成しているので統一したルールや更新方法が必要でした。

短い納期

東京都政策企画局様のサイトはページ数も1,000ページ以上と多く、大規模なサイトですが、納期が短くスケジュールがタイトでした。

• 短期間でのCMS構築、CMS導入
• 短期間での大量ページ流し込み

×短期間でのCMS構築、CMS導入

スケジュールが非常にタイトなため、限られた時間で設計、デザイン、CMS構築を行う必要がありました。

×短期間での大量ページ流し込み

短期間で大量ページの流し込みをする必要がありました。ある程度型の決まったページばかりならCSVによる流し込みという方法もありますが、カテゴリ毎にデザインやページ構成が統一されていなかったので、コンテンツの流し込み作業は人数を掛けて、短期間に集中して行う必要がありました。

必須要件への対応 ～CMS、サーバの選定

サイトの根幹となるCMSの選定はとても重要であると言えます。まずは要件を満たすCMSを選定する必要がありました。現在様々な種類のCMSが存在しており、それぞれ強みが異なります。

主なCMSと課題・要件のマッチング比較

CMS化して失敗したということがないよう、制作するWebサイトの性質と運営体制に最適なCMSを選定しなくてはなりません。主なCMSを比較してみました。

CMS比較.com参照

CMSはPowerCMSに決定

比較検討した結果、CMSはPowerCMSに決定しました。PowerCMSは MT（Movable Type/ムーバブルタイプ)をベースエンジンとしたハイエンドCMSでMT（Movable Type/ムーバブルタイプ)を高性能・高機能化するソリューション製品です。

高セキュリティが必須要件の本案件では、「脆弱性を狙われやすいWordPress（ワードプレス）は、著名で汎用性も高いとはいえ選定外」となりました。

PowerCMSに決定した理由

• 高セキュリティ
• JIS X 8341-3:2016準拠チェックツール（PowerCMS 8341）
• 承認フロー対応
• 複数の編集者による更新に対応
• サポート体制の充実
• パフォーマンス
• MT(Movable Type/ムーバブルタイプ)の機能を拡張する様々な機能が提供されていること

○高セキュリティ

PowerCMSが静的CMSでありセキュリティが高いことは選定の最大のポイントとなりました。静的CMSは、ページを保存すると公開用のhtmlファイルを書き出します。閲覧時にWebサーバ内でプログラムは実行されず、静的サイトと同様にhtmlファイルを返すだけです。WebサーバとCMSサーバを切り分けることができるのでセキュリティ面で非常に有利になります。 サーバーへの負荷も「動的なCMSであるWordPress（ワードプレス）」より、「静的にページを生成するMT」の方が少ないです。

もし、DB（データベース）にトラブルが発生したとしても、ページ自体は閲覧可能です。

［WordPress（ワードプレス）の場合は、DB（データベース）トラブルが発生したら、サイト閲覧はできなくなります］

○JIS X 8341-3:2016準拠チェックツール（PowerCMS 8341）

PowerCMSの拡張機能には、WebページがJIS X 8341-3:2016達成基準に適合しているかどうかをチェックできる「PowerCMS 8341」があります。こちらを利用すれば、作成したページがJIS X 8341-3:2016達成基準に適合しているか簡単にチェックすることができるため、アクセシビリティに配慮したページ作成ができます

○承認フロー対応

PowerCMSの拡張機能には、承認フローを実現するリビジョン管理機能があります。

○複数の編集者による更新に対応

PowerCMSは複数ユーザに対応していて、さらにユーザ毎に細かい権限の設定が可能です。

○サポート体制の充実

PowerCMSはサポート体制も充実しています。PowerCMSにはアルファサード社のサポートがついているので、サンプルコードからサーバの質問まで幅広い分野の質問にメールで答えてくれ、緊急時にも対応可能です。

○パフォーマンス

PowerCMSはサーバも強固なので、パフォーマンスに優れています。MT（MovableType/ムーバブルタイプ）は静的CMSなのでリクエストに対してあらかじめ生成されたHTMLを返します。このため、表示（レスポンス）が速いということやサーバ負荷が低いです。

○Movable Typeの機能を拡張する様々な機能

PowerCMSはアップロード後も画像を編集できる等、その他にも様々な拡張機能があります。

課題の解決策

CMSの選定は重要な要素ですか、それだけでは課題は解決できていません。

サイトナビゲーションの適正化

Webサイトのリニューアルにおいては、旧サイトの分析とご要望を踏まえたコンテンツの分類とナビゲーションが大切になってきます。訪問者が迷子にならないようにナ1ビゲーションを適正化しました。

○旧サイトの分析

旧サイトの分析をするにはディレクトリ一覧が必要です。さらにその中でも重要なコンテンツを元にディレクトリ構造分析を行いました。

○カテゴリ分類により、構造的な問題を解決

構造分析では、コンテンツのカテゴリ分類と階層をわける作業を行いました。なるべくシンプルな構造になるよう、階層は第4階層までとしました。カテゴリ分類により、グローバルナビゲーションやサイドナビゲーションを整理しました。

デザインの統一

どのような方にも、どのようなデバイスでも見やすいサイトを意識してデザインを作成しました。一部のページは色を変えてほしいとのご要望にもこたえて特色も出していますが、統一感は損なわれないようにデザインしました。

○デザイン・UIを工夫

スタイリッシュなデザインよりも、アクセシビリティを配慮しながら万人に見やすい使いやすいサイトを目指しました。また、よく使用されているPDFアイコンなどは部署によって違う画像を使用している等、統一性がありませんでしたがFontAwasomeを利用してデザインを統一しました。

○フレームワークの利用とレスポンシブ対応

多少の修正があっても全体的なバランスが崩れにくくするため、Boostrap4をフレームワークに採用しました。Boostrap4はレスポンシブに好適なので、デバイスによる表示崩れが少なく、レイアウトユーティリティーや文字装飾なども使えるので、イレギュラーなページ書式にも対応できました。

○テンプレートの作成

旧サイトはデザインも書式もバラバラでした。移行時に新サイトの様式に統一するために旧サイトを元に共通のテンプレートワイヤーフレーム（WF）を複数作成しました。

CMSカスタマイズ

CMSの構築やカスタマイズもサイトの性質や運営体制にあわせて行う必要があります。

費用感やスケジュールにあわせて実現可能な範囲で取捨選択をしました。

〇投稿管理コンテンツ

一部投稿管理コンテンツを作成しました。投稿すれば自動的に上階層のページにリンクが表示されるようになっています。

〇「お知らせ」投稿

「お知らせ」を簡易的に投稿できるようにしました。お知らせのリンクが外部リンクやPDFであることも多いので、カスタムフィールドでそれらのリンクが簡単に追加できるようにしました。

〇テンプレートモジュール

よく使うパーツはテンプレートモジュール化しました。

〇ブログ構成

組織変更や新たな政策企画コンテンツに対応できるよう、1カテゴリ１ブログにしました。このため部署毎の権限も割り当てやすくなります。また、新たにブログを追加することで、新しい政策企画コンテンツも容易にカテゴリ分けできます。また、カテゴリは分かれていながらも統一的なデザインで作成可能です。

納期にあわせた対応と実作業での工夫

移行作業に関してはさらなる課題、改善点がありましたが、進捗状況を見ながら問題が発生した場合には早めに対応し軌道修正することで、納期に間に合わせることができました。こういった蓄積がそのままノウハウになるので、これからもしっかりと改善していく必要があります。

○コンテンツに優先順位をつけた

東京都政策企画局様にコンテンツの優先順位をつけてもらい優先度の高いものから作成していきました。

○最低限の必要な箇所に集中して確認

一方的な判断になってはいけないので、新ディレクトリ一覧を作成するときも、デザインテンプレートを作成するときも、その都度東京都政策企画局様に確認をとりました。

しかし時間は限られているので、デザインや構成の基盤部分はしっかり確認をとり、流し込み時は弊社の裁量で行うなど、コミュニケーションも必要なところに集中してしっかりとるようにしました。

○テンプレートを作成し、複数人でコンテンツをCMSに移行

ページ数が多くデザインもバラバラなので、どのページがどのテンプレートに属するかを決めました。

そして、各担当スタッフがテンプレートに沿ってコンテンツの流し込みを行いました。

また、流し込みに際しての注意事項として説明資料を作成して作業効率、スピードの向上を図りました。

×想定外の事態

いざコンテンツの流し込みをはじめてみると、想定以上に時間が掛かるページややり直しになるページがありました。詳細な説明資料の追加や口頭指示など様々な工夫、改善を行い納期に間に合うように対応しました。

○担当スタッフを増員

コンテンツの流し込みの進捗状況を見て、納期に間に合わせるように必要に応じてスタッフを増員しました。

成果

• しっかりカテゴリ分類しナビゲーションを適正化したことと、デザイン効果でサイトが見やすくなり統一感が出ました。
• ナビゲーションがわかりやすくなったので、訪問者がサイト内で迷子になりにくくなりました。
• 部署毎にバラバラだった更新方法がある程度統一されました。
• 投稿管理コンテンツは以前より更新が簡単になりました。

お客様の声

• 無事納期に間に合い、CMS導入を実現できたのでご満足いただきました。

このようなお客様、ご相談下さい！

• ページ数の多い大規模サイトをリニューアルしたい
• CMSを導入したい、CMSのカスタマイズをしたい
• セキュリティのしっかりしたCMSに移行したい
• MT（MovableType)のカスタマイズをしてほしい
• 複雑な構成のサイトをわかりやすくリニューアルしたい
• 追加要件に柔軟に対応してほしい
• CMS移行で失敗したくない
• 納期がタイトなサイトリニューアル案件、または新規案件