はじめてのUIデザイン
ツール

はじめてのUIデザイン

UI/UXデザインの基礎概念を学びながら、メッセンジャーアプリをデザインします
完了目安
2週間
1日2-3時間を継続して行えた時の目安の計算をしています。自分で目標を立てて取り組みましょう
概要
進め方
概要
進め方
専用チャンネルで質問や交流しよう
同じレベルの人と交流したり、進捗共有しよう
コミュニティへ
PURPOSE OF SERIES
なんで作ったの?🤔

連絡帳アプリをデザインしながら、UI/UXデザインの基礎概念を身につけて、スキルを上げていく土台を作ろう

UIの基本構造を学びながら、メッセンジャーアプリをデザインしますこのシリーズではUIパーツの構成や情報配置の考え方、ナビゲーションなどUIデザインをする上でよく出てくる概念を初心者向けに学べるコンテンツです。ただ座学するのではなく普通の連絡帳アプリをデザインしながら基本的な概念を理解していくことができます。

専門的にUI/UXの概念について学ぶ前に簡単に知ることで、どういう考えやアイデアでデザインをしていかねばならないのかを身につけましょう。

PURPOSE OF SERIES

何をデザインできるの?💪

ナビゲーションの基本

UIで重要な要素の1つであるナビゲーション、階層関係についての基本概念をお伝えします。
ナビゲーションの基本

UIの情報構造の基本

UIは全て操作性を担保してレイアウトや表示する情報が組まれています。それを実感するために構造を解説しながらデザインします。
UIの情報構造の基本

UI/UXデザイナーの仕事について

シリーズではただデザインするだけでなくUI/UXデザイナーの仕事についても触れ、なぜ紹介している基礎概念理解が必要かを伝えます
UI/UXデザイナーの仕事について

メッセンジャー会話UIの基本

オーソドックスなメッセンジャーUIがなぜこの形になっているか?(例:相手と自分の発言の見た目が違う理由)をデザインしながら学んでいきます。
メッセンジャー会話UIの基本
1on1
シリーズ完走で面談しよう🔮

学びをアウトプットして
カイクンとデザイン面談しよう

シリーズを7割以上終了したアウトプットをフォームから投稿すると、30分カイクンとデザイン面談ができます。
アウトプットのフィードバックや、理解の相談、今後の学習の進め方など内容はメンバーが自由に決めてOKです💡
シリーズに関係ない内容でも大丈夫です。

詳細と応募フォームはこちら
CONTENTS
さあ始めよう!👌
成長率10倍でUIデザインを身につける初級チュートリアル

📜目次
-----------------------------------------------

00:36 シリーズの内容
00:57 上達に必要なこと-なぜ作った?
03:14 やるメリット3つ
06:11 シリーズの目次07:17 必要なもの

📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------

https://figma.fun/zhS3wQ

📜Figmaの使い方が学べるシリーズはこちら
-----------------------------------------------

https://youtu.be/htmjI2wpfjY

09:42
無料
メンバー限定

成長率10倍でUIデザインを身につける初級チュートリアル

2.ヘッダーUIをデザインしよう

UIデザインをはじめたいデザイナーになりたい人、Webデザイナー、エンジニアなどの方向けに、ソフトウェアデザインの基本を”メッセンジャーアプリ”を作りながら学べるデザインチュートリアルシリーズ。
2回目はヘッダーをデザインします。

📜目次
-----------------------------------------------

00:04 この動画の内容と手順
03:39 ツールバーの配置
04:52 ヘッダー
09:49 検索

📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------

https://figma.fun/zhS3wQ


14:45
無料
メンバー限定

2.ヘッダーUIをデザインしよう

メッセージリストUIをデザイン【余白のサイズはルールで決める】

UIデザインをはじめたいデザイナーになりたい人、Webデザイナー、エンジニアなどの方向けに、ソフトウェアデザインの基本を”メッセンジャーアプリ”を作りながら学べるデザインチュートリアルシリーズ。
3回目はメッセージリストをデザインします。

📜目次
-----------------------------------------------

00:52 動画の内容
01:50 アイコンを配置
03:40 テキストエリア
05:44 補足エリア

📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------

https://figma.fun/zhS3wQ


10:49
無料
メンバー限定

メッセージリストUIをデザイン【余白のサイズはルールで決める】

4.UIデザインの超基本の構成を解説【デザイナーにはこう見えてます】

UIデザインをはじめたいデザイナーになりたい人、Webデザイナー、エンジニアなどの方向けに、ソフトウェアデザインの基本を”メッセンジャーアプリ”を作りながら学べるデザインチュートリアルシリーズ。
4回目は2~3で作成したUIを解説します。

📜目次
-----------------------------------------------

00:08 動画の内容
01:05 UIの基本構成
01:34 ナビゲーションとは
03:48 コンテンツエリア
05:28 【超重要】UIはオブジェクトが中心
07:58 各UIパーツを解説します

📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------

https://figma.fun/zhS3wQ

13:53
無料
メンバー限定

4.UIデザインの超基本の構成を解説【デザイナーにはこう見えてます】

5.チャットUIをデザインしよう【人の目線は右と左どちらから始まる?】

動画で使っている素材は概要欄に。LINEで馴染みのあるチャットUIをデザインしましょう。
かなり基本的でほぼ全てのサービスで同じUIが採用されています。
この機会にデザインして基本を身につけましょう〜!

📜目次
----------------------------------------------

00:06  動画の内容
00:40  この動画で学べること
01:17  作るUIと手順
02:14  ナビゲーション
07:09  ボトムナビ
11:37  メッセージやりとりUI
22:29  キーボード立ち上げUI

📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------

https://figma.fun/zhS3wQ

26:38
無料
メンバー限定

5.チャットUIをデザインしよう【人の目線は右と左どちらから始まる?】

デザインしたチャットUIを解説【なぜチャットの色は1色じゃないのか?】

UIデザインをはじめたいデザイナーになりたい人、Webデザイナー、エンジニアなどの方向けに、ソフトウェアデザインの基本を”メッセンジャーアプリ”を作りながら学べるデザインチュートリアルシリーズ。


📜目次
-----------------------------------------------

00:00  この動画の内容
00:56  ①ナビゲーション
04:20  ②メッセージ
07:33  ③補足

📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------

https://figma.fun/aplvte

10:08
無料
メンバー限定

デザインしたチャットUIを解説【なぜチャットの色は1色じゃないのか?】

ボトムナビゲーションをデザインしよう【アイコンは正方形で配置】

スマホのUIでよく出てくるボトムナビゲーションをデザインします。

📜目次
-----------------------------------------------

00:00  動画の内容
00:43  作るUIと手順
02:17  1.UIキットを設置/改修
05:33  2.アイコンを調整

■動画で使っているもの
----------------------------------------------

・動画したものが見れるFigmaのURL
https://figma.fun/xROi8C

11:45
無料
メンバー限定

ボトムナビゲーションをデザインしよう【アイコンは正方形で配置】

ページ同士の関係性とボトムナビのデザインを解説【ページ間の移動考えたことありますか?】

スマホのUIでよく出てくるボトムナビゲーションをデザインします。ボトムナビゲーションは「ユーザーが想起する最上位の概念」が配置されます。
平たくいうと捜査の出発点になるページを割り当てます。
これはWebデザインでいう”グローバルナビゲーション”とほぼ同じ位置づけになります。

📜目次
-----------------------------------------------

00:00   動画で解説すること
00:30   ①ボトムナビについて
04:02   ②階層と平行の構造

■動画で使っているもの
----------------------------------------------

・動画したものが見れるFigmaのURL
https://figma.fun/6ax8g4

09:37
無料
メンバー限定

ページ同士の関係性とボトムナビのデザインを解説【ページ間の移動考えたことありますか?】

UIデザイン、仕事ではどんな流れでやるの?をお伝えします

□ 目次
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

00:11   イントロ
01:40   Q.デザインしたものが”人が使う”状態になるまでの流れは?
04:17   Q.今回デザインしてる内容って実際のお仕事だとどういうタイミングなの?
06:59   Q.どういう風にお仕事って来るの?
10:11   Q.1日のお仕事のイメージってどんな感じなの?

14:25
無料
メンバー限定

UIデザイン、仕事ではどんな流れでやるの?をお伝えします

お題 連絡先一覧のUIをデザインしよう

今まで学んだことを生かしてお題にトライしてみましょう!
自分でデザインするのが1番成長します。

▼ BONOのコンテンツを紹介

1.ゼロからUIを作成,参考デザインと解説でビジュアルスキルを伸ばすシリーズ

DailyUI SNSアプリをデザインする
www.bo-no.design/series/dailyui-part01

2.なぜそのUIなのか?導き出すプロセスを解説するシリーズ

UIデザインの基本

www.bo-no.design/series/uidesignflow

3.ゼロからサービスを設計するシリーズ

www.bo-no.design/series/ux-biginner

09:18
無料
メンバー限定

お題 連絡先一覧のUIをデザインしよう

お題を解説!

□ 目次
-------------------------

02:40  この動画で学べること
03:25  アクション導線とナビゲーション
07:31  階層関係ではない編集ページ
10:20  作成したUIの解説

勉強のシェアは "BONO_UI"で

▼ BONOのコンテンツを紹介

1.ゼロからUIを作成,参考デザインと解説でビジュアルスキルを伸ばすシリーズ

DailyUI SNSアプリをデザインする
www.bo-no.design/series/dailyui-part01

2.なぜそのUIなのか?導き出すプロセスを解説するシリーズ

UIデザインの基本

www.bo-no.design/series/uidesignflow

3.ゼロからサービスを設計するシリーズ

www.bo-no.design/series/ux-biginner

15:54
無料
メンバー限定

お題を解説!

ABOUT
シリーズについて💡

概要

iOSの連絡帳アプリをUIトレースしながらUI/UXデザインを行う上での基礎概念に触れるシリーズです。具体的にはユーザーが意図したページに移動できるための「ナビゲーション」「ページ階層/構造」の知識や、情報のブロックごとに意味をまとめたり、よく出てくるブロックの役割などを紹介しています。またUI/UXデザイナーの仕事についても話しており、どういう考え方や思考性、スキルが必要かも体感できるUI/UXデザイン初学者がこれから始める上での土台を築くコンテンツです。

目標

連絡帳アプリをトレースしながらUIの基礎概念を理解する。

スケジュール

1-2週間

コースレベル

入門レベル:これからUI/UXデザインを始めたい人向け

誰におすすめ

これからUI/UXデザインを始めたい人/WebデザインはやっているがUIはこれからの人

動画数
12
お題数
This is some text inside of a div block.
カテゴリ
【UIデザイン】ビジュアルデザイン
Design
カテゴリ
This is some text inside of a div block.