「ホームページデザイン バラバラ事件２」【#広報DX】東京都の新人が広報DXをやってみた結果（現在進行形）#2
東京都広報課デジタルポータルサイト担当です。
前回、初回にも関わらず大反響、どこから波及したのか、宮坂副知事にもツイートいただきました（恐縮です汗）。小さな一歩でしたが、意思あるところに道が開ける感・・・モチベーション爆アガりです！今回も、何が飛び出るかハラハラドキドキ（私の上司が）の内容でお届けします。
●前回の記事⇒https://tokyo-metro.note.jp/n/n9cdd7035547e?magazine_key=m7455efe27b46
●デジタルポータルサイトプロジェクト詳細⇒https://shintosei.metro.tokyo.lg.jp/leading-project/leading-project-14/
●#ご意見募集 ⇒https://forms.gle/fpS9WG6MpFTXXa9b6
「ホームページデザイン バラバラ事件２」
（前回からの続き）全局ホームページのヘッダーフッターは揃ったものの、各局のコンテンツ部分はまだまだ統一化ができておらず、バラバラ事件は完全解決にはいたっていません。ボタンや各種パーツのデザインは元のままなので、閲覧に支障はないのですが、ボタン類がヘッダーフッターとデザイン的にマッチしているかというと、そうでもない。都庁総合も、もともと赤ベースだったところに、紺の統一帯メニューを入れたために、赤と紺、二つの濃い色がメイン色として共存するページになりました。デザインのセオリーとしては、赤のメイン色を全て紺色に置き換えて、赤は強調の差し色として使うようにすべきなのかもしれません。
ただ、都庁総合ホームページだけそうしたとしても、他の局がそれで良いかは別問題です。無理やり紺色の帯を全局導入した結果、他のパーツとのデザインマッチを犠牲にした面もあります。ヘッダーフッター以外の使い勝手も、細かくは統一されていません。全体最適をしようとすると、部分最適は犠牲にされ、部分最適をすると全体はバラバラになるので、全局の足並みを揃える案を出すのだけでも大変な仕事です。
これらの課題を解決する方法としては、①もっと厳しいデザイン統一マニュアルを作成して各局に展開するとか、②デザインシステムを入れるとか、③CMSを一つにまとめるなどの案があります。デジタルポータルサイトにも関わる問題ですが、既存のホームページの担当者としても検討を進めるべき課題のひとつです。（誰がやるべき仕事なのか？も気になるところではありますが・・・）
①厳しいデザイン統一マニュアル
もっと厳しいデザイン統一マニュアルを作成したとしても、作って展開して終わりではなく、年々見直しして更新していく必要があります。例えば、平成29年に作成して展開した現在のホームページデザインガイドラインの基準では、幅1000ピクセル程度とありますが、これは当時のパソコン利用者を予測し古いパソコンでも閲覧できるように設定された幅です。私は「レスポンシブルなんだし、最大横幅1600くらいにしてもいいのに。横のスペース余ってるじゃん」と思っていました（今では、その余ったスペースにチャットボットが設置できてちょうど良かったのですが）。
現状は、そこまで古いパソコンで閲覧しているユーザはほとんどいない事が判明しているのですが、逆にスマホユーザが半分を占める状況だという事も分かりました。横幅1600にするよりもむしろ、スマホファーストのデザインにしていくべきなのかもしれません。
技術の進歩は日進月歩、だからといって最先端を導入して古いパソコンの人を置いてけぼりにはできないジレンマもあり。さらに、行政のホームページとしてアクセシビリティの縛りもある。費用対効果に対する説明責任もある。バランスを考えて4年前には当時のベストの選択をしたとしても、数年後にそれがベストではなくなる時期が来る。デザインの流行も技術もみんなの意識も変わっていくので、「変わること」を前提とした統一基準の策定が必要です。でも、基準がコロコロ変わると各局の担当者は困るんですけどｗ
②デザインシステム
デザインシステムは、東京都と同じように、複数のサイトを運営する企業などがデザインの統一性を保つために利用している仕組みです。①のデザイン統一マニュアルは、文書ベースで「横幅1000ピクセル程度とする」と日本語で書いてあるだけですが、デザインシステムは、共通で使えるCSSをソースで提供するなど、もっと動的でシステマチックです。そして、もっと思想的・体系的です。WEBページのテンプレートを作るためのテンプレートソースのセットとその元となるコンセプト、みたいなものです。各局がホームページを作る際は一からデザインする必要がなくなり、全体のデザインイメージを変更する時も、基準が変わるたびに各局の担当者が予算を確保して改修する必要はなく便利でしょう。
ただし、「じゃぁ、デザインシステムを導入すれば簡単！」とはいきません。①と同様、どんなデザインを良しとするのか、大きなコンセプトづくりからはじめて、全局の調査だけでなくトレンドも取り入れて決めていく必要がありますし、決めた後も既存ページにあとから導入するには改修にお金と時間がかかります。
導入後も足りないコンポーネント（部品）があれば追加していくなど、常に最新化もしていかなければなりません。作って展開して終わりではないので、人もお金もかかり続けます。大規模なサイトでなければ費用対効果が出しにくいのですが、東京都の規模なら使い方・運用の仕方によってうまくいく可能性もあります。今後、ホームページリニューアルの際には各局でデザインを発注しなくて済む分、長期的な目で見れば安くなるような気がしますが、デザインシステムを導入するための費用と比べてどうでしょうかね？
コンポーネント（部品）とは例えば、次に進むボタンは右下で「次へ⇒」とし、紺色（#002063）ボタンでフォントはメイリオ太字12pxで余白は上下左右5px、カーソルを当てると水色（#0099cc）とか、送信ボタンは戻るボタンの右の紺色でボタンとボタンの間のスペースはこれくらい、とか、細かく設定した部品のソースや設定ルールです。各局のホームページではどんな部品が必要でどうすれば利用しやいか等を調査検討し、コンセンサスを得てから提供しますが、全部を網羅して提供するとなるとリリースがいつになるか分からないので、世の中に公開されているテンプレートでイメージに近いものを都のコンセプトに合わせてカスタマイズして各局に展開し、アジャイルでどんどん追加提供していく方式になるのではと予測されます。
組織が大きいと、コンセンサスを得るのも大変。各局を調査して、なるべく影響の少ないデザインにしようとしても、こちらを立てればあちらが立たず。中庸をとろうとすると、デザイン的にはイケてない結果になってデザインシステムの意味がなくなります。ヘッダーフッターを揃えるだけでもめちゃくちゃ大変だったのに、全部調べて細かい部品まで決めて提供するって無理ゲーです（泣）。デザインシステムは、最終的には「英断」で決めていくしかありません。決めた後も、費用のかかるものは前年度のうちに予算確保をしておくのが通常のフローですから、各局への展開は数年かかる事業になります。
さて、デザインシステムを「英断」で決めて入れるとしたら、誰の権限で誰が決めて誰が作って誰が運用していくのでしょう？（ドキドキ）
デザインシステムを構築して各局への導入支援をして運用し続けていくには、広報やホームページの知識だけでなく相当なITスキルも必要になってきます。また、ホームページのコンセプトというより、都政のコンセプト、概念から起草してトータルデザインしていく広報戦略的な要素も重要ですので、都政への深い理解や知見も求められます。…奥が深すぎてｗ（怖）。
国が作って全国自治体に展開してくれるとか、そういう神対応はないかな？（こんなことを言うと、「都が作って区市町村に展開するという神対応」を要求される特大ブーメランが飛んできそうなので黙っておこう）
国の動きとしては、デジタル庁さんが
閣議資料 P24 https://www.digital.go.jp/posts/ZlptjPro
②政府ウェブサイトの標準化・統一化
必要な情報に誰もが素早くアクセスできるよう各府省庁のウェブサイトのデザインやコンテンツ構成等の標準化・統一を図る。令和３年（2021 年）秋までに、各府省庁のウェブサイトデザン原則案を策定し、今後設置予定のデジタル庁ウェブサイトにおいて当該原則案の検証を実施する。
とおっしゃっています。どんな手法で統一されるのでしょうか？注視していきたいと思います。
一方、庁内には、デザインシステムの導入が難しい構造のホームページも存在します。CMSを利用しているところは、CSSの置換でデザインシステム導入のハードルもそれほど高くはないのかもしれませんが、10年以上前の手作りHTMLで運営している局は、CSSをきちんと体系だてて利用しているかどうかも分かりません。CSS外でソースベタ打ちのスタイル設定をしていないかとか、そういうことを調べて洗い出したりするよりは、もう何かのCMSを新たに導入してリプレイスした方が早い可能性もあります。デザインシステムを有効活用するには、CMSを入れるなどソースが体系的にキレイに整理整頓できていることが前提になります。
③CMSを統一
「CMSの導入」と簡単に言っても、小規模であっても数百万円、大規模なら数千万円以上かかるCMSを、導入して「費用対効果」が出せる局ばかりではありません。毎日のように更新があるならともかく、それほど大きな変更なく文字修正程度で済ませることができれば、編集ソフトがなくても普段は支障ないため、ソフトを買う数万の予算さえついていない部署もあります。
ソフトなしで普段は支障がなくても、急に改修が必要になって困ることもあります。ある日の夜中、私が残業していたら他局から電話がかかってきて、「HTMLを編集したらデザインが崩れて戻せない」とのこと。ソースを送ってもらってみたら＜/div＞タグが１つ足りない。なぜこんな事になっているのか聞くと、HTMLが分かる職員はいないけれど、「ページコピー＆メモ帳で文言修正」だけで普段はなんとか運営していたところ、組織改編があってページメニュー数の変更が急に必要になったのだとか。局ではなく、部署の問題だから、なかなかひとつの部署のためにCMSを入れる等の大きな話はできない。急な話で業者に委託するにも予算も時間もない中で、自力で今週中になんとかするしかなくて、誰か分かりそうな人に電話をかけてみた、という話でした。
こんな状況の部署に、「デザインシステム作ったので入れてね」と軽くお願いすることはできません。お願いできるとしたら、「次にホームページ改修やリプレイスをする時が来たらこのデザインシステムを入れてね」くらいでしょうか。事業者に仕様書を書いて出したり説明したりする際のサポートも必要になりそうです。
確かに部局により更新頻度は様々でCMSの必要性も様々でしょうが、費用対効果の面がクリアできれば、CMSを入れた方が事故も起きにくく便利です。
一つの大きなCMSで複数のドメインやサブドメイン、フォルダごとに管理ユーザやパスワードを分けて管理できるものがあれば、各局のページを徐々にひとつのCMSに統合していくことも可能になります。予算の少ない部局のサイトも、大きなCMSの中のひとつとして間借りできれば、安心です。局をまたいだリンクの貼りあいや連携、同じデータの共有など、データリソース管理の面でもメリットがありそうです。
一時期、他局で「局をまたいだ一つの大きなCMSを契約しよう」という案も浮上したことがあるようですが、費用が大きすぎて、その後の運用管理（店子の面倒を見る等）も大変過ぎて頓挫したようです。60万ページをリプレイスするだけで莫大な金額になりますから、「費用対効果」という意味で、「提供できる情報＝サービスのレベル」が同じで職員が便利になって人件費が減るだけ、という説明ではなかなか予算もつきにくいのではないでしょうか。
今回、広報DXの一環として、CMSの統一やデザインシステムの導入が、サービスレベルの向上とともに一気にできるのであれば、バラバラ事件を解決するチャンスでもあります。デザインが統一されちゃうと、リニューアルする時に入札事業者がデザイン力で戦えないし最新技術を提案しにくいから各局の味が出しづらくなるという面もあります。CMSをひとつに統一すると、１事業者に契約が集中して大丈夫？という心配もあります。何を良しとするか？東京都のホームページデザインはどうあるべきなのか？ここまでくると哲学の問題です。
①②③いずれもイバラの道。いずれにしても、古いHTMLのソースをキレイに構造化していく作業は、いつか必要になります。いつやるか？今でしょ！？（ホントに？）ここで問題意識を共有すれば新たに④⑤の案が出てくるかなー？という期待のもとに、長いつぶやきをしてみました。
【#意見募集】あなたにピッタリな都の情報をお届けするために、どのようなタイミングでどの程度の自分の情報を提供しても良いと考えるか等、皆様からのご意見を募集しています。アンケートに是非ご協力ください。
https://forms.gle/ciPr6M6vXZTC9Sqa7