Sato / さかゆ

Sato / さかゆ

  • Daily UI

    自分のDaily UIの記事をまとめます

賃貸アプリで基本UIトレーニング/BONO

UIデザインを独学しています。Satoと申します。 今回はデザインコミュニティBONOの「賃貸アプリで基本UIトレーニング」シリーズが一通り完了したので、学習記録をまとめたいと思います。 完成品を先見せプロトタイプ プロトタイプはこちら ※スマートフォンだと動作が重たいのでpc推奨です。 要件 簡易デザインシステム コンポーネント では各画面について説明していきます👀 🔍検索結果画面まずは検索結果画面を作成しました。この画面は、賃貸条件を入力し、検索を行った後に

Sato / さかゆ

    • Daily UI #031-#050

      UIデザインを独学しています。Satoと申します。 昨年の12月からDaily UIのお題に挑戦し始めました。 Daily UIとは、登録すると平日に毎日メールでお題が届き、それをもとにUIのデザインをするというものです。 今回はDaily UIの#031~#050で制作したものの紹介と振り返りをしたいと思います！ #031 File Upload参考はGoogleドライブとDribbbleです。シンプルなデザインに仕上げ、アップロードの進捗状況をプログレスバーで確認でき

      Sato / さかゆ

      • Daily UI #019-#030

        #019~#030のDailyUIです！ #019 Leaderboardリーダーボード自体あまり聞き慣れない言葉なので調べてみると、上位のプレイヤーの名前とスコアを載せるボードみたい。 リーダーボードに最低限必要な要素は順位、アイコン、名前、スコアあたりだと思います。 最初にUIのパターンを出して、そこから細部を作り込んでいく形にしました。理想は7、8パターンを出したいですが時間的にきつそうなので4、5パターンが限界かなという感じ。参考にしたのはDribbbleとPin

        Sato / さかゆ

        • BONO学習記録【音声SNS】

          今回はデザインコミュニティBONOの課題である「音声SNS」の制作に挑戦してみました。課題に取り組む過程や制作してる時に考えたこと、新たな気づきなどをnoteにまとめたいと思います。 課題について毎日UIを1画面ずつ制作していき、以下の合計6画面を作り音声SNSを完成させるというものです。 1日の流れ お題を見る 手を動かして制作してみる（ラフ→Figmaの流れ） 解説動画を見る 修正する&追加課題 Day1 新規登録画面1日目は新規登録画面です。 参考アプリ

          Sato / さかゆ

        賃貸アプリで基本UIトレーニング/BONO

        Sato / さかゆ

        マガジン

        • Daily UI
          16本

        記事

          DailyUI 018 - Analytics Chart

          18日目のDaily UIになります。生活習慣を整えるために今日は1日分にします！お題はアナリティクスチャートです。 参考にしたサイト・アプリiPhoneのヘルスケア Nike Run Club iPhoneの株価 4 . Dribbble デザインする上で考えたこと・気をつけた点1 . グラフが何を表しているかわかりやすくする 今回は歩数を表すグラフを想定しました。iPhoneのヘルスケアは棒グラフでしたが、波形グラフにしてみました。また目安になるラインは横のラ

          Sato / さかゆ

          DailyUI 018 - Analytics Chart

          Sato / さかゆ

          DailyUI 016 & 017

          16、17日目のDaily UIになります。16日目のお題はポップアップ / オーバーレイ、17日目のお題はEmailレシートです。 16日目参考にしたサイト・アプリ 1 . ゼブラック 2 . LINEマンガ 3 . Material Design 4 . Dribbble デザインする上で考えたこと・気をつけた点 1 . Material Designを参考にする Material DesignのDialogsを参考にデザインを考えました。アクション部分をテ

          Sato / さかゆ

          DailyUI 016 & 017

          Sato / さかゆ

          DailyUI 014 & 015

          14、15日目のDaily UIになります。14日目のお題はカウントダウンタイマー、15日目のお題はオン/オフスイッチです。 14日目参考にしたサイト・アプリ 1 . iPhoneのタイマー 2 . Dribbble これとか可愛くて機能的にも面白かったため参考にしました。 デザインする上で考えたこと・気をつけた点 1 . タイマー操作だけでなくワンタップで時間を決めれる 既存のiPhoneタイマーだとタイマーの操作をして時間を決める必要がありますが、カップラー

          Sato / さかゆ

          DailyUI 014 & 015

          Sato / さかゆ

          DailyUI 012 & 013

          12、13日目のDaily UIになります。12日目のお題はEコマースショップ、13日目のお題はダイレクトメッセージです。 12日目参考にしたサイト・アプリ ZOZOTOWN キナリノ 北欧、暮らしの道具店 minne Nike デザインする上で考えたこと・気をつけた点 1 . カートに入れるボタン、お気に入りボタンを固定に カートに入れるボタン、お気に入りボタンは固定しており、どのスクロール位置でもユーザーがカートやお気に入りに入れることができるようにしま

          Sato / さかゆ

          DailyUI 012 & 013

          Sato / さかゆ

          DailyUI 010 & 011

          10、11日目のDaily UIになります。10日目のお題はソーシャルシェア、11日目のお題はフラッシュメッセージです。 10日目参考にしたサイト・アプリ Spotify LINE Music YouTube Music Twitter iPhoneの共有 デザインする上で考えたこと・気をつけた点 1 . モーダルビュー 今回はモーダルが下から出てくるようにデザインをしました。最初は参考デザインのYouTube Musicのように小さなモーダルでデザインしよ

          Sato / さかゆ

          DailyUI 010 & 011

          Sato / さかゆ

          DailyUI 009 - Music Player

          9日目のDaily UIになります。今日のお題はミュージックプレイヤーです。 参考にしたサイト・アプリ Apple Music Shazam LINE Music YouTube Music Spotify デザインする上で考えたこと・気をつけた点1 . 要素の整理 基本的にどのアプリも要素はそれほど変わらなかったです。以下が必須かなと思いました。 今回はこれらの要素にプラスして以下の4つの要素を加えました。 2 . アルバムのジャケットを背景に 参考デ

          Sato / さかゆ

          DailyUI 009 - Music Player

          Sato / さかゆ

          DailyUI 008 - 404 Page

          8日目のDaily UIになります。今日のお題は404ページです。 参考にしたサイト・アプリ1 . デジタル庁 2 . note 404美術館のイラストがとても綺麗でした。参考デザインの中では1番好きな404ページです。 3 . YouTube 4 . freee 5 . Zenn デザインする上で考えたこと・気をつけた点1. イラストを使う 最初は参考デザインに挙げているデジタル庁のようなシンプルなデザインで仕上げようと思いましたが、今回のようにテキストが少

          Sato / さかゆ

          DailyUI 008 - 404 Page

          Sato / さかゆ

          DailyUI 007 - Settings

          7日目のDaily UIになります。今日のお題は設定画面です。 参考にしたサイト・アプリ Twitter LINE Instagram Rakuten ROOM YAMAP キナリノ デザインする上で考えたこと・気をつけた点1. アイコンを使う 今回はアイコンを多く使い、ユーザーの目的に辿り着きやすくしました。設定画面はどこに何があるか分からず、目的のためにいろんな項目を探し回ることが多いように感じます。TOPの画面はできるだけ分かりやすく項目を分けて、ユー

          Sato / さかゆ

          DailyUI 007 - Settings

          Sato / さかゆ

          DailyUI 006 - User Profile

          6日目のDaily UIになります。今日のお題はユーザープロフィールです。 参考にしたサイト・アプリ1 . Instagram 2 . Twitter 3 . Rakuten ROOM 4 . Dribbble Dribbbleというサービスで他の人たちのDailyUIを参考にさせていただきました。 URLはこちら デザインする上で考えたこと・気をつけた点1 . 部屋や家具の写真を共有するサービスを想定 今回は部屋や家具の写真を共有するサービスを想定してユーザープ

          Sato / さかゆ

          DailyUI 006 - User Profile

          Sato / さかゆ

          DailyUI 005 - App Icon

          5日目のDaily UIになります。今日のお題はアプリアイコンです。 参考にしたサイト・アプリアイコンの考え方についての記事 ガイドライン 1 . YAMAP 2 . ヤマレコ デザインする上で考えたこと・気をつけた点1 . 登山アプリを想定 今回は登山アプリを想定し、風車のアイコンでデザインしました。参考デザインで挙げたアプリでは、山をアイコンとして使っていため、違うもので表現できないか試しました。風車

          Sato / さかゆ

          DailyUI 005 - App Icon

          Sato / さかゆ

          DailyUI 004 - Calculator

          4日目のDaily UIになります。今日のお題は電卓です。 参考にしたサイト・アプリ1 . iPhoneの電卓 2 . 万能電卓：多機能計算機 3 . 電卓 シンプルでスタイリッシュな計算アプリ 4 . Haseba Calculator 5 . シンプル電卓・シンプルで美しい電卓アプリ デザインする上で考えたこと・気をつけた点1 . テーマカラーを設定 今回はテーマカラーを紫にしました。白の背景でも黒の背景でも目を引く色ではないかと思います。 2 . ダーク

          Sato / さかゆ

          DailyUI 004 - Calculator

          Sato / さかゆ

          DailyUI 003 - Landing Page

          3日目のDaily UIになります。今日のお題はランディングページです。 参考にしたサイト・アプリ1 . トルチェ 2 . 本山 de cafe HARUJI 3 . MONSOON 4 . Chevron Coffee Roasters 5 . 谷根千 az café デザインする上で考えたこと・気をつけた点1.カフェを想定 今回はカフェを想定したランディングページを制作しました。店名は思いつかなかったのですが、個人的に Σ という記号が好きなのでロゴマークと

          Sato / さかゆ

          DailyUI 003 - Landing Page

          Sato / さかゆ