魅力的なイラストを活用したアプリのUIデザイン7選

Matthieu Aussaguel

UpLabs創設者。MaterialPaletteとWOW.js.のクリエイター。

この記事はuplabsからの翻訳転載です。配信元または著者の許可を得て配信しています。

Following Apple’s Design Dogma With Stunning Illustrations

Appleは完璧を追い求めることで有名であり、それは 私たちがUpLabsで称賛しているところでもあります。

Appleはとりわけインターフェイスに関しては常に境界線を押しひろげ、 他社にとっては高いハードルを作りあげてきました。彼らはスキューモーフィズムを世の中に広めた企業であり、彼らの方針にコミュニティ全体を従わせたのです。 フラットスタイルの時代となった今もなお、彼らはなんとか自分たちに忠実であり続けようとし、崇高なピクセルパーフェクトなデザインを生み出すための製作者を奨励していました。

より現実的なモチーフのマテリアルデザインなどに比べ、半現実的なディテールのコンセプトは、明快さやエレガントさにおいて劣りますが、芸術的な美学を保つことはできます。 美しいグラデーションや、表現豊かなタイポグラフィ、想像性豊かなアニメーション、滑らかなグラフィック、そして豊富なドローイング を使うことで、 彼らの高い基準を満たしているのです。

今回私たちは、卓越したイラストによって、Appleのデザイン思想を受け継いでいる、優れたUIをいくつか集めました。 

編注:これらのUIはUpLabsが運営するiOSUpで展示されているインスピレーションや販売のためのデザイン案やモックです

1. TaskManagerUI

作者:Daniel Klopper

インターフェイス全体に美しいテーマが行き渡っています。トレンドのパープルトーンを基調とした見事なグラデーションが、前面にある全ての要素を強調し、美しく見せているのと同時に、際立った雰囲気を確立しています。

Klopper氏は全てのディテールに関して、極めて細いところまで注意を払いました。標準の丸い点とボタンが全体にうまく溶け込み、簡潔にヘッダーのイラストと連携していることに気づきます。後者にはもっと注目すべきです。小さな絵ですが、画面構成されるはじめの数秒から目を引くようなデザインになっています。

さらに重要なポイントとして、左上のオリジナルのハンバーガーメニューボタンのような小さな機能や、 半透明のパネル、そしてゴーストボタンが、洗練されたデザインセンスをいっそう強調しています。

日常のタスクを扱うアプリなので、もっとビジネスライクなトーンへと持っていくべきですが、予期せぬ可愛らしいデザインは驚きと、心に残る感銘を残します。

1*uQ8qa-TGt8_7A9RxUtFy1A 

2. Onboarding

作者:Kiran

Kiran氏はイラストだけでメッセージが伝わるように工夫をしており、鮮やかで細かく動くベクターイラストを中心としたUIにしています。 アプリを特徴づけている各機能について巧みに描き、かつ微妙な強弱もつけています。これらはどれもデザインの価値を高める、重要な原動力となっています。

動きは一見派手にも見えますが、ユーザーを極度に圧倒すること無く、スクリーンが散乱して見えないようにしました。Kiran氏は、多くの空白スペースとモノトーンのキャンバスをとり入れることで、明瞭なビジュアルを作り出しています。コンテンツは下にきれいに並べられ、領域のわずか3分の1を占めているだけです。

平凡なレイアウトと地味な装飾使いではありますが、イラストが全体をクリエイティブで鮮やかなものにしています。

1-Q7PVzcPVI-MEzItAlDmYTw

3. Walkthrough Animations

作者:Darkfejzr

上の例にとても似ているのですが、ダイナミックなイラストを通して彼のコンセプトを明確に示されており、彼のアイデアを完全に反映しています。

Earth illustration, by Darkfejzr

生き生きとしたイラストレーションが画面の中心を占めますが、その位置だけではなく、それ以外のビジュアルと比較しても、イラストはかなり目立ったインパクトのあるものとなっています。それぞれしっかりと各コピーと連動し、素晴らしい体験を作り出しています。ここではパープルが大半を占めていますが、コンテンツを表示している明るいわずかな黄色と白が相まって、UIをうまく両立させています。

このアプリも、宅配という真面目で退屈なタスクを行うものですが、退屈さと堅苦しさとはほど遠いキャッチーで愉快なイラストレーションが、よりカジュアルなトーンで親しみやすい雰囲気にしています。

1--TwjrGk5v7VtPufohFlstA

4. Diaryibadah Guide Screen

作者:Faiz Al-Qurni氏

Faiz Al-Qurni氏はイラスト、ホワイトスペース、そして標準のサンセリフ書体を使い、シンプルでエレガントなUIによってアプリ全体としてきれいに整頓された印象を生み出しています。

どこを見ればいいかも明確で、小さいイラストに常に目がいきます。洗練されていてもなお、シンプルで理解しやすいのです。アプリ全体の方針と一致しており、役割を完璧にこなしています。イラストが各テキストを補足するビジュアルとして使われ、コンセプトに対する認識を与え、UXを強化するものとなっています。

つまり、テキストがなくても、3つのスクリーンと3つの華やかなイラストで、ユーザーを誘導することができるということなのです。

Diaryibadah Guide screen By Faiz Al-Qurni

編注:イスラム圏の礼拝スケジュールアプリのようです

5. Onboarding Illustrations

作者:Ramotion

Remotion氏は、テキストを一個一個強調することが、ユーザーを飽きさせてしまうと考えました。 

上記の例に挙げられたいくつかと同じパターン(きれいな白い背景と贅沢な要素の配置)に従ってデザインが構築されていますが、色鮮やかでリッチ色使いなイラストレーションを採用していません。

リッチでカラフルなイラストはこの場合不適切な期待感を煽ってしまうと考え、よりフォーマルで落ち着いた印象のビジュアルでプロジェクトのトーンと合わせています。上品なパステルカラーであれば、より注目して欲しいタイトルキャッチからユーザーの注意をそらすことはありません。イラストとホワイトスペースの最適なバランスが、雰囲気を高めて調和をもたらすのです。

これは、コンテンツに高い優先度を与えるために控えめでありながらも、メッセージを明確で簡潔に伝えるイラストレーションとなっています。

Onboarding Illustrations By Ramotion

6. Snapster Welcome Screen

作者:Pavel Shumakov

Pavel Shumakov氏は、チュートリアルのプロセスに躍動感をもたらしました。集中力を維持させるために訪問者の視線を一つのスライドから次のスライドへ優しく導いていきます。このコンセプトはイラストレーションに強く依存しており、カートゥーン(マンガ)にインスパイアされ作られたものです。これによって、インターフェイスにもっと親近感を与え、友好的で楽しいものと感じるのです。

そのフラットなスタイルはなおさら、見る人に関心を持たせるものとなっています。魅力的なだけではなく、美しいカラーリングとエレガントなフォントファミリーの組み合わせが、コンテンツ活気づけ、Call to Action(この場合ボタンのこと)の視覚的なアピールや調和を促します。

ビジュアルは力強く、大胆な個性を発揮していてもなお、ユーザーは必要な情報を全て受け取ることができます。

1-i6zlfrc-I9YaxZ3yXbOreA

7. Compass UI and iPhone Wallpapers

作者:Rahul Bhadauria

Rahul Bhadauria氏は、デザインに独創性を出そうとアーティスティックなアプローチを狙っています。上述のものとは違い、この例は、魅力的で目を楽しませてくれるイラストであふれたデザインが特徴的です。 

このアプリは主に方向を指示するだけのコンパスアプリなので、特に他のコンテンツはありません。方向を示す矢印とダイヤルの傾きで十分事足りるのです。

ですが、単に実用的で面白味のないものということではありません、Rahul氏は、技術的に本物のデバイスを真似て、新しい命を吹きこんだのです。背景に広がる美しいベクターのランドスケープは見た目を多様化して、アクセントを加えました。磁気を帯びたポインターも驚くべき要素であり、フラットな見た目はさておき、生きているかのように空中を動き回ります。 

イラストのおかげで、平凡なガジェットが一作品へと変化を遂げたのです。

Compass UI and iphone wallpapers By Rahul Bhadauria

・・・

私たちはイラストがゲームやその他の類似アプリで使われるようなものだと思い込んでいました。ですがこれらのコンセプトによって、たとえプロジェクトがより実用的なものだとしても、イラストは有用だということが実証されたと思います。イラストはデザインにエキゾチックで鮮やかな印象を与えるのです。


イベント