さる

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

さる

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

DailyUI #089 利用規約

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

さる

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

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

      さる

      • DailyUI #087 アバター

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

        さる

        • DailyUI #086 進行状況

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

          さる

        DailyUI #089 利用規約

        さる

          DailyUI #085 ページネーション

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

          さる

          DailyUI #085 ページネーション

          さる

          DailyUI #084 バッジ

          1.DailyUI#084のお題84日目のお題は「バッジ」。 ワークアウトアプリのバッジ画面を想定して制作しました。 グラフィック寄りのお題なのでイラレの練習として、個人的に良いなと思ったマネーフォワードのバッジデザインを参照しました。 2.ざっくりワイヤー 3.制作したデザイン 「体幹初級」をすっ飛ばして「体幹中級」を獲得していることはスルーしてください… 4.デザインする上で考えたことバッジはユーザーの努力に応じて獲得できるものなので、獲得できた時に思わず嬉しく

          さる

          DailyUI #084 バッジ

          さる

          DailyUI #083 ボタン

          1.DailyUI#083のお題83日目のお題は「ボタン」。 通信教育講座のランディングページに設置する資料請求ボタンを想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことコンバージョン率を高めるために、目を引くデザインにする 訴求文を添えることでユーザーの背中を押す ランディングページ内にあるボタンなので、シャドウをくっきりとつけてボタンであることを強調 通信教育講座という設定なので、信頼感や誠実さが伝わる青色をベ

          さる

          DailyUI #083 ボタン

          さる

          DailyUI #082 フォーム

          1.DailyUI#082のお題82日目のお題は「フォーム」。 マッサージ店の予約フォームを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・メニュー選択→日時選択→確認→完了の流れで進ことがわかるよう、プログレスインジケーターを入れる ・近い日にちを選びたい場合と、少し先の予約をしたい場合があるのでカレンダーアイコンを入れる ・選択した日の予約可能な時間帯がわかりやすいよう、1時間ごとに列を分けてボールド表示に ・予約に必要

          さる

          DailyUI #082 フォーム

          さる

          DailyUI #081 ステータスの更新

          1.DailyUI#081のお題81日目のお題は「ステータスの更新」。 ビジネス用のコミュニケーションツールにおける自分のステータス更新画面を想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことステータスをテキストフィールドで入力するか、選択肢の中から選択することができる ステータスの表示時間の設定ができるようにした 5.反省点アカウント設定画面の”ステータスを更新する”はボタンなのですが、テキストフィールドに見えるの

          さる

          DailyUI #081 ステータスの更新

          さる

          DailyUI #080 日付ピッカー

          1.DailyUI#080のお題80日目のお題は「日付ピッカー」。 宿泊予約アプリの日付選択画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことチェックイン日とチェックアウト日の表記を入れて確認しやすいように リセットボタンを押して選択のやり直しができる 今日の日付を線で囲んでわかるように 5.反省点リセットボタンの位置が中途半端で、存在に気付きづらいかもと思いました。OKボタンのテキストと同じ高さにした方が分かりやす

          さる

          DailyUI #080 日付ピッカー

          さる

          DailyUI #079 旅程

          1.DailyUI#079のお題79日目のお題は「旅程」。 旅程管理アプリの画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと複数人で共有できることを想定 1日ごとにタブ切り替えでその日の旅程を確認できる 予定時刻通りにスケジュールをこなせない場合もあるので、完了した行程はユーザー自身がチェックマークを入れて記録できるように 行く場所のマップをリンクで貼り付けられる（押すとマップが開く） 各行程をタップするとハーフ

          さる

          DailyUI #079 旅程

          さる

          DailyUI #078 招待

          1.DailyUI#078のお題78日目のお題は「招待」。 架空のビジネスチャットアプリの招待メール画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことなんのサービスからの招待なのかが一目でわかるように上部にロゴを入れる はじめに招待されたことを明示するテキストを入れる 誰に招待されたのかを明確にして安心感を与えるために招待した人のアイコンを入れる すでにアカウントを持っている人とそうでない人のリンクを分ける 無料で

          さる

          DailyUI #078 招待

          さる

          DailyUI #077 Thank youページ

          1.DailyUI#077のお題77日目のお題は「Thank youページ」。 ECアプリの注文完了画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・ユーザーが気になるであろうお届け予定日を目立つように表示する ・注文内容が間違っていないか確認できるように詳細確認ボタンを作る ・キャンセルや返品交換はそれぞれリンクを設置して目的別に内容を確認できるように ・お気に入りに入れている商品などをおすすめ表示して買い忘れを防ぐ＆

          さる

          DailyUI #077 Thank youページ

          さる

          DailyUI #076 読み込み中

          1.DailyUI#076のお題76日目のお題は「読み込み中」。 読み込み中の待ち時間が楽しくなるようなデザインを考えるとのことだったので、AIチャットアプリの返信待ちの時間に表示されるアニメーションを考えました。 本当はGIFを作りたかったのですが、私には難しかったのでイメージ画像のみです。 2.ざっくりワイヤー 3.制作したデザイン 顔文字のアイコンの口角が上がり、花火のようなキラキラが出てくるアニメーションがループされるイメージです。 4.デザインする上で考え

          さる

          DailyUI #076 読み込み中

          さる

          DailyUI #075 事前注文

          1.DailyUI#075のお題75日目のお題は「事前注文」。 モバイルオーダーができるコーヒー専門店のアプリ画面を制作しました。 今回はCRISP SALAD WORKSのアプリ画面を参考にしています。 2.ざっくりワイヤー 3.制作したデザイン お店を探す画面を制作しました。 4.デザインする上で考えたこと店舗ごとの待ち時間をボールドで表示して、待ち時間を把握した状態で店舗選択ができるようにして時短を重視している人にも使ってもらいやすくする。 マップ上で好きな

          さる

          DailyUI #075 事前注文

          さる

          DailyUI #074 アプリのダウンロード

          1.DailyUI#074のお題74日目のお題は「アプリのダウンロード」。 個人で制作したチャットアプリのダウンロードページを想定して制作しました。 2.ざっくりワイヤー今回はワイヤーなしです。 3.制作したデザイン 4.デザインする上で考えたこと・アプリの機能を伝える3行のキャッチコピーを添えて、どんなアプリなのかがわかるように ・QRコードを読み込めばスマホから簡単にインストールできるように ・アプリのコア画面のスクリーンショットで概要を想像しやすくした ・アプリ

          さる

          DailyUI #074 アプリのダウンロード

          さる