マガジンのカバー画像

UX

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

#UIデザイン

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(インタラクションデザイナー)

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

もっとみる
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デザイナーの大きな違いで、外側の見た目でなく、中の構造を理解して要件にあった行動をユーザーに促せるよう設計していく作

もっとみる