AppleのLiquid Glassデザインの導入
こんにちは、アシカガコウジです。今回は、Appleが発表した新しいデザイン、Liquid Glassについて話をします。
Appleの開発者会議、WWDC 2025というのが先日行われたんですが、
そこで発表された新しいデザインで、iPhoneの画面デザインが新しくなるよという話題として知っている人も多いと思います。
このLiquid Glassというデザインは、iPhoneだけでなく、MacやiPadなども含めた、
Appleのデバイス全体で、Apple Watchとかも、Vision Proとかも含めて、あとApple TVもありますが、
Appleのデバイス全体でこのデザインが採用されるというものです。
iPhoneの画面デザインが大きく変わるのは、2013年以来ということです。およそ10年ぶりと。
この変化は、ユーザーインターフェースデザインというだけではなく、いろんなデザインにも派生していくことが予想されます。
UIデザイナーだけでなく、ウェブデザイナーにも関係してくるでしょうし、
グラフィックデザインとか、映像のクリエーションや、もしかしたらイラストレーションとかにも影響あるかもしれません。
ということで、今回はAppleのLiquid Glassデザインがクリエイターに与える影響を考えてみたいと思います。
もちろん、Liquid Glassは何なのかと、どういうところがいいのかということも解説したいと思います。
デザインの変遷とクリエイターへの影響
この番組は、あなたのクリエイティブの背中をちょっと押すをテーマに、デジタル活用のヒントをわかりやすくお届けすることを目指しています。
今回取り上げるテーマは、AppleのLiquid Glassデザインがクリエイターに与える影響は?です。
Liquid Glassとは、その名の通り液体っぽさがあるガラス風のデザインです。
まさにiPhoneとかMacとかの画面の上にガラス状の薄い板を置いているような見た目で、下にあるものが透けて見えるんですね。
光の屈折とか反射、影などがリアルに再現されていて、未来的で美しいと評価されています。
このLiquid Glassを最初に見たときに、私は時代がひと回りして、昔のように現実のものを画面上にリアルに再現する路線に戻っていくのかと思いました。
でもその後、Liquid Glassの説明をいろいろ見たり聞いたりして、そうじゃないんだなとある程度理解できたと思っています。
iPhoneの画面デザインは10年以上前に今のものになっているので、うちの娘とかは古いデザインを知らないと思うんですが、
もともとは現実のものを真似したリアルな感じのデザインだったんですね。
スキューモーフィズムとかスキュアモーフィズムと言うんですが、現実世界を模倣するデザインです。
なので初期のiPhoneの写真を見るとわかると思うんですが、アイコンは立体的で存在感のあるものばかりでした。
メモアプリのアイコンは現実のメモ帳、ノートパッド、アメリカ風のものを再現したようなデザインで、紙の質感もありますし、
上の方にはメモ帳を1枚破ったような破り跡みたいなのがリアルに表現されていました。
カメラアイコンもレンズがリアルに光っていて、カメラですと主張したものでした。
アップル以外のサードパーティーが作ったアイコンもそれに揃えていて、
YouTubeのアイコンはブラウン管テレビだったんですね。ちょっと立体感のある。
YouTubeのチューブというのはブラウン管のことで、あなたのブラウン管とYouTubeということなので、
昔のブラウン管テレビのアイコンの方がYouTubeをうまく表していると言えるかもしれません。
インスタグラムのアイコンがポラロイドカメラのアイコンだったことも覚えている人も多いと思います。
リアルでレトロな感じのポラロイドのアイコンがインスタグラムを象徴するものでした、当時は。
今は全然イメージが変わりましたよね。
もちろんアイコンだけではなく、ユーザーインターフェース全体が現実のものを模倣したものになっていました。
特にiPadが出たての頃は画面も大きいですし、気合が入っていたようで、
iBookという電子書籍の画面は木製のリアルな本棚の中に本が並んでいるみたいなイメージでした。
そして本を読むときには、ページをめくっているような効果が画面上で再現されていたんですね。
これは初めてデジタルでの読書をする人のためになるべく現実世界に近づけようというアプローチで、
最初の段階としてはある意味これが正解だったのかもしれません。
スティーブ・ジョブスもそういった現実のものを真似したインターフェースがお気に入りだったようです。
ちなみにその頃は私のお仕事のウェブデザインにおいてもアイコンを作るとかなったときに、
そういうリアルな感じの凝ったものを求められたので大変だった記憶があります。
やっぱりウェブデザインとかは特にOSのデザインの影響を受けがちなんですね。
その後iPhoneは今のデザイン、フラットデザインになります。
余計な装飾がないシンプルで平面的なデザインに大きく変わりました。
例えばデジタルのデバイス上で動画を再生するというときに、
操作するユーザーインターフェースとして現実のリモコンを真似して、
リモコンが画面にあるような感じでボタンが立体的になっていて、
みたいな方がわかりやすい、使いやすいという発想だったのが、
もうデジタルで動画を再生するのが当たり前になって、
デジタルネイティブな人にとっては動画を見るといったらスマホとかで見るのが当たり前みたいになってくると、
現実のリモコンを真似する必要はないと。
動画を邪魔しないようなシンプルなボタンでいいよと変わってきたわけですね。
このフラットデザインへの変化、進化というのも、
ウェブデザインなどに私の仕事にも大きな影響を与えました。
現実のものに似たリアルな細かいものが不要になったので楽になったんですが、
一方でシンプルでデジタル的なものだけだと、どうしてもデザイン的に物足りなくなってしまうんですね。
写真が入ってくるだけでもだいぶ違うんですが、
やっぱりなんかアナログ的な要素とかをちょっと入れるとか工夫が必要なので、
フラットデザインでどううまく見せるかみたいな変化を必要とされたというクリエイターの人も多いと思います。
そしてその次の段階としていよいよリキッドグラスが登場するわけです。
ファッションみたいに流行がひと回りしてフラットなシンプルなものにも飽きたので、
もう一回リアルな路線で現実のガラスを模倣したものというような発想ではないんですね、リキッドグラスは。
フラットデザインの延長線上にあるUIの未来を考えた上で進化していった中での
Appleの出した答えが液体状のガラスだったということでしょう。
ビジョンプロの影響が大きかったようです。
ビジョンプロはAppleのAR、VRグラスでヘッドセットをつけてコンピューターを使う
空間コンピューティングのためのデバイスです。
パソコンのディスプレイの代わりにゴーグルをつけて覗き込んだ中でコンピューターの作業をするというコンセプトですね。
現実世界の中にウィンドウが浮かんで操作したりするので、ガラス状になっていて向こうが透けて見えるというのは、いろいろと都合がいいはずです。
空間の中に配置されるので、いろんな角度から人間が動くと違う角度からそれを見ることになるわけですが、
リキッドグラスのインターフェース特徴
ガラスの光の屈折とかがリアルに再現されていたら、そのユーザーインターフェースが空間の中のそこにあるというのがよりリアルに感じられると思います。
Vision Proは視線で、目で操作をできるので、操作をするときスライダーを動かすとか、そういうときのインタラクション、反応はある程度大げさな派手さがある方が目立つし、使ってて気持ちがいいと思うんですね。
リキッドグラスのインターフェースは液体のようにプルンプルン動くので、その派手さが賛否両論あるみたいですが、そういった理由で派手めにしてるんじゃないかと。
ただ普段は目立たないように。ガラスのように透けていて、主張しすぎないようになっていて、操作するときだけ目立つと。なかなか考えられてるなと思います。
普段は目立たないというのがポイントで、画面上に常にボタン類があるときにも下の要素が透けていて、それでもただ半透明なだけではなくて、ガラスに映ってるようにボタンなどのエッジの部分が光沢があったり影があったりで、ここにボタンがあるなということがわかりやすくなってるんですね。
で、現実世界にあるガラスをモチーフとしているので、人間が見て、ここにガラスのボタンが載ってるんだなと自然に受け入れられるように考えられています。
サファリの画面を見たんですが、画面の下に従来みたいにタブバーが固定されているのではなく、角丸の四角いバーが一番下よりちょっと上の位置に浮いているように配置されているユーザーインターフェースになっていました。
で、スクロール時にはそのバーがヒュッと小さくなって、ページタイトルぐらいしか表示されなくなると。そうやって変化するんですね。
そういうインターフェースが変化するのもリキッドグラスの特徴で、変化する時には液体みたいに動くんですね。
一本のバーから複数のボタンに分かれる時とか、水滴が分かれる時みたいに最後まで細くくっついてて、ポヨンと逆ぷよぷよみたいに気持ちよく分かれます。
ボタンを押したらコマドが開くみたいな時にも、そのボタンが液体状にパッと広がってコマドになるみたいな動きをするんですね。
このリキッドグラスのインターフェースは、ただ一枚ガラスが載ってるわけじゃなくて、何層ものレイヤーに分けて処理しているようです。
Appleが提供している新しいOS用のリキッドグラス用のアイコンを作るアプリがあるんですが、アイコンを作る時にも一枚絵の画像じゃなくて、複数のレイヤー分けした画像から作るようになっていました。
そうやって複数のレイヤーを用意しておけば、OS側で自動で反射とか屈折、影、ぼかし、ハイライトなどのエフェクトが自動でつくそうです。
背景の色が明るいとか暗いとかによっても、自動的にガラスの透け具合とかぼかし具合を調整しているらしいです。
かなり高度なことをOS側で処理してるんですね。
クリエイターへの影響
で、先ほど言ったようにリアルな路線のスキューモフィズムのデザインからフラットデザインにAppleデバイスのOSのデザインが変わることがウェブデザインなどにも影響を与えてきたわけで、
今回リキッドグラスになれば、またその影響を大きな意味でものを作る人、クリエイターには影響があるでしょうと予想するわけですね。
ユーザーインターフェースデザイン、ウェブデザインだけでなく、グラフィックデザインにもガラス風、液体風なブームが、トレンドが来ると思います。
もちろんトレンドに乗るのか、乗らないのか、それぞれの自分のスタンスというものがあると思います。
でもクライアントに求められてトレンドに乗るというケースもありますよね。
で、動画の世界での影響が大きい気がします。
動きがあってこそリキッドグラス風デザインというのは面白いですからね。
自らそういうリキッドグラス風な動きを作り上げていく動画のクリエイターもいると思いますし、いろんなツールがそういう効果をみんなが使えるようにしていくと。
TikTokとかインスタグラム上で簡単にリキッドグラス風効果が使えるようになるみたいなそういう流れがありそうですよね。
クリエイターの人がクリエイトするもの、写真やイラストやそれらをデザインしたものなどのそういうコンテンツを見るマシンがiPhoneだと考えると、
当然そのiPhoneのユーザーインターフェースにコンテンツは影響を与えることになりますよね。
例えば自分の写真やイラストの上にガラス風のUIが乗っかるケースが出てくるわけですよね。
iPhoneの壁紙をデザインするとかなった場合に、その上にはガラスのUIが乗っかるわけですよね。
ちなみにリキッドグラスが採用される新しいiOSでは、壁紙に使った写真が立体的に見えるように処理されて、iPhoneを動かした時に立体的な感じに見えるんですね。
これは写真だけでなくイラストでも立体的になっているのをXに投稿している人がいてそれを見ました。
多分その人は開発者か何かで新しいOSを試してみている人だと思います。
私はトレンドに乗りたいタイプの人間なので、01タイプではなくて、1を10に広げたいなというタイプなので、リキッドグラスに影響を受けると思います。
例えば缶バッチのデザインで、缶バッチのエッジのところがガラス風に、リキッドグラス風になっていると面白いかなとか考えたりしています。
ということで、皆さんはリキッドグラスについてどう思っているでしょうか。
クリエイターに与える影響はどうなんでしょうね。
ご意見ご感想があればぜひ教えてください。
ハッシュタグアシカガキャストをつけてXに投稿していただくか、お便りのフォームとメールアドレスを概要欄に載せているので、そこからメッセージを送ってもらえると嬉しいです。
それではまた次回お会いしましょう。
アップル好きのアシカガコーデでした。
