🗂

世界でもっともiOS26を再現したCSSライブラリをリリース！

に公開
Ionic
iOS 26
idea

AppleがiOS26を発表して以降、Liquid Effectが注目を集めていますが、実はiOS26では他にも多くのデザイン変更が行われています。デバイスネイティブな使い心地をユーザに提供するため、iOS26の体験を踏襲することは非常に重要です。

そこで、WebでiOS26デザインをつくるためのCSSライブラリをリリースしました。最新のIonic Frameworkに対応しており、ダークモードもサポートしています！

URL
デモ https://ionic-theme-ios26.netlify.app/
レポジトリ https://github.com/rdlabo-team/ionic-theme-ios26 
% npm install @rdlabo/ionic-theme-ios26

ユーザには、ブラウザでiOS26の体験をしてもらうだけでなく、Capacitorを使ってWebアプリをモバイルアプリにしてリリースすることも可能です！

iOS18とiOS26の比較

iOS26では、Liquid Glassの採用以外にも多くのデザイン変更が行われました。

セーフエリア

最も目を引くのは、セーフエリアの扱い方の変化です。iOS18では、セーフエリアは空白で埋めるものだったのに対し、iOS26ではエッジ効果を使いながら、全画面をユーザに提供するようになりました。

左がiOS18、右がiOS26の画面です。

ios-safearea.png

フローティングタブ

それに連動して、タブのデザインも大きく変わりました。横幅いっぱいをカバーするデザインから、フローティングスタイルに変更されています。また、今までAndroidのみで正式採用されていたFABボタンが、iOSでも採用されたのも特徴的です。

ios-tabs.png

要素の丸み

さらに、シート、リスト項目、ボタン、セグメント化されたコントロールなど、ほとんどのコンポーネントと要素がより丸みを帯びるようになりました。丸みを帯びることで、よりモダンな外観を実現しています。また、リスト間の空白がわずかに大きくなったことも特徴です。

ios-list.png

ナビゲーションバーのボタン

ナビゲーションバーのボタンも、アイコンのみのボタンに置き換えられました。ラベルつきアイコンも使用可能ですが、アイコンのみの方が好まれる傾向にあります。アイコンボタンは個別に利用することもできますが、グループ化することも可能です。

ios-back-button.png

アラート

アラートのデザインも大きく変わりました。より丸みを帯びた一方で、テキストが左揃えとなっています。特に長い文章の場合、可読性が向上したと感じられます。全体的に丸みを帯びて、より広々とデバイスを使えるようになりました。

ios-alert.png

Liquid Effectが大きな注目を浴びましたが、このようにそれ以外でも大きくデザイン変更が行われています。

モバイルUIを再現するIonic Framework

Ionic Frameworkは、Web技術だけを使って、モバイルUIを再現するためのUIフレームワークです。モバイルUIは身近な存在であるにも関わらず、Web技術で再現するのは非常に面倒な作業です。例えば、プッシュ遷移やシートモーダル、Large Titleなど、ネイティブアプリで当たり前のように使われている機能をWebで実現するのは困難を極めます。

Image from Gyazo

しかし、Ionic Frameworkでは、これらすべてを指定の書き方（Web Componentsの利用）をするだけで実現してくれます。身近なアプリでは、「三井住友銀行」や「iAEON」、「みんなの銀行」などで採用されています。iOS18、Material Design2までレベルの高い再現度を持っています。

ただ、iOSもAndroidも、それ以降、デザインの破壊的変更を行いました。iOSやAndroidのネイティブアプリ開発では、設定ファイルに利用するデザインを記述したり、インポートするデザインライブラリを切り替えることで既存ユーザのデザインを確保しています。
一方で、多くのIonicユーザは、Ionicの提供するデザインをベースにオリジナルデザインにカスタマイズしています。IonicがiOS26やMaterial Design3にデザインを進化させると、それら既存ユーザのデザインを破壊することになってしまいます。

そこで近年は、モバイルデザインを再現できる基盤としてIonicのアップデートが行われています。当初、CSS変数でのデザイン拡張にとどまっていたのが、Shadow PartsをAPIとして提供するようになり、CSSで自由にデザインできるようになりました。つまり、今ではiOS26のデザインを作りたかったら、自分で作ることが可能なのです。

@rdlabo/ionic-theme-ios26

ということで、実際に作ってみました！随分前に、Ionicのプルリクエストを作った時、「角丸が数ピクセル違うよ！」とチームに指摘を受けたことを今でも覚えています。その経験を活かし、今回はスクリーンショットを透過して比較しながら作成しました。配色もRGBのパーセントレベルで比較しながら作ったため、かなり精度が高いです。

theme-0.png

https://github.com/rdlabo-team/ionic-theme-ios26

% npm install @rdlabo/ionic-theme-ios26

利用は簡単で、Ionicのインストール後、指定のCSSファイルをインポートするだけです。

@import '@rdlabo/ionic-theme-ios26/dist/css/default-variables.css';
@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.css';

/**
 * このファイルはMDデザインに、iOS26における要素の変更による影響を排除するためのものです。
 * 例えば、ion-buttons ion-button[fill=default] は通常実装されませんが、iOS26では必要になる場合があります。
 * このファイルは、そのような影響を排除するために存在します。
 */
@import '@rdlabo/ionic-theme-ios26/dist/css/md-remove-ios-class-effect.css';

/*
 * ダーもクードのサポートファイルです。Support Dark Mode
 * Ionicのダークモードに沿って必要なファイルをインポートしてください。詳細はこちら： https://ionicframework.com/docs/theming/dark-mode
 * use Always:    @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-dark-always.css'
 * use System:    @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-dark-system.css'
 * use CSS Class: @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-dark-class.css'
 */

ただ、Liquid Effectは現在技術的に実現が困難でした。SVG Filterを使ったものはChromiumでしか動作せず、WebGLを使ったものは計算が膨大で、実用アプリにはまだ厳しい状況です。
そこで、Liquid Effectに関しては、blur等を組み合わせてそれっぽい感じになるようにしています。

Webでそこまで再現してどうするの

これはもっともな疑問ですね。

Capacitorという、Webアセットを使ってモバイルアプリを作るライブラリがあります。それを使うと、ブラウザ、iOSアプリ、Androidアプリ、さらにがんばればデスクトップアプリとマルチプラットフォームで展開可能です。ブラウザで提供するだけでなく、iOSでもAndroidでも使えるようになります。

https://zenn.dev/rdlabo/articles/4a241cacc7e364be8066

このテーマについて書かれた記事で「I built a PWA and published it in 3 app stores. Here's what I learned.」というものがあります。この記事のここの一文が私は大好きです。

「なぜアプリストアに出す必要があるの？PWAならWeb上に置いておけばいいじゃない」
答えは簡単、そこにユーザがいるからです。

ユーザは何度も何度も私に尋ねてきました。『Chavahは何処？アプリストアに見つからないよ？』彼らは、アプリはアプリストアにあるものだと認識しているので、当然のようにそう聞いてきます。 というのは現実です。

ユーザが必要とする環境で使えるようにしていきたいですね。

まとめ

iOS26の新デザインをWeb技術で再現する@rdlabo/ionic-theme-ios26をリリースしました。このライブラリは、スクリーンショットを透過して比較しながら作成したため、非常に高い精度でiOS26のデザインを再現しています。

主な特徴：

  • セーフエリアの扱い方の変更に対応
  • フローティングスタイルのタブデザイン
  • より丸みを帯びたコンポーネント
  • アイコンのみのナビゲーションバーボタン
  • 左揃えテキストのアラートデザイン
  • ダークモードサポート

技術的な制約により、Liquid Effectは完全再現できませんでしたが、blur等を組み合わせて近い効果を実現しています。Capacitorと組み合わせることで、Webアプリをモバイルアプリとして展開することも可能です。ぜひ、アプリの世界をブラウザに留めず、iOS、Androidへの展開も進めてみてください。

それではまた。

Discussion