はじめに：上手くいくデザインの"進め方”を獲得しよう

「UIデザインって、どういう流れで進めると良いのか分からない」
「何から手をつければいいのか迷ってしまう」
「作ってみたけど、これで良いのか不安になる」

もしかして、こんな悩みをすでに抱えたことがあるかもしれません🤔

UIデザインの初心者が迷ってしまうのには、明確な理由があります。それは、「進め方の型」を知らないまま、闇雲に制作しようとしているからです。

どんなに優れたデザインツールを使えても、どんなに美しいUIの参考を集めても、「どう進めるか」の道筋がなければ、迷いと不安ばかりが大きくなってしまいます。結果として、何度も作り直したり、時間だけがかかってデザインの質が上がらなかったり、「本当にこれでいいのか」という不安が消えないまま進めることになります。

このレッスンは「UIデザインサイクル」というデザインの基本の進め方を獲得することでその現状を変えるのが目的になります👌

デザインの制作には、現場では当たり前にやっている基本となる「進め方の型」があります。

この型を知り、実践することで、迷いが減り、確実にデザイン力が向上していきます。

どういう形で身につけるのか？

このレッスンでは、**1画面のUIを制作する「デザインサイクル」**という、UIデザインの基本的な進め方を身につけていきます。

デザインサイクルとは、以下の4つのステップを回しながら、デザインの質を高めていく制作の進め方です：

1. UIリサーチ：世の中の既存UIを調べて、可能性を広げる
2. ラフ・アイデア：紙とペンで素早くアイデアを形にする
3. 制作：複数のUIパターンを具体的に作る
4. 評価・計画：作ったものを評価し、次に試すべきことを整理する

このサイクルを使うことで、以下のことが可能になります：

• 迷わず進められる：何をすべきかが明確になり、制作の悩みが減ります
• クリエイティブ筋力が育つ：考えてアイデアを形にする力が自然と鍛えられます
• 効率的にレベルアップ：指針に沿って進めることで、確実にデザイン力が高まります

このレッスンで学ぶ「進め方の型」は、あなたが今後UIデザインを進める上での指針となり、何度でも使える財産になります💎

このレッスンでは、ただ理論を学ぶだけでなく、実際に手を動かしながら体験することを重視しています✨

進める流れ

以下のような大きな流れを、レッスンの「クエスト」を進めることで実行していきます。

💪 このレッスンのゴール

このレッスンのゴールは、お題のUIをデザインすること、そしてデザインサイクルという進め方を身につけることの2つです。

単にUIを作って終わりではなく、その過程で「進め方の型」を習得することが最も重要な成果となります。

📖 ステップ1：UIデザインサイクルの全体像を理解する

このクエストです！まずは全体像を把握します。

「デザインサイクル」4つのステップがどのような役割を持ち、どう連携するのか、なぜサイクルで回すのかを理解することで、制作の道筋が見えてきます。

🔍 ステップ2：各ステップの進め方を1つずつ学ぶ

デザインサイクルを構成する4つのステップについて、1つずつ詳しく実践方法を学びます。

各ステップでは、以下の3つのパートで学習を進めます：

• 概要理解：そのステップの目的と進め方を理解する
• 実践動画を見る：実際のお題に対してどう取り組むかを動画で確認し、リアルなイメージを掴む
• お題で実践：学んだ内容を"真似して”、実際にお題で手を動かして実践する

この「理解→見る→実践」のサイクルを4ステップ全てで繰り返すことで、デザインサイクルが自分のものになっていきます🔄

🎯 ステップ3：サイクルを回しながらお題を完成させる

4つのステップを全て学び終えたら、最後は自分でデザインサイクルを回しながらお題のUIを完成させます。

学んだ進め方を使って、リサーチ→ラフアイデア→制作→評価を繰り返しながら、デザインの質を高めていきます。この実践を通して、「次からこの方法で進めればいいんだ」という実感が得られます💡

チェックポイントになる、クエスト全体の流れ

このレッスンは、クエスト形式で構成されています🎮 各クエストを中間ゴールとして、一歩ずつ進めていきましょう。

クエスト1：レッスンとお題を理解する

• レッスン全体の流れを把握する
• 実際に取り組むお題の内容を理解する
• 何のために学ぶのかを明確にする
• 4つのステップ（リサーチ→ラフアイデア→制作→評価）を知る
• なぜサイクルで回すのかを理解する
• デザインサイクル全体の流れを掴む

クエスト2〜5：各ステップを学び、実践する

4つのステップを1つずつ、以下の流れで学びます：

各ステップの学習の流れ

1. 概要を理解する：そのステップの目的と進め方を学ぶ
2. 実践動画を見る：実際のお題への取り組みを動画で確認し、リアルなイメージを掴む
3. お題で実践する：学んだ内容を使って、実際に手を動かす

• クエスト3：UIリサーチを学び、実践する
• クエスト4：ラフ・アイデアを学び、実践する
• クエスト5：制作を学び、実践する
• クエスト6：評価・計画を学び、実践する

クエスト6：お題を完成させる

学んだデザインサイクルを使って、自分でサイクルを回しながらお題のUIを完成させます。

レッスンの特徴

このレッスンには、他の学習方法にはない3つの特徴があります：

🎬 実践動画でリアルなイメージが掴める

ただ見て知るだけではなく、実際にどう取り組むかを動画で確認できます。

各ステップの実践動画では、実際のお題に対してどういう風に進めているのかをリアルに見ることができます。解説だけでは分かりにくい「実際の進め方」が具体的にイメージできるので、自分で実践するときの迷いが大きく減ります。

📐 Figmaのデザインデータで学べる

動画だけでなく、Figmaなどのデザインデータも確認できます。

実際に作られたデザインの中身を見ることで、「どういう構造で作っているのか」「どんな工夫をしているのか」まで理解できます。これにより、さらにリアルなイメージを持つことができます。

💪 実践しながら習得できる

このレッスンの最大の特徴は、実践を通して習得できることです。

各ステップを学んだ後、必ず実際のお題で手を動かします。「理解→見る→実践」のサイクルを回すことで、知識が体に染み込み、自分のスキルとして定着します。

実際に取り組むお題

このレッスンでは、以下のUIをデザインします：

お題：「あとで読む」サービスの保存記事一覧画面（デスクトップ版）

どんな画面か？

ユーザーが「あとで読もう」と保存しておいた記事を一覧で管理し、読みたい記事を素早く見つけて読み始めるための画面です。

ユーザーにとっての「自分だけの情報ライブラリ」として機能し、以下のような使われ方をします：

• 消化モード：隙間時間や週末に、今の気分と持ち時間に合う記事を探して読む
• 整理モード：溜まった記事を整理して、ライブラリを使いやすい状態に保つ

実際のサービスでよく見る機能を持った画面なので、実践的なUIデザイン力が身につきます💪

このレッスンで身につくこと

このレッスンを完了すると、以下のスキルと知識が手に入ります：

✅ 1画面のUIデザインを進める、基本の型

デザインサイクルという「進め方の型」を実践することで、迷わずUIを制作できるようになります。この型は、今後どんなUI制作にも応用できる基礎となります。

✅ クリエイティブ筋力を育てる進め方

ただ手を動かすだけでなく、「考えてアイデアを形にする力」を育てる方法が分かります。この筋力こそが、デザイナーとして成長し続けるための土台です。

✅ 闇雲ではなく、考えながら進めるデザイン

思いつきで作るのではなく、根拠を持ちながら検討して進める習慣が身につきます。「なぜこのデザインにしたのか」を説明できるようになります。

✅ UIの引き出しを増やしながら「ふつう」を知る方法

世の中の「ふつう」のUIパターンを学びながら、自分の引き出しを増やす方法が手に入ります。参考を真似しながら学ぶことで、効率的にスキルアップできます。

UIデザインに「絶対的な正解」はありません。
しかし、基本となる制作の進め方は存在します。

このレッスンを通して、その「進め方の型」を手に入れ、今後のUIデザイン制作に活かしていきましょう。

初心者の方でも大丈夫です😊 クエストを1つずつクリアしていけば、自然とデザインサイクルが身につくように設計されています。焦らず、一歩ずつ進めていきましょう。

それでは、一緒に「上手くいくUIデザインの進め方」を手に入れる旅をスタートしましょう！🚀