メニュー...

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

Loading...

複数のデバイスで Xmind を使用する際、プラットフォームを切り替えるときに生じるちょっとした違和感(ボタンのデザインの僅かな違いや、直感とは異なる機能の動きなど)を覚えたことがあるかもしれません。何かが壊れているわけではないけれど、その環境に完全には馴染んでいないような感覚です。

私たちも同じように感じていました。そこで、一つの決断を下しました。Xmind は単に機能するだけでなく、macOS、Windows、iOS、Android のすべてのプラットフォームで、まるでそのために開発されたかのように直感的に馴染むデザインにすべきである、と。 本質的な構成、ロジック、使い慣れた製品の操作感はそのままに、実行される各環境に最適に調和したデザインを提供します。

その実現に向けた私たちの取り組みをご紹介します。

Feels native, stays Xmind.

多くのクロスプラットフォームアプリが抱える課題

一般的なアプローチは、一つの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

丸みのあるピル型ボタン、キャンバス上に浮かぶリキッドガラスのパネル、心地よい十分な余白

Windows

幾何学的で控えめな角丸長方形、ネイティブのタイトルバー、直接的なコピー表現(「今すぐアップグレード」ではなく「アップグレード」など)

iOS & iPadOS

主要なOSリリースの初日に合わせて完全にアップデート。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 と同じように直感的に操作できます。この目に見えない一貫性があるからこそ、ユーザーを迷わせることなく、インターフェースを各プラットフォームへ自由に適合させることができるのです。

変えないもの:コアアイデンティティ

すべてのベースにある、いくつかの基本原則は、プラットフォームや Google・Apple が生み出す新しいデザイン言語に関係なく、常に揺らぐことはありません。

  • キャンバスが常に主役で、UIは一歩下がってそれをサポートします。

  • 高度な機能は必要なときだけ表示され、そうでないときは作業の邪魔をしません。

  • 「元に戻す(Undo)」機能は無制限。創造的な作業には、失敗を恐れずにアイデアを試せる環境が必要です。

  • いかなる時も「美しさより、速さ」を優先します。操作性を損なうようなアニメーションや視覚効果は一切採用しません。

これらは単なるデザイン上のルールではなく、ユーザーの皆様への絶対の約束です。

すべての維持を可能にするデザインシステム

ここで、4つの異なるプラットフォームに対応するデザインを、どのようにして破綻させることなく同時に破綻なく管理・更新しているのか、という疑問が浮かぶはずです。

その答えは、2年前における、Xmind 専用の本格的なデザインシステムの構築という決断にあります。

目的は非常にシンプルですが、実現は驚くほど困難でした。それは「プラットフォーム間の差異を一箇所で吸収し、他のプロダクト部分に影響を与えないこと」です。たとえば、一つのボタンは、私たちのデザインシステム上では一つしか存在しません。しかし、それがmacOS上ではピル型になり、Windows上では角丸長方形へと自動的に変換されます。この方法であれば、一箇所の変更がすべてに反映されるため、ファイルを個別に修正する手間や、デザインのズレが発生する心配は一切ありません。

この土台がなければ、私たちが目指したマルチプラットフォーム展開を維持することは不可能でした。アップデートのたびにどの修正を優先するか議論することになり、新機能を生み出すたびに微妙に異なる4つのバージョンが生まれ、徐々に同一の製品としての体験が失われていってしまいます。最終的には、すべてのプラットフォームに一つの同じUIを配信するアプローチに逆戻りしていたことでしょう。

私たちのデザインシステムは、正しいアプローチをとることを一時的な取り組みではなく、継続可能なものにしています。

このシステムの存在に直接気づくことはないかもしれませんが、それこそが、このシステムが完璧に機能している証でもあります。

おわりに

新しい Xmind が、もうすぐ登場します。

より美しく、より洗練されたデザインに生まれ変わりました。これは、各プラットフォームを深く理解し、それを維持する土台を作り上げ、「デバイスが複数になっても、妥協のない製品体験を提供する」という信念を2年間にわたり追求し続けた成果です。

私たちも毎日、さまざまなデバイスで Xmind を愛用しています。だからこそ、「とりあえず使える」だけの一時的な体験に甘んじることなく、ユーザーの皆様にも最高の使い心地を体験していただきたいと願っています。

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

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

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

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

その他の記事