【UIデザイン】 GoogleMapsに学ぶ

はまちと申します。都内IT企業で働きながら、UI/UXデザイナーを目指し勉強しています。走ることが好きで、たまに近郊の山にも現れます。

前回に続き、今回はGoogleMapsのトレースとリデザインを行いました。その過程と学びについて書きたいと思います。ツールはFigmaを利用しています。

1. なぜ選んだか?

初回から同様、優れたデザインに触れ、デザインの引き出しを増やし、デザインする力を鍛

もっとみる
ありがとうございます!
1

【UIデザイン初心者向け】一貫性を維持することの重要性について

デザインの一貫性を維持することはどうして重要なのでしょうか?

一貫性を維持することで以下のようなことが達成できます。

・開発のスピードアップ:コンポーネントを再利用できるのでスピードアップにつながります。

・時間とコストの削減:一からデザインを作る必要がないため、他のビジネス面に時間を費やすことができます。

・ユーザーの迷いを軽減できる:同じ性質のボタンに対しては同じ表現をする、というよう

もっとみる

【UIデザイン】YoutubeのUIトレースをして学んだこと

こんばんは。

今回はYoutubeのUIトレースを通してFigmaのツールの使い方を学んだので、それをアウトプットします!

トレースするにあたって、UIデザイナーのカイクンさんのYoutubeチャンネルを見ながら手順を真似して作ってみました。

以前noteに載せたTwitterとInstagramのUIのトレースをしたときは、スクショを下にひいて模写をし、アプリ自体の構造や文字と要素のサイズ

もっとみる
ありがとうございます!
3

【UIデザイン】 Twitterに学ぶ

はまちと申します。都内IT企業で働きながら、UI/UXデザイナーを目指し勉強しています。走ることが好きで、たまに近郊の山にも現れます。

前回に続き、今回はTwitterのトレースとリデザインを行いました。その過程と学びについて書きたいと思います。ツールはFigmaを利用しています。

1. なぜ選んだか?

前回同様、優れたデザインに触れ、デザインの引き出しを増やし、デザインする力を鍛えることが

もっとみる
嬉しいです!これからも頑張ります!
1

【UIデザイン】 WhatsAppに学ぶ

はまちと申します。都内IT企業で働きながら、UI/UXデザイナーを目指し勉強をしています。走ることが好きで、たまに近郊の山にも現れます。

今週から表現の引き出しを増やし、デザイン力をつけるためにトレースとリデザインをはじめました。

これまでAdobe XDを使っていたのですが、2020 Design Tools Surveyを見たところ、Figmaの成長率が物凄く... 使えるようになりたい!

もっとみる
嬉しいです!これからも頑張ります!
3

敬遠していたPhotoShop

XDでデザインをしてきましたが、バナーくらいは作ってみるべきと思いphotoshopでバナートレースしてみました。

XDに比べて圧倒的に出来ることが多いですが、逆に言うと出来ることが多すぎて操作に一苦労しました、、

一方で新たな視点も持つことができました。

フォントと字詰め

しっかりトレースをしてみると、フォントや字詰めでこんなにも印象が変わるのかという発見がありました。

一枚目の漫画の

もっとみる

何度目か分からない挫折

*今までの記事は全て削除しました。

今まで

大学を出た後、何気ない気持ちでシステム開発会社に入社しました。

基本的なプログラミングを学んだ後、デジタルサイネージの部署に配属され、C#を使ったタブレットアプリの開発を担当しました。
アプリ開発はとても楽しく、新卒でこんなに楽しい仕事をできている自分の状況は、とても幸せだと感じていました。

アプリの納品が終わった自分に任された次の仕事は、デザイ

もっとみる

UIトレース#001

トレース実践結果

(左)アプリ画面 (右)トレースした画面

【トレース概要】

・ツール→Adobe XD

・トレース対象アプリ→Pinterest

【トレースでやりきれなかった部分】

・フォントの統一

→WindowsPCでトレースを行ったところ、UI画面で使われているヒメラギゴシックを使用できなかったため、フォントを統一することができなかった。ヒメラギゴシックはMacにデフォルトで

もっとみる

12月のUI模写まとめ

こんにちは、社会人一年目デザイナーの斎藤です。

最近UI模写という練習法を始めました。得られるものは多いのですがウェイトが重いため一人で閉じてやっていると三日坊主になりそうでした。なのでここで練習を公表すること自分にプレッシャーをかけることにしました。毎月更新予定です。

12月模写したもの

TSUKURUBAさん。

僕なりに納得感のあるUI模写の仕組みを始めるにあたって最初に模写しました。

もっとみる

【UIデザイン】InstagramのUIトレースをして学んだこと

こんばんは!

今日はInstagramのプロフィール画面のUIトレースをしてみました。使用ツールはFigmaです。

前回と同様、スクリーンショットを一番背面に置き、その上から文字の形や大きさを整えていく方法で行いました。

気づき

・文字ブラックのみ
→サイズと太さで強調変える

・フォントサイズは基本的に12
(アカウント名14、数字15)

・ボタンにシャドウなし

・図形もブラックかグ

もっとみる
ありがとうございます!
16