きい

不動産テックのUI/UXエンジニア。Vue.js / Reactなどに触れています。C…

きい

不動産テックのUI/UXエンジニア。Vue.js / Reactなどに触れています。CSSが好き。
  • 固定された記事

はじめから丁寧に！ ノンデザイナーのためのFigma説明書

Figmaでできることを、はじめから丁寧にご紹介したいnoteです。 私界隈でFigma需要が高まりつつある昨今、勉強手段があまり多くなくまとまった情報も少ないので、なにか取っ掛かりになればと思い立ちました。 簡単な図を作成したいだけなんだけど使い方がわからない、デザイナーじゃないけどある程度Figmaを使えるようになりたい、という方の参考になればうれしいです。 画面の見方まずは画面の見方について、Desktop Appの画面で説明します。ブラウザで使う場合もそんなに変

きい

    • カードコンポーネント vs リストビュー

      カードコンポーネントとリストビュー。どのように使い分けていますか？ どちらもアイテムごとに情報を整理して並べられる点では似ていますね。しかし、見た目はもちろん用途を考えても似て非なる要素です。 本記事は、2つの特性を知って適切に使い分けようね、というための記事です。 カードコンポーネント閲読性に優れる。さまざまな情報を閲覧させたい場合に向いている。また、グラフや数値的なものを可視化して見てもらいたいケースにも有用。 情報の概要を確認しやすい。 関連情報が同一グループ内に

      きい

      • ユーザー理解の大切さを知る！「シェイクの売り上げを伸ばすには？」（ジョブ理論）

        シェイクの売り上げを伸ばすには、どんな方法があるだろうか入れ物を可愛くして、インスタにあげてもらおう 味を変えよう もっと冷たくしてみよう など、考えられることはいろいろある。 では、実際に来店客の生活に起きたどんな「仕事（ジョブ）」が、その人たちを店に向かわせて、シェイクを購入させているのだろうか？ シェイクのお店に並んでいる人を観察してみよう見えない課題や潜在的価値を紐解くのに役立つのが行動観察（エスモグラフィ調査）である。 来店客の生活や行動を観察してみると、

        きい

        • そのボタン、その色で大丈夫？ ― コントラスト比でみる配色のコツ

          今回は配色で重要となるコントラスト（= 明度差）のお話です。 人の色の見え方には個性があります。ある人にとっては判別可能な色の違いであっても、ある人にとっては似たような色に見えたり、色に差がないように感じることがあります。 どんな人にとっても見やすい配色の代表格は、白と黒のように極端に違う色ですね。白と黒まではいかなくともコントラストがはっきりした色同士で組み合わされていることが、誰にとってもやさしいデザインである、といえます。 あなたが作ろうとしているボタンはどうでしょ

          きい
        • 固定された記事

        はじめから丁寧に！ ノンデザイナーのためのFigma説明書

        きい

        • カードコンポーネント vs リストビュー

          きい

        • ユーザー理解の大切さを知る！「シェイクの売り上げを伸ばすには？」（ジョブ理論）

          きい

        • そのボタン、その色で大丈夫？ ― コントラスト比でみる配色のコツ

          きい

          筋の通ったUI設計をしたいね、という話

          UI設計において、体験の良さを決める重要な要素とは！ そう、一貫性ですね。 画面内の要素がちぐはぐで一貫性のないプロダクトは、ユーザーがしたいはずのタスクの進行を阻害する要因になります。各要素のデザインや動作が異なるUI設計になっていると、ユーザーの認知負荷は高まり、各要素の挙動は予測しにくいものになります。これは誤操作を助長する要因にもなります。 "一貫性の担保"が大切扱いやすいUI設計をするためには、はじめから終わりまで矛盾のない設計で、一貫性を保つように作ることが大

          きい

          筋の通ったUI設計をしたいね、という話

          きい

          ユーザーの利用体験を期間ごとに分けて考えよう - UX期間モデルについて

          "利用中"だけがプロダクトの体験価値ではないあるプロダクトについて、UXを見直そう、UXを向上させよう、と思ったときにまず思い浮かべるのは利用中の場面ではないでしょうか。たしかに、それはユーザーエクスペリエンスの中心となる経験といえますが、プロダクト利用中だけがユーザーがする体験のすべてではありません。すなわち、利用前、利用中、利用後、そして利用時間全体が、そのプロダクトの体験価値を決めるのです。 この見方は『UX白書（2011）』「3. ユーザーエクスペリエンスの期間」で提

          きい

          ユーザーの利用体験を期間ごとに分けて考えよう - UX期間モデルについて

          きい

          ユーザビリティを決める、UIデザイン作成フェーズ

          以下の段階に沿って、それぞれの特徴を整理する。 スケッチ モック プロトタイプ 1. スケッチ概要 配置する要素を簡単に書いただけのラフ画のようなもの。初期段階で確認者と方向性を決めることができ、手戻りの防止になる。作り上がってしまうと問題点が見えにくくなるため、この段階ですり合わせをし、フィードバックの機会を設けると良い。 できること 配置する要素がおおまかにわかる。 簡単に修正したり共有したりできる。 できないこと 画面遷移のイメージは共有することがで

          きい

          ユーザビリティを決める、UIデザイン作成フェーズ

          きい

          シンプルなUIデザイン、どう作る？ - コンプレクション・リダクション

          コンプレクション・リダクションとは？「コンプレクション・リダクション（Complexion Reduction）」とは、色彩を抑えたデザインのことを指す。大きく強調された見出しを用いて、大きな余白をとることでメリハリをつけるのが特徴。 デザインのメリット１．装飾目的の要素を排除することで「機能」にフォーカスすることができる ・ 審美性よりも、操作性を重視 ・ 情緒的価値よりも、機能的価値を重視 ・ ブランドカラーよりも、プロダクトカラーを重視（※ブランドカラーを適用し

          きい

          シンプルなUIデザイン、どう作る？ - コンプレクション・リダクション

          きい

          もっと早く知っておきたかった色彩の話

          依然として駆け出し続けているエンジニアのきいです。デザインを見たり考えたりすることが好きなわたしは、日々「コードを書かねばならぬ」という強迫観念にあおられながら、まったく無縁というわけでもない「デザインも勉強したいよ！」と思い、全人類に内緒で勉強していたことを満を持してnoteで放出します。 なぜ、いまなのか？ 色彩検定２級に合格したから🎉 です（本日15時発表）。箔が付いたでしょ？ と言いたいわけじゃなく、もう勉強しちゃったもんね〜 という意味です。 ここでは、はじめて

          きい

          もっと早く知っておきたかった色彩の話

          きい