クラシックなタイポグラフィが魅力的＆明瞭なカレンダーアプリ「Minimal Calendar」のデザインができるまで | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

Minimal CalendarはiOS向けに提供されているカレンダーアプリです。デザイナーとデザイン愛好家のためにデザインされていることは一目瞭然でしょう。合理的でありながら視覚に訴える魅力を持ち、タイポグラフィ好きを歓喜させる細心の注意がタイプフェイスに注がれています。

その名前からも分かるように、アプリの制作者はシンプルで効果的なユーザー体験の信望者です。そして、アプリ名に「ミニマル」という言葉を使っていても、デザインの流行を追っているだけではないことを強調します。彼にとって、それは、アプリで何をやり何をやらないかに意識的であることなのです。

Minimal CalendarをデザインしたRationaleの創設者兼クリエイティブディレクターのショーン・ウォルコットは次のように述べています。「ミニマリズムを、よく言われるむやみに崇め奉られた言葉としては、考えていません。すべての無駄なものを（他のカレンダー体験から）排除した結果が、ミニマルな体験になったということです。何かミニマルなものを作ろうとしたわけではなく、見た目も使用感も明瞭なカレンダー体験の実現が目的でした」

Minimal Calendar

ショーンにとって、Minimal Calendarの制作は、長期に及んだ楽しい仕事でした。5年前に、ラフスケッチ、走り書き、紙に描いたワイヤフレームとして始められたものは、今では彼のデザインの意図をしっかりと表現するモノへと変わり、App Storeで提供されています。「見栄え良く明瞭な」カレンダー体験の制作を達成するために、ショーンは、Adobe XDを採用してアプリのデザインとプロトタイプの制作を行いました。この記事では、Minimal Calendarの誕生の過程と、その制作においてショーンと彼のチームが、Adobe XDをどのようにワークフローに組み込んだのかについて紹介しします。

最高のカレンダーが備える明確さと見栄えを、デジタル体験として再現する

Minimal Calendarは、紙に印刷されたカレンダーに対するショーンの思い入れと、5年前のiPhoneカレンダーアプリに対する不満から生まれました。「2013年にデジタルカレンダーがどんな見栄えだったかを振り返ってみれば、大昔の何かを見ているように感じると思います。これはちょっとした驚きです。この6年の間に、すべてがどれほど進化したのか、私たちは忘れてしまったのでしょう」とショーンは言います。

「私は、紙に印刷された優れたカレンダーに見られる見栄えと明確さに匹敵するデジタル体験を欲していました。私のデザインのメンターであるマッシモ・ビニェリは、『見つからないならデザインしろ』と言っていたものです」

これが、ショーンがMinimal Calendarを構想するきっかけでした。しかし当時は、クライアントの仕事に手一杯でした。2018年にショーンがRationaleにすべての時間を使うようになってから、彼は、Minimal Calendarの完成に向けて動き出すことを決意しました。

ショーン・ウォルコットは、過去数年間に公開された数々のデジタルカレンダーアプリに反応して、Minimal Calendarのデザインに着手した

「人々に意味のある体験をもたらすには、色、スケール、タイポグラフィを使い、良質でスマートで実用的なデザインが有効です。5年前も現在も、それに変わりはありません。『Minimal Calendar』は不要なものをほぼ排除しています。その意味で、特定の対象、実際には私たちデザイナーのために制作したことになりますが、いろいろな付加機能を必要としないデザイナー以外の多くの人々にもアピールするだろうと思っていました。エッジケースは基本的に無視して、コアの体験を改善することで、意味があると感じられることだけに焦点を当てたモノづくりができたのです」

Adobe XDを使って、外観の美しさと使用感をデザイン

新しいアプリをゼロからデザインするとき、すべての細部が意図的で直感的で合目的であるために、デザイン作業に集中できることが重要になります。これは、ショーンとRationaleの彼のチームとって特に重要なことでした。混乱を引き起こすことなく改善された体験を提供できるように、あらゆる機能が十分に精査されたカレンダーアプリを作成しようとしていたからです。Minimal Calendarの根底にあるデザインへの考え方の多くは、Adobe XDのそれと共通していました。ショーンは、デザインとプロトタイピングのツールとして、Adobe XDを採用するに至ったのは当然の流れであったと話しています。

「外観も使用感も、Adobe XDと私たちのアプリは同調していると感じました。XDは、必要なものを必要な時にだけ提供します。それは、私たちにとって非常に魅力的でした。作業過程を振り返ると、XDのすっきりとした操作性が、すっきりしたデザインのMinimal Calendarに集中するうえで役立ったと思います」

Adobe XDを使ってMinimal Calendarをデザインするショーン・ウォルコット

また、Rationaleチームにとって、デスクトップでデザインし、それを操作可能なプロトタイプとして容易にスマートフォンに転送できることはとても重要でした。ショーンは、素早く実機でデザインを確認できたことで、ナビゲーションしやすく意図した通りの機能が選択されているカレンダーアプリというゴールにどれほど合致しているのか、より深く理解しながら作業ができたと語っています。

ショーンがXDで最も気に入っている機能は、実はスマートガイドです。Adobe XDのスマートガイドシステムには、方眼グリッドとレイアウトグリッドが備わっており、オブジェクトとアートボードの位置関係を表します。ショーンの場合は、Minimal Calendarで使用するには方眼グリッドは細かすぎたそうです。レイアウトグリッドを使用できたことが、見た目に心地よいデザインを効率的に行う強力な味方になりました。

求める見栄えと明確さが体験に繁栄されたMinimal Calendarの実現のため、Adobe XDのレイアウトグリッドが使用された

「Minimal Calendarはデジタルに向けた体験ですが、印刷時代のグリッドレイアウトの原理を採用し、デジタル領域に取り込んだと言うこともできます。これまでにデジタルツールを構築した多くの人はそうしたことに気づかず、そのため製品に取り込まれてこなかったのではないかと思います。こうした発想にたどり着けたことは、本当に喜ばしいことでした」とショーンは語りました。

Minimal Calendarにおけるタイポグラフィの重要性

デジタル製品における文言や見た目の重要さは誰もがわかっていることですが、カレンダーアプリでは絵文字やテキストが一般的に存在しないため、ユーザーが体験に便利さを感じられるかどうかが非常に重要になります。Minimal Calendarは、オリジナルのHelveticaを忠実に再現した、Neue Haas Groteskタイプフェイスを採用しました。このタイプフェイスを使い、そのプロポーションに精細な注意を払っている点が、Minimal Calendarと他のカレンダーアプリとの差別化の大きな要因です。

Minimal CalendarにはNeue Haas Groteskタイプフェイスが使用されている

「私たちは、タイポグラフィについては非常にこだわりがあって、大サイズが小アイテムの3ラインちょうどのサイズであるといったように、注意深く比率が配分されています。このタイプのルールと、Adobe XD内のレイアウトグリッドが、明確で効果的なプロポーションの達成に役立ちました。また、デバイスですぐにタイプフェイスの表示と確認を行えたため、素早く修正を繰り返すことができました」とショーンは言います。

「ただ楽しく使える何かをつくること」

Minimal CalendarがApp Storeで提供されるようになり、ショーンは「視覚的な新鮮さ」を理解するユーザーから、すでに非常に好意的なフィードバックを得ているそうです。それでも、彼は満足することなく、次の5年間でMinimal Calendarがどんな展開を見せるのかにワクワクしていると述べています。今後も彼のチームは、Adobe XDを使用してアプリの見直しと更新を続ける計画です。

「現在ののデジタル製品について思うのは、以前よりも押しつけがましく、中毒性が高くなっているということです。Minimal Calendarはさまざまな面においてこれに反抗したようなものです」と彼は述べました。「ユーザーは、他のカレンダーアプリが雑然としていること、Minimal Calendarが低機能ではあっても機能性という観点から不足はないことに気づき始めています。実際のところ、単純さの追求のための単純さなのではありません。ただ楽しく使えるものをつくることが目的なのです」

「画面に表示される瞬間のための不朽のデザインを」がデジタルデザインに対するモットーであるRationaleの彼のチームと、彼自身が共有する目標は、人のためのデザイン原理と美しいタイポグラフィによって、時が経過しても愛用され続けるアプリを開発することでした。AdobeのUX/UIツールがその一助になったことを喜ばしく思っています。