soya

UI/UXデザイナーを目指す外語大生👨‍🎓 地方の外語大生/21歳/プログラミング/読書📚 on株式会社UI/UXデザイナーインターン

soya

UI/UXデザイナーを目指す外語大生👨‍🎓 地方の外語大生/21歳/プログラミング/読書📚 on株式会社UI/UXデザイナーインターン

【UI/UX】既存サービスのUIを分析してみた

こんにちは、地方外語大3年のsoyaです。 今回は既存サービスのUIプロダクトを分析した内容をまとめました。今後の学習にあたって、UX的視点がしっかりと紐づいたUIを作れるようになるためのトレーニングとして、取り組みました。 なぜやろうと思ったのか 今回のUIプロダクト分析をやろうと思った理由としては、以前投稿した取り組み「ゼロからサービスを企画してデザインしてみた」について私の所属しているデザインコミュニティBONOでFBをいただいたのですが、そこから浮き彫りになった

soya

    • 【ゼロイチ企画】ゼロからサービスを企画してデザインしてみた

      本記事に興味を持ってくださりありがとうございます🙇‍♂️ ぜひ最後までご覧いただけると嬉しいです！ こんにちは！外語大３年生soyaです。 UI/UXデザイナーを目指して毎日PCとにらめっこしています。 今回はポートフォリオに載せるための自主制作で、2022年1月から「ゼロからサービスを作ってみる」というテーマで、サービスの要件定義～プロトタイプまでの流れを体験しました。本記事はそのプロセスをまとめた内容になります。 ※ちなみに今回も、僕がUI/UXを勉強させてもらって

      soya

      • 【UIデザイン学習記録 #07-2】OOUI コンテンツ中心のUI設計

        こちらOOUI学習記録のpart2になります～。 まだpart1をご覧になっていない方はこちらをご覧になってからの方が本記事を読みやすいかと思いますので是非ご一読ください！！ part2では、part1でお伝えしたOOUI(オブジェクト指向UI)という考え方をもとに僕が作成したアウトプットをお見せしながら、今回の学びや気づきを整理していきます！ ※part1と同様今回もBONOというコミュニティ内コンテンツの学習記録となります。 0. お題■「メンバーリストのアプリケー

        soya

        • 【UIデザイン学習記録 #07-1】OOUI コンテンツ中心のUI設計

          お久しぶりの投稿になります。 今回の投稿内容はOOUIについての学習記録 part1になります。 と思った方もいると思いますが、僕自身も初め知ったときは同じ感想でしたのであまり難しく考えずに見て頂ければと思います～。少し内容が長くなってしまうので、part1ではOOUIの定義などをお伝えし、part2で僕自身のアウトプットをお見せしながら気づいたことや学びをシェアしていきます。 では早速。 ※ちなみに今回もBONOというコミュニティ内コンテンツの学習記録となります。

          soya

        • 【UI/UX】既存サービスのUIを分析してみた

          soya

        • 【ゼロイチ企画】ゼロからサービスを企画してデザインしてみた

          soya

        • 【UIデザイン学習記録 #07-2】OOUI コンテンツ中心のUI設計

          soya

        • 【UIデザイン学習記録 #07-1】OOUI コンテンツ中心のUI設計

          soya

          5つのサービスをUIトレースして、学び感じたこと【UIトレースやってみた】

          前回で5つのUIトレースが終わり、ひとまずUIトレースについての投稿に区切りをつけるということで、今回は5つトレースをしてきて、感じたことや学んだことをつらつらと書いていこうと思います～。 ①見る視点の変化UIトレースを始める前の自分はこれら3つの知識が乏しく、いつも抽象的な考察しかできませんでした。(例えば、「ここの余白少し広いな～」「ここのUI、ブランドの色が使われているな～」程度) ですが、アウトプットを継続してきたことで少しづつUIの見方・感じ方に変化が現れました

          soya

          5つのサービスをUIトレースして、学び感じたこと【UIトレースやってみた】

          soya

          【UIデザイン学習記録 #06】NewsPicksのUIトレース📺(iPhone版)

          早くてもう5回目です👀 UIトレースの投稿はひとまず今回で終了です。 今回UIトレースしたのは、NewsPicksです！！ 最近使い始めたのですが、コンテンツ内容はすごく充実していて今のところ満足してます。 では早速分解してみていこうと思います。 ◆トレース後まとめ今回もトレース後のテキストサイズ、カラー、余白についてまとめたものを載せます。 メインカラーが黒ということで、ロゴのカラー＝ブランドカラーに合わせています。やはり有名なサービスはブランドの色がしっかりと確率

          soya

          【UIデザイン学習記録 #06】NewsPicksのUIトレース📺(iPhone版)

          soya

          【UIデザイン学習記録 #05】LINEのUIトレース👀(iPhone版)

          UIトレースも４回目！ 今回は「メッセンジャーサービスのUIトレース」ということでLINEをトレースしました。 毎日利用しているLINEですが、デザインの目線から画面を見ることなんてなかったので、新鮮ですごく楽しかったです😁 ◆トレース後まとめいつも通り、トレース後のテキストサイズ、カラー、余白についてまとめたものを載せます。 今までトレースしてきたどのサービスよりも配色がシンプルでした。そのためブランド色(グリーン)のインパクトを残すUIとなってましたね。 (LINE

          soya

          【UIデザイン学習記録 #05】LINEのUIトレース👀(iPhone版)

          soya

          【UIデザイン学習記録 #04】AirbnbのUIトレース✈(iPhone版)

          投稿頻度高めです！ 今回はAirbnbのUIトレースになります。 Airbnbとは、簡単に言いますと、Booking.comのような旅先の検索や宿泊先の予約などができるアプリです。 僕はBooking.comの方は利用したことがあったのですが、Airbnbについては全く知らなかったので、アプリを触っていてすごく楽しかったです。 びっくりしたのが、「体験」予約もできることでした！例えば、日本刀を触れる体験や書道体験、日本酒講座なんていうものもありました😊 前置きはこれくら

          soya

          【UIデザイン学習記録 #04】AirbnbのUIトレース✈(iPhone版)

          soya

          【UIデザイン学習記録 #03】YouTube StudioのUIトレース🎥(iPhone版)

          またまた違うサービスのUIトレースのご紹介になります✨ 今回はYouTube Studio(App版)のUIトレースを行いました！！ 普段Studioの方は利用しないので通常のYouTubeのUIとはまた違ったUIでトレースするのが楽しかったです。 トレースした画面は合計3つになります。前回よりも数は少なく、またトレースの仕方にも慣れてきたのであっという間にできました。 (もちろん手は抜いてませんよ💪) ◆トレース後まとめお先にテキストサイズ、カラー、余白の種類について

          soya

          【UIデザイン学習記録 #03】YouTube StudioのUIトレース🎥(iPhone版)

          soya

          【UIデザイン学習記録 #02】TwitterのUIトレース📱(iPhone版)

          こんにちは。 投稿まですこし時間が空いてしまいましたね😓 今回はその間行ってきたTwitter(App版)のUIトレースをご紹介し、学びや自分なりの考察を書いていこうと思います～。 ※ちなみに今回はApp版なので、次回以降でPC版も投稿する予定です。 今回は4つの画面をトレースしています。理由としては、一つの画面だけですと、ページの基本構造や階層関係、ページの関連性などがいまいち理解できないかと思ったためです。ですので今回は、 をご紹介します。 ※SNSをトレースしてい

          soya

          【UIデザイン学習記録 #02】TwitterのUIトレース📱(iPhone版)

          soya

          【UIデザイン学習記録 #01】はじめて「なんとなく...？」を脱却できたお話

          こんにちは。前回の投稿から早速、学習の記録をnoteに残していこうと思います。 今回は、先日の投稿で紹介した「BONO」のお題で、UIビジュアルの意味付けについてを理解を深め、実践でスキルとして身に着けようという練習でした。模範となるUIをいただいてましたので、比較して学んだことや気づきを紹介していきます👨‍🎓 ■お題：「連絡先一覧画面のUIデザイン　~新規連絡先追加も可能に~」今回はこのお題でUIデザインを学習しました。インプット➝アウトプットを素早い流れで行うことでよ

          soya

          【UIデザイン学習記録 #01】はじめて「なんとなく...？」を脱却できたお話

          soya

          UIdesign | DailyUI #009~#011 まとめ

          やっと落ち着けたので、前回で告知したDailyUIの＃009～＃011までの製作物を投稿していきます～ 早速見ていきますね。 #009 [Music Player]サービス 音楽配信アプリ(主な参考：Apple Music/LINE MUSIC) あるアルバム内の楽曲一覧画面と再生画面です。 5W1H 「Why」：音楽を聴くまでのプロセスが長く、操作のストレスを解消したい 「What」：アルバム内一覧＆再生画面のUIデザイン 「Who」：20～30代、男女、音楽配信

          soya

          UIdesign | DailyUI #009~#011 まとめ

          soya

          UIdesign | DailyUI #006~#008 まとめ

          投稿の時間が空いてしまいました。 ごめんなさい🙇 ですがその間もDailyUIは続けていたので、今回は総集編ということでその一部の#006~#008までの製作物を書いていきますね。 なので一つ一つ深堀ができないですがご容赦ください。 では#006の制作物から紹介していきます。 #006 [User Profile]サービス 音声配信アプリ(主な参考：Voicy) あるチャンネルのプロフ画面のUIデザインです。 5W1H 「Who」：30～40代、女性、2児のママさ

          soya

          UIdesign | DailyUI #006~#008 まとめ

          soya

          UIdesign | DailyUI #005[App Icon]

          こんにちはー DailyUI　5日目です。 今回のテーマはアプリのアイコン、、、？ ということですが、何とか完成させました。 ちなみに今回も、前回と同様で制作を開始する前段階で5W1Hのフレームワークを活用しています。 This name is...はい、いかがでしょうか？？ このアプリの名前は、、、　「Medico-」　です！ サムネにも書いてあるのでわかってましたよね（笑） 「Medico」は日本語で「医者」という意味があります。 「co-」は英語の接頭辞をもっ

          soya

          UIdesign | DailyUI #005[App Icon]

          soya

          UIdesign | DailyUI #004[Calculator]

          DailyUI4日目。 最近は通学中や授業中でもいつの間にかデザインのことばかり考えるようになってきました。 「あのポスターのフォントは何だろう？ あのポスターは何を一番に伝えたいのだろう？」 「なんでこの要素を使っているのかな？」 「これ少し使いづらいなぁ、、もっとこうしてほしいなぁ、、」 なんてずっと心の中で呟いてます。 まだ始めたばかりで意識が高いからという可能性は否めませんが、いい調子だと思ってます！！ ということで今回も制作物を見ていきます。 今回からは、デザ

          soya

          UIdesign | DailyUI #004[Calculator]

          soya

          UIdesign | DailyUI #003[Landing Page]

          こんにちは。 DailyUIも3日目です。 今回のテーマはLPでしたが、ファーストビューのみの制作となるので時間はそこまでかかりませんでした。早速見ていきます。 サービスオーガニックコスメを取り扱うお店のLP コンセプト「あなたの肌にナチュラルを」 ポイント1.配色 オーガニックのイメージを強く訴求するために、薄めの色を使用しました。また、透明感を出すために彩度の高い配色にしています。 他にもサイドバーと、メインコンテンツの部分との対比をつけるため濃淡をつけています。

          soya

          UIdesign | DailyUI #003[Landing Page]

          soya