初心者が参考にするべきアプリデザイン参考サイト10選

スマートフォンアプリやウェブサイトの優位性を伝えるためには、ユーザーインターフェイス(以後“UI”と略称)やユーザーエクスペリエンス(以後“UX”と略称)を考慮して、ユーザーの直感的な体験を促すのが効果的です。WEBデザイナーを目指す人にお勧めのツールや参考にすべきサイトについて紹介していきます。

アプリデザインのツール

Sketch

SketchがUIデザイン分野のパラダイムシフトとなりました。UIとは、WEBサイトやアプリのユーザーが使う側の面を指します。WEBデザイン、UIデザインに特化し、余計な機能を省いたUIデザインツールです。インターフェイスがとてもシンプルで直感的なのが特徴です。Sketchの特徴は以下の通りです。

Sketchの公式サイトはこちら

アートボード
Sketchのアートボードは「Webやアプリの複数画面を管理する」目的で設計されています。そのためUIデザインに適した画面管理が可能です。また、ベクターデータを採用しているため、異なる解像度のデータを拡大・縮小しても劣化しません。

コンポーネント(構成要素)の共通化
デザインごとの塗りや書体を「スタイル」として保存することで、複数要素に対して一括反映することが可能です。「ライブラリ」機能を使って、ファイル跨ぎでコンポーネントを共通化することも可能なため、一覧性と編集性に優れています。

豊富なプラグイン
Sketchはオープンなツールで、様々な開発者のプラグイン(外部ツール)と連携できます。制作者の作りたいデザインに見合ったプラグインを組み合わせることで、ユニークな開発環境をつくることができます。

特徴的なライセンス形態
Sketchはアップデートライセンス購入型で、1年ごとに最新版のライセンスへ更新したい場合に限り、アップデート版を追加購入するタイプです。

Adobe XD

Sketchに続き、AdobeもUIデザインツールをリリースしました。Windows、Mac、iOS、Androidをはじめ様々なプラットフォーム上でデザインの共有ができます。

Adobe XDの公式サイトはこちら

動作が軽快
Adobe XDは動作が軽快なところが魅力とされています。数十から数百のアートボードを開いても比較的スムーズに作動します。主要なUIデザインツールを比較してベンチマークしたところ「最も動作が軽快」との声が多かったのがAdobe XDです。

プロトタイピング機能
デザインとプロトタイピング(試作版)をアプリ間の切り替えなしで確認でき、画面遷移の繋ぎ目のアニメーションを付加できるなど、臨場感のある制作ができます。

従来のデザインツールを継承
Adobe CC(Creative Cloud)とバンドルで購入すれば、お馴染みのPhotoshop、Illustratorの要素を利用できます。また、Photoshop、Illustratorショートカットキーに対応しているため、Adobe経験者には作業効率を上げやすいと言えるでしょう。

STUDIO

「アイデアを誰でもカタチに」というコンセプトを持っています。デザイナーだけではなく、ディレクターやエンジニアでも、直感的な操作でUIデザインができるサービスとして注目されております。

STUDIOの公式サイトはこちら

フレキシブルデザイン
STUDIOの特徴にフレキシブルデザインがあります。画像をドラッグによりデザインのサイズを変更し、端末ごとの画面に最適化できる機能です。

データ組み込み型のデザイン
デザインにデータとして組み込むことができるため、デザインの中でテキストや画像データを作成する手間が省けます。

ライブプレビュー
制作過程のプレビューをスマートフォン端末からライブプレビューすることができます。他のデザインツールでもライブプレビュー機能を利用できますが、STUDIOはQRコードでパソコンとスマートフォンを連携することができます。

参考にするべきアプリデザイン参考UIサイト10選

Pttrns

動画やSNSのUIパターンが多く、サンプルデザインにカーソルを合わせるだけで検索タイプの種別がわかるのが特徴です。iPhone、iPad、Androidの3種類のデバイスのデザインが用意されており、ウェアラブルデバイスのデザインも参考にすることができます。

Pttrnsの公式サイトはこちら

Mobile Design Inspiration

動きのある斬新なデザインが多数掲載されているのが特徴です。「ロゴ・デザイン」や「コンピューター・グラフィックス」といった珍しいカテゴリがあります。iPhone、iPad、Android、Apple Watchの4種類のデバイスのデザインが用意されてます。

Mobile Design Inspirationの公式サイトはこちら

MOBILE PATTERNS

ソーシャルサービス向けのUIデザインが多数掲載されており、iPhone向けのデザインが多いのが特徴です。iPhone、Androidの2種類のデバイスのデザインが用意されております。

MOBILE PATTERNSの公式サイトはこちら

Inspired UI

直感的なUIデザインが多く、写真やイラストを背景にしたデザインを多数掲載してます。iPhone、iPad、Androidの3種類のデバイスのデザインが用意されております。気になったデザインは、Pinterestに保存することができます。

Inspired UIの公式サイトはこちら

APP DESIGN SERVED

APP SEDIGN SERVEDは、Adobeが所有するBehanceで見つけることができます。コンセプトデザインが多数用意されており、ライブ配信をおこなっているのが大きな特徴です。また、UI/UXの他に、ロゴデザインやモーショングラフィックも探すことができます。

APP DESIGN SERVEDはBehanceから

lovely ui

スマートフォン向けのUIに特化したWebギャラリーサイトです。シンプルなUIのサンプルを取り揃えています。日本製のWEBデザインも掲載されています。ボタンやフィード、ナビゲーションなどの要素ごとにデザインを見ることができます。iPhone、iPad、Androidの3種類のデバイスのデザインが用意されています。

lovely ui の公式サイトはこちら

CAPPTIVATE.co

iPhoneアプリのアニメーションに特化したギャラリーサイトです。実際のデバイス画面のアプリと同等のサイズでアニメーションを見ることができます。

ギャラリーを見るには、GitHubを登録してからCAPPTIVATE.coのページを見る必要があります。

MOBILE MOZAIC

海外のアプリデザインのギャラリーサイトです。UIデザインの画面遷移を横スクロールで見られるのが特徴です。「ビジネス」や「ライフスタイル」といったカテゴリや「ユーザープロファイル」や「タイムライン」といったUIパターン別にデザインを見ることができます。

MOBILE MOZAICの公式サイトはこちら

Dribble

デザイナー向けの招待制SNSサイトです。作品を見てコメントを投稿することや、デザイナーに仕事を依頼することができるため、クオリティーの高い作品を参考にすることができます。作品を閲覧するだけなら無料ですが、自身が作品を投稿するには、Dribbleで作品を公開しているデザイナーからの招待が必要となります。

Dribbleの公式サイトはこちら

おすすめの本3選

誰のためのデザイン? 増補・改訂版 -認知科学者のデザイン原論

認知科学の視点で「人間を題材とした場合のデザインの原則」について書かれてます。人が日常的に使うモノはインタラクティブ(双方向性)の性質を持っており、この概念はUIデザインに応用できると説いています。デザイナーのみならず、デザイン思考に触れたいと思う方にもお勧めできます。
誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

続・インターフェースデザインの心理学 -ウェブやアプリに新たな視点をもたらす+100の指針

「画面上の情報を読むのと本を読むのとでは読み方が違う」「中心視の対象は周辺視野が決めている」「視力のない人は舌にカメラを接続すれば見える」など、驚くべき100の指針を提言しています。人間の無意識のメカニズムを学ぶことで、ユーザー心理や行動の引き出しかたを理解することができます。デザインの創造性を高めるきっかけになる名著です。
続・インタフェースデザインの心理学 ─ウェブやアプリに新たな視点をもたらす+100の指針

iPhoneアプリ設計の極意 -思わずタップしたくなるアプリのデザイン

優れたインターフェースデザインの原理原則と多数の事例を紹介しております。Facebook、USA Todayなどのケースをもとに「思わずアプリをタップしたくなる心理の背景には、文化・人間工学・ユーザビリティが密接に関係している。」ということを学習することができます。iPhoneのUI設計の勘所を理解するための必読書と言えるのではないでしょうか。

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

まとめ

参考にすべきアプリデザインについてご理解いただけましたでしょうか。ユーザーの心理をついた直感的なデザインは印象に残りやすく「ユーザーの再訪」や「購買意欲アップ」の効果をもたらします。この機会にUIデザインについて学んでみてはいかがでしょうか。

関連記事

ページ上部へ戻る