「相模原市シティプロモーションサイト」のデザイン戦略《後編》

相模原市シティプロモーションサイト「さがみはらむすび」のリニューアルにおけるデザイン戦略の“裏側”をお伝えするシリーズの後編は、UI・UXや運用しやすくする工夫等について。目指したのはいい意味での“自治体らしくない”。そのワケは?

直感的なUIを重視

「相模原市シティプロモーションサイト『さがみはらむすび』」のリニューアルにあたり、初めてアクセスする方にとって分かりやすく、直感的に操作できるデザインを目指して各種レイアウトやデザインを決定しました。

アクセスしてすぐに目に留まるトップページには、《前編》でご紹介したように、スペシャルアンバサダー[Alexandros]さんの撮り下ろしショットを大きく配置し、アーティストの公式サイトのような良い意味で“自治体らしくない”印象的なページに仕上げたほか、コンテンツメニューにもこだわりました。

コンテンツは大きく分けると

• さがみはらチアリングパートナー
• SNS
• 観光案内
• 宇宙
• ふるさと納税
• 移住・定住促進
• 相模原市マスコットキャラクター「さがみん」特集

のラインナップ。

メニューには項目を羅列するのではなく、アプリアイコンのようなビジュアルに。スマートフォンやタブレット端末が普及していることを踏まえ、見た方が目的に合わせて直感的に操作できるよう、目的ごとに分け、各コンテンツをイメージした大きめのアイコンとともに配置しました。
 
 ちなみに、これらのページのアイキャッチ画像の半数は、撮影が得意な職員が撮影したもの。画像中央にコンテンツ名を配置することを意識し、このサイトのために撮り下ろしてもらった写真も多いです。

また、

• 子育て
• スポーツ
• 相模原市公式HP

これら３つは、ハイパーリンクで各課が運用するHPなどに飛ぶようにしました。
 
掲載コンテンツは、当課が所管する「さがみはらみんなのシビックプライド向上計画」で掲げる４つの軸に紐づくものをチョイスしています。

運用のしやすさという視点

この時はリニューアルということで、職員の運用のしやすさにも着目しました。実際リニューアル前のサイトでは、設計上リアルタイムな更新が難しかったという課題がありました。力を入れて作っても、運用（更新）し続けられなければもったいないと思い、変わりにくい情報を中心に掲載し、変わる頻度が高そうな情報は極力ハイパーリンクで各公式サイトに飛ばすよう導線を整備しました。
 
今回は、特にレイアウトなどにこだわったページをいくつかご紹介します。

 《事例①》さがみはらチアリングパートナー

このページには、「私もさがみはらチアリングパートナーです!」と公言してくださった皆さんのコメントを掲載しています。
素敵なメッセージの数々をご覧いただきたいのはもちろんですが、戦略としてご注目いただきたい箇所はこの部分。

繰り返しになりますが、私は、「なぜこの取組をするのか」「なぜこの企画をする必要があるのか」などの問いに職員が答えを持っていることが何より大切だと思っています。
取組の背景に関する情報が前面に大々的に出るのはまた違うと思っているのですが、疑問を持った方がこれらの情報にアクセスできる導線を引いておくことが必要だと思い掲載を決めました。

 《事例②》SNSで最新情報をチェック

ここではこのように、各SNSを埋め込んでいます。

印刷物などにSNSを紹介するリンクを掲載する際、いつもどのアカウントのリンクにするか悩んでいました。また、行政が発信する情報であるにも関わらず、アカウントを持っていない方はアクセスが難しいという課題もありました。
 しかし、このように1ページに埋め込みでまとめて掲載すれば、このような悩みは解決します。基本的にこのページはSNSが埋め込まれた状態で自動更新されるので、アカウントをお持ちでない方も簡単にご覧いただけます。

《事例③》さがみはらをゆるっとめぐる

このページは、いわゆる観光案内の特集ページです（下画像参照）。

目的別の観光案内となるよういくつかの項目に分け、Instagramのように印象的に写真を配置し、すぐ下にリード文を配置することで興味を持っていただけるきっかけをつくるとともに、詳細はハイパーリンクで各公式サイトなどに飛ばし、いつでも最新情報にアクセスできる設計にしました。

最後に

前後編にわけて、前編では戦略メモのほか制作のコンセプト、後編ではデザインやレイアウトの意図などを紹介させていただきました。

事業やデザインひとつ取っても、地盤をしっかり固めることが何よりも大切で、そうすれば事務を進める時にブレて迷子になることはないと思っています。

今回このような記事を執筆する場をいただき、改めて当時の戦略を振り返って記録に残すことができたことはとても有難いことだと思っており、感謝しています。

次回は、この記事では端折って紹介した「さがみはらチアリングパートナー」ノベルティキット（下画参照）の戦略をデザインという切り口から紹介していきます。

（続く）

■ 相模原市シティプロモーション公式SNS一覧