メニュー...

ネイティブでありながら統一感のある、Xmindがクロスプラットフォームデザインをどう捉えているか

Loading...

Xmind を複数のデバイスで使っていると、何かを感じたことがあるはずです。プラットフォームを切り替えるときの小さな違和感です。ボタンの見た目が少し違う。操作が期待どおりに動かない。壊れているわけではないのに、どこかここ向けに作られていないように感じるのです。

私たちも同じように感じています。そして、これをきちんと解決するために長い時間をかけてきました。

Feels native, stays Xmind.

ほとんどのクロスプラットフォームアプリが抱える問題

典型的なやり方はこうです。1つの UI を作り、あらゆる場所に出荷する。これは安く、速く、一貫性も保てます。多くのアプリがこの方法を採用しており、正直なところ、多くのユーザーもそれを受け入れています。

その結果、すべてのプラットフォームで動くのに、どこにもネイティブには感じられないアプリになります。

  • Mac ユーザーは、他の Mac アプリのようには見えないことに気づきます。

  • Android ユーザーは、iOS からの移植だと明らかにわかることに気づきます。

  • 大声で不満を言う人はいませんが、違和感は静かに積み重なっていきます。

各プラットフォームごとに個別に設計するという選択肢は理にかなって聞こえますが、実際にはほとんど行われません。コストがかかりすぎ、時間もかかりすぎますし、4つの異なるデザインを保守するチームは最終的に疲弊し、結局は同じ方向に収束してしまいます。

私たちはどちらの選択肢にも満足できませんでした。そこで、これを別の視点で考える方法を探しました。

同じアプリ、違う装い

人の服装を思い浮かべてみてください。正式な会議ではスーツ、週末はカジュアル、土曜の朝はジムウェア。見た目は3通りでも、毎回すぐに同じ人だとわかります。なぜなら、その人の本質は服にあるのではなく、立ち居振る舞い、話し方、人との接し方にあるからです。

Xmind も同じです。すべてをプラットフォーム間で一貫させる必要はありませんが、重要なものは常にそうなっています。

変わるもの:表層

ボタンの形、質感、アニメーション、さらにはコピーのトーンまで——これらは各プラットフォーム固有の慣習に完全に合わせています。

Xmind for Android interface showcasing Material Design 3 components—pill-shaped buttons, toggle switch, list cards, and a properties panel, set against a warm coral gradient background.

プラットフォーム

見た目

macOS

ピル型のボタン、キャンバスの上に浮かぶ Liquid Glass のパネル、ゆとりのある余白

Windows

幾何学的で抑制の効いた角丸長方形、ネイティブなタイトルバー、直接的な文言(「今すぐアップグレード」ではなく「アップグレード」)

iOS & iPadOS

主要な OS リリースの初日に完全対応——アップグレードしたときには、Xmind はすでに新しいシステムの一部になっています

Android

Material Design 3 をベースに再構築——ジェスチャー、トランジション、パネルの挙動を、Android ユーザーの実際の使い方に合わせて再調整

Xmind for macOS displaying the Liquid Glass design language, with a translucent properties panel floating above a mind map canvas, surrounded by soft floral imagery.

手間が増えるように聞こえるでしょう。実際、そのとおりです。しかし、Xmind が単に各プラットフォーム上で動いているだけでなく、そこに本当に馴染んでいると感じられるようにするには、これしかありません。

変わらないもの:構造

ツールがどこにあり、機能がどう整理され、マップ間をどう移動するか——これらはどこでも完全に同じです。

ナビゲーションは上部。キャンバスは中央。プロパティパネルはデスクトップではサイドに、モバイルでは下からスライド表示。下部にはマップタブ。

Mac から iPad に切り替えても、何かを学び直す必要はありません。見た目は違っても、動作はすでに知っている Xmind のままです。うまく機能しているときには目に見えないこの一貫性こそが、表層を自由に変えながらも、ユーザーが迷わないようにしているのです。

決して動かないもの:核

その土台には、Apple や Google が次に生み出す新しいデザイン言語が何であっても、プラットフォームに関係なく変わらないものがいくつかあります:

  • キャンバスは常に主役です。UI は一歩引きます。

  • 複雑な機能は、必要なときにはそこにあり、不要なときには邪魔になりません。

  • 取り消しは無制限です。創造的な作業には、壊れる心配をせずに試せる自由が必要だからです。

  • 美しさより速さ。いつでもそれが優先です。アニメーションや視覚的なディテールのために、アプリが遅く感じられるようにする価値はありません。

これらはデザイン上の判断ではありません。むしろ約束に近いものです。

それをすべて維持できる理由

ここまで読んで、当然の疑問が浮かぶはずです。4つのプラットフォーム、4つのビジュアル言語、あらゆる場所で異なる慣習——どうやって、それが全部崩れずに管理できるのでしょうか?

2年前、当時はそれほど緊急ではないと感じられた決断をしました。Xmind のための正式なデザインシステムを構築することです。

そのシステムが解決する中心的な問題は、説明するのは簡単でも実行するのは驚くほど難しいものです。すべてのプラットフォーム差を 1 か所に集約し、製品の残りの部分がそれを気にしなくて済むようにすることです。同じボタンは、私たちのシステムの中で 1 つだけ存在します。macOS ではピル型になり、Windows では角丸長方形になります。1 回の変更で、すべての場所に反映される——ファイルを探し回る必要も、同じことを 4 回直す必要も、少しずつ同期がずれていくこともありません。

この基盤がなければ、ここまで説明してきたことはどれも持続可能ではありません。更新のたびに、今回のスプリントでどのプラットフォームを修正するかを交渉することになります。新機能が出るたびに、少しずつ違う 4 つのバージョンが生まれ、やがて同じ製品には見えなくなっていきます。最終的には、維持コストが高すぎるという点で皆が静かに合意し、結局はどこでも同じ UI を出荷する単一の形に戻ってしまうのです。

デザインシステムこそが、正しいことを実現するのを可能にするだけでなく、再現可能にもしているのです。

それを直接目にすることは決してありません。それこそが、まさに大切な点です。

結論

新しい Xmind が登場します。

見た目はさらに良くなっています。しかし、より正確に言えば、それらは外からは常に見えやすいものではなかった 2 年間の成果です。各プラットフォームをきちんと理解し、それを維持するための基盤を築き、複数のデバイスを使うという理由だけで妥協する必要はない、という考えを貫いてきました。

私たちは毎日、さまざまなデバイスで Xmind を使っています。私たちは、「なんとかやり過ごす」ような体験に耐えられません。だから、皆さんにもそうしてほしくないのです。

ぜひご自身で体験してください

ネイティブのような使い心地を理解する最善の方法は、今お使いのデバイスで Xmind を開いてみることです。

ぜひご自身で体験してください

ネイティブのような使い心地を理解する最善の方法は、今お使いのデバイスで Xmind を開いてみることです。

その他の記事