UIデザイナー

UIデザイナー（23卒）デザインを独学中！ スキル：UIUX, プログラミング(HTML, CSS, Ruby on rails) ゆるくDaily UIを制作中

UIデザイナー

UIデザイナー（23卒）デザインを独学中！ スキル：UIUX, プログラミング(HTML, CSS, Ruby on rails) ゆるくDaily UIを制作中

Daily UI #13

こんにちは！本日はDMのデザインを制作していきます。 よく使うSNSのDMやチャットアプリを観察して、比較してみたり自分が使いやすいと思うところをピックアップして作りました。 工夫したところは、区切り線を入れるのではなく余白でグループ化をわかりやすくしたところです。また今回は新しいMock upやplug inを使って作成しました！figmaの便利な機能は都度取り入れていきたいですね！ 本日も見ていただきありがとうございました！💌

UIデザイナー

    • Daily UI #12

      こんにちは！だいぶ日が空いてしまいました🥲 今日はECショップ（web版）のデザインをしていきます。 デザインはこちらです！ ECサイトを作ってみて、難しく感じたところ 情報の優先順位を決めること 今選んでいるカラーを表示する部分のデザイン どんな情報を載せたらいいか 商品名と価格、どちらを目立たせるべきか？どんな色でも、選択しているのがわかりやすいデザインってなんだろう？余白が目立つけど、本来もっと掲載しなければいけない情報がありそう…などなど、制作していて思い浮

      UIデザイナー

      • Daily UI #11

        こんにちは！🐶 本日はフラッシュメッセージのUIを制作していきます！ macのログイン画面をリデザインしてみました。 パスワードが合っていた際と間違っていた際で表示されるデザインを想定していて、ユーザーアイコンの部分がイラストに変わるイメージです。デザインに使うイラストを初めて自分で描いてみました！ こだわりポイント エラー画面で、原色の赤を使用するとドキッとする（色の主張が強い）ので、少し柔らかい赤を使用した。 OKとNGのイラストに共通項を持たせるために口のデザイ

        UIデザイナー

        • Daily UI #10

          おはようございます！ 今日はSocial share のUIを作成していきます！祝10回❣️ iPhoneの写真機能で、写真を共有する時をイメージしてUIを制作しました。 頻繁に利用するユーザーで表示するのではなくアプリアイコンで表示することで、タップの工程は増えてしまうかもしれないけれど、アプリを選ぶ→ユーザーを選ぶというシンプルな動線になると思い、このような設計をしました。 iPhoneの写真アプリはきちんと設計されているので、デザインの面で直すところが見つからずリデ

          UIデザイナー

          Daily UI #9

          こんにちは！ 本日は音楽プレイヤーのUIデザインです！音楽大好き人間なのでワクワクしてます❣️ 今回はレコードを意識したシンプルなUIをテーマに制作しました。 ジャケット写真寄って雰囲気や見やすさが変わらないように意識しました。 工夫した点 ジャケット写真を大きく見せるレイアウト（一番大切なのは再生している音楽がわかること） タイトル・アーティスト・アルバム名などの情報はまとめて上部に表示 歌詞の太さや透明度を調節して、今どこまで再生されたかをわかりやすく ジャケ

          UIデザイナー

          Daily UI #9

          UIデザイナー

          Daily UI #8

          おはようございます！ 本日のお題は「404ページ」です！ ページが見つからないときに表示される404 not found. これが表示される原因はいくつか種類があり、例えば そもそものサイトが消えている リダイレクト設定できていない URLが間違えている などの理由が考えられます。 日本のサイトでは、質素な（文字しか書かれていないような）ページもあるのですが、海外のサイトを見てみるとユーモアに溢れていて可愛らしいデザインがたくさんありました！💌 サイトを訪れた人が4

          UIデザイナー

          Daily UI #8

          UIデザイナー

          Daily UI #7

          おはようございます！🍳 本題に入る前に 毎日一つUIを制作してnoteに載せようと意気込んだものの、なかなか継続できなかったので、今回からDaily UIのやり方を変えて続けやすくしようと思います！ Daily UIの目的：幅広いUIデザインに触れて、実際に手を動かすことでスキルを高めること。 今までの方法：アプリ機能やペルソナがはっきりしていない状態で、なぜその機能がいるのか？このようなデザインになっている理由は？など深掘りしすぎて、制作の進みが悪かった。 今後の

          UIデザイナー

          Daily UI #7

          UIデザイナー

          Daily UI #6

          こんにちは！ 本日はユーザープロフィールのUIを制作していきます！ 今回は日常をアップするSNSのプロフィール画面を想定して制作します。 まずはいつも通り、必要な要素の書き出しと主要アプリのトレースをしてユーザープロフィール画面がどのようなものかを把握します。 ユーザープロフィール画面に必要な要素を書き出す。名前、ユーザーネーム、プロフィール、アイコン写真… この辺りはユーザーがどんな人かを表示する情報なのでマストで必要そうです。一方で、書き出していく過程で「この情報は必要

          UIデザイナー

          Daily UI #6

          UIデザイナー

          Daily UI #5

          こんばんは！ 前回の投稿からだいぶ日が空いてしまいましたが、今日は「アプリアイコン」のデザインをします！ 今回はカレンダーアプリのデザイン場面を想定して、制作を行いました！ 既存のカレンダーアプリの観察初めに、App Storeでダウンロード数が多いアプリのアイコンを観察して、気が付いたことをまとめました。 カレンダー要素を抜粋しているアイコン アイコンに曜日や日付が書いてあるものです。これはAppleの純正のカレンダーやGoogleのカレンダーの特徴で、慣れている人は

          UIデザイナー

          Daily UI #5

          UIデザイナー

          Daily UI #4

          こんばんは！ 本日のお題は電卓です！今回のデザインは電卓のUIトレースとニューモフィズムの練習を目的にして制作したいと思います！ ニューモフィズムとは？（Neumorphism） ニューモフィズムとは背景から押し出されていたり、窪んでいたりするデザインのことで、2020年ごろに流行しました。 私はデジタルの中に現実が存在している様子がすごく好きで、以前ニューモフィズムでUIを制作したことがあります。その時は使いづらさが目立ち、他のデザインを採用しましたが、今回は電卓のU

          UIデザイナー

          Daily UI #4

          UIデザイナー

          Daily UI #3

          こんばんは！ 本日3日目！今日のお題はLPです！スマートフォンの画面設計が多く、webは久しぶりなので時間がかかりそうですが、今日も頑張って制作していきます！ ステップ1, webサイトの内容を考える今回は要素を洗い出す前に、何のサイトなのかを明確にしないとヘッダー欄が埋まらないと思ったので、先に内容を決めます。 そもそも、LPとHPの明確な違いがわからなかったので調べてみました。 LPとHPの違いとは？ LPはランディングページの略で、ユーザーに特定の行動をしてもらう

          UIデザイナー

          Daily UI #3

          UIデザイナー

          Daily UI #2

          皆さんこんにちは！ 本日もDaily UIをやっていきます！今日のお題は、クレジットカードのチェックアウトフォームです。 ステップ1, チェックアウトフォームに必要な要素を洗い出す。Daily UIからのヒントで、クレカ番号、日付、セキュリティ番号を忘れないでね🙌🏻とありました。それ以外に必要な要素はないか探していきます。 クレジットカード名義 使用可能なカードブランド記載 金額表記 商品一覧 決済確定ボタン クレカ情報保存の可否 ちょっと要素が多そうですね。

          UIデザイナー

          Daily UI #2

          UIデザイナー

          Daily UI はじめます。(Day1)

          みなさま、初めまして！ 今日からデザインのアウトプットの場としてこのnoteを活用していきたいと思います。 テーマなどはDaily UIのものを使用しています。 それでは早速、初日の投稿です。 ステップ1, サインアップ画面に必要な要素を洗い出すまず初めに、サインアップ画面にはどんな要素が必要かを考え、洗い出した結果以下のようになりました。 メールアドレス パスワード 初めての場合、新規登録 二回目以降の場合はログイン Gmail, Facebook, twit

          UIデザイナー

          Daily UI はじめます。(Day1)

          UIデザイナー