mayuko

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

mayuko

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

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

Figmaで色を調整するときに使用するカラーモデルの種類は5つあります。 カラーモデル：Hex、HSB、HSL、CSS、RGB どのカラーモデルを使っても表示される色は変わりませんが、私はHSBに設定しています。色の3属性(色相,彩度,明度)を調整する際に、色がどのように変化するのか直感的で分かりやすいと思い使用しています。 今回はHSLとの違いも含めて、HSBについて調べてみました。 Figmaのカラーモデル FigmaではHexがデフォルトで設定されていますが、変

mayuko

    • デザインのトレンド

      『はじめてのUIデザイン』という本を読んでみました。 UIデザインの歴史から、コンポーネントなどUIを実際に構成するもの、 情報設計など目に見えない部分まで総合的に書かれているため、 これからUIの勉強を始める方にお勧めの本だなと思いました。 しかも無料で読めます！ 今回はデザインのトレンドについて本から学んだことや調べたことを noteにまとめました。 今はフラットデザインが主流で、昔は立体的なデザインだったことくらいしか知らなかったので、良い学びの機会となりました。

      mayuko

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

        チャックボックスやラジオボタンなど、見た目は似ているけど 使えるシーンは異なります。 正しく使えているのか、不安になった時にぱっと確認できるメモを残します。 Segmented buttons 使用場面：オプションの選択、ビューの切り替え、要素の並べ替え ユーザーが選択できる数：1 つ or 複数のどちらか 備考：2 ~ 5 つの項目に使用(5つ以上ある場合はチップなどを使用する) Chips 使用場面：情報の入力、選択、コンテンツのフィルタリング、アクションのト

        mayuko

        • [Figma]Variableとstyleの違い?

          Figmaでデザインを制作する際、いつも色はStyleを使用して管理しています。Styleに登録するはずがうっかり、Variableに登録した際もいつも通り使用できました。そこでStyleとVariableの違いが気になり、調べました。 そもそもVariableって何!?Variable=変数。色や数字などの値を保存して管理できる機能です。 Variablで何ができるか ベースとなる値を定義してUIをシステム構築できる 異なるブレイクポイントの値を変更できる デザイ

          mayuko

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

          様々な状態を考慮したデザインを実現するためにUI stackという考え方を学んだのでメモします。 UI stackとは？UIをデザインする際に5つの状態を考慮する考え方です。 アメリカのプロダクトデザイナー Scott Hurff氏が世に広めました。 ・Blank(Empty) State（空、何も入力されていない、データがない状態） ・Loading State（待ち時間発生、ローディング状態） ・Partial State（一部分だけ入力されている、Idealには一歩

          mayuko

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

          mayuko

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

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

          mayuko

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

          mayuko

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

          未経験から独学でUIデザイナーを目指している初学者です🤓 今日は、心躍る機能(Nested instances)を発見した為ここに綴ります。 コンポーネント内のインスタンスのproperties変更は大変だった コンポーネント🐓で使用しているインスタンス🐣（ネストされたインスタンス）にComponent propertiesを設定していても、コンポーネント🐓からはインスタンス🐣のproperties の内容を右のパネルで変更できません。 インスタンス🐣のproperti

          mayuko

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

          mayuko

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

          デザインコミュニティBONOの課題で 出張申請ソフトのデザインを行なっています。 まだ作業途中なのですが、今感じていること（色って難しいな…)を綴ります。 やりたいこと まずは色を考えずに表示する情報の配置を考え、 ある程度デザインが定まったところで、配色も考え始めました。 申請一覧に表示するステータスラベル（下書き、承認待ち中など申請物の状態を表すもの）の配色に悩み中です。 参考サイトを調べた上で色の系統としては以下のように検討しています。 下書き：灰色（まだ世に出て

          mayuko

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

          mayuko

          [BONO]UX入門

          デザインコミュニティBONOでUXについて学びました。 その際、お題に挑戦したのでここにアウトプットします。 はじめに -UXとは何か- UX = 人に届く"体験"を設計すること。 　　  人のやりたいことを実現する手段を設計すること。 つまり、目的を決めることがデザインに繋がる。 作る前段階の定義（人に届くアイデアや届け方）をするのがUXデザイン。 お題 ヒアリング結果を元に改善する。 ヒアリングしたもの：サブスクを管理できるアプリの既存のプロトタイプ ▼既存の

          mayuko

          [BONO]UX入門

          mayuko

          [BONO]UIデザインの基本

          デザインコミュニティBONOでのお題に挑戦した内容です。 今回はゼロから作るのではなく、既存サービスのUI改善をする時の考え方で取り組みました。 既存アプリの体験を整理→今回の要件を整理してアイデア出し→UI表現 お題と完成品 お題： Spotifyに作った仮想の機能(他の人が聴いている音楽が分かる機能)を、 Spotifyを初めて利用する人が、知れて使い始めやすくするためのUIを考える。 完成品： これから模範解答と解説をみて改善が必要ですが、一旦自分で作ったものを載

          mayuko

          [BONO]UIデザインの基本

          mayuko

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

          BONOというUIデザインのコミュニティで OOUI(オブジェクト指向UIデザイン)を学習した際の記録です。 OOUIの考え方について タスク中心 = 何をするにも専用の部屋に入る為、1つのことしかできない。(モード) オブジェクト中心 = コンテンツが中心の為、柔軟性がある。(オブジェクトを新規作成、オブジェクトを編集/削除） UIを作成するときは 機能要件を考える際はタスク中心で考える為、 情報構造を考える際に、タスク中心→オブジェクト中心に軸を変換する。 オブジ

          mayuko

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

          mayuko

          [BONO]音声SNSをデザイン

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

          mayuko

          [BONO]音声SNSをデザイン

          mayuko

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

          Figmaでモーダルやキーボードの出現など画面の一部が変化した際 同じ画面を用意せずともPrototypeで表現できる方法をここに記録します。 Open overlay 検索バーをタップすると検索モードに切り替わり、 少し遅れてキーボードが立ち上がる動きを表現。 画面部分とキーボードを用意する。 Prototypeで繋ぐ。 デフォルトで "→Navigate to" の部分を "Open overlay"に変える。 表示位置を決める。（今回はBottom cent

          mayuko

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

          mayuko

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

          checkboxのON/OFFをPrototypeで表現するときの手順をここに記録します。 手順 OFFの状態のcheckboxを用意してcommand + option + K でコンポーネント化する。 画面右側のデザインパネルにあるPropertiesをクリックし、Variantを選択する。 Add variantをクリックしてcheckboxを増やす。 2個目のcheckboxをONの状態のデザインに変更し、それぞれONとOFFにリネームする。 親から子を作

          mayuko

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

          mayuko

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

          Figmaを触り始めた初心者です。 マテリアルアイコンをよく使用するのですが、 アイコン自体を編集できると知ったのでここに記録します。 アイコンの形を編集したい アイコンの形はアウトライン化すると編集できる。 編集したいアイコンを用意する command + option+ B でコンポーネント解除する command + Shift + O でアウトライン化する アイコンをダブルクリックすると編集できる 編集対象のアイコンをアウトライン化してダブルクリックする

          mayuko

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

          mayuko

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

          システム化とはシステム化とは下図のように使用する要素のサイズや色を予め設定（登録）して使用すること。 システム化することのメリット サイズや色のルールを決めて運用することにより、以下のメリットがある。 デザインを構造で組みやすい。 管理しやすい。 チーム内でのコミュニケーションが円滑になる。 微妙なサイズの違いなどがなくなり、統一感がでる。 見た目の要素を役割で設定する（意味で構造を伝える） ＝デザインをシステム化する 具体的に何をシステム化するのか U

          mayuko

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

          mayuko