kintone 新デザイン コンセプト

kintone 新デザイン コンセプト

kintone の新デザイン

これまでのデザイン(旧デザイン)の
全体的な⾒直しを⾏い、
⽂字データをより⾒やすく、
画⾯操作を標準化し、
シンプルなデザインにしました。

kintoneの新デザイン、ポータル画面の画像

新デザインつのポイント

  • よりシンプルに
    シンプルで統一性のあるデザイン
    よりシンプルに
  • 目的達成までのステップ数を少なく
    操作性の向上
    目的達成までのステップ数を少なく
  • よりわかりやすく
    ユーザヒアリングによる検証
    よりわかりやすく

新デザインの使いやすさ

文字やアイコンの大きさ・配置の調整を行い、
必要な情報を見やすく操作性が向上する画面設計に

ポータル

全体的に余白をとり、見やすい画面設計
全体的に余白をとり、見やすい画面設計のポータル画面
操作メニューを
画面上部に集約
ひと目で把握しやすい
アイコン・タイトル
リスト形式で表示されるので
目的のものが見つけやすい
検索しやすい
大きな検索窓
ひとつひとつの
情報を判別しやすい
パーツ間の仕切り
押しやすい大きく
シンプルな操作ボタン

レコード一覧

レコード間の余白とストライプ表示で判読しやすいレコード一覧
一覧表示・グラフ表示の
ドロップダウンが
まとまっているので、
切り替えもスムーズに

一覧表示

一覧表示

グラフ表示

グラフ表示
各レコード情報を判読しやすい
レコード間の余白と
ストライプ表示

レコード

レコード詳細画面ではキーボード操作のみでレコードの登録・編集などが可能。他ボタン操作など。
入力されたデータを
把握しやすい
くっきりしたフィールド色
マウスやトラックパッドは
一切使わず、
キーボード操作のみで
レコード登録・編集
アプリ内でのコミュニケーションも
アプリのコメントの
リンク(URL)で円滑に
アプリのコメント数が膨大になっても、
自動的にスクロール表示されるので、
ストレスなく履歴を確認
操作ボタンは画面右側に統一し、
初めてkintone を触る人でも、
操作が容易に

コメント書き込みや実行操作

コメント書き込みを右側ボタンに統一
実行操作を右側ボタンに統一
実行(書き込む/保存/削除)は右側ボタンに統一し、
操作ごとの配色など一貫性を持たせたことで、
新しくkintoneを使い始めるユーザーにも優しい設計

アプリ管理画面(フォーム)

アプリ作成時にフォームを設定して、アプリ公開ボタンを押すだけでアプリが完成
大きく選択しやすい
フィールドパーツ
フォーム設定と
アプリ公開ボタンの
2stepでアプリ作成が可能に

アプリ管理画面(設定)

主な設定はダブで切り替え、よく利用される項目順に表示されるようになったアプリ管理画面
よく利用される項目や、
重要性を考慮した設定項目
主な設定はタブで切り替え
カテゴリごとに設定項目を集約し、
一覧で表示されるので、迷わず操作

旧デザインと新デザインを
アプリ作成ステップ数作成時間 で比較

ステップ数
旧デザインと新デザインをアプリ作成ステップ数で比較したグラフ。
旧デザインに比べ新デザインのほうが約30%削減している。

※顧客管理アプリを作成するシナリオで実施した
ユーザビリティテスト結果

作成時間
旧デザインと新デザインをアプリ作成時間で比較したグラフ。

ヘッダーロゴにあわせて、ヘッダーの色を自在に変更でき
利用者に親しみやすい画面に

ロゴに合わせて、様々な色をヘッダーに設定できる。
※標準色11色の他、カラーコードで好きな色を設定可能です。
2017年2月のアップデート
先行告知!

新デザインでご要望の多かったアプリのデザインテーマ。
新デザインではカラーテーマとして登場します。

  • <グレー(現行のデザイン)>

  • <レッド>

  • <グリーン>

  • <ブルー>

  • <イエロー>

  • <ブラック>

※アップデート時期・実装内容は変更になる可能性があります。予めご了承ください。

サイボウズはすべての人々がチームにアクセスしやすい
Web アクセシビリティ を目指しています。

文化
言語
高齢者
障がい者
国籍
すべての人々が
チームにアクセスしやすい

サイボウズにとって、アクセシビリティとは
「ユーザーがチームにアクセスできる能力」と捉え
アクセシビリティを高める開発にも注力していきます。

Web アクセシビリティとは

ウェブサイトを利用するすべての人が、年齢や身体的制約、利用環境等に関係なく、ウェブサイトで提供されている情報に問題なくアクセスし、コンテンツや機能を利用できること

アクセシビリティ基準※を満たす背景と
テキストのコントラスト比で文字や操作項目を判別しやすく

背景とテキストのコントラスト比データ
 
新デザイン
新デザイン画面
プレーン
プレーン画面
クリップボード
クリップボード画面
バインダー
バインダー画面
エンピツ
エンピツ画面
クリップ
クリップ画面
1
bgtext
12.6:1 12.6:1 10.3:1 9.2:1 11.1:1 8.1:1
2
table-label
12.6:1 2.2:1 4.6:1 9.5:1 5.2:1 4.4:1
3
table-text
12.6:1
10.7:1
12.6:1 12.6:1 12.6:1 12.1:1 12.6:1
4
detail-text
11.6:1 12.6:1 12.6:1 12.6:1 12.1:1 12.6:1
5
edit-label
10.9:1 2.3:1 4.6:1 9.5:1 5.2:1 4.4:1

データの見方

主に利用されている背景色(bg、table、edit、detail)と文字色(text、label)のコントラスト比を計測しています。

  • ポータル画面より抜粋
    1
  • レコード一覧画面より抜粋
    2
    3
  • レコード詳細画面より抜粋
    4
    5
※アクセシビリティの国際基準であるWCAG 2.0では4.5以上が最低限のコントラスト達成基準とされています。WCAG 2.0 on color contrast,ISO/IEC 40500:2012

新デザインをご利用いただくにあたって

  • 機能差について

    旧デザインと新デザインについての機能差については
    以下ヘルプページに機能差分について記載しております。

    ▼新デザインと旧デザインの機能差
    https://help.cybozu.com/ja/k/admin/diff.html

  • 新旧デザインの切り替え

    kintone システム管理のその他>新旧デザインの切り替えから指定した
    ユーザーのみ新デザインを使用する設定が可能です。ぜひお試しください。

    ▼参考:デザインの新旧を切り替える
    https://help.cybozu.com/ja/k/admin/design.html

  • kintoneをカスタマイズ

    kintone をカスタマイズしてご利用いただいてる場合はご注意ください。

    cybozu developer network に掲載されている kintone API は
    新デザインでも継続利用できます。

    旧デザインで kintone API を利用した画面カスタマイズを実施されている場合は、移行期間中に必ず新デザインでの表示をご確認ください。
    パートナーにカスタマイズを委託している場合は、担当パートナーにお問い合わせください。

    ▼ FAQ:API に関するお問い合わせはどこにすればいいですか?
    http://faq.cybozu.info/alphascope/cybozu/web/kintone/Detail.aspx?id=1763

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

  • 2016年
    12月11日
    定期メンテナンス
    すべての環境が新デザインに切り替わります。

    2016 年 12 月 11 日に実施する定期メンテナンスですべてのユーザーが新デザインに切り替わります。
    2017 年 2 月定期メンテナンスまで、一時的に旧デザインに戻すにはシステム管理画面の[新旧デザインの切り替え]から可能です。
    ※ 2016年11月13日 から2016年12月11日に変更になりました

  • 2017年
    2月12日
    定期メンテナンス
    旧デザインを選択できなくなります。

    2017 年 2 月 12 日に実施する定期メンテナンスですべてのユーザーが新デザインになります。

新デザインは上記のスケジュールで、すべてのユーザーに適用されます。
お早めに新デザインへの移行をお願いいたします。

資料

本サイトの内容はこちらからダウンロードできます。
パワーポイントをダウンロード
Download the document (English ver.)
Pagetop