teri

現職エンジニアがUIデザイナーになるため勉強中です✊

teri

現職エンジニアがUIデザイナーになるため勉強中です✊

  • Daily UI 100まで継続！

    2年前挫折したDaily UI。今こそもう一度挑戦して、めざせ100！！

Daily UI #027 Dropdown

こんばんは、お疲れ様です。 今回のお題はドロップダウンということで、 言語選択のドロップダウンリストを考えてみました。 言語選択のUIについては、エンジニアとしてサービスに言語切り替えドロップダウンリストを追加した経験があります。 その時に調べて理解したのは以下の２点です。 国旗は使わない ラベルは各言語で表記する 国旗は使わない 一番わかりやすいのが「英語」ですね。 アメリカ、イギリス、オーストラリア、カナダ… １つの言語に対して、どの国旗を表示するの？ってなり

teri

    • Daily UI #026 Subscribe

      こんばんは、お疲れ様です。 今回のお題はSubscribeです。 「サブスク」は現代の生活において、どこかで必ず出会うと言っても過言ではないくらい、いろんな種類のサブスク対象が存在していますね。 なんのサブスクを題材にしようかと思っていたところ、 たまたま行ったパン屋さんがパンのサブスクを始めたことを知り、 パンのサブスクにしてみました。 設定としては、クロワッサンが売りの架空のサブスク限定パン屋さん「🥐クラスト」のアプリです。 パンは冷凍で届くので日持ちもするし、 食

      teri

      • Daily UI #025 TV App

        こんばんは、お疲れ様です。 Daily UIは久しぶりです。😅 今回のお題はTV App。 今回は、TVer と NETFLIX を比較して Tver に対して個人的に気になっていた部分に変更を加えながら、 架空ドラマ配信アプリの１画面をデザインすることにしました。 色々書いていますが、特にファーストビューで TVer の余白が目立つなと感じました。 余白にゆとりを持たせることで、複数のテレビ番組のサムネイルで溢れて騒がしくならないようにしているのかもしれませんが、 な

        teri

        • MacBookデビューしました

          こんばんは、お疲れ様です。 しばらく忙しくてバタバタしていてnoteどころかデザインを考える時間すらなかったんですが、ようやく少しずつではありますが自分の時間が持てるまで落ち着いてきました。 今回はタイトルにもある通り、MacBookを買いました、という報告です😆 昨年から買おうかどうしようか悩んでいたMacBook… 欲しいと思った理由はいたって単純。 デザイナーとして働くなら、（おそらく）会社ではMacBookだろうから使い慣れておきたい デザイン関連（プログラ

          teri

        Daily UI #027 Dropdown

        teri

        マガジン

        • Daily UI 100まで継続！
          27本

        記事

          Daily UI #024 Boarding Pass

          こんばんは、お疲れ様です。 またしばらく投稿まで日が空いてしまいました😓 帰りが遅くて、帰ってご飯食べてお風呂入ったらもう寝る時間…って日々が続いていてなかなか難しいですね。 それでもあきらめずに継続しようとする姿勢が偉い！！（自画自賛😎） というわけで、今回のお題はBoarding Pass。 JAL、ANAをはじめ、国内外のエアラインのモバイル搭乗券を見てみました。 エアラインや空港によって表示される項目は若干の差がありますが、 必須項目はこんな感じかなと思いま

          teri

          Daily UI #024 Boarding Pass

          teri

          Daily UI #023 Onboarding

          こんばんは、お疲れ様です。 今回のお題はOnboardingです。 お恥ずかしい話ですが、昨年初めて「Onboarding」という言葉を知りました（笑） アプリの初回起動時に2，3画面でアプリの説明や使用方法など説明してあって、「スキップ」とかもできちゃうあの画面、存在は知っていましたがあれがOnboardingという名のあるものだとは…😅 アプリの画面だけではなく、研修でも使用する言葉ですね。 知ってからは、無駄に使ってみたり😏 さて、作成した画面はこちら。 女性

          teri

          Daily UI #023 Onboarding

          teri

          Daily UI #022 Search Design

          こんばんは、お疲れ様です。 今回のお題はSearch Designということで、またまたひろ～いお題です（笑） そこで、第6回、11回、16回目のお題で作成したレシピアプリで考えてみました。 まず左画面で工夫したのは、検索エリアより下の部分です。 私は日常的にレシピアプリを使うのですが、レシピ検索をする際は「冷蔵庫の中の食材で何が作れるかな…」と考えながら見ています。 例えば賞味期限が今日までの手羽元があれば、「手羽元　さっぱり」のように検索します。 あまり「肉料理」

          teri

          Daily UI #022 Search Design

          teri

          Daily UI #021 Home Monitoring Dashboard

          こんばんは、お疲れ様です。 今回のお題はHome Monitoring Dashboardということで、 スマート家電を管理するスマホアプリの画面をデザインしました。 私はスマート家電を全く使っていないので😅、 いくつかの商品を検索しながらイメージを膨らませました。 調べているうちに思いましたが、スマホがリモコン代わりになるって便利ですね！！（今更（笑）） テーブルの上や壁にリモコンを置くスペースを考えなくて済むのが最高。 というわけで、デザインしたのがこちらです。

          teri

          Daily UI #021 Home Monitoring Dashboard

          teri

          2023年の振り返りと2024年意気込み

          こんばんは。お疲れ様です。 2024年が始まりました。あけましておめでとうございます！ 2024年1発目の投稿として、2023年の振り返りと2024年への意気込みを簡単に書いてみたいと思います。 2023年の振り返り2021年に始めたDaily UIは見事に続かずに、そのリベンジとして昨年10月から改めて1つ目のお題からチャレンジを始めました。 2，3日に1つのお題をこなしていくペースで進めていくつもりでしたが、なかなか思うようには進まなかったですね😅 ただ、閲覧数やス

          teri

          2023年の振り返りと2024年意気込み

          teri

          Daily UI #020 Location Tracker

          こんばんは。お疲れ様です。 今回のお題はLocation Trackerです。 まずは最近ご無沙汰だった「2年前のDaily UIシリーズ」（いつのまにシリーズ化した）の中で、このお題でデザインしたものから紹介します。 認知症の家族を持つ人向けのアプリで、小型GPSを認知症の家族の靴や持ち物につけることで、万が一徘徊してしまった場合に、現在地がわかるというものです。 実際私の家族も認知症を患っており、本人がいなくなってて捜索した結果、なんと高速道路にいた….ということ

          teri

          Daily UI #020 Location Tracker

          teri

          Daily UI #019 Leaderboard

          こんばんは。お疲れ様です。 今回のお題はLeaderboard。 正直ナニソレ？？？😶って思ってしまいましたが、 特定のアクティビティにおいて、成績やランキングを示すテーブルやリストを意味するそうです。 ユーザの実績を視覚的に表示することで、競争心を掻き立てたり、モチベーションアップのために使われるとも書いてありました。 勉強アプリの勉強時間ランキング、ゲームアプリのポイント数ランキングなどなど、確かにLeaderboardの要素が使われているアプリは意外とありますね。

          teri

          Daily UI #019 Leaderboard

          teri

          Daily UI #018 Analytics Chart

          こんばんは。お疲れ様です。 今回のお題はAnalytics Chartということで、 「こども向けのおこづかいアプリ」の1画面をデザインしてみました。 月の収支を円グラフで表示する画面です。 大人向けの家計簿アプリと違って、 こども向け（6歳～）ということで、漢字は最小限にしています。 言葉選びも、「収入」、「支出」とかではなく、 「もらったお金」、「つかったお金」というように、こどもにとって馴染みがある言葉にしています。 ただ、この画面で使用する色の選定にすごく悩

          teri

          Daily UI #018 Analytics Chart

          teri

          Daily UI #017 Purchase Receipt

          こんばんは。お疲れ様です。 今回のお題はPurchase Receiptということで、そのままだと「領収書」となるわけですが、12個目のお題で作成したECサイトでの購入履歴画面をデザインすることにしました。 正直服は基本的に店舗で買う派なので（笑）、1，2個のアパレル系アプリとUber Eatsやマクドナルドなどのフードデリバリーアプリや、Amazon、楽天などのアプリを参考にしました。 UNIQLOのアプリを見ていて、購入履歴のところに「30分以内のキャンセルは可能」

          teri

          Daily UI #017 Purchase Receipt

          teri

          Daily UI #016 Pop-up Overlay

          こんばんは。お疲れ様です。 今回のお題はポップアップです。 第6回、11回目のお題で作成したレシピアプリにあわせて、自分のレシピを誰かが❤️をしてくれた際のポップアップを作成してみました。 そもそも「Like」、「スキ」、「いいね」、「高評価」など自分以外の投稿に対してポジティブな評価をするにはいろんな表現がありますが、レシピアプリということで、レシピを投稿したユーザがもらってうれしい言葉はなんだろうか、と考えました。 「おいしそう」、「食べたい」、「気になる」、「マイ

          teri

          Daily UI #016 Pop-up Overlay

          teri

          Daily UI #015 On/Off Switch

          こんばんは。お疲れ様です。 今回のお題はスイッチ！ 以前別のお題でトグルボタンによるスイッチを作っていたので、何か違うものを作りたいなぁと思っていました。 スイッチ….部屋のスイッチ…とかいろいろ考えているうちに、 そういえば最近の部屋や家電のスイッチはかなりフラットになってきているなぁと思いました。 Webの世界でもフラットデザインは今や当たり前になっていますが、 実世界の形あるものも結構フラットデザインに変わってきたものも多いですよね。 テレビのリモコンもフラットで

          teri

          Daily UI #015 On/Off Switch

          teri

          Daily UI #014 Countdown Timer

          こんばんは。お疲れ様です。 今回のお題はCountdown Timerです。 通販サイトでセール時に表示されるバナーを作成してみました。 「セール終了まで○時間！！」なんて出されると、余計にポチってしまうやつですね（笑） 時々PinterestやInstagramでほかの人のいろんなデザインを見ている中で、 海外デザイナーで各フレームに枠線を付けているスタイルをときどき見かけることがあります。 こういうちょっとレトロでポップなスタイルって何か名前があるんでしょうか🤔

          teri

          Daily UI #014 Countdown Timer

          teri