マガジンのカバー画像

UX

14
運営しているクリエイター

記事一覧

Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~

Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~

私ごとですが、ついにデザイナー歴が17年を超えてきました。
時代の変化とともにツールや常識も変わりつづけています。

現在はFigmaがUIツールとしては一強で、UIデザイナーの方はほとんどの方が使われているのではないかと思います。
とても使いやすく管理もしやすいツールですが、使い方を理解していないと混乱を招いたり、自分しか使えないコンポーネントも作り得てしまいます。

今回はUI,UXでいうと1

もっとみる
ダイアログとモーダルの違

ダイアログとモーダルの違

UIを作成していると「ダイアログ」や「モーダル」という言葉が飛び交うと思いますが、違いをしっかり説明できるでしょうか?
違いがあやふやで気分で使うワードを変えたりしている人は多いのではないでしょうか?

というのも、私自身が固定概念で「ダイアログ」や「モーダル」と思い込んでいたものがどうやら認識が違いそうだぞ、、?と気づいたため改めて単語の意味を調べ直しました。

このワードへの認識違いで意図して

もっとみる
UXに関わる職業一覧〜Coursera~GoogleからUXを学ぶ〜

UXに関わる職業一覧〜Coursera~GoogleからUXを学ぶ〜

以前Courseraの中からGoogle UXコースの初級編を受けてみた感想を投稿しましたが、今回はその内容を紹介します。

まずはGoogle内のUXに携わる人たちの職業一覧とその役割です。

UX職業一覧

まとめるとのくらいの種類の業種がありますが、それぞれの役割を見ていきましょう。

Interaction Designer(インタラクションデザイナー)

ユーザーが簡単に移動できるよう、

もっとみる
デザインに活かせるフレームワーク20

デザインに活かせるフレームワーク20

久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。
有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。

(ちなみにここでいう「フレー

もっとみる
Design Systemの作り方シーズン2〜コンポーネントの作り方〜

Design Systemの作り方シーズン2〜コンポーネントの作り方〜

シーズン2です。
Desigh Systemって作るのめんどくさいですよね。(再)

シーズン1で紹介した最低限これだけやっとこう編から一歩踏み込み、
実際コンポーネントを作っていく時ってどうしたらいいんだっけ?
というところを紹介していsきます。

Atomic Design思考を取り入れようまずはAtomic Designというのをご存知でしょうか?
ご存知ない方はこちらをご覧ください。

A

もっとみる
Design Systemの作り方〜とりあえずこれだけやろう〜

Design Systemの作り方〜とりあえずこれだけやろう〜

Design Systemは近年Figmaの登場により飛躍的に注目を浴びていると思います。
でもDesign System って作るの難しくないですか?

色々な悩みがありますが、筆者も日々試行錯誤して何が一番良いんだろうと考えています。

結論、完璧なものを短期間では作れない。というところに落ち着きました。

まだDesign Systemは確立した絶対的ルールがあるわけではなく、各社色々と作っ

もっとみる
〜Coursera〜GoogleからUXを学ぶ

〜Coursera〜GoogleからUXを学ぶ

Courseraとは一流講師による様々なカリキュラムを学べるオンラインのオンライン学習サービスです。

Google Coursera

Googleのデザイナーが教えてくれるクラスもあり、ずっと受けたいと思っていたUXコースを受講してみました。

全編英語というハードルもあり1週間の無料期間の後
月額5000円ほどのサブスクとなっており
時間の余裕のある時でないと試すのすら難しそうだな、、と思い

もっとみる
UIデザイン修正の難しさ〜「なんでこんな簡単なこともできないの」〜

UIデザイン修正の難しさ〜「なんでこんな簡単なこともできないの」〜

ビジュアルデザインとUIの違い
UI,UXデザインに取り組んでいると、他業種のお客様に言われて困ることがあります。

「なんでこんな簡単なこともやってくれないんですか」
「ちょっと色変えるだけでしょう」
「ちょっとだけ隙間開けた方がかっこいいじゃないですか」

なぜできないのか、それは感覚でデザインしているわけではないからです。

ビジュアルデザインとは

ビジュアルデザインにも様々なものがありま

もっとみる
UXとは言っていても実際何をすれば良いの?〜05.表層デザイン〜

UXとは言っていても実際何をすれば良いの?〜05.表層デザイン〜



UX5段下位構想の最後のパート 05.表層を整えるフェーズ です。

最後は見た目を整えていく作業になります。

要件をデザインとして落とし込んでいく

さて、ここからは色々なHow to Designの記事があるので細かい内容は省きますが、表層をデザインしていく中で代表的なものをざっとあげてみます。

①ビジュアルデザイン

・UIデザイン
・インタラクション
・キャラクターデザイン
・エフ

もっとみる
UXとは言っていても実際何をすれば良いの?〜04.骨格デザイン〜(OOUI)

UXとは言っていても実際何をすれば良いの?〜04.骨格デザイン〜(OOUI)

前回までで、サービスの戦略、プロジェクトの方向性、機能仕様などを決めてきました。

次は骨格デザイン。

インターフェース、ナビゲーション、情報要素を設計

情報要素の設計は03の構造設計でやるべきことかもしれませんが、記事も長くなりそうだったので04.骨格デザインの方で説明していきます。

まずは骨格デザインの目標を2つに分解してみます。

第2目標項目

① 情報デザイン
② 画面設計

では

もっとみる
UXとは言っていても実際何をすれば良いの?〜03.構造設計〜

UXとは言っていても実際何をすれば良いの?〜03.構造設計〜

第1フェーズで戦略、第2フェーズで要件を固めてきました。

第3フェーズでは構造を設計していきます。

構造設計について構造設計とは家で言う設計図、ストラクチャー設計、どこに何があってどう言う機能がどう言う構造で組み立てられるかを設計していきます。

ここがビジュアルデザイナーとUIデザイナーの大きな違いで、外側の見た目でなく、中の構造を理解して要件にあった行動をユーザーに促せるよう設計していく作

もっとみる
UXとは言っていても実際何をすれば良いの?〜02.要件定義〜

UXとは言っていても実際何をすれば良いの?〜02.要件定義〜



UXを考える上で、第1フェーズである戦略をたてるために、3つの目的を明確にするための手法を前回の記事で紹介しました。

次は第2フェーズで要件を定義していきます。

要件定義について要件定義とは何でしょう?第2フェーズのゴールを定めるため要件定義のゴールを下記のように設定します。

情報を洗い出し、戦略を満たす機能を制定する

第2目標項目

目的が決まったところで、コンテンツを洗い出し、戦略

もっとみる
UXとは言っていても実際何をすれば良いの?

UXとは言っていても実際何をすれば良いの?

今日、UIデザイナー、UXデザイナーということをよく耳にするものの

何が違って、どういう場面で、何をすべきなのか、明確に定義できてない気がします。

この業界にいてデザイナーとして働くも、UXとはなんぞやというところでよくつまづきます。

そこで私なりにUI,UXの考え方についてまとめてみました。

UXとはUser Experience(ユーザー体験)と言われますが、ようは

使いやすい・機能

もっとみる
UXとは言っていても実際何をすれば良いの?〜01.戦略を定める〜

UXとは言っていても実際何をすれば良いの?〜01.戦略を定める〜

前段でUXを考えていく上での5段回構想を紹介しましたが

では実際何から始めるべきかをご紹介していきます。

今回はまず第一のステップ、こちらの画像の01.戦略の手段をご紹介します

戦略について戦略を決めるとは一体どういうことでしょう。これを読み解くと下記が戦略フェーズのゴールになるかと思います。

サイトの目的とユーザーニーズを設計

第2目標項目

では、具体的にサイトの目的とユーザーニーズ

もっとみる