さる

他業種からUI/UXデザイナーへの転職を目指して学習中です!

さる

他業種からUI/UXデザイナーへの転職を目指して学習中です!

記事一覧

DailyUI #100 DailyUI のリデザイン

1.DailyUI#100のお題100日目のお題は「DailyUI のリデザイン」。 ついに100日目、最後のお題です。 dailyUIのリデザインとのことだったので、dailyUIのスマホ版のホームペ…

さる
2か月前
18

DailyUI #099 カテゴリ

1.DailyUI#099のお題99日目のお題は「カテゴリ」。 フードデリバリーアプリのカテゴリ一覧画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインす…

さる
3か月前
1

DailyUI #098 広告

1.DailyUI#098のお題98日目のお題は「広告」。 以前dailyUIのお題で作った架空のパーソナルフィットネスアプリのバナー広告を制作しました。 2.ざっくりワイヤー 3.制作…

さる
3か月前

DailyUI #097 プレゼント

1.DailyUI#097のお題97日目のお題は「プレゼント」。 アプリの友達紹介キャンペーン画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン アプリに友達を招待…

さる
3か月前

DailyUI #096 現在在庫あり

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

さる
3か月前

DailyUI #095 プロダクトツアー

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

さる
3か月前

DailyUI #094 ニュース

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

さる
3か月前
1

DailyUI #093 スプラッシュ画面

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

さる
3か月前

DailyUI #092 よくある質問

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

さる
3か月前

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

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

さる
3か月前

DailyUI #090 新規作成

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

さる
3か月前
1

DailyUI #089 利用規約

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

さる
3か月前

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

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

さる
3か月前
1

DailyUI #087 アバター

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

さる
3か月前
1

DailyUI #086 進行状況

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

さる
3か月前
2

DailyUI #085 ページネーション

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

さる
3か月前
DailyUI #100 DailyUI のリデザイン

DailyUI #100 DailyUI のリデザイン


1.DailyUI#100のお題100日目のお題は「DailyUI のリデザイン」。
ついに100日目、最後のお題です。
dailyUIのリデザインとのことだったので、dailyUIのスマホ版のホームページをリデザインしました。
元のデザインはこのような感じです。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと元のデザインは作例などが載っておらずdailyUIで

もっとみる
DailyUI #099 カテゴリ

DailyUI #099 カテゴリ


1.DailyUI#099のお題99日目のお題は「カテゴリ」。
フードデリバリーアプリのカテゴリ一覧画面を制作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと・検索窓でキーワード検索できるように
・ある選択肢を多数が選択している現象が、その選択肢を選択する者を更に増大させる「バンドワゴン効果」を引き出すために、よく検索されているキーワードを表示する

もっとみる
DailyUI #098 広告

DailyUI #098 広告


1.DailyUI#098のお題98日目のお題は「広告」。
以前dailyUIのお題で作った架空のパーソナルフィットネスアプリのバナー広告を制作しました。

2.ざっくりワイヤー

3.制作したデザイン

4.デザインする上で考えたこと・何のアプリの広告なのかをすぐに認識してもらえるよう、左上に「パーソナルフィットネスアプリ」の文字を記載
・アプリ使用時のイメージが湧くように、画面のスクリーンシ

もっとみる
DailyUI #097 プレゼント

DailyUI #097 プレゼント


1.DailyUI#097のお題97日目のお題は「プレゼント」。
アプリの友達紹介キャンペーン画面を制作しました。

2.ざっくりワイヤー

3.制作したデザイン

アプリに友達を招待して、その友達が買い物をするとユーザーと友達どちらもクーポンを獲得できるキャンペーンという設定。

4.デザインする上で考えたことお得な情報であることがわかるよう、1000円の数字が真っ先に目に入るように大きめにし

もっとみる
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日目のお題は「ページネーション」。
ページネーションはひとつのページを複数に分けて、画面下部に各ページや前後ページへのリンクを設置するものです。

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

もっとみる