Web デザイントレンド ( 自治体編 ) CPI x CSS Nite x 優クリエイト After Dark (18)
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 社製 クローラ機能 キャプチャ機能 チェック機能 分析機能
清家の自治体リサーチ関連活動
公益社団法人日本広報協会広報アドバイザー 全国広報コンクール ウェブサイト部門審査員 月刊 広報 誌上で ドクター S のサイト診断 連載中 毎年 9 月に 自治体サイトアクセシビリティ調査 を実施 ウェブアクセシビリティ基盤委員会 WG1 副査
広報コンクールって? 地方自治体の広報活動向上が目的 昭和 39 年から毎年実施 広報誌 ウェブサイトなど5 媒体 10 部門 ウェブサイト部門 2000 年から開始 都道府県審査はない ( ところが多い ) 審査員 3 名 デザイン 文章 アクセシビリティ
トレンドって?
トレンドとは最先端ではない 時代に最適化されつつある現象である
今年のトレンドに至る 流れとキーワード
2012 年の自治体サイトトレンド ここだよマップ 緊急情報 緊急対応 ご当地ブランディング アクセシビリティツール 暮らす人と観光の人の利用軸
オーソドックスなスタイル LOCAL 2014 GOVERNMENT
2014 年の自治体サイト 全体傾向
2014 年の自治体サイトのリニューアル数 235 1700
2014 年の自治体サイト印象 移転サイトのドメイン切れ テンプレ化が進む アーチが元気 自治体系はイキイキしている
構築業者や CMS の動向自治体独自な 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 画像化された文字は 白くフチドリ おそらくコントラスト比を確保するため かつては 東京都内で圧倒的シェア
川越市 LOCAL 2014 GOVERNMENT
所沢市 LOCAL 2014 GOVERNMENT
CMS-8341/ やさしい gd.js を探すのが確実 各種ランキング コンクール上位多数 全国広報コンクール Web ユーザビリティランキング 港区を皮切りに 日立公共システムの牙城に侵攻
千代田区 LOCAL 2014 GOVERNMENT
藤沢市 LOCAL 2014 GOVERNMENT
NetCrew CMS 愛媛県内市町村が多いが 全国的 360 ビュー 特定のパーツ ( アイコン ) が類似 松前町内子町鬼北町
松野町 LOCAL 2014 GOVERNMENT
坂出市 LOCAL 2014 GOVERNMENT
CMS ベンダー 構築業者もある さいたま市 ロフトワーク 三谷コンピュータ フューチャーイン かつて DBPS( パナソニック ) を提案 現在 TsuNaGo/ つなごう CMS( 自社 ) MTやWordPressで構築されることも 地域ごとに特色ある構築業者も多数
ナビゲーション周り大量の情報をどう整理するか
ナビゲーションのセオリー
基本ルール 広報業務 法律 条令 施行規則 : ない 自由度が高い
基本ルール ユーザビリティ アクセシビリティ セオリー 定石 定番 スーパーマーケットの売り場のようなもの JIS X8341-3:2010 工業標準化法による尊重義務 場合によっては 手段が制限される
水巻町 LOCAL 2014 GOVERNMENT
大磯町 LOCAL 2014 GOVERNMENT
小布施町 LOCAL 2014 GOVERNMENT
川根本町 LOCAL 2014 GOVERNMENT
これもセオリー?
だとしたら これらはダメ?
中野区 : 難解すぎる 下記の文字列は一致することが多いよね リンクラベル h1 要素 パンくずリストの中身
施設 施設案内はよい
怪しくなってきた 組織 所属情報一覧 組 織 全角スペース
いいね! なかなかいいね! いいね! 中野 なかなかいいね! 中野
なかなかいけないね! 階層 深っ!
入口分割その後
自治体の入口分割とは LOCAL 2014 GOVERNMENT
4つに分かれた入口 LOCAL 2014 GOVERNMENT
3つ折りパンフ風構成 LOCAL 2014 GOVERNMENT
入口分割 やめました LOCAL 2013 GOVERNMENT
入口分割 やめました LOCAL 2014 GOVERNMENT
左タブナビ
グロナビとは違う切り口 LOCAL 2014 GOVERNMENT
スペシャルコンテンツ置き場 LOCAL 2014 GOVERNMENT
入口分割の一種として LOCAL 2014 GOVERNMENT
Web アクセシビリティ調査 2014 年の調査報告より
2014 年のテーマ 文字サイズ変更機能 基本 いらない機能だと思う ブラウザの拡大機能があるじゃない ボタンが見えるので やった感 が出やすい 仕様書に明記
2014 年のテーマ 文字サイズ変更機能 もし実装するなら 200% まで拡大 (7.1.4.4) 拡大しても 他の要素の閲覧を阻害しない
山形県 デフォルト : 12pt 大 : 13pt! 特大 : 14pt!! 調査後にリニューアルしたため 現在は改善された
大阪府 気をつけたいこと 背景がなくなる 文字が重なる 枠に収まらない
福岡県 危機管理情報が危機
シティプロモーションまちというコンテンツ
シティプロモーションとは? 地域イメージのブランド化により ステークホルダーおよび顧客の意欲をつくりだし 地域持続のための資源を獲得すること 個々の地域特産品のブランド力だけを高めることではない 東海大学文学部広報メディア学科河井孝仁氏第 51 回全国広報広聴研究大会講演 地域の魅力を高めるヒント ~ シティプロモーション事例から学ぶ 資料より
民間サイト Web サービス導入 Facebook Twitter YouTube( 恋するフォーチュンクッキー ) ブログサービス あたりは 導入事例多数 ほかにも
埼玉県 クックパッド
大阪市など FixMyStreet Japan
日南市 ボケて
日南市 ボケて
日南市 ボケて
丹波市 LINE
島根県など FAAVO
2014 地域ブランディング
ディテール大賞 LOCAL 2014 GOVERNMENT
イラストによるイメチェン LOCAL 2014 GOVERNMENT
高島市 LOCAL 2014 GOVERNMENT
インパクト勝負 LOCAL 2014 GOVERNMENT
インパクト勝負 LOCAL 2014 GOVERNMENT
インパクト勝負 LOCAL 2014 GOVERNMENT
人 キャラの活用ひとがあつまっての街
人の活用 部長ブログ 課長ブログ 実名による SNS 活用 ゆるキャラ あたりは 導入事例多数 必ずしも ウェブに限った活用ではありませんが ほかにも
鯖江市 :JK 課
鯖江市 :OC 課
可児市 : かにすき (Facebook)
熱海市 : 熱海時間
プロ化するゆるキャラ
ゆるキャラのいま 2012 年のトレンドでは ゆるキャラはサイトにほぼいなかった 2013 年に爆発的に増加 人類が 増えすぎたゆるキャラを Web に移民させるようになって 1 年半が過ぎていた...
メンバーの一員 LOCAL 2014 GOVERNMENT
メンバーの一員 LOCAL 2014 GOVERNMENT
使用申請など LOCAL 2014 GOVERNMENT
使用申請など LOCAL 2014 GOVERNMENT
プロの仕事 LOCAL 2014 GOVERNMENT
プロの仕事 LOCAL 2014 GOVERNMENT
活用されているトレンド落とし穴にも気をつけろ
フラットデザインの採用
フラットへの道のり LOCAL 2012 GOVERNMENT
フラットへの道のり LOCAL 2013 GOVERNMENT
フラットへの道のり LOCAL 2014 GOVERNMENT
リボンとフラット LOCAL 2013 GOVERNMENT
リボンとフラット LOCAL 2014 GOVERNMENT
オーソドックスからの脱却 LOCAL 2013 GOVERNMENT
オーソドックスからの脱却 LOCAL 2014 GOVERNMENT
採用しはじめたセンター
センターロゴ LOCAL 2014 GOVERNMENT
谷間としてのセンター LOCAL 2014 GOVERNMENT
ナビゲーション分割 LOCAL 2014 GOVERNMENT
アーチ勢い強める
今年のアーチは一工夫 + LOCAL 2014 GOVERNMENT
ワイドさとアーチ LOCAL 2014 GOVERNMENT
グロナビ2 重アーチ交差 LOCAL 2014 GOVERNMENT
見立てアーチ LOCAL 2014 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
Web Fonts の功罪
小田原市 LOCAL 2014 GOVERNMENT
Web Fonts の功罪 功 画像化された文字を作成しなくてもいい 拡大しても文字がきれい 自動翻訳と好相性 罪 表示環境が限定される ( 次第に解消 ) お金がかかる 読み込み速度の低下 ( 描画速度の低下 ) トレンド感がある
見出しも含めて 翻訳可能
罪 の方はどうする お金がかかる 利用料と見出しの画像化のための費用を比較 利用箇所の限定 ( 従量制の場合 ) 読み込み速度の低下 ( 描画速度の低下 ) 目的による 適用 不適用の選別 災害情報には使わないなど
レスポンシブウェブデザイン
スマホ対応 レスポンシブウェブデザイン 理想 ワンソースでマルチデバイス化 Google も推奨しているって言うし 現実 端末の種類が多すぎて ( 制作時の ) 対応が困難 PC で見るときと スマホで見るときで 求める情報が全く違うかもしれない
レスポンシブありき? 一つの手法としては問題なし 何らかの 手法 を実装することが目的ではない PC スマホ タブレットの各利用者 環境に対して どんなメリットを享受できるか 用語の定義 解釈が制作者によって異なるので注意
レスポンシブありき? 利用状況 ( 割合 ) の把握と 利用場面の想定 外部の統計資料だけでなく 自サイトのアクセスログにも注目
Shift8 フラット大賞について
坂本邦夫 : 倶知安町 LOCAL 2014 GOVERNMENT
原一浩 : 寝屋川市 LOCAL 2014 GOVERNMENT
矢野りん : さいたま市 LOCAL 2014 GOVERNMENT
スマートフォン対応スモールスクリーンへの気配り
2014 年の自治体サイトのスマートフォン対応状況 339 1700
スマートフォン対応パターン CMSデフォルト型 CSS/JSフレームワーク型 ワンクッション型 レスポンシブ型 同系統デザイン出し分け型
CMS デフォルト型
CMSの特徴が出やすい LOCAL 2014 GOVERNMENT
安心感がある LOCAL 2014 GOVERNMENT
CSS/JS フレームワーク型
jquery mobileベース LOCAL 2014 GOVERNMENT
WP-touchベース LOCAL 2014 GOVERNMENT
ワンクッション型
上部ボタンを押して開始 LOCAL 2014 GOVERNMENT
PCサイトをまず表示 LOCAL 2014 GOVERNMENT
レスポンシブ型
レスポンシブ LOCAL 2014 GOVERNMENT
レスポンシブ LOCAL 2014 GOVERNMENT
コンテンツの省略 LOCAL 2014 GOVERNMENT
コンテンツの省略 LOCAL 2014 GOVERNMENT
同系統デザイン出し分け型
レスポンシブでないもの LOCAL 2014 GOVERNMENT
レスポンシブでないもの LOCAL 2014 GOVERNMENT
テイストは同じ LOCAL 2014 GOVERNMENT
テイストは同じ LOCAL 2014 GOVERNMENT
規格や法律の話を少し Web アクセシビリティに関連して
これまでの規格 法律など JIS X8341-3:2010 障害者 高齢者等配慮設計指針 Webアクセシビリティ確保のための指針 工業標準化法 地方公共団体は 尊重義務
これまでの規格 法律など みんなの公共サイト運用モデル JIS X8341-3:2010の活用のためのモデル 達成すべき等級と期限 ( の目安 ) に言及
2015 年の動き JIS X8341-3:2015 JIS X8341-3:2010が改訂 WCAG2.0がISO 化されており それに原則一致
2015 年の動き 障害者差別解消法 障害を理由とする差別の解消の推進に関する法律 2013 年 2015 年 2016 年 公布 一部施行 対応指針 対応要領の策定 全面施行
障害者差別解消法 社会的障壁を取り除くために必要で合理的な配慮 対象 国や地方公共団体等 民間事業者 合理的配慮 義務 努力義務
ベストオブ自治体サイト 2014 年 -2015 年初頭の MVP はこのサイトだ!!
原のベスト自治体サイト
半田市 LOCAL 2014 GOVERNMENT
清家のベスト自治体サイト
猪名川町 LOCAL 2015 GOVERNMENT
Web 担当者のための アクセシビリティセミナー 国内 海外動向を踏まえた 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) ありがとうございました!!
おまけ
その他トピック ネタ
只見町 LOCAL 2014 GOVERNMENT
宇土市 LOCAL 2014 GOVERNMENT
その他の CMS
いくくるウェブ 構築実績 のまめに更新がされているので そこを見るのが確実 大阪府内が中心だったが 今は東京支社も 子育て支援や定住促進などのサブサイトにも定評あり
寝屋川市 LOCAL 2014 GOVERNMENT
高槻市 : 特設サイト LOCAL 2014 GOVERNMENT
i-city Portal 奈良市公式サイトのパンくずが斜め上を行くヤバさな件 で話題 APM03000.html で検索 トップページの URI がこれなので 見つかる 古くからあるので サイトデザインからの類推は難しい コントラストが低くても気にしない
富岡市 LOCAL 2014 GOVERNMENT
座間市 LOCAL 2014 GOVERNMENT
Joruri CMS 徳島県内市町村でよく見かける ナビゲーションバーの一番右の項目が 防災 or 安心 安全 そこだけ色が違ったら ほぼ確実 ソース見れば themes/joruri. ですけどね
柏原市 LOCAL 2014 GOVERNMENT
八幡浜市 LOCAL 2014 GOVERNMENT
ネタ
BKB とか DAIGO の流れなんでしょうかね アルファベットを並べる
自治体でも採用 chw.jp 和歌山県橋本市公式サイト City Hashimoto Wakayama?
恵庭市 : 笑顔があふれるまち (^O^) どこでも笑顔 (^O^)
にぎやかさの演出 LOCAL 2014 GOVERNMENT