誰でも一度は使ったことのあるスマートフォンのアプリ。
しかし、いざアプリのデザインをしてみよう！と思って取りかかってみるものの、どんな風にレイアウトしたらいいのか分からないことだらけです。
今回はスマホアプリのレイアウトについてデザイナー初心者の方向けに解説していきます！
- デザインやレイアウトの基礎を知りたい方
- レイアウトのアイデアを増やしたい方
- デザインのスキルアップをしたい方
- WEBサービスやアプリ開発に携わっている方
- レイアウトの参考サイトを知りたい方
モグモグさん
WEBデザインのレイアウトについてはこちらで解説しているよ！
WEBとモバイルそれぞれの特徴を理解しよう。
アプリのUI/UXの考え方とは
アプリのデザインはWEBとの違いを理解せずに、ただ綺麗なデザインをするだけでは、ユーザーが使いにくい、どう使っていいのか操作が分からない、などのデザインになってしまうことも多々あります。
モグモグさん
そうならないために、アプリを作る前に「UI/UX」というものをしっかりと理解しておく必要があります。
UI/UXとは
デザインをはじめたての方でもよく耳にする「UI/UX」とは一体なんなのでしょうか。
UI：ユーザーインターフェースの略
UX：ユーザーエクスペリエンスの略
UIとは、ユーザーインターフェースの略でスマートフォンの画面に表示される全ての情報がUIと呼ばれています。
例えば、スマートフォンに表示される、ボタンや、フォント、レイアウトのデザインなど全ての情報がUIであり、ユーザーが使いやすい、直感的に操作できるものが良いデザインであるとされています。
一方、UXとはユーザーエクスペリエンスの略で、ユーザーがそのサービスやアプリなどのモノから得られる体験のことを示します。
モグモグさん
より詳しい解説はこちらを参考にしてみてね！
なぜUI/UXが重要なのか
Webサイトは、ユーザーに届けたい情報やユーザーが求めている情報などを提供する「コンテンツ」であるのに対して、スマートフォンのアプリは情報を見る以外にも、「制作・編集・加工」などのさまざまな操作性が求められる、一つの「道具」であるためです。
このことから、WebサイトはUI（見た目、見ただけで情報がわかりやすい等）が重要となりますが、アプリの場合は、UIの他にもUX（操作が使いやすい、便利等）が加わってくるため、UI/UXがより重要とされているのです。
WEBサイトもUXは大切です。
人気のアプリがなぜ多くの人にダウンロードされているのか、を考えてみると、アプリが使いやすかったり、人々の生活を便利にしたりと、UXの面で高く評価されていることが多いのです。
モグモグさん
自分のスマホに入っていて毎日使うアプリはどんなUXが工夫されているのか、考えてみるのはめちゃめちゃ勉強になるのでおすすめ。
使いやすいアプリにするコツとは
ここからは、使いやすいアプリにするコツをご紹介します。
使いやすいアプリにするコツは、「アプリ制作のガイドラインに目を通して理解すること」です。
アプリには使いやすいUI画面にするために「ガイドライン」が定められています。
モグモグさん
例えば、iPhone製品だとApple社、Android製品だとGoogle社から、公式でUI画面のガイドラインが公開されているのです。
ここでは、どんなガイドラインがあるのかをご紹介していきます。
Apple公式iOS Human Interface Guidelines
Appleといえば、iPhoneやiPadなどの数多くのデバイスを販売していますね。
そのAppleから正式にガイドラインが公開されているのをご存知でしたか？
その名も「iOS Human Interface Guidelines」。
このガイドラインでは、iOSデバイスに関してのUI設計の基本事項が記載されています。
iPhone用のアプリを作るとなった時に、このガイドラインを知っていれば、ボタンの大きさやナビゲーションバーなどの細かい要素のサイズまで、悩まずに定義することができるのです。
このガイドラインでは、ユーザーが一番使いやすいとされているUI設計や各要素ごとの最低サイズなどが記載されているので、これを参考にして作れば、ユーザーが使いやすいアプリデザインに近づけることができます。
Apple公式iOS Human Interface Guidelinesはこちら
Material Design
Material designとは、Googleが公式に発表しているガイドラインです。
Material design ガイドラインの目的は、スマートフォンやタブレット以外にも存在するさまざまなデバイスで、ガイドラインによって統一されたデザインを採用することで、操作性も統一されて、デバイスが異なったとしてもユーザーが直感的に使える、使いやすいUIを実現することです。
例えば、ドアノブを何も考えなくても誰もが使い方を知っているように、アプリに対してもUI画面を見ただけで直感で使い方や操作方法が分かるデザインにすることが目的であるとされています。
Webとアプリの違いとは
ここまでアプリ画面について解説してきました。
さて、冒頭でも説明した通り、Webとアプリでは必要とされている要素が異なるため、デザイン面も大きく変化します。
例えば、先ほどご紹介した「アプリガイドライン」のようなものがあるため、Webではデザインが実現できても、アプリでは難しい場合もあります。
では具体的に何が違ってくるのか解説していきます。
Webとアプリとの違いとは
Webとアプリとの違いは、ユーザーが求めているもの（情報）が異なるということが最大の違いです。
冒頭でも解説したように、ユーザーがWebに求めているものは情報などのコンテンツであるのに対して、ユーザーがアプリに求めているものは道具（ツール）としての機能であることが挙げられます。
そのため、Webもアプリも制作する前の設計の段階で考え方が異なってくるため、デザインする側も違ったスキルが必要となってくるのです。
Webとアプリのデザイナーは仕事内容も違ってくる？！
Webとアプリでは制作前の段階で考え方が異なるため、それぞれのデザインスキルも異なります。
実は「Webデザイナー」と「UIデザイナー」として職種が分かれているくらい、業務内容も異なってくるのです。
ここでは、それぞれのデザイン業務で必要なスキルを少し紹介します。
Webデザイナー
業務内容は、主にWebサイトのデザインを行います。会社によってはビジュアルの制作以外にもHTMLやCSSなどのコーディング業務も含める場合もあります。基本的に必要なスキルとしては「Adobe製品のツールを使いこなせる」ということや、「コーディングの基礎知識がある」ということなどが挙げられます。
UIデザイナー
Webサイト以外にもアプリの画面などもデザインする仕事です。ただ綺麗なデザインをするだけではなく、どの要素をどう配置したらユーザーが使いやすいのかを考えてデザインすることが重要となります。
そのため、必要なスキルは「ユーザー視点に立ってWebやアプリを見た時の使い勝手を客観的に分析して改善するスキル」となります。
常に色々なWebサイトやアプリを検証して、どこがどう使いやすいのか言語化して説明できて、それに対してどのような改善が必要なのかまでを考えられるスキルが必要となってきます。
それぞれ向いている人は？
それぞれ向いている人はどんな人なのでしょうか。
Webデザイナー
見た目の部分をデザインすることが好きな人、Webの制作が好きな人、サイトのアニメーションを作ってみたい人
UIデザイナー
アプリが好きな人、機能をデザインしたい人、機能美にこだわりたい人、使いやすいアプリを考えるのが好きな人
これらはあくまで参考程度ですが、当てはまるものがある人は是非チャレンジしてみるのもいいかもしれませんね！
スマホアプリUIに困った時に使えるまとめサイト
Mobbin
Mobbinはサイトがとてもみやすくて使いやすいのが特徴のスマホアプリ画面まとめサイトです。
現在存在しているアプリの画面が一気に確認できます。
1つのアプリに対しての画面がほぼ全てのレベルで集められているので、アプリ作成時には欠かせないサイトです。
Pttrns
Pttrnsは、IOSやAndroidのアプリ画面のスクリーンショットが見放題の便利サイトです。
アプリのカテゴリーやそれぞれの画面に付与されているタグなどの他にも、2012年から今までの年代ごとにも見ることができます。
例えば、年代別で昔のアプリ画面から新たな発見を得ることができるかも？！
Mobile Pattern
こちらのサイトは気になる画面にカーソルを合わせると、操作時の動きが確認できます。
スクリーンショットだけではないので、実際にどんなアニメーションが使われているのか等詳しく確認することができる便利サイトです。
また、アカウント登録して使用すれば、お気に入りの画面をボードに追加しておくことができるので、気になる方は登録してみてはいかがでしょうか。
Dribbble
こちらはアプリ以外にも色々なデザインが見れる、アメリカ初のデザイナー向けSNSツールです。
世界中のデザイナーたちのデザインをここからみることができるだけでなく、もちろんアプリの画面のデザインもたくさん探せるので、どんなアプリ画面にしようか悩んでいる時には必ずチェックしてみましょう！
検索する時には、アプリでどんな画面を作りたいのかを考えてからキーワードを絞り込むといいでしょう。
例えば、管理画面などであれば「dashboard」などで英語検索するとたくさんヒットしますよ！
Behance
BehanceはAdobeツールを使っている人なら知らない人はいない、クリエイター向けSNSです。
こちらも世界中のデザイナーたちの作品をみることができるので、世界でどんなデザインがトレンドなのかなどをチェックするときに便利です！
こちらも英語で検索した方がたくさんの素敵な作品がヒットしますよ！
まとめ
今回はスマホのアプリのレイアウトについてご紹介しましたが、モグモグではWebデザインのレイアウトについての記事もございます。
是非、そちらも一緒にチェックしてみて、アプリとWebとの違いはなんなのか理解を深めてみましょう！
