マガジンのカバー画像

UIデザイン勉強日記

6
UIデザイン勉強の記録
運営しているクリエイター

記事一覧

【UIデザイン練習日記#6】Cocoda Training-情報設計

こんにちは!今回もUI基礎の勉強のためにCocoda Trainingを進めていきます✍️今回のテーマは情報設計!ラストがんばります🔥 Xdで制作し、所要時間はどれも1時間ほどです。 1.メモアプリの新規メモ作成画面🌟情報設計の考え方 ①ユーザーシナリオの整理を行う └ユーザーがどのようなシーンで利用し、どのような操作をすることが想定されるか(開く→記入→保存など流れを書く) ②必要な導線の整理 └今回はメモの記入+追加がポイントになる。どうすればわかりやすいか?スム

【UIデザイン練習日記#5】Cocoda Training-マイクロインタラクション

こんにちは! UI基礎の勉強のために、Cocoda Trainingの中の『マイクロインタラクション』に取り組んでみました。 1.マイクロインタラクションとは 「ユーザーとサービスをつなぐ最小単位のインタラクション」を指す 主な流れ:きっかけ→処理→結果 └ユーザーの行動をきっかけにして、アプリが処理をし、結果が返る 2.入力しやすいUI ショッピングアプリの決済画面 3.ユーザーのミスを防ぐUI 映画配信アプリのインストール時のカテゴリ選択画面 3.完了を表

【UIデザイン練習日記#4】Cocoda Training『ガイドライン』まとめ

こんにちは!UI基礎の勉強のために、Cocoda Trainingの中のUI入門-ガイドラインに取り組んでみました。この章は配布されているデザインガイドライン(コンポーネント)に合わせてデザインをつくっていくという内容になっています。 使用アプリはXd、所要時間は大体30分〜かかって1時間くらいです。 最新の画面サイズ(390*844)に合わせて制作したため、見本のものと余白やサイズが異なる場所があります!あとデザインもややいじってます! 1.ガイドライン入門-好みのプレ

【UIデザイン練習日記#3】UIトレースのやり方

こんにちは!本日はUIトレースのやり方について勉強しました。 教材動画はこちらです⏬ 今回はトレース元としてApp StoreのUIを使いました。 私はiphone12を使っているので、スクリーンショットを390*844に縮小してトレースしました。(この時点でめちゃくちゃ迷って大変だった) 完成したものがこちらです。(所要時間4時間)カーニングができていないので、文字には少しずれがあります。 また、分析を行ったものがこちらです。 そもそものキャンバスサイズをどうするの

【UIデザイン練習日記#2】メッセージアプリからUIデザインを学ぶ

こんにちは!前回に引き続き、UIデザインの勉強記録をnoteに残していきます。教材動画はこちらです⏬ 完成したものはこちらです。(所要時間4時間) これ、「名前」とか「メッセージ」じゃなくてちゃんとダミーのものを入れるべきでしたね。反省。 さらに課題として、連絡先のUIデザイン(一覧、新規登録、完了まで)を作成しました。完成したものがこちらです。 当たり前に使っているものでも、なぜそうなるのか?をしっかり意識してデザインすることを大切にしたいと感じました。デザインをして

【UIデザイン練習日記#1】はじめてのFigmaとUIデザイン

こんにちは!私はデザイナー(分野は迷い中)を目指している大学4年生です。最近新たにUIデザインの勉強を始めたため、勉強記録をnoteに残していこうと思います。 ちなみに、デザインを半年勉強した現時点のスキルはこんな感じです。デザインを一通りやった中で、私はWebの情報設計に基づくデザインが一番やってて楽しいと感じたため、UIデザインに興味を持ちました。 まずはFigmaの練習のために、UIデザイナーのカイクンさんの動画を見ながらYoutubeのUIトレースを行いました!