さる

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

さる

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

DailyUI #100 DailyUI のリデザイン

1.DailyUI#100のお題100日目のお題は「DailyUI のリデザイン」。 ついに100日目、最後のお題です。 dailyUIのリデザインとのことだったので、dailyUIのスマホ版のホームページをリデザインしました。 元のデザインはこのような感じです。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと元のデザインは作例などが載っておらずdailyUIでどのようなものを制作するのか想像しづらいので、作例が横スクロールでループし続ける

さる

    • DailyUI #099 カテゴリ

      1.DailyUI#099のお題99日目のお題は「カテゴリ」。 フードデリバリーアプリのカテゴリ一覧画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・検索窓でキーワード検索できるように ・ある選択肢を多数が選択している現象が、その選択肢を選択する者を更に増大させる「バンドワゴン効果」を引き出すために、よく検索されているキーワードを表示する ・カテゴリの一つ一つを押しやすい大きさに ・丸でも四角でもない”スクワークル”で垢

      さる

      • DailyUI #098 広告

        1.DailyUI#098のお題98日目のお題は「広告」。 以前dailyUIのお題で作った架空のパーソナルフィットネスアプリのバナー広告を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・何のアプリの広告なのかをすぐに認識してもらえるよう、左上に「パーソナルフィットネスアプリ」の文字を記載 ・アプリ使用時のイメージが湧くように、画面のスクリーンショットを載せる ・短いキャッチコピーを添えてコンセプトを伝える ・斜めのラインで

        さる

        • DailyUI #097 プレゼント

          1.DailyUI#097のお題97日目のお題は「プレゼント」。 アプリの友達紹介キャンペーン画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン アプリに友達を招待して、その友達が買い物をするとユーザーと友達どちらもクーポンを獲得できるキャンペーンという設定。 4.デザインする上で考えたことお得な情報であることがわかるよう、1000円の数字が真っ先に目に入るように大きめにして、文字を立体的に加工して強調のあしらいをつけた 「あなたも！友達も！」を吹出

          さる

        DailyUI #100 DailyUI のリデザイン

        さる

          DailyUI #096 現在在庫あり

          1.DailyUI#096のお題96日目のお題は「現在在庫あり」。 ECアプリの在庫表示をデザインしました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと商品一覧画面にて、複数のカラーバリエーションがある商品は各カラーごとの在庫状況にばらつきがあるので一つでも在庫が少ないカラーがあれば「残りわずか」表記にする。一方でカラバリが一つだけの商品は残り少なくなったら（在庫5個以下）個数を表示する。 5.反省点カラーバリエーションがある商品の在

          さる

          DailyUI #096 現在在庫あり

          さる

          DailyUI #095 プロダクトツアー

          1.DailyUI#095のお題95日目のお題は「プロダクトツアー」。 プロダクトツアーとは、サービスの初回ログイン時などに使い方を教えてくれるガイドのことです。はじめて利用する人でも迷わず操作できるように、吹き出しやハイライトを使って操作方法を示します。 今回は#090で制作した画像編集アプリの編集画面を開いたときに表示されるプロダクトツアーを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことはじめにプロダクトツアーを見るか

          さる

          DailyUI #095 プロダクトツアー

          さる

          DailyUI #094 ニュース

          1.DailyUI#094のお題94日目のお題は「ニュース」。 ニュースアプリのトップニュース画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・ニュースのジャンルを切り替えられるタブを上部に固定表示して、ページの途中を見ている時でも切り替えられるように ・何時間前に更新されたニュースなのか明示していつの情報なのかをユーザーに認識してもらう（最新などの曖昧な表記のみにしない） ・記事を見る前にタイトルで気になったら保存して

          さる

          DailyUI #094 ニュース

          さる

          DailyUI #093 スプラッシュ画面

          1.DailyUI#093のお題93日目のお題は「スプラッシュ画面」。 スプラッシュ画面とは、ユーザーがアプリやウェブサイトを起動したときに表示される導入画面のことです。 以前作ったロゴを使って、figmaのプロトタイプでアニメーションをつけて作りました。 2.ざっくりワイヤー今回はワイヤーなし 3.制作したデザインアプリ起動時にロゴのシンボルが動いて周りにキラキラが出現します 4.デザインする上で考えたことスプラッシュ画面が3秒以上続くとユーザーは不快に感じるという

          さる

          DailyUI #093 スプラッシュ画面

          さる

          DailyUI #092 よくある質問

          1.DailyUI#092のお題92日目のお題は「よくある質問」。 ECアプリのよくある質問ページを想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと知りたい情報を見つけやすいように、キーワードで検索できる検索窓をつける 問い合わせの多い事項は「よく検索されるキーワード」のボタンとして上部に表示する 複数の質問を項目にまとめてタイトルをつける（”〜について”） 5.反省点回答テキストがアコーディオンで表示される仕様

          さる

          DailyUI #092 よくある質問

          さる

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

          1.DailyUI#091のお題91日目のお題は「あなたへのおすすめ」。 ECアプリのホーム画面におすすめの商品紹介が載っているものをデザインしました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと「あなたへのおすすめ」横のツールチップで、どういう基準で選ばれた商品なのかを説明して説得力を持たせる 買うものが決まっていてアプリを開いた人の目にも留まりやすいように背景色を他の項目と差別化して目立たせる 5.反省点画面を開いた時に見える商

          さる

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

          さる

          DailyUI #090 新規作成

          1.DailyUI#090のお題90日目のお題は「新規作成」。 画像を加工して共有できるアプリの画像作成画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・押したらどんな編集ができるのかわかりやすいようにアイコンとテキストを表示 ・ボタンサイズを44px以上にして押しやすく ・一つ前、一つ後の編集に移動できる矢印を画面上部の中央に配置 5.反省点・編集を破棄する”×ボタン”と編集を完了する”OKボタン”は他のボタンと違っ

          さる

          DailyUI #090 新規作成

          さる

          DailyUI #089 利用規約

          1.DailyUI#089のお題89日目のお題は「利用規約」。 利用規約とは、事業者が提供するサービスの、利用に関するルールを記載したものです。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・スクロールバーをつけて全体の文章量がどれくらいあるのか把握できるようにする ・各項目のタイトルを目立たせて、どのような内容が書かれているのか認知してもらう ・一通り目を通してもらうために、上から下までスクロールしたら同意のチェックボタンが活性化する仕

          さる

          DailyUI #089 利用規約

          さる

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

          1.DailyUI#088のお題88日目のお題は「サインアップフォーム」。 アプリのサインアップフォームを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・新規登録とログインをタブ切り替えで即時に切り替えできるようにする ・ボタン内の文言を統一する ・ボタンを押しやすい大きさに ・ボタン間の余白は12px、それ以外の余白は24pxに統一 5.反省点メールアドレスでログインする場合はメールアドレスを入力する必要があるので、メー

          さる

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

          さる

          DailyUI #087 アバター

          1.DailyUI#087のお題87日目のお題は「アバター」。 アプリのアバター選択画面を制作しました。 イラレの練習を兼ねてアバターのイラストを自作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・はじめにアバターの変更が後からでも可能であることを示して決断のハードルを下げる ・選択中のアバターをわかりやすく ・アバターひとつひとつのタップ領域を広くする 5.反省点イラストの雰囲気に合わせて背景にパターンなどを入れて楽しげな印

          さる

          DailyUI #087 アバター

          さる

          DailyUI #086 進行状況

          1.DailyUI#086のお題86日目のお題は「進行状況」。 進捗状況を伝えるデザインを作るというお題だったので、個人情報などの登録を伴うアプリの新規登録画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 一つの項目の入力が終わるとこの画面（進捗状況画面）が表示されて、次の項目に進む 4.デザインする上で考えたこと・登録する流れに合わせてプログレスインジケーターを縦に表示 ・ユーザーが迷わず登録を進められるよう、一つの項目の入力が終わったら次のステッ

          さる

          DailyUI #086 進行状況

          さる

          DailyUI #085 ページネーション

          1.DailyUI#085のお題85日目のお題は「ページネーション」。 ページネーションはひとつのページを複数に分けて、画面下部に各ページや前後ページへのリンクを設置するものです。 調べてみると、ページを複数に分割することで、ユーザーが最後まで読む「読了率」が向上する可能性があるそうです。その理由は、「読み込み時間の短縮」と「ユーザーへの興味喚起」（「続きを読みたい」というユーザーの欲求を高める）といったことが挙げられるとのことでした。 今回はスマホ版のwebサイトのペ

          さる

          DailyUI #085 ページネーション

          さる