狠狠撸

狠狠撸Share a Scribd company logo
WCAN 2016 WinterDecember 3, 2016 Yasuhisa Hasegawa
フリーランスデザイナー
デザインプロセス改善や運用の手伝い
ブログ?ポッドキャスト運用中
寄稿?講演多数
著書『Experience Points』ほか
長谷川恭久
@yhassy
奥别产サイト?アプリは立ち上げてから本番
コンテンツ運用
ブログ
ページ追加?更新
マーケティング
ソーシャルメディア
メール
オートメーション
立ち上げただけでは
誰も
見てくれない
使ってれない
改修
ユーザーフィードバック
A/Bテスト
10の18乗250京
毎日コンテンツが作られる量
Vouchercloud 2015
Business Insider 2016
1分間で起こっていること
Webサイト立ち上げました
アプリリリースしました
話題にならない
見られない
すぐ忘れ去る
常に動き続ける、人のニーズに応える
生き残るための運用体制
コンテンツ運用 CMS コンテンツ戦略
マーケティング マーケティングオートメーション
改修 解析?分析 PDCA
コードの运用
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
スタイルガイド
フロントエンド寄りのガイドライン
HTML/CSS/JavaScript などの記述例
コーディング規約
再現性の高いデザインを実現
緊急時に見た目が大きく崩れる
書いた人がいなくて作れない
書き方がバラバラで整理が難しい
スタイルガイドで制作を効率化
マーケティングコンテンツ グロース コード
デザインはどうなっているの?
オープン時 運用開始後
良い感じ! なんか違う
雰囲気
印象
選定基準
テキスト
配置
判断基準はデザイナーの頭の中
品質管理をする手段がない
『良い』が共有できていない
デザインに関わる課題
画面全体の構成だけで判断していないか
コンテンツが増えても対応可能か
一貫性のある見た目とルールをもって作られているか
デ ザ イ ン シ ス テ ム
デザインを明文化
デ ザ イ ン シ ス テ ム
デザインを明文化
ちゃんと説明しよう
作って終わりから卒業しよう - デザインシステム入門編
Material Design
メタファを大事にする
力強く、グラフィカル、そして意図的
動きで意味を持たせる
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
画像や色の選び方などのアートディレション
2?3ヶ月に一度更新されている
事例を見ながらUIデザインが学べる
数値ですべて表現されているので実装しやすい
目的地が3~5箇所ある
同じくらいの重要度
2カ所以上の頻繁な移動がある
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
Lightning Design System
あいまいなことは省き明確に表現
効率的に作業ができるように最適化
同じ課題には同じ解決策を提供する
利用者の時間を尊重した見た目
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
GitHubや npm で公開
3?4ヶ月に1度更新されている
詳細な解説と実装のコードが満載
関連記事もあり啓蒙ツールになっている
デザインシステム
原則 基本ビジュアル UI コード
原則
基本ビジュアル
UI
コード
「良いデザイン」の明文化
ニュアンスの共有
色、タイポグラフィ、アイコン
ブランドに直結する要素
ヘッダー、ボタン、メニュー etc
画面を構成する『部品』
見た目を再現するためのコード
バリエーション
原則 基本ビジュアル UI コード
コードの書き方が含まれてるガイドライン
デザインシステム
原則 基本ビジュアル UI コード
なぜこの見た目なのか
特定のアプローチを選んだ理由
するべきではない例も紹介されている場合もある
画面遷移が少ない?
要素が少ない? 空白?行間の配慮?
デザインシステム
明文化
感覚
価値観
要素の名前
ヘッダー?見出し?
FoundationBootstrap
Bootstrap Foundation
CalloutPanel
Carousel Orbit
Label (primary, secondary) Label (no primary
フォームの <label> はどう呼ぶ?
デザインシステムの課題
共有手段 提供方法 始め方
共有手段
Web上で公開
組織内外の方に対して啓蒙
現存ワークフロー内で公開
同僚がアクセスしやすい場所
GitHub, Con?uence, Googleシートなど
提供方法
コード
スタイルガイドを作るツールや共有ツールに任せる
ビジュアルデザイン
デザインテンプレートやアセット共有を活用
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
タイポグラフィ 色 アイコン
始め方
#df7300 #e25b00#ed8200#ef7e00 #ee6400
運用が必要なのはデザインも同じ
デザインの『バグフィックス』
価値観やUIを言語化する
小さなところからスタート
まとめ
mail@yasuhisa.com
@yhassy
http://www.yasuhisa.com
社内ワークショップや特別プログラムも実施しています

More Related Content

作って終わりから卒業しよう - デザインシステム入門編