今回はデザイン動画投稿サービスのホームUIをリデザインしてみました！ この講座はリデザインをすることでレイアウトのアイデアを形にすることはもちろん、システムを用いてテキストのサイズやフォントの統一を簡単に行えるようにするという意図がありました。 また、コンポーネント機能を活用して作業を効率的に行うことを意識しました。 詳しいお題の内容は下の通り リデザイン前と後の比較 解説 UIをリデザインする作業にあたり、有名な動画配信サービスであるYouTubeのUIを参考にし
はじめに自分でデザインのアイディアを出して形にしていく練習としてBONOの講座に則ってプロフィールUIのリデザインを行いました。 リデザイン前 問題点 ・自己紹介が充実していない ・ユーザの人間性が表れていない ・動画コンテンツの表示が一通りしかない リデザイン後リデザイン前に見つけた問題点をもとに自分なりに考えてUIを変更しました。 まず、トップページの情報を充実させることに注力しました。リデザイン前は、トップページに掲載された情報があまりに少なく、ユーザ像が見え
UIの基礎を学ぶため、そしてFigmaの操作に慣れるために多くのユーザが使用しているアプリ「App Store」のUIをトレースしました。 （サイズはiPhone 8を採用） 方法・App Store の画面をスクリーンショットし、Figmaに張り付ける ・スクリーンショットを参考にしながら自分のフレームの中でUIをトレースする 過程 考察UIトレースをしたのちにセクションごとの文字のフォントやサイズ感、各項目の余白感をまとめてみました。 両脇で均等に余白をとっている
noteを始めて、プロフィール画像がないことに気づいたのでFigmaを用いて初めてアイコンを製作してみました。 制作したものはこちらです とりあえず、mntという名前でやっているのでM、N、Tをうまく重ねてみた結果こうなりました。笑 Mの文字が含まれたアイコンを作ろうと最初に思い、文字を見ていたら、二つの三角形の組み合わせで表現できそうだなと考えてMを作ってみました。それからNとTもうまく組み合わせられないか考えた結果このようなシンプルなアイコンが出来上がりました。
Figmaの基本操作まとめ Figmaは、WebデザインやUIデザインにおいて非常に優れたツールとして知られています。ここでは、Figmaの基本的な操作について紹介していきます。 1．フレームの作成 Figmaでのデザインは、フレーム単位で作成します。まずは、フレームを作成することから始めます。Figmaの左側にあるツールバーの「フレーム」アイコンをクリックし、画面上にフレームを描画します。 2.ツールの選択 Figmaには、様々なツールが用意されています。例えば、
初めまして！現在大学3年生のmnt（仮）と申します！ 今回はnoteの初投稿なので短めにnoteを始めた経緯を書こうと思います。 一言でいうと、「学習したことをまとめて整理するため」です。数週間前にFigmaというツールを使ったUIデザインについての学習をはじめ、そこで学んだ内容をnoteにまとめることで学習の効果が上がり、また、モチベーションの維持につながるのではないかという意図のもと投稿を始めました。 UIデザインはBONOというオンラインコミュニティを用いて学習を進
