さる

UIデザイナーを目指して勉強中のデザイン初心者です📖

さる

UIデザイナーを目指して勉強中のデザイン初心者です📖

記事一覧

DailyUI #096 現在在庫あり

1.DailyUI#096のお題96日目のお題は「現在在庫あり」。 ECアプリの在庫表示をデザインしました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこ…

さる
11時間前

DailyUI #095 プロダクトツアー

1.DailyUI#095のお題95日目のお題は「プロダクトツアー」。 プロダクトツアーとは、サービスの初回ログイン時などに使い方を教えてくれるガイドのことです。はじめて利用…

さる
1日前

DailyUI #094 ニュース

1.DailyUI#094のお題94日目のお題は「ニュース」。 ニュースアプリのトップニュース画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で…

さる
2日前
1

DailyUI #093 スプラッシュ画面

1.DailyUI#093のお題93日目のお題は「スプラッシュ画面」。 スプラッシュ画面とは、ユーザーがアプリやウェブサイトを起動したときに表示される導入画面のことです。 以前…

さる
3日前

DailyUI #092 よくある質問

1.DailyUI#092のお題92日目のお題は「よくある質問」。 ECアプリのよくある質問ページを想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインす…

さる
4日前

DailyUI #091 あなたへのおすすめ

1.DailyUI#091のお題91日目のお題は「あなたへのおすすめ」。 ECアプリのホーム画面におすすめの商品紹介が載っているものをデザインしました。 2.ざっくりワイヤー 3.…

さる
5日前

DailyUI #090 新規作成

1.DailyUI#090のお題90日目のお題は「新規作成」。 画像を加工して共有できるアプリの画像作成画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザイ…

さる
6日前
1

DailyUI #089 利用規約

1.DailyUI#089のお題89日目のお題は「利用規約」。 利用規約とは、事業者が提供するサービスの、利用に関するルールを記載したものです。 2.ざっくりワイヤー 3.制作し…

さる
8日前

DailyUI #088 サインアップフォーム

1.DailyUI#088のお題88日目のお題は「サインアップフォーム」。 アプリのサインアップフォームを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインす…

さる
9日前

DailyUI #087 アバター

1.DailyUI#087のお題87日目のお題は「アバター」。 アプリのアバター選択画面を制作しました。 イラレの練習を兼ねてアバターのイラストを自作しました。 2.ざっくりワイ…

さる
10日前
1

DailyUI #086 進行状況

1.DailyUI#086のお題86日目のお題は「進行状況」。 進捗状況を伝えるデザインを作るというお題だったので、個人情報などの登録を伴うアプリの新規登録画面を制作しました…

さる
11日前
1

DailyUI #085 ページネーション

1.DailyUI#085のお題85日目のお題は「ページネーション」。 ページネーションはひとつのページを複数に分けて、画面下部に各ページや前後ページへのリンクを設置するもの…

さる
12日前

DailyUI #084 バッジ

1.DailyUI#084のお題84日目のお題は「バッジ」。 ワークアウトアプリのバッジ画面を想定して制作しました。 グラフィック寄りのお題なのでイラレの練習として、個人的に良…

さる
13日前
1

DailyUI #083 ボタン

1.DailyUI#083のお題83日目のお題は「ボタン」。 通信教育講座のランディングページに設置する資料請求ボタンを想定して制作しました。 2.ざっくりワイヤー 3.制作した…

さる
2週間前
1

DailyUI #082 フォーム

1.DailyUI#082のお題82日目のお題は「フォーム」。 マッサージ店の予約フォームを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこ…

さる
2週間前

DailyUI #081 ステータスの更新

1.DailyUI#081のお題81日目のお題は「ステータスの更新」。 ビジネス用のコミュニケーションツールにおける自分のステータス更新画面を想定して制作しました。 2.ざっく…

さる
2週間前
DailyUI #096 現在在庫あり

DailyUI #096 現在在庫あり


1.DailyUI#096のお題96日目のお題は「現在在庫あり」。
ECアプリの在庫表示をデザインしました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと商品一覧画面にて、複数のカラーバリエーションがある商品は各カラーごとの在庫状況にばらつきがあるので一つでも在庫が少ないカラーがあれば「残りわずか」表記にする。一方でカラバリが一つだけの商品は残り少なくなったら

もっとみる
DailyUI #095 プロダクトツアー

DailyUI #095 プロダクトツアー


1.DailyUI#095のお題95日目のお題は「プロダクトツアー」。
プロダクトツアーとは、サービスの初回ログイン時などに使い方を教えてくれるガイドのことです。はじめて利用する人でも迷わず操作できるように、吹き出しやハイライトを使って操作方法を示します。

今回は#090で制作した画像編集アプリの編集画面を開いたときに表示されるプロダクトツアーを制作しました。

2.ざっくりワイヤー

3.制

もっとみる
DailyUI #094 ニュース

DailyUI #094 ニュース


1.DailyUI#094のお題94日目のお題は「ニュース」。
ニュースアプリのトップニュース画面を制作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと・ニュースのジャンルを切り替えられるタブを上部に固定表示して、ページの途中を見ている時でも切り替えられるように
・何時間前に更新されたニュースなのか明示していつの情報なのかをユーザーに認識してもらう(最

もっとみる
DailyUI #093 スプラッシュ画面

DailyUI #093 スプラッシュ画面


1.DailyUI#093のお題93日目のお題は「スプラッシュ画面」。
スプラッシュ画面とは、ユーザーがアプリやウェブサイトを起動したときに表示される導入画面のことです。
以前作ったロゴを使って、figmaのプロトタイプでアニメーションをつけて作りました。

2.ざっくりワイヤー今回はワイヤーなし

3.制作したデザインアプリ起動時にロゴのシンボルが動いて周りにキラキラが出現します

4.デザイ

もっとみる
DailyUI #092 よくある質問

DailyUI #092 よくある質問


1.DailyUI#092のお題92日目のお題は「よくある質問」。
ECアプリのよくある質問ページを想定して制作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと知りたい情報を見つけやすいように、キーワードで検索できる検索窓をつける

問い合わせの多い事項は「よく検索されるキーワード」のボタンとして上部に表示する

複数の質問を項目にまとめてタイトルをつ

もっとみる
DailyUI #091 あなたへのおすすめ

DailyUI #091 あなたへのおすすめ


1.DailyUI#091のお題91日目のお題は「あなたへのおすすめ」。
ECアプリのホーム画面におすすめの商品紹介が載っているものをデザインしました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと「あなたへのおすすめ」横のツールチップで、どういう基準で選ばれた商品なのかを説明して説得力を持たせる

買うものが決まっていてアプリを開いた人の目にも留まりやすいよ

もっとみる
DailyUI #090 新規作成

DailyUI #090 新規作成


1.DailyUI#090のお題90日目のお題は「新規作成」。
画像を加工して共有できるアプリの画像作成画面を制作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと・押したらどんな編集ができるのかわかりやすいようにアイコンとテキストを表示
・ボタンサイズを44px以上にして押しやすく
・一つ前、一つ後の編集に移動できる矢印を画面上部の中央に配置

5.反

もっとみる
DailyUI #089 利用規約

DailyUI #089 利用規約


1.DailyUI#089のお題89日目のお題は「利用規約」。
利用規約とは、事業者が提供するサービスの、利用に関するルールを記載したものです。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと・スクロールバーをつけて全体の文章量がどれくらいあるのか把握できるようにする
・各項目のタイトルを目立たせて、どのような内容が書かれているのか認知してもらう
・一通り目を通

もっとみる
DailyUI #088 サインアップフォーム

DailyUI #088 サインアップフォーム


1.DailyUI#088のお題88日目のお題は「サインアップフォーム」。
アプリのサインアップフォームを制作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと・新規登録とログインをタブ切り替えで即時に切り替えできるようにする
・ボタン内の文言を統一する
・ボタンを押しやすい大きさに
・ボタン間の余白は12px、それ以外の余白は24pxに統一

5.反省

もっとみる
DailyUI #087 アバター

DailyUI #087 アバター


1.DailyUI#087のお題87日目のお題は「アバター」。
アプリのアバター選択画面を制作しました。
イラレの練習を兼ねてアバターのイラストを自作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと・はじめにアバターの変更が後からでも可能であることを示して決断のハードルを下げる
・選択中のアバターをわかりやすく
・アバターひとつひとつのタップ領域を広く

もっとみる
DailyUI #086 進行状況

DailyUI #086 進行状況


1.DailyUI#086のお題86日目のお題は「進行状況」。
進捗状況を伝えるデザインを作るというお題だったので、個人情報などの登録を伴うアプリの新規登録画面を制作しました。

2.ざっくりワイヤー

3.制作したデザイン

一つの項目の入力が終わるとこの画面(進捗状況画面)が表示されて、次の項目に進む

4.デザインする上で考えたこと・登録する流れに合わせてプログレスインジケーターを縦に表示

もっとみる
DailyUI #085 ページネーション

DailyUI #085 ページネーション


1.DailyUI#085のお題85日目のお題は「ページネーション」。
ページネーションはひとつのページを複数に分けて、画面下部に各ページや前後ページへのリンクを設置するものです。

調べてみると、ページを複数に分割することで、ユーザーが最後まで読む「読了率」が向上する可能性があるそうです。その理由は、「読み込み時間の短縮」と「ユーザーへの興味喚起」(「続きを読みたい」というユーザーの欲求を高め

もっとみる
DailyUI #084 バッジ

DailyUI #084 バッジ


1.DailyUI#084のお題84日目のお題は「バッジ」。
ワークアウトアプリのバッジ画面を想定して制作しました。
グラフィック寄りのお題なのでイラレの練習として、個人的に良いなと思ったマネーフォワードのバッジデザインを参照しました。

2.ざっくりワイヤー

3.制作したデザイン

「体幹初級」をすっ飛ばして「体幹中級」を獲得していることはスルーしてください…

4.デザインする上で考えたこ

もっとみる
DailyUI #083 ボタン

DailyUI #083 ボタン


1.DailyUI#083のお題83日目のお題は「ボタン」。
通信教育講座のランディングページに設置する資料請求ボタンを想定して制作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたことコンバージョン率を高めるために、目を引くデザインにする

訴求文を添えることでユーザーの背中を押す

ランディングページ内にあるボタンなので、シャドウをくっきりとつけてボタン

もっとみる
DailyUI #082 フォーム

DailyUI #082 フォーム


1.DailyUI#082のお題82日目のお題は「フォーム」。
マッサージ店の予約フォームを制作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと・メニュー選択→日時選択→確認→完了の流れで進ことがわかるよう、プログレスインジケーターを入れる
・近い日にちを選びたい場合と、少し先の予約をしたい場合があるのでカレンダーアイコンを入れる
・選択した日の予約可

もっとみる
DailyUI #081 ステータスの更新

DailyUI #081 ステータスの更新


1.DailyUI#081のお題81日目のお題は「ステータスの更新」。
ビジネス用のコミュニケーションツールにおける自分のステータス更新画面を想定して制作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたことステータスをテキストフィールドで入力するか、選択肢の中から選択することができる

ステータスの表示時間の設定ができるようにした

5.反省点アカウント設

もっとみる