Webサイトリニューアル（CMS、ステージングサーバ導入）の概要

本案件はJAXA宇宙教育センター様のWebサイトリニューアルです。

2,000ページ以上（PDF投稿も含めるとさらに多い、多言語対応）の静的ページで構成される大規模サイトのリニューアルでした。

また、Webサイトリニューアル告知のチラシ制作を行いました。

旧Webサイトの課題とサーバの制約

Webサイトのデザインやレイアウト面の課題

デザイン改善

• 旧Webサイトも堅実なしっかりした作りではありましたが、少しかたさがあり、ターゲットやコンテンツがわかりにくいと感じる箇所もありました。
  （TOPページを見たときに何を目的にしたWebサイトなのかわかりづらさがありました。ぱっと見では「宇宙」について学習するサイトと誤解されかねませんでした。）

抽象的なタイトルの整頓

• コンテンツのタイトルが抽象的なので、どのようなコンテンツなのかわかりにくいという問題がありました。

UI（ユーザーインターフェース）改善

• ナビゲーションが適切でなく、 ターゲット別（年齢層、クラスタ、キーワード、興味、目的）の入り口となるような導線がありませんでした。

Webサイト運用上の課題、サーバの制約

セキュリティ上の制約

• JAXA宇宙教育センター様はセキュリティの確保のため、公開サーバではCMS他、動的なプログラムが利用できないという厳密な制約がありました。

運用方法のご要望

• 静的なWebサイトでもページ数は多いため、グローバルナビゲーションや一覧などの共通部分はなるべく1か所を修正したら複数のページに適用されるような工夫が必要とのご要望でした。

ページ精査が必要

• 拡大画像に1ページ割り当てがあるなど、一部無駄なページが存在していました。

マルチデバイス非対応

• レスポンシブ対応（スマートフォンなどのマルチデバイス対応）されておらずモバイルフレンドリーではありませんでした。

SERENDECの提案

Webサイトのデザイン、レイアウト設計の提案

シンプルな構成とわかりやすいデザイン

• JAXA宇宙教育センター様のWebサイトは、ターゲットが子供から大人、 教員 、社会人など幅広く、 提供する内容も多岐にわたっています。
  したがってWebサイトはなるべくオーソドックスでシンプルな構成とし、 老若男女どのようなユーザーに対しても わかりやすく、扱いやすいサイト構成にすることを提案しました。

  （デザイン性の高いサイトはブランディングサイトなどには有効である場合もありますが使いにくい場合がありますので、使いやすさを重視するよう提案しました。）

適切なUI（ユーザーインターフェース）

• ターゲット別の導線を適切に設計することを提案しました。

  このことで、 Webサイト自体が気の利くコンシェルジュのようになります。

Webサイト設計、CMS、SNSの提案

ステージングサーバでのCMS運用

• SERENDECは、制約とご要望を鑑みて最適な方法として、テストサーバまたはローカル環境でMovableType（静的CMS）にてWebサイトの構築をし、書き出したhtmlなどのファイル群を公開サーバにアップロードするという提案をしました。
  この方法なら、公開サーバのセキュリティを担保しつつ、1か所の修正を複数ページに適用したり、記事の一覧を自動作成したりすることが可能となります。※最終的にはPowerCMSを導入しました。

  CMSローカル運用のすすめ（関連ブログ記事）

  CMS導入、CMSのカスタマイズに関して

マルチデバイス対応

• ワンソースマルチユースのレスポンシブ対応（スマートフォンなどのマルチデバイス対応）を提案しました。

SNS（Instagram）の運用

• 当時SNSの運用はTwitterだけでしたが、JAXA宇宙教育センター様は質の高い画像を多く持っておられ、また違う層のユーザにも訴求しやすいと考え、Instagramの運用を提案しました。

工夫した点

Webサイトのデザイン、レイアウト設計の工夫

• 旧Webサイト自体はしっかりした堅実なものではありましたが、少しかたさも感じられたので、イラストや写真などを適切にちりばめ、シンプルながらも万人に親しみやすさを感じさせるデザインを作成しました。
• コンテンツが多いので、ヘッダーをメガメニューにしました。
• 新たな導線（ターゲット別、カテゴリ別）を設置し、スムーズな導線設計を行いました。

コンテンツの工夫

• カスタマージャーニーを作成して、新たなコンテンツ案をJAXA宇宙教育センター様に提案しました。
  それを元に実際のコンテンツはお客様へのヒアリングを通してご要望をうかがい、必要なコンテンツを作成しました。
• JAXA宇宙教育センター様の目的や活動内容がひとめでわかるようTOPページや下層ページを工夫しました。
• 旧Webサイトは、リンクやタイトルに抽象的なテキストが多く用いられており、何のページなのかわかりにくかったので、具体的なテキストや表現にしました。
• 「年齢から探す」などターゲット別の導線を設置しました。また「初めての方へ」などのページを新設しました。

Webサイト設計、運用の工夫

• 入力フィールドは、各グループの要望に応えて柔軟にカスタマイズしました。
• 入力しやすい順番や配置にしたサンプル記事をグループ毎に作成し、新規記事はそれを流用していただくようにしました。
• 共通部分は1ページを更新するだけでよいように構成しました。
• ステージングサーバのため、html書き出し時に絶対パスを自動で相対パスに置換するように構成しました。
• 不要なページの整理と統合を行いました。
• 追加要件や追加ページ、ご要望にはできる限り柔軟に対応しました。

大量ページ流し込みの工夫

• 大量のコーディング担当者をアサインして、大量ページ（2000ページ超）のhtmlを短期間で制作しました。
• 流し込みは単純な入力ミスをなるべくなくすために、JAXA宇宙教育センター様に作成いただいたリストをCSV加工し、CMSの機能を利用して一括アップロードしました。
  基本的な入力項目をCSVで予め登録しておいたので、コーディング担当者はコーディングあるいは一部の改変のみに集中することができ、ミスの減少、時短につながりました。
• 旧Webサイトもhtmlの構文はしっかりしていたところがあったので、一部そのまま移行しても新デザインが適用されるように工夫しました。

SERENDECが苦労した点

ワイヤーフレーム作成

• ディレクトリマップ作成後のワイヤーフレーム作成の段階で新規追加のページが多くあったこともあり、ワイヤーフレームの作成と調整に想定以上に時間がかかりました。

↓

• ワイヤーフレームをしっかりと作成したので、ページの内容自体の修正に関しては通常より少なかったように思います。

CMS構築

• 提案時はフィールドはhtml入力のシンプルなものを想定しており、単純なテンプレートを作成する予定でしたが、想定以上に部署毎（カテゴリ毎）に固有の特徴とご要望があったため、ページ仕様もカテゴリ毎に異なる設計となりました。

↓

• それぞれのカテゴリ毎のテンプレート作成は柔軟に対応しましたが、その分構築に時間がかかったため、他の工程（デザイン、流し込み）の工数短縮のために工夫をしました。どちらも良い経験となりました。

お客様の声

親しみやすいデザインやコンテンツ構成等々、様々な点でリニューアルサイトに対する好評の声をいただいているほか、スマホからのアクセス数が以前と比べて増えていることがわかり、レスポンシブデザインをご提案いただいて本当に良かったです。ページビュー数・訪問者数とも2倍程度に増えております。

SNS連携でもインスタの導入を推してくださったおかげで、教育関係者のみならず今までとはまた違う層へのリーチが可能となりました。

日々の更新につきましても、ご用意いただきました環境やマニュアルデータ群、サポートのおかげで今のところ順調に進めることができております。

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

• ページ数の多い大規模サイトをリニューアルしたい
• サーバや社内のセキュリティ方針の制約でCMSを導入できないが、簡単に更新したい
• ステージングサーバを導入したい
• CMSを導入したい、CMSのカスタマイズをしたい
• MT（MovableType)のカスタマイズをしてほしい
• 追加要件に柔軟に対応してほしい
• CMS移行で失敗したくない
• 自治体の案件を任せたい