GoogleカレンダーをUI設計の観点から研究してみた

こんにちは。UXDTスタッフの水野です。皆さんはカレンダーアプリを使っていますか？
以前、Googleカレンダーがアップデートされたこともあり勉強会でテーマになりました。

僕自身、以前にカレンダーアプリを使っていた時期もあったのですが、あまりスケジュール管理が続かず利用をやめてしまいました。しかし、勉強会をきっかけにGoogleカレンダーのアプリを使用してみたところ、「思った以上に使いやすい！」。そこで今回は、Googleカレンダーの使いやすさをUI設計の観点で研究していきます。同時に「正直イマイチ！」という所も見つかったので合わせてご紹介します。

Googleカレンダーの機能を動画で把握

Googleが公式に発表している30秒ほどの動画を見ると、 新しくなったGoogleカレンダーがどのようなものなのか理解できます。

新Googleカレンダーの3つの特徴

公式サイトで押し出している特徴は主に3つです。

1. ユーザーのスタイルに合った”ひと目”で予定がわかるUI
2. Gmailで受け取ったイベントを自動的にカレンダーに追加
3. 数タップで予定が作成できるアシスト機能

この３つの特徴について、今回はUI設計の考察をしてみました。

ユーザーのスタイルに合った”ひと目”で予定がわかるUI

Googleカレンダーの新しいUIは「スケジュール」「1日」「3日」「週」「月」のいずれかの形式で表示できます。それにより、ユーザーのスタイルに合わせて予定が一目で把握できるようになっています。

表示形式はメニューから切り替えられます。また、アプリを終了しても、最後に開いた画面から再開されるのが良い点の1つです。なぜなら、アプリを開くたびにいちいちメニューをタップして自分の好きな表示形式に変えるストレスがないからです。

スケジュールの組み方というものは、人それぞれ異なります。例えば、学生や主婦は定期的で同じような予定（学校、買い物など）を入れることが多いため、「月」「週」単位で大まかに予定を把握することが多いと思われます。一方、忙しいビジネスマンは、「1日」単位でより細かく予定を管理する人が多いでしょう。

そのため、Googleカレンダーでは画面の表示形式を切り替え可能にすることで、ユーザーのスタイルに合わせスケジュールを把握できるUI設計が成されていると言えます。

「予定の一覧表示」が見やすく使いやすい！

僕は美容院の予約や友達とのご飯の約束などの予定が入った際にGoogleカレンダーに忘れないように追加して、基本的には「月」画面を表示してます。「月」画面（画像①）では、特定の日付をタップすると「予定一覧」（画像②）が表示されるのですが、これがとても便利です。

設定した予定の一覧がカード形式で表示されるため、これからの予定が理解しやすいです。時系列順で「全予定の一覧」が表示されるため、カードをスクロールしながら

「今日は、サロンとミーティングの予定が入ってる！」

「明後日は歯医者の予定だ！」

というように、ひと目でこれからの予定が把握できます。

iOSカレンダーと比較

Googleカレンダーの特徴の理解を深めるため「iOSカレンダー」のUIも見て比較して見ましょう。

iOSのカレンダーでも同じように月毎のカレンダーが表示されます。しかし、Googleカレンダーと比べて1つ気になるのは、iOSでは予定が入っている日はドットが表示されていますが、”何の予定が入っているか” は月毎のカレンダー画面ではわからない点です。

また、特定の日付をタップすると、「その日の予定一覧」が表示されます。しかし、「他の日の予定」を確認するためには、以下のように「開く」「戻る」を何度も操作を繰り返す必要があります。

1. 日付をタップして開く
2. 月毎の表示に戻る

Googleカレンダーのように「全予定の一覧表示」ができないため、ユーザーによってはスケジュールの把握がしづらい場合がありそうです。

Gmailで受け取ったイベントを自動的にカレンダーに追加

Googleカレンダーの2つ目の特徴は、GmailとFacebookで受け取った予約情報（美容院の予約、イベント、飛行機のフライト等）が自動的に予定に追加される点です。

美容院の予約が自動登録される

先日、「そろそろ髪が切りたいなー」と思い、予約サイトのホットペッパービューティーでヘアカットの予約をしたところ、予約完了のお知らせメールが届きました。

初めて行く美容院だったため場所をきちんと把握しておらず不安でしたが、当日Googleカレンダーを見てみると、サロンの予約が自動的に追加されていて驚きました。住所もきちんと登録されており、予定をタップするとGoogleマップに瞬時に切り替って、アプリの経路案内に従って美容院まで無事たどり着くことができました。

Googleカレンダーがない場合

今回のケースで、もしGoogleカレンダーを使わなかった場合に考えられる操作としては、以下のようになるでしょう。

1. 1. メールを探す
   2. 住所をコピーする
   3. 地図アプリでペーストして検索

しかし、Googleカレンダーがあれば、予定の詳細画面からワンタップでGoogleカレンダーに切り替わるのでとてもスムーズですね。

Facebookイベントとの連携

UX DAYS TOKYOのイベントは大阪でも定期開催しています。先日開催したイベントもFacebook上で参加予定にしていたため、Googleカレンダーに自動的に追加されていました。また、会場の画像も予定詳細に反映されています。

飛行機やホテルの予約とも連携

飛行機やホテルの予約情報も、Gmail経由でGoogleカレンダーに自動登録されます。2017年の夏まで僕はベトナムにいましたが、帰国の際のフライトの情報もGmailの情報をもとにGoogleカレンダーに自動的に追加されていました。Googleカレンダーがあれば、複数のアプリを入れることなく、様々な予定管理が完結でき便利です。

数タップで予定が作成できるアシスト機能

3つ目の特徴は、予定の入力操作を簡単にしてくれるアシスト機能です。Googleカレンダーでは、予定のタイトルを入力した際、同じ入力欄に続けて「時間」「場所」「人」などの異なる詳細項目も入力することができます。また、それぞれの項目ごとでサジェストの一覧が下に表示されます。これにより、数タップで予定の作成が可能になります。

ただ、この機能を実際に使ってみて、使いにくいと感じる点が主に３つありました。これについて解説していきます。

アシスト機能を用いた予定入力の3つの課題点

「Googleカレンダーでは数タップで予定の作成ができる」というのが特徴の1つでしたが、実際に使ってみると幾つかの点でUI設計が不十分だと感じられます。何らかの設計意図があっての事とも考えられますが、使いづらいと感じた箇所をピックアップしました。

1. サジェストされる10個のタイトル項目がイマイチ
2. 日程・時間選択が10個に限られるため、設定できない場合がある​
3. 項目名に対する「時間の最適化」が甘い

この3つの課題について順番に見ていきましょう。

サジェストされる10個のタイトル項目がイマイチ

課題の1つ目は、予定作成時にサジェストされる10個のタイトル項目についてです。

「新規予定作成」画面から最上部のフィールドをタップすると、予定のタイトル入力における10個のサジェストが表示されます。「歯医者」「仕事」「ディナー」「散髪」「マッサージ」「会合」「記念日」「母の誕生日」「休校」「父の誕生日」の10個です。

このサジェスト一覧は、ユーザーのニーズを十分に満たしていないと考えられます。中でも「母の誕生日」と「父の誕生日」がありますが、父母それぞれ誕生日は年に1度しか来ないはずです。家族の誕生日は毎回サジェストされるほど頻度が高い予定ではないため、この一覧にある必要はないでしょう。

加えて「母の誕生日」「父の誕生日」が個別の項目で表示されているのも良い設計とは言えません。誕生日という括りの中で、父、母と選択できるのが理想ですね。

「仕事」という項目にも疑問を抱きます。仕事が不定休でない場合、「仕事」というタイトルで予定を入れる必要はないはずです。「休校」も学生以外は利用しない項目ですね。

10個の項目をグルーピングして最適化してみた

このようにユーザーによって使用する項目が異なるため、カスタマイズ / 最適化されるようになると良いです。どうしてもこの項目で構成するのであれば、以下のような順番にすべきでしょう。

（現状） 歯医者 仕事 ディナー 散髪 マッサージ 会合 記念日 母の誕生日 休校 父の誕生日

（改善案） 歯医者 散髪 マッサージ ディナー 会合 仕事 休校 記念日 母の誕生日 父の誕生日

改善案は、4つのポイントを考慮して設計しています。

1. 頻度が高く個人的な項目は上に配置
2. 習慣的な項目は下に優先度を下げる
3. 年に数回しかないような項目は下に配置
4. 内容的に近い項目をまとめる

1つ目は、「歯医者」や「散髪」など、スケジュールに登録されることが多く個人的な予定を一番上に持ってきています。一方で、「ディナー」や「会合」などは、他者と予定を合わせるものとして、その次に配置しています。

２つ目は、「仕事」や「休校」など日々の生活で特にスケジュールにしなくても予定されている / 習慣的な項目は優先度を下げました。

３つ目に、「記念日」など、年に数回しかないような項目は一番下に配置しました。

４つ目に、内容的に近い項目は近接するように配置しました「歯医者」から「マッサージ」までは個人的なスケジュール、「ディナー」と「会合」は他者と予定を合わせて行うスケジュール、「仕事」、「休校」は内容的に近いのでまとめて、「記念日」や「誕生日」も同じくまとめました。

歯医者 散髪 マッサージ

ディナー　 会合

仕事　　 休校

記念日 母の誕生日 父の誕生日

少し話はそれますが、このサジェスト部分の各項目の左にある「編集」をイメージさせるような鉛筆アイコンは良いUIだとは言えません。これは「予定の追加（記述）」を示すアイコンであると予測できますが、リスト表示の際に使われるアイコンは横の項目を表すものであることが多いため、意味を成さないと言えます。

逆に、「このアイコンをタップするとサジェスト項目の名称を変更できる」とユーザーに誤解させてしまう可能性もあるため、最適とは言えません。

日程・時間選択が10個に限られるため、設定できない場合がある​

2つ目の課題は、タイトルから入力した場合の「日程」選択についてです。

「新規予定作成」画面から最上部のフィールドでタイトルを入力し終えると、続けて「日程」選択のサジェストが表示されます（画像①）。しかし、このサジェストは10個しか表示されません。10個のサジェストは、「今日」「明日」「明後日以降の日付」ですが、10項目以降の日程はサジェストされず、入力できないため不便です。

また、日程を選択した後の「開始時間」の選択（画像②）でも同様にサジェストが10個しか表示されない仕様です。サジェストされる時刻は30分ごとに刻まれます。

例えば、「今日」を選択した場合は、開始時間のサジェストが「現在時刻から30分ごと」で表示されますが、「明日以降」を選択した場合は、「7:00~11:30の30分ごとの計10個」しか選択できません。「終了時間」も同様に、「開始時間から始まる30分ごとの計10個」しか表示されません。（画像③）

結果的に、途中まで入力したのにサジェストが不完全であるため、入力をやり直す必要性が出てしまいます。

項目名に対する「時間の最適化」が甘い

最後3つ目にあげられる課題は、サジェストされる時間が予定タイトルに応じて最適化されない点です。タイトル入力でサジェストされた「ディナー」で予定を作成してみましたが、時間選択が「7:00~11:30」までしか表示されません。

この場合は、「ディナー」という用語から判断し、夕食時間の目安である18時以降の時間が一覧で表示されるべきです。予定のタイトル項目に最適な時間をデフォルトで出すのが良いUI設計と言えるでしょう。

通常の予定入力の良い点・悪い点

ここまでは、アシスト機能によるワンフィールドでの予定入力時のUIを見てきました。次は、アシスト機能を利用しない通常の予定入力の仕様を見ていきましょう。

良い点 : 直感的に日程を選択できるカレンダーUI

日程の指定は、日付のエリアをタップすることでカレンダーがアコーディオン形式で表示され、特定の日付をタップできる仕様になっています。

今日の日付の部分に青い丸が表示されていることで、今日を基準にして直感的に日付を選択することができます。例えば「再来週の日曜日に予定を作成したい」という場合、具体的な日付が分かっていなくても、「今日から2段下の日曜日」の日付を直感的に指定できます。

iOSとの比較

一方、iOSのカレンダーは日付を登録する際、ドラムロール式で「今日」からスクロールして設定したい日付を選択します。しかし、スクロールすると「今日」が見えなくなり、今日を基準にした選択が難しいです。

例えば、「再来週の日曜日」に予定を作成したい場合、iOSでは日付をスクロールすると「今日」という基準が見えなくなり、直感的な操作ができません。​

悪い点 : スクロールミスで簡単にドラムの時間設定が変わってしまう

日程と時刻の設定をしてから次の項目を設定しようとする場合、ドラムロールの表示エリアが下半分の画面のほとんどの割合を占めているため、間違ってドラムを動かしてしまう恐れがあります。

間違って当たってしまってもアラートがでないので、時刻の設定ミスになり兼ねないUIといえます。

特に親指での操作は正確にできないことが多いため日付の選択を一度確定させる / 保存させる必要があると言えます。具体的には、完了ボタンをつければドラムロールを閉じることができ、入力ミスを防ぐことができますね。

人の情動に訴えかけるカードが可愛いエモーショナルデザイン

入力操作に関して良くない点も述べて来ましたが、Googleカレンダーを使っていて興味深い所があります。それは、作成した予定の内容に応じてカードにイラスト画像が自動的に追加される点です。

歯医者の予定をGoogleカレンダーに入れたところ、その予定をイメージさせる歯ブラシのイラスト画像に変わったことに気づき驚きました。

コップに歯ブラシが入ったシンプルで可愛いカードは心を躍らせるエモーショナルデザインと言えます。可愛いだけでなく、これにより一目でどんな予定があるかわかりやすくなっていることが良いデザインだと感じられます。

日本語はこれから期待？

便利でわかりやすいこちらの機能ですが、残念ながら日本語にはまだ完全に対応できていません。例えば、「夜ご飯」と入力しても、カードは変わりません。しかし、「夕食」とするとカードが変わりました。カタカナ英語の「ディナー」と入力してもカードが変わりました。同じように「ランチ」もOKです。こうして見てみると、日本語は言い回しがたくさんあって本当に複雑ですね。

月ごとの季節に応じた画像が挿入されている

年度が変わると、年号がつく

普段の直近の予定確認であれば気づかない部分ですが、例えば2018年（記事執筆時）の予定一覧表示では年号はつかないのに対し、前年 / 翌年のカレンダーになると年号が表示されます。うっかり前年 / 翌年の予定に書いてしまうミスを防ぐための工夫が施されています。

月ごとの区切りをiOSカレンダーと比較

iOSのカレンダーは、無駄なイラスト等もなくシンプルです。確かに、シンプルであることは重要ですが、人の情動に訴えかけるエモーショナルデザインを使用しているGoogleカレンダーに軍配があがります。

エモーショナルデザインを上手に取り入れている

上部の図は、「操作とエモーショナルデザインの関係性」を表すものです。アーロンウォルター氏がマズローの法則を元に作成した図を参考にして、今回わかりやすく作り直してみました。

UIの法則として、「迷わず誰でも使えるレベル」から「便利」「好き」の段階になるためにエモーショナルデザインを上手に利用することは重要です。

Googleカレンダーは、使っていて「楽しい」「かわいい」と思える情動を考慮にいれたエモーショナルデザインをうまく取り入れています。これは、ユーザーのアプリに対する愛着にも繋がってきます。

しかし、ここで重要な点は、「好き」を満たす前に「正常に機能する」「信頼できる」がピラミッドの基盤にあるということです。Googleカレンダーの例で言えば、「予定作成の入力アシスト機能」はピラミッドの基盤を満たしているとは言えないため、いくら「好き」に働きかけても不完全であると言えます。

さいごに

ブログを書くにあたってアプリを研究することで、一見単純なように見えても、細部に様々な工夫が施されていることに気づきました。こうしてブログにアウトプットすることで設計思想の一片を理解し、自分の学びになることも実感しました。

特に今回勉強になったところは、Googleカレンダーのエモーショナルデザインの取り入れ方です。可愛いイラストを入れることで、視覚的な分かりやすさを実現しつつ愛着の湧くデザインを実現しています。

アプリのレビューを見てみると、読字障害があるために、視覚的にわかりやすいGoogleカレンダーが良いという評価もありました。あらゆる人にとって使いやすいサービスを実現するためにも、Googleカレンダーの設計は優れていると言えそうです。

一部、使いにくい箇所も指摘しましたが、そこは今後のアップデートにぜひ期待したいところです。みなさんもこの機会にGoogleカレンダーを使ってみて、具体的に何が使いやすいかを研究してみると勉強になるのでおすすめです。

いいね0