同じ画面を8つのUIデザインで作り比べた。ニューモーフィズムからネオブルータルまで

はじめに

同じ画面仕様を、デザインコンセプトだけ変えてAIに8パターン作ってもらいました。コードはほぼ同じ、見た目の方向性だけを変えています。

デザインの違いを言葉で説明されてもイメージしにくいことが多いので、実際に動くデモを並べて見比べられるようにしました。業務アプリでそのまま使えそうな手堅いものから、流行りもの寄りのその他デザインまで、8つのコンセプトを並べています。

画面仕様

すべて同じ仕様の業務画面です。検索フォームとテーブルというよくある組み合わせを、バニラJS・外部ライブラリなしで実装しています。

検索フォーム

名前・ステータスの2項目で絞り込み。検索とリセットの2ボタン。

テーブル

ID・名前・部署・ステータス・更新日の5列、5件のサンプルデータ。

グラスモーフィズムとニューモーフィズムの2つには、境目を線とシャドウで強調するモードへの切り替えトグルをつけています。背景と要素が同化しやすいデザインなので、境界線をどこまで主張させるかで実用性がどう変わるかを触って確認できます。

業務アプリで使いやすいデザイン

1. クリーンミニマル

白背景、グレースケール中心の配色。ボーダーは1pxの薄いグレー、角丸はほぼなし。余白を広めに取り、装飾的な影を使わないシンプルな構成。

2013年のiOS 7あたりから広まったフラットデザインの流れを汲むスタイルで、情報そのものを邪魔しない作りです。SaaSの管理画面やドキュメントツールなど、長時間見続けるような業務画面でよく採用されています。迷ったらまずこれを選んでおけば外しにくい、という安心感があります。

2. コーポレートクラシック

紺を基調にしたヘッダーと見出し。ストライプ行のテーブル、角丸なしの直線的なレイアウト。社内システムや基幹システムによくある見た目。

2000年代の業務システムやイントラネットでよく見た配色で、銀行や官公庁系のシステムに今も根強く残っています。紺×白という組み合わせ自体が「信頼できそう」という印象を与えるためで、古風に見える反面、情報量が多い画面では今でも選ばれる理由がわかる安定感があります。

3. マテリアル／エレベーション

box-shadowによる浮き上がり表現。入力欄は下線スタイル。Google系プロダクトでよく見るマテリアルブルーをアクセントに使用。

Googleが2014年に発表したMaterial Designが元になっているスタイルです。境界線をほとんど使わず、影の濃淡だけで要素の階層を表現しているのが特徴で、Android系アプリだけでなく業務用Webアプリでも幅広く採用されています。

その他の方向性

ここから先は、業務アプリへそのまま使うには工夫が必要なものや、ブランディング・LP向きの主張が強いデザインです。

4. ニューモーフィズム

背景と要素を同色にし、box-shadowの浮き出し・押し込みだけで立体感を出す手法。ボーダーはほぼ使わない。

2019年から2020年頃にDribbbleを中心に一気に広まったトレンドです。見た目の評判は良かった一方、コントラストが低く要素の境界がわかりにくいため、実際のプロダクトでの採用例は少なく、ポートフォリオサイトなどの作例止まりになることが多いスタイルでした。境界線が一切ないぶん、線やシャドウを加えるとボタンや入力欄の役割がぐっとわかりやすくなります。実用で使うなら線あり寄りに振った方が安全だと感じました。

5. グラスモーフィズム

グラデーション背景の上に、backdrop-filter: blurで半透明のカードを重ねる手法。境界は半透明の白い線のみ。

2020年のmacOS Big Surあたりから話題になり、その後Windows 11のAcrylicなどOSのUIにも取り入れられたスタイルです。OSの設定画面やダッシュボードのヒーローセクションでよく見かけます。見た目は華やかですが、背景にグラデーションが必須なぶん業務画面への採用は難しい部類です。トグルで線を強めると、半透明カードの輪郭が急に業務システムらしくなるのが面白いところでした。

6. ネオブルータル

太い黒のボーダーとずらし影（box-shadow: 4px 4px 0）。角丸なし、ビビッドな配色。ボタンはホバーで影が消えて押し込まれる動き。

2021年前後からWebデザイン界隈で再評価されたスタイルで、スタートアップのランディングページやFigma周辺のコミュニティサイトなどで採用例が増えました。最初から境界線が太いので、線・シャドウ強調の対象には入れていません。8つの中で一番主張が強いデザインです。

7. ダーク＆ネオン

黒背景にネオングリーンのアクセント。フォーカス時にグロー効果。ダッシュボードや管理ツールの夜間モードに近い雰囲気。

エディタやターミナルのダークテーマ文化と相性がよく、開発者向けツールやモニタリングダッシュボード、ゲーミング製品のサイトなどで好まれています。業務画面というよりは、技術職向けのツールに近い印象を受けるデザインでした。

8. スカンジナビアン

ベージュの背景にテラコッタのアクセント。Georgia系のセリフフォントで温かみを出す。角丸とゆとりのある余白が中心。

北欧家具やライフスタイル系のECサイト、ウェルネス系サービスのブランドサイトでよく使われる雰囲気です。業務画面なのにどこか柔らかい印象になるのが意外でした。フォントの選び方だけで雰囲気がかなり変わることがわかります。

まとめ

同じ仕様の画面でも、配色とボーダー、影の使い方を変えるだけで印象がまったく違うものになります。とくに境界線をどこまで主張させるかは、デザインの方向性に関わらず効いてくる要素だとわかりました。

業務アプリにそのまま使うなら、クリーンミニマル・コーポレートクラシック・マテリアル／エレベーションの3つが手堅い選択です。ニューモーフィズムやグラスモーフィズムのように境界が曖昧になりやすいデザインを使うなら、線・シャドウを強めた側を選ぶ方が安全だと感じています。ネオブルータルやダーク＆ネオンは、業務アプリよりもブランディングやLP向きの方向性です。

このサイトでは事例ベースでUIコンポーネントのコードを公開しているので、気に入ったデザインがあればパーツ単位でも参考にしてみてください。見た目の比較に続けて、「同じアプリを4つのナビゲーション構造で作り比べた」では画面の組み方そのものを比較しています。