アプリにレスポンシブデザインを届ける

iA WriterはMacネイティブアプリにおいて、初めてレスポンシブデザインを取り入れたテキストエディターです。しかしなぜ実現までこんなに時間が掛かったのでしょうか?

iA Writerのレスポンシブデザイン

Mac版のiA Writerでお客様から要望として一番頂いていたのは文字サイズを変更可能にする事でした。これは簡単に搭載できるような機能でありながら、なぜ今まで搭載しなかったのでしょうか?

傲慢!

Writerのタイポグラフィーは私たちの不合理な傲慢さによるもの、という一部の評論家からの指摘があります。Writerに一つのタイプフェイスと、一つのフォントサイズだけが備わっている理由は次の通りです:

  1. 従来のテキストエディタを使う上で、無駄な時間の一つはフォントを弄んでいる時間です。様々な好みや、20年前からある小さすぎる文字を使う伝統とは相反しますが、タイプフェイスとフォントサイズは好みや趣味によって定義されません。
  2. 小さいフォントサイズは読む時や編集する際に便利ですが、丁寧に一文一文を書く際に集中するためには、大きく(近くに)文字が見える事が重要です。
  3. 私たちが選んだフォントサイズは理想ではなく、より多くのMacの画面でよい結果をもたらすための妥協でした。あるスクリーンでは理想より少し大きく見えても、最新のスクリーンでは小さく見える事は認識していました。

もちろん私たちは改善の余地がある事は分かっていましたが、Writerのシンプルさを保ちながら、違うフォントサイズを可能にする方法を考えるのに多くの時間がかかってしまいました。スクリーンサイズ、解像度、ピクセル密度をチェックし、それに合ったサイズを表示させる技術的な解決案を模索していました。

解決策: レスポンシブデザイン

私たちは数多くのウェブデザインを手がけて培った経験を基に、ウィンドウ幅に合わせてフォントサイズが変わるレスポンシブデザインをMac版Writerに適用しました。これによりタイポグラフィーのバランスを保ちつつ、文字の改行ずれを起こさずにズームイン・ズームアウトをすることが可能になりました。

私たちがこのような当たり前な解決策にたどり着くのに、なぜこんなに時間がかかったのかは定かではありません。しかし、これは今日まで誰も実現していなかった事実を振り返ってみれば、Macネイティブアプリでレスポンシブデザインを取り入れる事はそれほど「当たり前」ではなかったのかもしれません。フォーカスモードやオートマークダウン等、Mac版Writerの持つカスタム機能の同時実現も含めると想像以上に複雑でした。しかし、私たちはこれらの課題をできるだけ「自然に」、かつ「当たり前」な機能に感じられるように数多くの議論を重ね、対応に時間を注いできました。

リキッドデザインを取り入れたサイズ調整も試みましたが、最終的に三段階のアダプティブレイアウトに決めた理由は次の通りです:

我々はどのようにMac用のWriterを使って書くのか

何カ月もプロトタイプ(試作品)のテストを行ってきた結果、この簡単な変更によって私たちの書き方そのものが変わりました。私たちは三つのフォントサイズを次の様に使い分けて使っています:

  1. 難しい文章を書く時には大きいサイズ: 「近く」で自分の書いている文章をみる事で人はペースを落とします。これは少しずつ前に進めるような、難しい文章を書く場合に特に役立ちます。更にフォーカスモードと併用すれば、難しい科学論文、詩、または哲学文章なども書きやすくなるでしょう。
  2. 文章を書いたり編集するための中サイズ: 素早く書いたり編集するのに適しています。
  3. 読むための小さいサイズ: 人によっては文章を書くときに、より多くの文章が見える様に小さいフォントサイズを好む場合があります。しかし、時に小さいフォントサイズによって見える文章が多すぎる場合もあります。多くの文章が一度に見える事により、急いで書くようになったり、雑な思考を引き起こすことで、「書く」作業ではなく「編集」作業に移る誘惑も生まれます。ある人(又は文章によって)はこれを良いことと捉えるかも知れませんが、小さい文字サイズが最も向いているのは文章を移動させる編集作業や、書き終わった文章を読む時でしょう。

開いているドキュメントを重要度に応じて並び替える時も、異なるフォントサイズが役に立つでしょう。参照用のウインドウを隅に小さく表示し、作業用のウインドウを大きなサイズで表示させる。必要ならば中サイズのウインドウをメモなどに使うこともできます。

iA WriterのHTMLプレビュー

今回のMac用Writerのバージョンではレスポンシブデザインが一番の目玉機能ではありますが、他にも選択範囲の文字数を数える機能や、強力な検索と置き換え機能、HTMLプレビューパネル表示機能なども新たに備わっています。

iA creates digital products. We run small design studios in Tokyo, Berlin, and Zurich that serve great clients around the globe. Subscribe to our newsletter to receive brief summaries of our articles and interviews.