新人のデザイナーに最初に教えることは何か、と聞かれたら、うちの答えは決まっています。かっこいい配色でも、流行りの角丸でもなく、四角形の分割です。学生時代の僕は、この答えを聞いてがっかりした側でした。もっと魔法のような技術を教わると思っていたからです。でも10年たったいまなら断言できます。アプリの画面がきれいに見えるかどうかの大半は、最初の四角形の切り方で決まっていました。
今日は、アプリUIデザインの基礎の話をしていこうと思います。使うのは、うちが社内研修と社外研修で実際に使っている教科書「2時間でマスター UIデザインの基本」です。スライドの実物を4枚貼りながら進めます。前置きはさておき、本題に入ります。
① アプリUIデザインとは
アプリUIデザインとは、アプリの画面——レイアウト、色、文字、ボタンなどの操作部品——を設計することです。UI（ユーザーインターフェース）は利用者とアプリの接点、UX（ユーザー体験）はその前後を含む体験全体を指します。UXの全体像はUXデザインとは？の記事で書いているので、この記事は画面そのものの設計に絞ります。
先に、この記事の背骨を1行で書いておきます。UIデザインは、美しい絵を描くことではなく、美しくレイアウトすることです。リッチな加工の前に、平面の構成がある。教科書の1ページ目も、そこから始まります。
② 基礎は平面構成｜美しさは比率で決まる
教科書の1枚目のスライドに載っているのは、アプリの画面ではなくモンドリアンの絵です。美しい平面構成は「隣接する区画同士の比率や、要素同士の距離の比率」で決まる——これが基礎の基礎です。
各要素にどんなにリッチなスタイルを当てても、それだけでは美しいデザインは作れません。比率を無視してぼかしやグラデーションを足しても、きれいにならないのです。逆に、スタイルがシンプルな管理画面でも、比率が整っているだけで見違えます。教科書もこの落差を、同じ絵柄の2枚の作例で見せています。新人教育で最初に四角形の分割をやらせるのは、この順番を体に入れるためです。
③ 黄金比より、整数比｜現場の本音
比率と聞くと黄金比を思い浮かべる人が多いのですが、ここは教科書がいちばん率直なページです。
「ぶっちゃけ、世界で活躍するデザイナーは黄金比をほとんど気にしていません」。そもそもスマホやタブレットの画面自体が黄金比ではないからです。代わりに現場で使うのは、もっと地味な道具です。Webのグリッドシステムは縦を12分割したブロックで比率を決めるのが一般的です。うちの現場では1:1、1:2、1:3、2:3のような「単純な整数比」で寸法を決めることが多い。教科書にも、7個の整数比が並んでいるだけです。魔法の比率を探すより、整数比で関係を揃えるほうが、速くて崩れません。
大事なのは、どの比率を使うかより、隣り合う要素との関係で寸法を決めることです。関係を無視して「切りがいいから」と幅を決め打ちする失敗については、UX改善の記事で悪い例の実物を載せています。
④ スタイルは「共通言語」で揃える
平面構成が整ったら、次がスタイル（色・形・質感）です。ここで紹介したいのは、うちの現場の会話です。
「今回は”モニョ”だね」「OK!!」——これで、デザインの方向性の会議が1分で終わることがあります。”モニョ”という一言には、複数のスタイルの決めごとが束で含まれています。背景に有機的な模様を置く。書体はサンセリフで丸めて太め。ボタンは丸みを帯びる。余白は多め。要素の大きさの差は控えめ。
ふざけた符丁に見えて、これは実務の道具です。スタイルの決めごとの束に名前を付けて共通認識にすると、「もう少しポップに」のような曖昧なやりとりが消え、意思疎通のコストが下がります。チームでアプリを作るなら、こういう共通言語を3個ほど持っておくことをお勧めします。
⑤ スマホUIは、ブランドそのものになった
なぜここまで画面の完成度が問われるのかというと、消費行動が変わったからです。教科書はここを1枚の図で説明しています。
サービスが溢れた結果、人は注意を向けた情報を、関心の前に「条件反射でふるいにかける」ようになりました。従来のAIDMA（注意→関心→欲求→記憶→行動）に、F——フィルタリング、つまり「情報の前捌き」——が挟まる。このふるいの一瞬で判断材料になるのが、画面の見た目です。
似たサービスが並ぶ市場では、UIは操作のための道具であることを超えて、審美性やインパクトで選ばれる対象になりました。手元のスマホアプリの画面は、いまや利用者にとってのブランドイメージそのものです。写真の美しさとUIの調和で勝負したサービスも、先進的なUIそのもので存在感を作ったサービスも、この変化の上にいます。
⑥ 設計の手順｜4つの定義で進める
基礎が分かったところで、実際の進め方です。教科書では、UIデザインの工程を4つの定義に分けています。
- 平面構成の比率を定義する。メインのデバイスを決め、画面を2〜3個の大きな四角で分割し、比率を整える。
- オブジェクト／コンテナの配置を定義する。分割した区画の中に、要素の塊を配置する。
- キャラクターラインを描く。画面に個性を与える線や形を決める。
- タイポグラフィーを定義する。書体・サイズ・行間の体系を決める。
順番が大事です。1と2の構造が決まる前に3と4の装飾へ進むと、②で書いたとおり、どれだけ磨いても美しくなりません。
ここで、公式の教科書も2冊挙げておきます。AppleのHuman Interface GuidelinesとGoogleのMaterial Designです。部品の寸法・余白・操作の作法はこの2冊が業界の共通土台なので、迷ったらまず引く。うちの教科書が教えているのは、その手前——公式ガイドラインを引く前に決めておくべき、比率と関係の考え方です。なお、この手前には「何の画面を作るか」を決める工程があります。体験のシナリオから機能を抽出し、画面遷移に落とす部分で、そちらはUXデザインのプロセスの記事の領分です。
⑦ 実在アプリで見る｜再設計の記録
基礎を実在のアプリに当てるとどうなるか。うちのメディアには、大手アプリを実際に再設計してみせた連載（APP Redesignシリーズ・9本）があります。
- JR東日本アプリの再設計 — 体験の流れから画面を組み直した3回連載。
- UNIQLOアプリの再設計 — 画面遷移の関係を再考した回。
- TSUTAYAアプリの再設計 — アプリの存在意義の定義から始めた回。
読み物として面白いのはもちろんです。ただ、この記事の②〜⑥の道具——比率、関係、共通言語、4つの定義——が実物でどう使われるかの記録として読むと、教科書が立体になります。
ただし、再設計は演習です。実案件の実例も置いておきます。衣服のシェアリングサービスcarite（カリテ）では、モックアップを関係者で演じながら反復する検証で画面を作り込みました。自社プロダクトのohbag（オーバッグ）は、訪日客とホテルスタッフという2種類の利用者の画面を1つのサービスで両立させた実物です。教科書の考え方が、実案件でどんな画面に着地するかの参照になります。
⑧ 現場で使うなら、このチェックリスト
アプリの画面を作る・レビューするときの、7個の問いです。
- 画面は2〜3個の大きな四角に分割されているか。
- 隣り合う区画の比率は、整数比で説明できるか。
- 寸法を「切りがいいから」で決め打ちした場所はないか。
- スタイルの決めごとに、チームの共通言語（名前）があるか。
- 装飾より先に、構造（分割と配置）が決まっているか。
- 一瞬のふるい（フィルタリング）に耐える第一印象か。
- 主要な画面を並べたとき、1つのブランドに見えるか。
⑨ 一緒に覚えておきたい概念
アプリUIデザインの前後に置く概念を、4本の記事で示します。「作る前」が2本、「作った後」が1本、「頼む場合」が1本です。
- UXデザインとは — 画面の手前にある体験全体の設計。何をデザインする仕事か
- UXデザインのプロセス — 画面を作る前の工程。工程の実物と、手戻りが起きる場所
- UX改善 — 既にある画面を良くする側の実務。見た目を直す前に、要素の関係を診る
- UI/UXデザイン会社の比較 — 外部に頼む場合。18社を言葉で解析して3つに分けた
よくある質問
Q. アプリUIデザインで最初に学ぶべきことは何ですか？ A. 配色やツールの使い方より先に、平面構成です。画面を大きな四角形に分割し、隣接する区画同士の比率を整える力が、美しさの大半を決めます。うちの新人教育も、そこから始めています。
Q. 黄金比は使ったほうがよいですか？ A. こだわる必要はありません。スマホの画面自体が黄金比ではなく、世界の第一線のデザイナーもほとんど気にしていません。実務では12分割のグリッドや、1:2、2:3のような整数比で関係を揃えるほうが速く、崩れにくいです。
Q. UIデザインとUXデザインの違いは何ですか？ A. UIは画面そのもの（レイアウト・色・操作部品）の設計、UXは画面の前後を含む体験全体の設計です。UIデザインの完成度を上げる前に、何の画面を作るべきかを決めるUX側の工程があります。
Q. デザインツールは何を使えばよいですか？ A. 現在の実務の標準はFigmaです。ただしツールの習熟より、この記事の②〜⑥（比率・関係・共通言語・4つの定義）のほうが先です。ツールは道具で、構成する力は腕なので、腕はツールを乗り換えても残ります。
Q. Human Interface GuidelinesやMaterial Designとの関係は？ A. AppleとGoogleの公式ガイドラインは、部品の寸法・余白・操作の作法の共通土台です。この記事の内容はその手前にあり、公式ガイドラインを引く前に決めるべき、平面構成の比率と要素の関係の考え方を扱っています。両方使うのが実務です。
Q. アプリUIデザインの勉強は何から始めればよいですか？ A. 四角形の分割から始めるのがお勧めです。好きなアプリの画面をスクリーンショットして、大きな四角に分割し、隣り合う区画の比率を測ってみる。10枚も分析すると、きれいな画面の共通項が体で分かってきます。
Q. スマホとタブレットでデザインは変えるべきですか？ A. 平面構成の起点となる画面の縦横比が違うので、レイアウトは変わります。教科書でも最初の工程は「メインのデバイスを決める」ことです。主要な利用場面のデバイスを1つ決めて構成を作り、他のサイズはそこから調整します。
Q. デザインの引き出しはどう増やせばよいですか？ A. 良いアプリを「言葉」で保存するのがお勧めです。見た目のスクリーンショットだけでなく、背景・書体・形・余白・ジャンプ率がどうなっているかを言語化してストックする。チームの共通言語（この記事の”モニョ”のような）は、その積み重ねから生まれます。
この記事を書いた会社について
アルチェコ（ARCHECO）は、UXデザイン・AI開発・新規事業開発を組み合わせた事業共創スタジオです。この記事のスライドは、社内研修・社外研修で実際に使っている教科書「2時間でマスター UIデザインの基本」の実物です。アプリの画面設計からの伴走は、UX/UIデザインのサービスページをご覧ください。
余談ですが、がっかりした学生時代の僕に会えるなら、こう言いたいです。魔法はあった。ただし呪文ではなく、四角形の切り方だった、と。
以上です。
ArchecoOfficial
アプリ戦略大学
Yutaro
