iA Presenter に Charts を導入します。オプションを増やす代わりに、焦点を絞りました。従来のツールが生むノイズを削ぎ落とし、明快さ、読みやすい初期設定、そして強力な新しい表エディタを優先するチャートシステムを作りました。

Charts は Presenter に最初から存在していましたが、私たちはそれを隠していました。初期版は技術的には準備できていたものの、うまく動きませんでした。飾り立てようともしましたが、デザインは見た目だけではありません…

最初の試作は、Presenter が避けようとしている種類の試行錯誤を促してしまっていました。機能を足すのは簡単ですが、それをきちんと動かすには時間がかかります。

始まり

テンプレート更新のあとに Charts を見直したとき、最初に思いついたのは CSS を整理し、可能な限り多くのチャート種類を用意することでした。そうすれば、使う人は場面ごとに 正しい ものを選べます。

選択肢をたくさん増やし、判断をユーザーに委ねるのは、アプリ設計ではよくあるやり方です。いつもの私たちのやり方とは逆ですが、それでも今回はそれが正しいように見えました。今どきのチャート基盤なら500種類でも簡単に出せますし、選択肢が多いほど楽しそうに見えます。もちろん、選択肢が多すぎることこそが、私たちがうまく名前を付けられなかった問題だったのです。

学んだこと

ほとんどのチャート種類は、明快さよりノイズを増やします。私たちは、何が本当に役立つのかを決めなければなりませんでした。私たちは何年もチャート、表、インフォグラフィックを設計してきましたが、今年 Smashing ConferenceNick Desbarats に会い、その後で彼の本 Practical Charts を読んだことで、すべてを第一原理まで引き戻すことができました。そこで、私たちが前提にしていたものに、明快さと構造が与えられたのです。

iA Presenter charts editor
iA Presenter charts editor color settings

目から鱗だったのは、少数のチャート種類で実際の多くの用途をカバーできるということでした。棒グラフと折れ線グラフで、仕事の大半は済みます。人気の円グラフでさえ、厳しい条件のもとでしかうまく機能しません。見た目は派手でも、正確に読むのを難しくするフォーマットはたくさんあります。なんだか、ずいぶん見覚えがありました。そこで私たちは、いつもやるように、強い初期値と明確な制約を中心に Charts を組み立てました。

  • チャート種類は少なく。
  • 色は静かに。
  • 画面サイズをまたいでも読みやすいように、レイアウト制約を設ける。
  • 1枚のスライドに入るチャート数にも制限を設ける。密度の高いレイアウトは、チャートを確実に壊すからです。

大きなライブラリを足す代わりに、チャートとレスポンシブなスライドがどう働くかの基本だけを提供することにしました。選択肢を絞ることで、私たちは伝えたいストーリーと、それをどう伝えるのが最善かを考えざるを得なくなります。これからは、ユーザーのニーズに基づいて少しずつ新機能を追加し、注意深く、ゆっくりと育てていきます。機能に過剰な負荷をかけて、先延ばしを誘う罠にしてしまわないように。

Example chart with custom colors in iA Presenter
iA Presenter charts editor with example data

よりよい表サポート

Charts にはきれいなデータが必要です。その結果として、より強力な新しい表エディタが生まれました。これは単なるユーティリティ更新ではなく、長年の目標だった Markdown 表の自動整形を現実に近づける機会でもありました。ぜひ試して、どこをもっと鋭くできるか教えてください。押して、壊して、不足しているものを教えてください。私たちは Markdown 表を深く掘り下げており、いったん磨き上げれば、すべてのアプリで使えるようになります。

Editing chart tables in iA Presenter
Table editor for charts in iA Presenter

ぜひ試してください

Presenter の Charts は現在ベータ版です。まっすぐで、シンプルで、そして驚くほど速い。いまこそ試して、どうすればもっと良くなるか教えてください。いただいたフィードバックは、1月の正式公開に向けて仕上げる助けになります。

  • iA Presenter ベータに参加