Webデザイントレンド(自治体編)
CSS Nite in Ginza, Vol.66
Webデザイントレンド(自治体編)
2012年11月15日（木）アップルストア銀座で開催
原 一浩
Greative LLC 1998年Webデザインのメディアを 発行以来、延々とリサーチを続ける清家 順
有限会社ユニバーサルワークス 毎年9月に「自治体サイト アクセシビリティ調査」を実施サイトピックアップの手法
海外で話題になったサイト
10,000サイト
グローバル
500社のサイト400サイト
地方自治体県市町村
1,700サイト
上場企業
3,400サイト
1部、2部、マザーズ、ヘラクレス、JASDAQ ほか、もと上場サイトVaqum
Greative社製
クローラ機能 キャプチャ機能 チェック機能 分析機能 公益社団法人日本広報協会 広報アドバイザー 「全国広報コンクール」ウェブサイト部門審査員 月刊「広報」誌上で、 ドクターＳのサイト診断」連載中 毎年9月に 「自治体サイトアクセシビリティ調査」を実施 ウェブアクセシビリティ基盤委員会 WG1副査
広報コンクールって?
地方自治体の広報活動向上が目的
昭和39年から毎年実施 広報誌、ウェブサイトなど5媒体10部門 ウェブサイト部門 • 2000年から開始 • 都道府県審査はない(ところが多い) • 審査員3名 デザイン、文章、アクセシビリティ“トレンドとは最先端ではない
今年のトレンドに至る
流れとキーワード
2012年の自治体サイトトレンド
ここだよマップ
緊急情報・緊急対応
ご当地ブランディング
アクセシビリティツール
暮らす人と観光の人の利用軸
オーソドックスなスタイル
LOCAL2014
GOVERNMENT2014年の自治体サイト
全体傾向
2014年の自治体サイトの
リニューアル数
2014年の自治体サイト印象
移転サイトのドメイン切れ
テンプレ化が進む
アーチが元気
構築業者やCMSの動向
おことわり
自身の調査や、関係者の発言を総合的に
判断したものでウラどりは不十分
下記のような理由で該当しない事例も
販社、制作会社、CMSベンダーが別 異なる会社の外注先デザイナーが同じ 標準テンプレートを用いていない 製品やテンプレートのバージョンアップ パクった(インスパイアされた)主な自治体向けCMS
CMS製品名 社名 4Uweb/CMS 日立公共システム（東京） CMS-8341/やさしい グローバルデザイン（静岡） NetCrew CMS 福泉（愛媛） いくくるウェブ スマートバリュー（大阪） i-City Portal 富士通（東京） Joruri CMS （オープンソース） 徳島県＋アイ・ディ・エス（徳島） i-SITE PORTAL ソンズ（鳥取） e-CLEAR 三谷コンピュータ（福井） TsuNaGo/つなごう CMS フューチャーイン（名古屋） じち丸 CMS for SaaS キヤノン電子テクノロジー（東京） CMS ALAYA 彼方（東京）4Uweb/CMS
プレスリリース「〇〇地方発、AA準拠」
閲覧支援機能 ZoomSight
画像化された文字は、白くフチドリ
おそらくコントラスト比を確保するため
かつては、東京都内で圧倒的シェア
川越市
LOCAL2014
GOVERNMENT所沢市
LOCAL2014
GOVERNMENTCMS-8341/やさしい
gd.js を探すのが確実
各種ランキング、コンクール上位多数
全国広報コンクール Webユーザビリティランキング
港区を皮切りに、
日立公共システムの牙城に侵攻
千代田区
LOCAL2014
GOVERNMENT藤沢市
LOCAL2014
GOVERNMENTNetCrew CMS
愛媛県内市町村が多いが、全国的
360°ビュー
特定のパーツ（アイコン）が類似
松野町
LOCAL2014
GOVERNMENT坂出市
LOCAL2014
GOVERNMENTCMSベンダー≠構築業者もある
さいたま市
ロフトワーク × 三谷コンピュータ
フューチャーイン
かつて「DBPS（パナソニック）」を提案 現在 「TsuNaGo/つなごう CMS（自社）」
MTやWordPressで構築されることも
地域ごとに特色ある構築業者も多数
ナビゲーション周り
基本ルール
広報業務
法律、条令、施行規則… ： ない
基本ルール
ユーザビリティ、アクセシビリティ
セオリー・定石・定番 • スーパーマーケットの売り場のようなもの JIS X8341-3:2010 • 工業標準化法による尊重義務 • 場合によっては、手段が制限される水巻町
LOCAL2014
GOVERNMENT大磯町
LOCAL2014
GOVERNMENT小布施町
LOCAL2014
GOVERNMENT川根本町
LOCAL2014
GOVERNMENT中野区：難解すぎる
下記の文字列は一致することが多いよね
• リンクラベル • h1要素
怪しくなってきた
組織
所属情報一覧
組 織
いいね！→なかなかいいね！
いいね！中野
なかなかいけないね！
自治体の入口分割とは
LOCAL2014
GOVERNMENT4つに分かれた入口
LOCAL2014
GOVERNMENT3つ折りパンフ風構成
LOCAL2014
GOVERNMENT入口分割、やめました
LOCAL2013
GOVERNMENT入口分割、やめました
LOCAL2014
GOVERNMENTグロナビとは違う切り口
LOCAL2014
GOVERNMENTスペシャルコンテンツ置き場
LOCAL2014
GOVERNMENT入口分割の一種として
LOCAL2014
GOVERNMENTWebアクセシビリティ調査
2014年のテーマ
「文字サイズ変更機能」
基本、いらない機能だと思う
ブラウザの拡大機能があるじゃない ボタンが見えるので「やった感」が出やすい 仕様書に明記2014年のテーマ
「文字サイズ変更機能」
もし実装するなら
200％まで拡大（7.1.4.4）
山形県
デフォルト ： 12pt
大
： 13pt !
特大
： 14pt !!
調査後にリニューアルしたため、 現在は改善された大阪府
気をつけたいこと
背景がなくなる
文字が重なる
福岡県
シティプロモーション
シティプロモーションとは?
地域イメージのブランド化により、
ステークホルダーおよび顧客の意欲を
つくりだし、地域持続のための
資源を獲得すること
個々の地域特産品のブランド力だけを高める ことではない 東海大学文学部広報メディア学科河井孝仁氏 第51回全国広報広聴研究大会講演 「地域の魅力を高めるヒント～シティプロモーション事例から学ぶ」資料より民間サイト、Webサービス導入
YouTube
（恋するフォーチュンクッキー）
ブログサービス
あたりは、導入事例多数。ほかにも…大阪市など ×
ディテール大賞
LOCAL2014
GOVERNMENTイラストによるイメチェン
LOCAL2014
GOVERNMENT高島市
LOCAL2014
GOVERNMENTインパクト勝負
LOCAL2014
GOVERNMENTインパクト勝負
LOCAL2014
GOVERNMENTインパクト勝負
LOCAL2014
GOVERNMENT人、キャラの活用
人の活用
部長ブログ、課長ブログ
実名によるSNS活用
ゆるキャラ
あたりは、導入事例多数。 必ずしも、ウェブに限った活用ではありませんが、 ほかにも…ゆるキャラのいま
2012年のトレンドでは、ゆるキャラは
サイトにほぼいなかった
2013年に爆発的に増加
人類が、増えすぎたゆるキャラをWebに
移民させるようになって、1年半が
過ぎていた...。
メンバーの一員
LOCAL2014
GOVERNMENTメンバーの一員
LOCAL2014
GOVERNMENT使用申請など
LOCAL2014
GOVERNMENT使用申請など
LOCAL2014
GOVERNMENTプロの仕事
LOCAL2014
GOVERNMENTプロの仕事
LOCAL2014
GOVERNMENT活用されているトレンド
フラットへの道のり
LOCAL2012
GOVERNMENTフラットへの道のり
LOCAL2013
GOVERNMENTフラットへの道のり
LOCAL2014
GOVERNMENTリボンとフラット
LOCAL2013
GOVERNMENTリボンとフラット
LOCAL2014
GOVERNMENTオーソドックスからの脱却
LOCAL2013
GOVERNMENTオーソドックスからの脱却
LOCAL2014
GOVERNMENTセンターロゴ
LOCAL2014
GOVERNMENT谷間としてのセンター
LOCAL2014
GOVERNMENTナビゲーション分割
LOCAL2014
GOVERNMENT今年のアーチは一工夫+
LOCAL2014
GOVERNMENTワイドさとアーチ
LOCAL2014
GOVERNMENTグロナビ2重アーチ交差
LOCAL2014
GOVERNMENT見立てアーチ
LOCAL2014
GOVERNMENTカルーセルパネルの功罪
功
多くの情報を 扱えるようになった 動きがあるので 華やかな感じがする 視線を集められる トレンド感がある
罪
主たるメッセージが 定まらない アクセシビリティが 低下する 読み込み速度の低下 用意しなければならな い素材が増えるWeb Design Trends That Will
Disappear in 2014
こんな意見・ウェブサイトも
Should I Use a Carousel
http://shouldiuseacarousel.com/
自動送りカルーセルとアコーディオンは、
ユーザーをいらつかせ、可視性を下げる
http://www.usability.gr.jp/alertbox/a
uto-forwarding.html
小田原市
LOCAL2014
GOVERNMENTWeb Fontsの功罪
功
画像化された文字を 作成しなくてもいい 拡大しても文字が きれい 自動翻訳と好相性 トレンド感がある
罪
表示環境が限定される （次第に解消） お金がかかる 読み込み速度の低下 （描画速度の低下）「罪」の方はどうする
お金がかかる
利用料 と 見出しの画像化のための費用を比較 利用箇所の限定（従量制の場合）
読み込み速度の低下（描画速度の低下）
目的による、適用・不適用の選別 災害情報には使わない などスマホ対応≠レスポンシブ
ウェブデザイン
理想
ワンソースでマルチデバイス化 Googleも推奨しているって言うし…
現実
端末の種類が多すぎて、（制作時の）対応が困難 PCで見るときと、スマホで見るときで、 求める情報が全く違うかもしれないレスポンシブありき?
一つの手法としては問題なし
何らかの「手法」を実装することが
目的ではない
PC、スマホ、タブレットの各利用者・環境に対して、 どんなメリットを享受できるか。 用語の定義・解釈が制作者によって異なるので注意レスポンシブありき?
利用状況（割合）の把握と、利用場面の
想定
外部の統計資料だけでなく、
坂本邦夫 : 倶知安町
LOCAL2014
GOVERNMENT原 一浩 : 寝屋川市
LOCAL2014
GOVERNMENT矢野りん : さいたま市
LOCAL2014
GOVERNMENTスマートフォン対応
2014年の自治体サイトの
スマートフォン対応状況
スマートフォン対応パターン
CMSデフォルト型
CSS/JSフレームワーク型
ワンクッション型
レスポンシブ型
同系統デザイン出し分け型
CMSの特徴が出やすい
LOCAL2014
GOVERNMENT安心感がある
LOCAL2014
GOVERNMENTjQuery mobileベース
LOCAL2014
GOVERNMENTWP-touchベース
LOCAL2014
GOVERNMENT上部ボタンを押して開始
LOCAL2014
GOVERNMENTPCサイトをまず表示
LOCAL2014
GOVERNMENTレスポンシブ
LOCAL2014
GOVERNMENTレスポンシブ
LOCAL2014
GOVERNMENTコンテンツの省略
LOCAL2014
GOVERNMENTコンテンツの省略
LOCAL2014
GOVERNMENTレスポンシブでないもの
LOCAL2014
GOVERNMENTレスポンシブでないもの
LOCAL2014
GOVERNMENTテイストは同じ
LOCAL2014
GOVERNMENTテイストは同じ
LOCAL2014
GOVERNMENT規格や法律の話を少し
これまでの規格・法律など
JIS X8341-3:2010
障害者・高齢者等配慮設計指針 Webアクセシビリティ確保のための指針 工業標準化法 地方公共団体は、尊重義務これまでの規格・法律など
みんなの公共サイト運用モデル
JIS X8341-3:2010の活用のためのモデル
2015年の動き
JIS X8341-3:2015
JIS X8341-3:2010が改訂
2015年の動き
障害者差別解消法
障害を理由とする 差別の解消の推進に関する法律 2013年 公布・一部施行 2015年 対応指針・対応要領の策定 2016年 全面施行障害者差別解消法
社会的障壁を取り除くために
必要で合理的な配慮
対象 合理的配慮 国や地方公共団体等 義務 民間事業者 努力義務ベスト
オブ
自治体サイト
半田市
LOCAL2014
GOVERNMENT猪名川町
LOCAL2015
GOVERNMENTWeb担当者のための
アクセシビリティセミナー
〜国内・海外動向を踏まえたJIS X 8341-3:2010の活用〜東京
2015年2月13日(金曜日) 14:00〜18:00 (受付開始 13:30〜)大阪
2015年2月4日(水曜日) 13:30〜16:30 (受付開始 13:10〜)Webデザイントレンド(自治体編)
CPI x CSS Nite x 優クリエイト「After Dark」(18)
