ダークカラーをベースにした、おしゃれなUIデザイン実例15選

近年、暗色の背景をベースにしたカラースキームが人気を集めています。とくにこのトレンドを積極的に取り入れているのが、ビジュアルコンテンツを多用するデジタルプロダクトです。

上品さ・おしゃれさを演出できる暗色の背景は、幅広いターゲット層へのアピールに効果的です。また、コントラストを低くおさえると、さまざまな環境になじむという利点もあります。

今回は、TubikのデザイナーによるUIを15事例ご紹介します。実例をとおして、ダークカラーの魅力を掘り下げてみましょう。

1. デザイナーのポートフォリオサイト

▲Designer Portfolio Website

デザインを仕事にするなら、自分のポートフォリオサイトは欠かせません。

この作品は、著名人／エンターテイメント／音楽／映画制作などのプロジェクトを専門とするデザイナーのポートフォリオサイトです。

暗色の背景がおしゃれでキャッチーなイラストを際立たせており、コンサートのステージのような雰囲気を演出しています。

2. 美術館のアプリ

▲Museum App

あなたは美術館は好きですか？ もし、スマートフォンの中に美術館を持てるとしたらどうでしょう？

こちらは美術館のお客様をサポートするための、インタラクティブな美術館アプリのUIデザインです。利用可能な展示をチェックしたり、展示の詳細な情報について調べたり、見たい展示をすべて通るためのルートを作ることができます。

暗色のUIに浮かびあがる、3Dのグラフィックがとてもおしゃれで印象的です。

3. 美術館のランディングページ

▲Museu Landing Page

こちらの作品はWebユーザー向けに作られた、美術展を宣伝するためのランディングページのUIデザインです。

このUIデザインは「ミニマルな美しさ」にこだわって作られています。スタイル、色、そして動きをとおして、ミニマリズムと実用性のバランスを保った、おしゃれで魅力的なUIデザインです。

背景の暗さが写真により深みを持たせており、アクセントカラーとのコントラストが目をひきます。

4. 自然に関する百科事典アプリ

▲Encyclopedia App

テクノロジーが時代とともに変わっても、人々の知識への渇望は変わりません。

この作品は、インタラクティブなインフォグラフィックを表示する百科事典アプリです。ゾウに関する情報が、黒と黄色のおしゃれなハイコントラストで表示されています。

▲Encyclopedia App

あえて色数を絞り、色合いやサイズを工夫することによって、ビジュアルヒエラルキーをうまく構築しています。

5. 車の情報アプリ

▲Carfinder Web App

こちらは、新車を購入しようとしている人や、車に関する最新の情報を集めたい人にむけたWebアプリ『Carfinder』です。

暗色をベースにしたカラースキームは、車の背景に深みをもたせて、おしゃれな高級さやエレガントさを演出しています。

6. 宇宙に関する百科事典サイト

▲Explore Universe

こちらは、太陽系とその惑星についての情報に特化したインタラクティブな百科事典『Explore Universe』のUIデザインです。

背景の暗色が宇宙というテーマとの視覚的な繋がりをサポートし、スムーズなアニメーションは宇宙空間に飛び込むような感覚をユーザーに与えます。

なお暗色を背景に使う際は、コンテンツの可読性が高くなるように気をつけましょう。

7. 健康的な睡眠のためのモバイルアプリ

▲Slumber App

こちらは、健康的な睡眠のために音楽や瞑想などのコンテンツを提供するモバイルアプリ『Slumber』です。

就寝次に使うアプリのため、明るすぎないよう暗色のカラーイメージ採用されています。グラフィックもまた夜の雰囲気に合った、おしゃれでスタイリッシュなものが使われています。

▲Slumber App

暗色をベースに、写真やタイポグラフィがバランスよく組み合わせられています。「いかに文字を読みやすくするか」という課題はダークカラーの背景につきものですが、この作品ではそれも考慮されています。

8. パン屋さんのWebサイト

▲Vinny’s Bakery Website

こちらは自家製のパンを売っているパン屋さんのネットショップ『Vinny’s Bakery Website』です。

そのデザインから、おしゃれで高級路線なパンを販売していることがわかります。

暗色の背景、ヘッダーの中心に配置されたブランド名、クリアでポジティブな見出し、パンの魅力がしっかりと伝わる画像、購買を促す簡潔な紹介文などが、みごとに調和しています。

9. ToDoリスト管理アプリ

▲Upper App

『Upper』は、モチベーションを高めてくれるシンプルなToDoリストアプリです。

タスクリストのミニマルでエレガントなデザインは、すばやい反応と直感的なナビゲーションをサポートします。

黒、赤、白という大胆な3色に絞ったカラーパレットがおしゃれで魅力的です。

▲Upper App

Upperの特徴はおしゃれさや優雅さだけではありません。

画面上のコンテンツが見やすいというのも注目したい大切なポイントです。

10. 映画予約アプリ

▲Cinema App

このUIは、映画館のモバイルアプリのためにデザインされました。

上のGIF動画では、座席予約のフローが再現されています。特定の映画を選択すると、ユーザーは空席を確認して予約し、アプリから直接支払いができます。

暗色の背景は赤いCTAボタンと相性がよく、映画館にいるような雰囲気も感じさせますね。

11. ブック・スワップアプリ

▲Book Swap App

こちらは、お互いの本を交換しあう「ブック・スワップ」に焦点をあてた、読書家のためのSNSのUIデザインです。

アプリのコンテンツは、本の表紙やユーザーのアバターなど、画像を中心に構成されています。暗色がカラーパレットのベースに採用されており、それらのコンテンツを際立たせているのです。

12. 財務管理アプリ

▲Finance App

こちらは自分の支出や収入を管理できるアプリ『Finance App』です。個人だけでなく、家族や仕事のチームなど、グループでの収支管理もできるのが特徴です。（上のGIF動画ではグループモードが表示されています）

濃い藍色の背景はビジネスらしいシックでおしゃれな雰囲気を演出しているほか、データを際立たせることにも一役買っています。

13. 家計簿アプリ

▲Home Budget App

『Home Budget』も収支管理にフォーカスした家計簿アプリです。ユーザーはシンプルに収支管理できるほか、総合的な収支の統計をチェックできます。

このアプリUIにはダークカラーを背景に使うことで、より重要なインタラクティブゾーンにユーザーの目を向けることに成功しています。

▲Home Budget App

Home Budgetのアプリは通知は、その内容の性質によってカラーを使い分けています。例えば、警告にはオレンジ色、アラームには青色を採用。

ただし、カラーパレットは一貫性を失っていません。それぞれのカラーが背景の濃い青色とマッチしています。

14. 料理レシピアプリ

▲Recipe Network App

『Recipe Network App』は、「素早くかつ簡単に意見交換したい」という料理好きの人のためのSNSアプリです。レシピの共有、チャット、画像のアップロード、お気に入り登録などの機能があります。

暗色の背景に、おいしそうな料理の写真がおしゃれに映えていますね。

15. スマートホームアプリ

▲Homey App

最後にご紹介するのは、スマートホームを管理するためのアプリ「Home App」のUIデザインです。上のGIF動画では、部屋の温度、湿度、エネルギー消費量などの基本的なデータを確認できます。

背景の暗色がデザインをおしゃれにエレガントに見せ、キーカラーとの美しいコントラストを作り出しています。

（原文：Tubik Studio　翻訳：Asuka Nakajima）