mayuko

1年目のUIデザイナーです。 日々の学びを綴ります。

mayuko

1年目のUIデザイナーです。 日々の学びを綴ります。

カラーモデル HSBってなに？

Figmaで色を調整するときに使用するカラーモデルの種類は5つあります。 カラーモデル：Hex、HSB、HSL、CSS、RGB どのカラーモデルを使っても表示される色は変わりませんが…

mayuko
mayuko
1か月前
5

デザインのトレンド

『はじめてのUIデザイン』という本を読んでみました。 UIデザインの歴史から、コンポーネントなどUIを実際に構成するもの、 情報設計など目に見えない部分まで総合的に書か…

mayuko
mayuko
1か月前
7

混同しやすいUIコンポーネント[選択肢]

チャックボックスやラジオボタンなど、見た目は似ているけど 使えるシーンは異なります。 正しく使えているのか、不安になった時にぱっと確認できるメモを残します。 Segm…

mayuko
mayuko
2か月前
6

[Figma]Variableとstyleの違い?

Figmaでデザインを制作する際、いつも色はStyleを使用して管理しています。Styleに登録するはずがうっかり、Variableに登録した際もいつも通り使用できました。そこでStyle…

mayuko
mayuko
2か月前
8

[UI stack]考慮漏れをなくそう〜

様々な状態を考慮したデザインを実現するためにUI stackという考え方を学んだのでメモします。 UI stackとは？UIをデザインする際に5つの状態を考慮する考え方です。 アメ…

mayuko
mayuko
2か月前
7

[Figma]サイズ違いのフォントを合わせる方法

サイズの違うフォントを合わせる方法をメモします。 手順 Auto layout横の…を選択 Align text baselineの☑︎を選択 以上です。とても簡単!!

mayuko
mayuko
2か月前
14

[ Figma -Nested instances- ]コンポーネントのネストインスタンスのプロパティ変更

未経験から独学でUIデザイナーを目指している初学者です🤓 今日は、心躍る機能(Nested instances)を発見した為ここに綴ります。 コンポーネント内のインスタンスのproper…

mayuko
mayuko
4か月前
6

背景色を考える-コントラスト-

デザインコミュニティBONOの課題で 出張申請ソフトのデザインを行なっています。 まだ作業途中なのですが、今感じていること（色って難しいな…)を綴ります。 やりたいこ…

mayuko
mayuko
4か月前
11

[BONO]UX入門

デザインコミュニティBONOでUXについて学びました。 その際、お題に挑戦したのでここにアウトプットします。 はじめに -UXとは何か- UX = 人に届く"体験"を設計すること…

mayuko
mayuko
5か月前
10

[BONO]UIデザインの基本

デザインコミュニティBONOでのお題に挑戦した内容です。 今回はゼロから作るのではなく、既存サービスのUI改善をする時の考え方で取り組みました。 既存アプリの体験を整理…

mayuko
mayuko
5か月前
17

[BONO] OOUI コンテンツ中心のUI設計

BONOというUIデザインのコミュニティで OOUI(オブジェクト指向UIデザイン)を学習した際の記録です。 OOUIの考え方について タスク中心 = 何をするにも専用の部屋に入る為…

mayuko
mayuko
5か月前
19

[BONO]音声SNSをデザイン

"BONO"というUIを勉強するコミニュティで音声SNSというX(旧Twitter)の音声版のようなアプリを1からデザインするというお題に挑戦しました。 1からデザインといってもほぼX…

mayuko
mayuko
5か月前
16

[Figma]Open overlay-モーダルなどのPrototype作成方法-

Figmaでモーダルやキーボードの出現など画面の一部が変化した際 同じ画面を用意せずともPrototypeで表現できる方法をここに記録します。 Open overlay 検索バーをタップ…

mayuko
mayuko
6か月前
12

[Figma]label付きcheckboxのPrototype作成方法

checkboxのON/OFFをPrototypeで表現するときの手順をここに記録します。 手順 OFFの状態のcheckboxを用意してcommand + option + K でコンポーネント化する。 画面右側…

mayuko
mayuko
6か月前
17

[Figma] アウトライン化する

Figmaを触り始めた初心者です。 マテリアルアイコンをよく使用するのですが、 アイコン自体を編集できると知ったのでここに記録します。 アイコンの形を編集したい アイ…

mayuko
mayuko
6か月前
12

[BONO] UIビジュアル基礎~ビジュアルシステムでリデザインしよう！~で学習したことの備忘録

システム化とはシステム化とは下図のように使用する要素のサイズや色を予め設定（登録）して使用すること。 システム化することのメリット サイズや色のルールを決めて…

mayuko
mayuko
6か月前
36
mayuko

mayuko

カラーモデル HSBってなに？

カラーモデル HSBってなに？

Figmaで色を調整するときに使用するカラーモデルの種類は5つあります。
カラーモデル：Hex、HSB、HSL、CSS、RGB

どのカラーモデルを使っても表示される色は変わりませんが、私はHSBに設定しています。色の3属性(色相,彩度,明度)を調整する際に、色がどのように変化するのか直感的で分かりやすいと思い使用しています。

今回はHSLとの違いも含めて、HSBについて調べてみました。

Fi

もっとみる
mayuko

mayuko

デザインのトレンド

デザインのトレンド

『はじめてのUIデザイン』という本を読んでみました。
UIデザインの歴史から、コンポーネントなどUIを実際に構成するもの、
情報設計など目に見えない部分まで総合的に書かれているため、
これからUIの勉強を始める方にお勧めの本だなと思いました。
しかも無料で読めます！

今回はデザインのトレンドについて本から学んだことや調べたことを
noteにまとめました。
今はフラットデザインが主流で、昔は立体的

もっとみる
mayuko

mayuko

混同しやすいUIコンポーネント[選択肢]

混同しやすいUIコンポーネント[選択肢]

チャックボックスやラジオボタンなど、見た目は似ているけど
使えるシーンは異なります。
正しく使えているのか、不安になった時にぱっと確認できるメモを残します。

Segmented buttons

使用場面：オプションの選択、ビューの切り替え、要素の並べ替え

ユーザーが選択できる数：1 つ or 複数のどちらか

備考：2 ~ 5 つの項目に使用(5つ以上ある場合はチップなどを使用する)

Ch

もっとみる
mayuko

mayuko

[Figma]Variableとstyleの違い?

[Figma]Variableとstyleの違い?

Figmaでデザインを制作する際、いつも色はStyleを使用して管理しています。Styleに登録するはずがうっかり、Variableに登録した際もいつも通り使用できました。そこでStyleとVariableの違いが気になり、調べました。

そもそもVariableって何!?Variable=変数。色や数字などの値を保存して管理できる機能です。

Variablで何ができるか

ベースとなる値を定義

もっとみる
mayuko

mayuko

[UI stack]考慮漏れをなくそう〜

[UI stack]考慮漏れをなくそう〜

様々な状態を考慮したデザインを実現するためにUI stackという考え方を学んだのでメモします。

UI stackとは？UIをデザインする際に5つの状態を考慮する考え方です。
アメリカのプロダクトデザイナー Scott Hurff氏が世に広めました。

・Blank(Empty) State（空、何も入力されていない、データがない状態）
・Loading State（待ち時間発生、ローディング状

もっとみる
mayuko

mayuko

[Figma]サイズ違いのフォントを合わせる方法

[Figma]サイズ違いのフォントを合わせる方法

サイズの違うフォントを合わせる方法をメモします。

手順

Auto layout横の…を選択

Align text baselineの☑︎を選択

以上です。とても簡単!!

mayuko

mayuko

[ Figma -Nested instances- ]コンポーネントのネストインスタンスのプロパティ変更

[ Figma -Nested instances- ]コンポーネントのネストインスタンスのプロパティ変更

未経験から独学でUIデザイナーを目指している初学者です🤓
今日は、心躍る機能(Nested instances)を発見した為ここに綴ります。

コンポーネント内のインスタンスのproperties変更は大変だった

コンポーネント🐓で使用しているインスタンス🐣（ネストされたインスタンス）にComponent propertiesを設定していても、コンポーネント🐓からはインスタンス🐣のpr

もっとみる
mayuko

mayuko

背景色を考える-コントラスト-

背景色を考える-コントラスト-

デザインコミュニティBONOの課題で
出張申請ソフトのデザインを行なっています。
まだ作業途中なのですが、今感じていること（色って難しいな…)を綴ります。

やりたいこと

まずは色を考えずに表示する情報の配置を考え、
ある程度デザインが定まったところで、配色も考え始めました。
申請一覧に表示するステータスラベル（下書き、承認待ち中など申請物の状態を表すもの）の配色に悩み中です。

参考サイトを調

もっとみる
mayuko

mayuko

[BONO]UX入門

[BONO]UX入門

デザインコミュニティBONOでUXについて学びました。
その際、お題に挑戦したのでここにアウトプットします。

はじめに -UXとは何か-

UX = 人に届く"体験"を設計すること。
　　 人のやりたいことを実現する手段を設計すること。

つまり、目的を決めることがデザインに繋がる。
作る前段階の定義（人に届くアイデアや届け方）をするのがUXデザイン。

お題

ヒアリング結果を元に改善する。

もっとみる
mayuko

mayuko

[BONO]UIデザインの基本

[BONO]UIデザインの基本

デザインコミュニティBONOでのお題に挑戦した内容です。
今回はゼロから作るのではなく、既存サービスのUI改善をする時の考え方で取り組みました。
既存アプリの体験を整理→今回の要件を整理してアイデア出し→UI表現

お題と完成品

お題：
Spotifyに作った仮想の機能(他の人が聴いている音楽が分かる機能)を、
Spotifyを初めて利用する人が、知れて使い始めやすくするためのUIを考える。

もっとみる
mayuko

mayuko

[BONO] OOUI コンテンツ中心のUI設計

[BONO] OOUI コンテンツ中心のUI設計

BONOというUIデザインのコミュニティで
OOUI(オブジェクト指向UIデザイン)を学習した際の記録です。

OOUIの考え方について

タスク中心 = 何をするにも専用の部屋に入る為、1つのことしかできない。(モード)

オブジェクト中心 = コンテンツが中心の為、柔軟性がある。(オブジェクトを新規作成、オブジェクトを編集/削除）

UIを作成するときは
機能要件を考える際はタスク中心で考える

もっとみる
mayuko

mayuko

[BONO]音声SNSをデザイン

[BONO]音声SNSをデザイン

"BONO"というUIを勉強するコミニュティで音声SNSというX(旧Twitter)の音声版のようなアプリを1からデザインするというお題に挑戦しました。
1からデザインといってもほぼXやInstagramを参考にしました。
自分の空っぽな引き出しから おかしなデザイン案を練るより、既存のサービスを見てどういう構造なのか確認しながら真似て学びました。
反省点や、作成時のポイントなどをここに記録します

もっとみる
mayuko

mayuko

[Figma]Open overlay-モーダルなどのPrototype作成方法-

[Figma]Open overlay-モーダルなどのPrototype作成方法-

Figmaでモーダルやキーボードの出現など画面の一部が変化した際
同じ画面を用意せずともPrototypeで表現できる方法をここに記録します。

Open overlay

検索バーをタップすると検索モードに切り替わり、
少し遅れてキーボードが立ち上がる動きを表現。

画面部分とキーボードを用意する。

Prototypeで繋ぐ。

デフォルトで "→Navigate to" の部分を "Open

もっとみる
mayuko

mayuko

[Figma]label付きcheckboxのPrototype作成方法

[Figma]label付きcheckboxのPrototype作成方法

checkboxのON/OFFをPrototypeで表現するときの手順をここに記録します。

手順

OFFの状態のcheckboxを用意してcommand + option + K でコンポーネント化する。

画面右側のデザインパネルにあるPropertiesをクリックし、Variantを選択する。

Add variantをクリックしてcheckboxを増やす。

2個目のcheckboxをO

もっとみる
mayuko

mayuko

[Figma] アウトライン化する

[Figma] アウトライン化する

Figmaを触り始めた初心者です。
マテリアルアイコンをよく使用するのですが、
アイコン自体を編集できると知ったのでここに記録します。

アイコンの形を編集したい

アイコンの形はアウトライン化すると編集できる。

編集したいアイコンを用意する

command + option+ B でコンポーネント解除する

command + Shift + O でアウトライン化する

アイコンをダブルクリ

もっとみる
mayuko

mayuko

[BONO] UIビジュアル基礎~ビジュアルシステムでリデザインしよう！~で学習したことの備忘録

[BONO] UIビジュアル基礎~ビジュアルシステムでリデザインしよう！~で学習したことの備忘録



システム化とはシステム化とは下図のように使用する要素のサイズや色を予め設定（登録）して使用すること。

システム化することのメリット

サイズや色のルールを決めて運用することにより、以下のメリットがある。

デザインを構造で組みやすい。

管理しやすい。

チーム内でのコミュニケーションが円滑になる。

微妙なサイズの違いなどがなくなり、統一感がでる。

見た目の要素を役割で設定する（意味で構

もっとみる