View
38
Download
0
Category
Preview:
Citation preview
Garoon 新デザインのご紹介
2018年1月24日
サイボウズ株式会社
Copyright © 2018 Cybozu
本資料について
2Copyright © 2018 Cybozu
▌本資料はクラウド版 Garoon で2月に搭載される新しいデザインについてご
説明するものです。
▌製品の詳細については以下をご確認ください。
▼クラウド版 Garoon マニュアルサイト
https://help.cybozu.com/ja/g/index.html
▼パッケージ版 Garoon マニュアルサイト
https://help.cybozu.com/ja/g4/guide/index.html
本文書の取り扱いと商標について
3
▌本文書の取り扱いについて
この文書内における掲載情報の二次利用においては、ご自身の判断と責任の下に行ってください。
サイボウズ株式会社は、それらの情報をご利用になることにより発生したあらゆる商業的損害・損失を含
め一切の直接的、間接的、特殊的、付随的または結果的損失、損害について責任を負いません。
本文書を一部引用して作成した文書には、次のような当社の著作権表示文を記載してください。
「この文書は、サイボウズ株式会社による『Garoon 新デザインのご紹介』を一部引用しています。」
また、本ファイルに編集を加えて二次利用する場合には、次のように修正箇所と修正者を明記してくださ
い。「本ファイルの(修正箇所)は、(修正者)が編集しました。」
▌商標について
記載された商品名、各製品名は各社の登録商標または商標です。また、当社製品には他社の著作物が含ま
れていることがあります。個別の商標・著作物に関する注記については、弊社のWebサイトを参照してく
ださい。
http://cybozu.co.jp/company/copyright/other_companies_trademark.html
Copyright © 2018 Cybozu
目次
4
1. Garoon新デザインの概要 p.5
2. ポイント1-広い画面領域- p.8
3. ポイント2-見やすく操作しやすいUIパーツ- p.12
4. ポイント3-アクセシビリティ- p.15
5. 適用スケジュール p.19
Copyright © 2018 Cybozu
Copyright © 2018 Cybozu
Garoon 新デザインの概要
Garoon 新デザインとは
6
クラウド版Garoonでは2018年2月から新しいデザインテーマを追加し
ました。これまでのUIを踏襲しつつ、より見やすく使いやすいデザイ
ンを目指しました。
Copyright © 2018 Cybozu
Garoon 新デザインのポイント
7
広い画面領域 見やすく操作しやすいUIパーツ
アクセシビリティ
Copyright © 2018 Cybozu
ポイント1 ポイント2 ポイント3
Copyright © 2018 Cybozu
ポイント1-広い画面領域-
広い画面領域
従来デザインよりもコンテンツ領域が広くなりました
ヘッダーのデザインを見直すことで
コンテンツを表示する領域が広くなりました。
新デザイン 旧デザイン
Copyright © 2018 Cybozu
新デザインアプリへのアクセス方法
10
新デザインでは、以下の2つの方法でアプリにアクセスできます。
ヘッダーからアプリ一覧を表示できます。画面スクロール後もここからアプリにアクセスできます。
①ヘッダーからアクセスする
②アプリメニューを表示する
従来のデザインと同じようにアプリメニューを表示させることもできます。デフォルトでは折りたたまれた状態です。
Copyright © 2018 Cybozu
新デザイン/従来デザインヘッダーの違い ※2018年2月時点
11
新デザインではヘッダーの内容、並び順が以下のように変更になります。▼新デザインのヘッダー
1. アプリケーションメニューを表示※1
2. cybozu.comトップページを表示3. Garoonのポータルを表示4. 通知一覧を表示
5. リアクション(「いいね」)を表示6. 所属しているスペースを表示7. cybozu.comの他サービス8. 個人設定、プロフィールの表示など
9. 全文検索10. システム設定など
1 2 3 4 5 6 7 8 9 10
▼従来デザインのヘッダー※2
1 2 3 4 5 6 7 8 9 10
1. cybozu.comトップページを表示2. Garoonのポータルを表示3. cybozu.comの他サービス4.全文検索
5.通知一覧を表示6.リアクション(「いいね」)を表示7.所属しているスペースを表示8.アプリ一覧を表示※3
9.個人設定/プロフィール表示10. システム設定など
※1 ※3 「アプリケーションメニュー」と「アプリ一覧」はシステム管理画面における設定場所が異なります。詳しくはマニュアルをご確認ください。アプリケーションメニューの管理 ▷ https://jp.cybozu.help/ja/g/admin/system/screen/menuアプリ一覧の管理 ▷ https://jp.cybozu.help/ja/g/admin/system/screen/app_menu
※2 従来デザインのヘッダーも、2018年5月のアップデートで新デザインに揃える予定です。詳しくは本資料の21ページをご参照ください。
Copyright © 2018 Cybozu
Copyright © 2018 Cybozu
ポイント2-見やすく操作しやすいUIパーツ-
ポータル スケジュール(登録)
新デザイン
従来デザイン
見やすく操作しやすいUIパーツ
13
画面配置やボタンなどのパーツの1つ1つを改善しました。余白を広くとりフォントをメイリオ※にするなど、より見やすさを追求しました。 ※Windows、日本語のみ
Copyright © 2018 Cybozu
余白を広くとる効果
14
余白を広くすると、一度に表示できる情報は少なくなりますが、関連する情報がひとまとまりで認識できる、ボタンが押しやすいなどの効果があります。
情報がまとまって認識できる
クリックしやすい
余白少なめ 余白多め
Copyright © 2018 Cybozu
Copyright © 2018 Cybozu
ポイント3-アクセシビリティ-
アクセシビリティ
16
サイボウズでは全製品のアクセシビリティ強化に取り組んでいます。Garoonの新デザインでもWCAG 2.0 の達成基準に準拠したデザインを採用しました。
コントラスト比
登録ボタン タブ 却下ボタン
新デザイン
従来デザイン
4.6:1 4.6:1 4.9:1
2.53:1 1.99:1 3.9:1
基準値4.5:1クリア
Copyright © 2018 Cybozu
基準値4.5:1以下
アクセシビリティ
17
アプリアイコンをシンプルで高画質な画像にすることで、拡大したときにも見やすく表示できるようになりました。
200%拡大時 アプリアイコン
新デザイン
従来デザイン
見やすい
Copyright © 2018 Cybozu
アクセシビリティについて
18
Q.アクセシビリティとはなんですか?
Webを利用するすべての人が年齢や身体的制約、利用環境などに関係なく自由にWebにアクセスできること。そしてコンテンツや機能を制限なく利用できること。そのアクセス性を確保することをアクセシビリティと言います。
▼サイボウズのアクセシビリティに対する取り組みはこちらのページをご参照ください。https://cybozu.co.jp/efforts/accessibility
Copyright © 2018 Cybozu
Q.なぜ拡大したときの表示が大事なのですか?
目に障がいのある方などは日常的に画面を拡大して利用することが多いため、画面拡大時の表示を見やすくすることで、アクセシビリティが向上します。
Q. WCAG 2.0 とはなんですか?
Web Content Accessibility Guidelines (WCAG) 2.0 は、webコンテンツをよりアクセシブルにするための推奨事項を網羅したガイドラインです。このガイドラインに従うことで、様々な障がいのある人を含めたほとんどの利用者にとってwebコンテンツがより使いやすくなります。WCAG 2.0 の達成基準として、コントラスト比は4.5:1以上と規定されています。
Copyright © 2018 Cybozu
適用スケジュール
新デザイン適用スケジュール
20
2018年2月
2018年5月
・デザインテーマに新デザインが追加されます。・デザインの設定方法はマニュアルをご確認ください。▼デザインテーマの変更方法
https://jp.cybozu.help/ja/g/user/usable/screen/design
・新規にクラウド版Garoonをご購入いただくお客様のデフォルトデザインを新デザインに変更予定です。
・2018年2月以前に提供開始した従来のデザインテーマも、ヘッダーやヘッダーや余白を新デザインに合わせて変更予定です。ヘッダーの変更については次のページをご参照ください。
Copyright © 2018 Cybozu
2018年5月以降のヘッダーについて
21
2018年5月のアップデートで、全てのデザインテーマのヘッダーを新デザインに
揃える形で変更予定です。たとえば、従来の「標準」デザインでは以下のような
ヘッダーになる予定です。
▼2018年5月から ※予告なく仕様が変更になる可能性もあります
▼2018年4月まで
ヘッダーの内容、並び順、余白などを新デザインに揃える形で変更予定です。
Copyright © 2018 Cybozu
ご意見をお待ちしています
22
新デザインに関するご意見を募集しております。
下記のURLから、新デザインを使ってみた感想や、もっとこうして欲しい、
といったご要望をぜひお寄せください。
https://r.cybozu.com/g/garoon/feedback
Garoon新デザインに関するご意見投稿フォーム
Copyright © 2018 Cybozu
Copyright © 2018 Cybozu
END
Recommended