UIが上手くなる人の“デザインサイクル” ─ 入門編β
0%
1
UIデザインサイクル習得の旅をはじめよう🚢2
視野を広く持つための「UIリサーチ」4
試すものを整理する「アイデア整理」5
アイデアを実験する「プロトタイピング」6
デザインを良くするための「評価・計画」7
挑戦：お題のデザインを完成させようUIが上手くなる人の“デザインサイクル” ─ 入門編β
デザインサイクルを身につけるメリットとは？
レッスン全体の構成とゴール
「UIデザインって、どういう流れで進めると良いのか分からない」
「何から手をつければいいのか迷ってしまう」
「作ってみたけど、これで良いのか不安になる」
もしかして、こんな悩みをすでに抱えたことがあるかもしれません🤔
UIデザインの初心者が迷ってしまうのには、明確な理由があります。それは、「進め方の型」を知らないまま、闇雲に制作しようとしているからです。
どんなに優れたデザインツールを使えても、どんなに美しいUIの参考を集めても、「どう進めるか」の道筋がなければ、迷いと不安ばかりが大きくなってしまいます。結果として、何度も作り直したり、時間だけがかかってデザインの質が上がらなかったり、「本当にこれでいいのか」という不安が消えないまま進めることになります。
このレッスンは「UIデザインサイクル」というデザインの基本の進め方を獲得することでその現状を変えるのが目的になります👌
デザインの制作には、現場では当たり前にやっている基本となる「進め方の型」があります。
この型を知り、実践することで、迷いが減り、確実にデザイン力が向上していきます。
このレッスンでは、**1画面のUIを制作する「デザインサイクル」**という、UIデザインの基本的な進め方を身につけていきます。
デザインサイクルとは、以下の4つのステップを回しながら、デザインの質を高めていく制作の進め方です：
このサイクルを使うことで、以下のことが可能になります：
このレッスンで学ぶ「進め方の型」は、あなたが今後UIデザインを進める上での指針となり、何度でも使える財産になります💎
このレッスンでは、ただ理論を学ぶだけでなく、実際に手を動かしながら体験することを重視しています✨
以下のような大きな流れを、レッスンの「クエスト」を進めることで実行していきます。
このレッスンのゴールは、お題のUIをデザインすること、そしてデザインサイクルという進め方を身につけることの2つです。
単にUIを作って終わりではなく、その過程で「進め方の型」を習得することが最も重要な成果となります。
このクエストです！まずは全体像を把握します。
「デザインサイクル」4つのステップがどのような役割を持ち、どう連携するのか、なぜサイクルで回すのかを理解することで、制作の道筋が見えてきます。
デザインサイクルを構成する4つのステップについて、1つずつ詳しく実践方法を学びます。
各ステップでは、以下の3つのパートで学習を進めます：
この「理解→見る→実践」のサイクルを4ステップ全てで繰り返すことで、デザインサイクルが自分のものになっていきます🔄
4つのステップを全て学び終えたら、最後は自分でデザインサイクルを回しながらお題のUIを完成させます。
学んだ進め方を使って、リサーチ→ラフアイデア→制作→評価を繰り返しながら、デザインの質を高めていきます。この実践を通して、「次からこの方法で進めればいいんだ」という実感が得られます💡
このレッスンは、クエスト形式で構成されています🎮 各クエストを中間ゴールとして、一歩ずつ進めていきましょう。
4つのステップを1つずつ、以下の流れで学びます：
各ステップの学習の流れ
学んだデザインサイクルを使って、自分でサイクルを回しながらお題のUIを完成させます。
このレッスンには、他の学習方法にはない3つの特徴があります：
ただ見て知るだけではなく、実際にどう取り組むかを動画で確認できます。
各ステップの実践動画では、実際のお題に対してどういう風に進めているのかをリアルに見ることができます。解説だけでは分かりにくい「実際の進め方」が具体的にイメージできるので、自分で実践するときの迷いが大きく減ります。
動画だけでなく、Figmaなどのデザインデータも確認できます。
実際に作られたデザインの中身を見ることで、「どういう構造で作っているのか」「どんな工夫をしているのか」まで理解できます。これにより、さらにリアルなイメージを持つことができます。
このレッスンの最大の特徴は、実践を通して習得できることです。
各ステップを学んだ後、必ず実際のお題で手を動かします。「理解→見る→実践」のサイクルを回すことで、知識が体に染み込み、自分のスキルとして定着します。
このレッスンでは、以下のUIをデザインします：
お題：「あとで読む」サービスの保存記事一覧画面（デスクトップ版）
ユーザーが「あとで読もう」と保存しておいた記事を一覧で管理し、読みたい記事を素早く見つけて読み始めるための画面です。
ユーザーにとっての「自分だけの情報ライブラリ」として機能し、以下のような使われ方をします：
実際のサービスでよく見る機能を持った画面なので、実践的なUIデザイン力が身につきます💪
このレッスンを完了すると、以下のスキルと知識が手に入ります：
デザインサイクルという「進め方の型」を実践することで、迷わずUIを制作できるようになります。この型は、今後どんなUI制作にも応用できる基礎となります。
ただ手を動かすだけでなく、「考えてアイデアを形にする力」を育てる方法が分かります。この筋力こそが、デザイナーとして成長し続けるための土台です。
思いつきで作るのではなく、根拠を持ちながら検討して進める習慣が身につきます。「なぜこのデザインにしたのか」を説明できるようになります。
世の中の「ふつう」のUIパターンを学びながら、自分の引き出しを増やす方法が手に入ります。参考を真似しながら学ぶことで、効率的にスキルアップできます。
UIデザインに「絶対的な正解」はありません。
しかし、基本となる制作の進め方は存在します。
このレッスンを通して、その「進め方の型」を手に入れ、今後のUIデザイン制作に活かしていきましょう。
初心者の方でも大丈夫です😊 クエストを1つずつクリアしていけば、自然とデザインサイクルが身につくように設計されています。焦らず、一歩ずつ進めていきましょう。
それでは、一緒に「上手くいくUIデザインの進め方」を手に入れる旅をスタートしましょう！🚀