すーにゃ

制作会社のWebディレクター｜ BONO｜UIUX学習記録 https://twitt…

すーにゃ

制作会社のWebディレクター｜ BONO｜UIUX学習記録 https://twitter.com/sunya_ui

動画詳細UI（SP画面）をリデザイン

はじめにおつかれさまです すーにゃです🧘🏻‍♂ 今まで同様、BONOのコンテンツで、学習をしました。 学習の過程で学んだことを書いていこうと思います🦍 内容今回も、BONOの学習教材で用意されているデザイン動画共有サービスのSP版の動画詳細UIのリデザインに取り組みました💁🏻‍♂️ 今回はUIより、配色をメインとしたリデザインのため下記の点を意識して取り組みました。 ・色数は基本的に増やさない。テーマカラーを決める。 ・アクションなど重要な部分に色でコントラストを。 ・

すーにゃ

    • 動画詳細UIリデザイン

      はじめにおつかれさまです すーにゃです🧘🏻‍♂ 今まで同様、BONOのコンテンツで、学習をしました。 学習の過程で学んだことを書いていこうと思います🦍 内容今回も、BONOの学習教材で用意されているデザイン動画共有サービスの動画詳細UIのリデザインに取り組みました。 下記の点を意識しながら、課題内で用意されている動画詳細UIをリデザインしました。 ・等倍で管理された、統一感のある”余白/サイズ”でリデザイン ・情報の優先度でグループのサイズ比率をリデザイン ・意味で区切

      すーにゃ

      • ホームUIリデザイン

        はじめにおつかれさまです すーにゃです🧘🏻‍♂ 今まで同様、BONOのコンテンツで、学習をしました。 学習の過程で学んだことを書いていこうと思います🦍 内容今回は、BONOの学習教材で用意されているデザイン動画共有サービスのホームUIのリデザインに取り組みました。 課題内で用意されているホーム画面のUI（下記）を、コンポーネントを使ってリデザインしていく学習です📚 Figmaにフォントの種類・サイズやカラーなどを登録して、ルールを意識して上記のホームUIをリデザインし

        すーにゃ

        • 【7月】参考情報まとめ

          SNSをで良さげな情報を見つけてブックマークに保存したままだと、そのまま見なくなりそうなので自分用で簡単にまとめています✏️ UIUIの条件反射についての記事。https://t.co/6vFl5l42Cy - 2021年 iOSのSafariの検索バーが画面下部になり、大きな反発があった - 2023年 Amazonが検索バーを画面下部にするテストをしたが、反発が大きく採用しなかった - 2024年 iOSのスポットライト検索が画面下部になったが大きな反発はなかった pi

          すーにゃ

        動画詳細UI（SP画面）をリデザイン

        すーにゃ

        マガジン

        • UI分析
          2本
        • UIUX学習記録
          9本
        • 情報まとめ
          2本

        記事

          【6月】参考情報まとめ

          SNSをで良さげな情報を見つけてブックマークに保存したままだと、そのまま見なくなりそうなので自分用で簡単にまとめています✏️ UIこれは目次読むだけでなかなかしびれます😀 これがユーザーを欺くためのUIデザインだ！ 最近のWebサイトやスマホアプリで見かけるダークパターンの知識がしっかり身につくデザイン書 -ダー

          すーにゃ

          【6月】参考情報まとめ

          すーにゃ

          プロフィールUIリデザイン

          はじめにおつかれさまです すーにゃです🧘🏻‍♂ 今まで同様、BONOのコンテンツで、学習をしました。 学習の過程で学んだことを書いていこうと思います🦍 内容今回は、BONOの学習教材で用意されているデザイン動画共有サービスのプロフィールUIのリデザインに取り組みました。 課題内で用意されているプロフィール画面のUI（下記）を、コンセプトを使ってリデザインしていく学習です。 デザインフロー①デザインの方針を決める 今回リデザインするデザイン動画共有サービスのプロフィー

          すーにゃ

          プロフィールUIリデザイン

          すーにゃ

          TodoサービスホームUI

          はじめにおつかれさまです すーにゃです🧘🏻‍♂ 今回もBONOのコンテンツで、学習をしました。 引き続き学習の過程で学んだことを書いていこうと思います。 内容BONOの学習教材で用意されているTodoサービスのホームUI擬似ペアデザインしました💁🏻‍♂️ ゼロベースから土台となるTodoサービスのホームUIを作成し、ビジュアルを調整したり、ブラッシュアップしていく学習でした。 TodoサービスのホームUI画面を作成するに当たっての与件は下記です。 ①ナビゲーション

          すーにゃ

          TodoサービスホームUI

          すーにゃ

          デジローのタッチパネル

          はじめにおつかれさまです すーにゃです🧘🏻‍♂ この前、巷で話題？の”デジロー”に行って来ました🍣 デジローは、スシロー横浜鶴屋町店のことなのですが、デカいタッチパネルがあるスシローのことです。 実際にタッチパネルを目の前にして、100年後のスシローに来た気分になりました笑 （平日でもすごい混みそうだったので念のため前日に予約を取りました） お寿司はもちろん美味しかったのですが、このタッチパネルのUIやその他諸々良かったので勝手に分析してみました。 UIOOUI・メン

          すーにゃ

          デジローのタッチパネル

          すーにゃ

          連絡帳アプリ②画面UI作成

          はじめにおつかれさまです すーにゃです🧘🏻‍♂ BONOの学習コンテンツの連絡帳アプリUIトレースに引き続き、連絡帳アプリの作成した画面UIの過程を書いていきたいと思います🌝 内容学習教材で用意されている連絡帳アプリの連絡先一覧UIのデザインしました💁🏻‍♂️ 連絡先アプリ画面のUIを作成するに当たっての与件は下記です。 作成する画面は、①連絡先一覧　②連絡先追加　③連絡先詳細　です。 前回のトレースで学んだように、 ナビーゲーションとコンテンツエリアを意識して作成

          すーにゃ

          連絡帳アプリ②画面UI作成

          すーにゃ

          連絡帳アプリ①UIトレース

          はじめにおつかれさまです すーにゃです🧘🏻‍♂ BONOでの学習を再開して、4週間経ちました。 最初は、仕事に加えて学習時間を確保するのは難しかったですが、今はコンスタントに4〜5時間はUIのインプット・アウトプットに充てる習慣ができてきたので継続したいと思います🦍 今回も学習のプラットフォームは、UIデザイナー初学者の方に学習教材やコミュニティを提供しているBONOです🌅 前回までFigma初級編で学んだ機能を活かして、UIトレースをしました。 （画面のUIも作成し

          すーにゃ

          連絡帳アプリ①UIトレース

          すーにゃ

          Twitter UIトレース

          はじめにおつかれさまです すーにゃです🧘🏻‍♂ BONOでの学習を再開して、3週間経ちました。 出社からリモートワークに戻り働き方が変わったのですが、そのおかげで 朝の仕事までの時間と業務後の時間を有効活用して学習に充てられてます✍🏻 学習のプラットフォームは、UIデザイナー初学者の方に学習教材やコミュニティを提供しているBONOです🌅 前回まで入門編を復習していたので、今回は初級編でFigmaの基本的な操作だけど重要なオートレイアウトやコンポーネント機能を手を動かし

          すーにゃ

          Twitter UIトレース

          すーにゃ

          バナーデザイン

          はじめにおつかれさまです すーにゃです🧘🏻‍♂ Figmaを使って2年くらい経ちますが、少し使う期間が空いてしまったので改めてFigmaの使い方を学んで思い出してみようと思います。 学習のプラットフォームは、UIデザイナー初学者の方に学習教材やコミュニティを提供しているBONOです🌅 2年前にBONOにお世話になっていたのですが、一時学習を中断していたため、また再会します🦍 内容見本を見ながらバナーとテキスト、図形の配置をしました。 使い方で困ることはなかったですが

          すーにゃ

          バナーデザイン

          すーにゃ