Garoon 新デザインのご紹介

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

https://help.cybozu.com/ja/g/index.html

https://help.cybozu.com/ja/g4/guide/index.html

本文書の取り扱いと商標について

3

▌本文書の取り扱いについて

この文書内における掲載情報の二次利用においては、ご自身の判断と責任の下に行ってください。

サイボウズ株式会社は、それらの情報をご利用になることにより発生したあらゆる商業的損害・損失を含

め一切の直接的、間接的、特殊的、付随的または結果的損失、損害について責任を負いません。

本文書を一部引用して作成した文書には、次のような当社の著作権表示文を記載してください。

「この文書は、サイボウズ株式会社による『Garoon 新デザインのご紹介』を一部引用しています。」

また、本ファイルに編集を加えて二次利用する場合には、次のように修正箇所と修正者を明記してくださ

い。「本ファイルの（修正箇所）は、（修正者）が編集しました。」

▌商標について

記載された商品名、各製品名は各社の登録商標または商標です。また、当社製品には他社の著作物が含ま

れていることがあります。個別の商標･著作物に関する注記については、弊社のWebサイトを参照してく

ださい。

http://cybozu.co.jp/company/copyright/other_companies_trademark.html


http://cybozu.co.jp/company/copyright/other_companies_trademark.html

目次

4

1. Garoon新デザインの概要 p.5

2. ポイント１－広い画面領域－ p.8

3. ポイント２－見やすく操作しやすいUIパーツ－ p.12

4. ポイント３－アクセシビリティ－ p.15

5. 適用スケジュール p.19



Garoon 新デザインの概要

Garoon 新デザインとは

6

クラウド版Garoonでは2018年2月から新しいデザインテーマを追加し

ました。これまでのUIを踏襲しつつ、より見やすく使いやすいデザイ

ンを目指しました。


Garoon 新デザインのポイント

7

広い画面領域見やすく操作しやすいUIパーツ

アクセシビリティ


ポイント１ポイント2 ポイント3


ポイント１－広い画面領域－

広い画面領域

従来デザインよりもコンテンツ領域が広くなりました

ヘッダーのデザインを見直すことで

コンテンツを表示する領域が広くなりました。

新デザイン旧デザイン


新デザインアプリへのアクセス方法

10

新デザインでは、以下の2つの方法でアプリにアクセスできます。

ヘッダーからアプリ一覧を表示できます。画面スクロール後もここからアプリにアクセスできます。

①ヘッダーからアクセスする

②アプリメニューを表示する

従来のデザインと同じようにアプリメニューを表示させることもできます。デフォルトでは折りたたまれた状態です。


新デザイン/従来デザインヘッダーの違い ※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ページをご参照ください。


https://jp.cybozu.help/ja/g/admin/system/screen/menu

https://jp.cybozu.help/ja/g/admin/system/screen/app_menu


ポイント２－見やすく操作しやすいUIパーツ－

ポータルスケジュール(登録)

新デザイン

従来デザイン

見やすく操作しやすいUIパーツ

13

画面配置やボタンなどのパーツの1つ1つを改善しました。余白を広くとりフォントをメイリオ※にするなど、より見やすさを追求しました。 ※Windows、日本語のみ


余白を広くとる効果

14

余白を広くすると、一度に表示できる情報は少なくなりますが、関連する情報がひとまとまりで認識できる、ボタンが押しやすいなどの効果があります。

情報がまとまって認識できる

クリックしやすい

余白少なめ余白多め



ポイント３－アクセシビリティ－


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クリア


基準値4.5:1以下


17

アプリアイコンをシンプルで高画質な画像にすることで、拡大したときにも見やすく表示できるようになりました。

200%拡大時アプリアイコン

新デザイン

従来デザイン

見やすい


アクセシビリティについて

18

Q.アクセシビリティとはなんですか？

Webを利用するすべての人が年齢や身体的制約、利用環境などに関係なく自由にWebにアクセスできること。そしてコンテンツや機能を制限なく利用できること。そのアクセス性を確保することをアクセシビリティと言います。

▼サイボウズのアクセシビリティに対する取り組みはこちらのページをご参照ください。https://cybozu.co.jp/efforts/accessibility


Q.なぜ拡大したときの表示が大事なのですか？

目に障がいのある方などは日常的に画面を拡大して利用することが多いため、画面拡大時の表示を見やすくすることで、アクセシビリティが向上します。

Q. WCAG 2.0 とはなんですか？

Web Content Accessibility Guidelines (WCAG) 2.0 は、webコンテンツをよりアクセシブルにするための推奨事項を網羅したガイドラインです。このガイドラインに従うことで、様々な障がいのある人を含めたほとんどの利用者にとってwebコンテンツがより使いやすくなります。WCAG 2.0 の達成基準として、コントラスト比は4.5:1以上と規定されています。


適用スケジュール

新デザイン適用スケジュール

20

2018年2月

2018年5月

・デザインテーマに新デザインが追加されます。・デザインの設定方法はマニュアルをご確認ください。▼デザインテーマの変更方法

https://jp.cybozu.help/ja/g/user/usable/screen/design

・新規にクラウド版Garoonをご購入いただくお客様のデフォルトデザインを新デザインに変更予定です。

・2018年2月以前に提供開始した従来のデザインテーマも、ヘッダーやヘッダーや余白を新デザインに合わせて変更予定です。ヘッダーの変更については次のページをご参照ください。


https://jp.cybozu.help/ja/g/user/usable/screen/design

2018年5月以降のヘッダーについて

21

2018年5月のアップデートで、全てのデザインテーマのヘッダーを新デザインに

揃える形で変更予定です。たとえば、従来の「標準」デザインでは以下のような

ヘッダーになる予定です。

▼2018年5月から ※予告なく仕様が変更になる可能性もあります

▼2018年4月まで

ヘッダーの内容、並び順、余白などを新デザインに揃える形で変更予定です。


ご意見をお待ちしています

22

新デザインに関するご意見を募集しております。

下記のURLから、新デザインを使ってみた感想や、もっとこうして欲しい、

といったご要望をぜひお寄せください。

https://r.cybozu.com/g/garoon/feedback

Garoon新デザインに関するご意見投稿フォーム


https://r.cybozu.com/g/garoon/feedback


END

Garoon 新デザインのご紹介

Business