1.DailyUI#100のお題100日目のお題は「DailyUI のリデザイン」。 ついに100日目、最後のお題です。 dailyUIのリデザインとのことだったので、dailyUIのスマホ版のホームペ…
1.DailyUI#099のお題99日目のお題は「カテゴリ」。 フードデリバリーアプリのカテゴリ一覧画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインす…
1.DailyUI#098のお題98日目のお題は「広告」。 以前dailyUIのお題で作った架空のパーソナルフィットネスアプリのバナー広告を制作しました。 2.ざっくりワイヤー 3.制作…
1.DailyUI#097のお題97日目のお題は「プレゼント」。 アプリの友達紹介キャンペーン画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン アプリに友達を招待…
1.DailyUI#096のお題96日目のお題は「現在在庫あり」。 ECアプリの在庫表示をデザインしました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこ…
1.DailyUI#095のお題95日目のお題は「プロダクトツアー」。 プロダクトツアーとは、サービスの初回ログイン時などに使い方を教えてくれるガイドのことです。はじめて利用…
1.DailyUI#094のお題94日目のお題は「ニュース」。 ニュースアプリのトップニュース画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で…
1.DailyUI#093のお題93日目のお題は「スプラッシュ画面」。 スプラッシュ画面とは、ユーザーがアプリやウェブサイトを起動したときに表示される導入画面のことです。 以前…
1.DailyUI#092のお題92日目のお題は「よくある質問」。 ECアプリのよくある質問ページを想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインす…
1.DailyUI#091のお題91日目のお題は「あなたへのおすすめ」。 ECアプリのホーム画面におすすめの商品紹介が載っているものをデザインしました。 2.ざっくりワイヤー 3.…
1.DailyUI#090のお題90日目のお題は「新規作成」。 画像を加工して共有できるアプリの画像作成画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザイ…
1.DailyUI#089のお題89日目のお題は「利用規約」。 利用規約とは、事業者が提供するサービスの、利用に関するルールを記載したものです。 2.ざっくりワイヤー 3.制作し…
1.DailyUI#088のお題88日目のお題は「サインアップフォーム」。 アプリのサインアップフォームを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインす…
1.DailyUI#087のお題87日目のお題は「アバター」。 アプリのアバター選択画面を制作しました。 イラレの練習を兼ねてアバターのイラストを自作しました。 2.ざっくりワイ…
1.DailyUI#086のお題86日目のお題は「進行状況」。 進捗状況を伝えるデザインを作るというお題だったので、個人情報などの登録を伴うアプリの新規登録画面を制作しました…
1.DailyUI#085のお題85日目のお題は「ページネーション」。 ページネーションはひとつのページを複数に分けて、画面下部に各ページや前後ページへのリンクを設置するもの…
さる
2024年6月6日 08:58
1.DailyUI#100のお題100日目のお題は「DailyUI のリデザイン」。ついに100日目、最後のお題です。dailyUIのリデザインとのことだったので、dailyUIのスマホ版のホームページをリデザインしました。元のデザインはこのような感じです。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと元のデザインは作例などが載っておらずdailyUIで
2024年6月5日 09:48
1.DailyUI#099のお題99日目のお題は「カテゴリ」。フードデリバリーアプリのカテゴリ一覧画面を制作しました。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと・検索窓でキーワード検索できるように・ある選択肢を多数が選択している現象が、その選択肢を選択する者を更に増大させる「バンドワゴン効果」を引き出すために、よく検索されているキーワードを表示する・
2024年6月4日 13:57
1.DailyUI#098のお題98日目のお題は「広告」。以前dailyUIのお題で作った架空のパーソナルフィットネスアプリのバナー広告を制作しました。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと・何のアプリの広告なのかをすぐに認識してもらえるよう、左上に「パーソナルフィットネスアプリ」の文字を記載・アプリ使用時のイメージが湧くように、画面のスクリーンシ
2024年6月3日 10:26
1.DailyUI#097のお題97日目のお題は「プレゼント」。アプリの友達紹介キャンペーン画面を制作しました。2.ざっくりワイヤー3.制作したデザインアプリに友達を招待して、その友達が買い物をするとユーザーと友達どちらもクーポンを獲得できるキャンペーンという設定。4.デザインする上で考えたことお得な情報であることがわかるよう、1000円の数字が真っ先に目に入るように大きめにし
2024年6月1日 10:59
1.DailyUI#096のお題96日目のお題は「現在在庫あり」。ECアプリの在庫表示をデザインしました。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと商品一覧画面にて、複数のカラーバリエーションがある商品は各カラーごとの在庫状況にばらつきがあるので一つでも在庫が少ないカラーがあれば「残りわずか」表記にする。一方でカラバリが一つだけの商品は残り少なくなったら
2024年5月31日 11:10
1.DailyUI#095のお題95日目のお題は「プロダクトツアー」。プロダクトツアーとは、サービスの初回ログイン時などに使い方を教えてくれるガイドのことです。はじめて利用する人でも迷わず操作できるように、吹き出しやハイライトを使って操作方法を示します。今回は#090で制作した画像編集アプリの編集画面を開いたときに表示されるプロダクトツアーを制作しました。2.ざっくりワイヤー3.制
2024年5月30日 08:31
1.DailyUI#094のお題94日目のお題は「ニュース」。ニュースアプリのトップニュース画面を制作しました。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと・ニュースのジャンルを切り替えられるタブを上部に固定表示して、ページの途中を見ている時でも切り替えられるように・何時間前に更新されたニュースなのか明示していつの情報なのかをユーザーに認識してもらう(最
2024年5月29日 08:07
1.DailyUI#093のお題93日目のお題は「スプラッシュ画面」。スプラッシュ画面とは、ユーザーがアプリやウェブサイトを起動したときに表示される導入画面のことです。以前作ったロゴを使って、figmaのプロトタイプでアニメーションをつけて作りました。2.ざっくりワイヤー今回はワイヤーなし3.制作したデザインアプリ起動時にロゴのシンボルが動いて周りにキラキラが出現します4.デザイ
2024年5月28日 11:05
1.DailyUI#092のお題92日目のお題は「よくある質問」。ECアプリのよくある質問ページを想定して制作しました。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと知りたい情報を見つけやすいように、キーワードで検索できる検索窓をつける問い合わせの多い事項は「よく検索されるキーワード」のボタンとして上部に表示する複数の質問を項目にまとめてタイトルをつ
2024年5月27日 11:02
1.DailyUI#091のお題91日目のお題は「あなたへのおすすめ」。ECアプリのホーム画面におすすめの商品紹介が載っているものをデザインしました。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと「あなたへのおすすめ」横のツールチップで、どういう基準で選ばれた商品なのかを説明して説得力を持たせる買うものが決まっていてアプリを開いた人の目にも留まりやすいよ
2024年5月26日 10:07
1.DailyUI#090のお題90日目のお題は「新規作成」。画像を加工して共有できるアプリの画像作成画面を制作しました。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと・押したらどんな編集ができるのかわかりやすいようにアイコンとテキストを表示・ボタンサイズを44px以上にして押しやすく・一つ前、一つ後の編集に移動できる矢印を画面上部の中央に配置5.反
2024年5月24日 11:02
1.DailyUI#089のお題89日目のお題は「利用規約」。利用規約とは、事業者が提供するサービスの、利用に関するルールを記載したものです。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと・スクロールバーをつけて全体の文章量がどれくらいあるのか把握できるようにする・各項目のタイトルを目立たせて、どのような内容が書かれているのか認知してもらう・一通り目を通
2024年5月23日 11:02
1.DailyUI#088のお題88日目のお題は「サインアップフォーム」。アプリのサインアップフォームを制作しました。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと・新規登録とログインをタブ切り替えで即時に切り替えできるようにする・ボタン内の文言を統一する・ボタンを押しやすい大きさに・ボタン間の余白は12px、それ以外の余白は24pxに統一5.反省
2024年5月22日 10:41
1.DailyUI#087のお題87日目のお題は「アバター」。アプリのアバター選択画面を制作しました。イラレの練習を兼ねてアバターのイラストを自作しました。2.ざっくりワイヤー3.制作したデザイン4.デザインする上で考えたこと・はじめにアバターの変更が後からでも可能であることを示して決断のハードルを下げる・選択中のアバターをわかりやすく・アバターひとつひとつのタップ領域を広く
2024年5月21日 11:00
1.DailyUI#086のお題86日目のお題は「進行状況」。進捗状況を伝えるデザインを作るというお題だったので、個人情報などの登録を伴うアプリの新規登録画面を制作しました。2.ざっくりワイヤー3.制作したデザイン一つの項目の入力が終わるとこの画面(進捗状況画面)が表示されて、次の項目に進む4.デザインする上で考えたこと・登録する流れに合わせてプログレスインジケーターを縦に表示
2024年5月20日 11:38
1.DailyUI#085のお題85日目のお題は「ページネーション」。ページネーションはひとつのページを複数に分けて、画面下部に各ページや前後ページへのリンクを設置するものです。調べてみると、ページを複数に分割することで、ユーザーが最後まで読む「読了率」が向上する可能性があるそうです。その理由は、「読み込み時間の短縮」と「ユーザーへの興味喚起」(「続きを読みたい」というユーザーの欲求を高め