ますあや／UIデザイナー
しばらくnoteお休みしていましたが、今年も残り3ヶ月を切ったので、トレースについて振り返りをしようと思います。 進捗としては118。仕事が忙しかったこともあり、目標の200の達成はいよいよ怪しくなってきましたが、できるところまでやろうかなと思っています✊。前回挙げたのが#67までだったので、更新数は約50。流石に全部は多いので、いくつかピックアップします。 ほぼ日トレースのルール2019年1月1日、目標宣言した時はこんな感じでした。 ・お金はかけない ・UIパーツのみ
こんにちは。最近トレース記事をupできていませんが、近いうちまとめ的なものを出したいと思っています。 今回は、以前会社のオウンドメディアで書いたBootstrapの記事に、編集を加えて載せてみました。Bootstrapって聞いたことあるけどよくわからない、Bootstrapってなんだ、どこにレスポンシブを打ったらいいのかわからない！という方に読んでいただきたいです。 Bootstrapってなに？BootstrapはCSSフレームワークの1つです。CSSフレームワークは、W
こんにちは。なすのこ改め、ますあやです。普段使われている愛称に名前を変更しました😋 最近デザイナー向けの英語記事をよく見かけますが、私もコツコツ勉強してきた甲斐あって、デザイナーになって1年程してから、バングラデシュのオフショアチームと働くプロジェクトに関わりました。 今回はトレース200から離れて、そのプロジェクトを通して得られた気づきなどを、少しご紹介しようと思います。 🇧🇩アクセントに衝撃 英語をコツコツ勉強してきた人が最初にぶち当たる壁は、おそらく国ごとの英語の
前回投稿してから4ヶ月。 期間は開いてしまいましたが、ほぼ日トレース200とは別に、上司と上期チャレンジすることを決め、それを頑張っていました。 というわけで、今回はようやくデザイナー1年生をクリア(?)した、私の半年間のチャレンジ活動報告をします！🎉🎉🎉🎉 ①AXAのトレース&ルール化1月くらいから、デザインルール周りを任せてもらうことが出てきたので、AXAのトレース&ルール化にチャレンジみました。 デザインガイドラインを公開しているサイトをトレースするのは有効だと
こんにちは、なすのこです。 今回はBehanceから面白いと思ったレイアウトのデザインを4回に分けてトレースしてみました。 オリジナルは、こちら。 トレースはこうなりました👇 2/4 メインビジュアル #24 2/5 We are Airbusのところ #25 2/7 New Eventsのところ #26 2/9 Get on board以下 #27 真似したいポイント 👍全てが王道Helveticaですが、強調するべきところは大きく、そうでないところは小さくタイ
こんにちは、なすのこです。 今回は動画配信アプリの起動時画面をトレースしてみました。 1/28…NETFLIX #20 1/29…Abema #21 1/30…Prime Video #22 2/2…YouTube #23 📀トレース 以下、各アプリの特徴を見ていきたいと思います。 📍Netflix #20 1年前はprimeとほぼ同じ画面だったのに、ずいぶん変わっていて驚きました。 作品の見せ方は、通常小さめのサムネイルとタイトルを横並びにすることが多いですが（他
今回はちょっと番外編です。 仕事の大半がwebやアプリのデザインですが、時々ロゴやイラストを作る機会があるので、3-4回みっちりUIトレースをして分析した後、こういう回をはさんでいきたいと思います。 今回は、例の不採用になった佐野研二郎さんのオリンピック・パラリンピックのシンボルマークをトレースして、デザインの特徴や盗作疑惑問題への対応方法など考察してみたいと思います。以下、トレースしたものです。 これが出された当時、私はまだデザインの勉強もし始めたばかりとかで、感覚的
こんにちは。なすのこです。 今週は、マッキンゼー・アンド・カンパニー（以下：マッキンゼー）のグローバルサイトをトレースしました。 マッキンゼーと言えば、世界屈指の戦略コンサルティング企業ですが、昨今コンサル業界全体でデザインを重要視しており、マッキンゼーも2015年にデザイン会社LUNARを買収したことが話題になりました。 数年前に、マッキンゼーのWebサイト（これは日本向けだったかも）を見たときは、当時からすると大分古臭いデザインで、少しがっかりした記憶があります。と
前置きこんにちは。なすのこです。 ちょっと日にちが空きましたが、トレースは進めておりました。 今回はSNS編、ということでSNSの立ち上げ時ファーストビューをトレースしました。 やったのは、以下の通り。 👪Facebook（#12） 💬Twitter（#13） 📷Instagram（#14） 🎵Tiktok（#15。#10からiphoneXSverに更新） 📀トレースしたもの こうやって見ると、似ているようで各々個性がありますね。 トレースから見えた各UIの共通点①
こんにちは。なすのこです。 トレース10個目にしてちょっと効果が出てきたかも、と思うことがありました。その辺も追追まとめていけたらと思います。 新しい試み前回書いた通り、ただ200個トレースするのもな〜〜と思い始めていたので、同業他社のサイトや、類似サービスで括りながら、トレースしてみることにしました。そちらの方が見えるものが多そうです。 だいたい1トレース3パターンくらいトレースしてみようかと思います😃 さて、第一回のテーマは、定番・SNSです。 こんなラインナップでや
今回のトレース今回はイラストをトレースしてみました。 私は、イラストのブランディングがよくできているWebサイト・サービスのデザインが好きです。デザイナーって、意外と絵に苦手意識を持つ人が多いですが、私は絵を描くのも好きで、上手い下手は置いておいて、アイコンも自作です。 こういう画風は結構好きですが、記号的なイラストの方が、よりWebやアプリのデザインによく馴染みます。 例えばGoogleカレンダーの2月のTOPにあったイラストはこんな感じ。 今回は、こちらのイラスト
こんにちは、なすのこです。やっぱり仕事が始まると、毎日更新というのは難しいですね。 最近はそこそこ忙しい感じです。でもゴリゴリデザインできて楽しい。 去年の今頃は、まだ「デザイナーになりたい！」と思ってた頃で、翌年こんなにデザインしてるなんて想像してなかったな。 数年は（アラサーだけど）雑用かな…と思ってたけど、色々任せてくれて、本当に有り難いです。 さて、今回はTikTokをトレースしました。こちらは昨日やった分でした。 💿オリジナル↓ エンケンさん、好きです。コワ
こんばんは。なすのこです。深夜2時になってしまいました😇。 仕事は20時半には上がったのですが、そのあとご飯食べたりウトウトしてしまってこんな時間に！ さてさて、今日のトレースは〜・・・ カナダのデザイン会社metalabさんの自社サイト。 思いっきりシンプルなのに、ディティールへのこだわりがえげつないmetalabさんのサイト。今回はTOPページではなく、Careerのファーストビューをトレースしました。 💿オリジナル↓ というのも、私は写真レイアウトに苦手意識があ
年明けてから営業2日目。 ありがたいことに（？）今日も忙しい限りです。 時々Twitterなどで、巡り巡って「未経験の私がデザイナーになれましたー！」という報告を見ることがあります。私もそのクチです。 違うかな、と思う点があるとすれば、勉強期間と年齢。Twitterの報告内容を見ると、だいたいデザインの勉強期間が半年だったり、20代前半、なんなら学生さんが多い気がします。私はデザイン勉強は3年くらい、20代後半で異業種からデザイナーに転職したので、結構時間がかかったほうです
日が過ぎてしまいましたが、今日もほぼ日トレースです。 新年早々仕事が長引いてしまい、こんな時間になってしまいました😇 今回は気分を変えてアプリのデザイン。おなじみ、Airbnbです。 💿オリジナル↓ 📀トレース↓ *下のナビのみ、スクショです。 気づいたこと 🕵️♂️左右の余白が、左：24px/右：23px、真ん中の隙間が12pxでした。1パーツのサイズがwidth:158px。写真上のハートは上右8pxくらい。写真の角丸は3px。 🕵️♂️フォントは、多分
前回に引き続き、Loftworkさんのサイトをトレースします。 💿 オリジナル↓ 📀トレース↓ 気づいたこと🤔各見出しの組み合わせが、センター揃えと左寄せで、libre baskerville italic 12px C0A700* proxima nova 28px 333333が逆になっている。バランス的にはどちらかに揃えてもあり得そうですね。 🤔各日本語タイトルやpタグに、font-feature-settings:palt;が記述されていて、文字詰がされてい
