Toshiyuki Katsube

Visual Designer https://medium.com/@toshiyu…

Toshiyuki Katsube

Visual Designer https://medium.com/@toshiyukikatsube

  • Figmaで作るデザインシステム設計 2010年度版

    Figmaでデザインシステムを作るプラクティスを掲載しています。

  • 固定された記事

UXケーススタディを作成する際の原則は？

UXケーススタディに含めるべき要素をサンプルを通して解説します。 表紙ケーススタディの表紙を作成します。プロジェクト名と目次が必要です。 セットアップProject Overview / Define Problem / Goal Statement プロジェクトの基本情報を提供するセクションです。プロジェクトの方向性や解決できることを、わかりやすく記載します。 How Might We Statement 定義された課題を解決する方法を考える。 Processデ

Toshiyuki K…

    • フルタイムで働きながらUXデザインを学んだ方法

      ミネソタ大学のUX Master Trackを受講し始め、2021年12月に修了証書を受け取りました。フルタイムのデザイナーとして働きながら、毎週の課題を遂行するのは中々に大変でした。ここでは、私がどのようにチベーションを保ちながら、課題を実行していたかを紹介します。 私の経歴と受講を決めた理由私は印刷物やデジタルメディアでグラフィックデザインを必要とする分野で仕事をしています。その中でUXデザインとは何かということを理解する必要があり、学問として勉強してみようと思いました

      Toshiyuki K…

      • Google UX Design Specialization 全7コース修了と解説について

        Google UX Design Specializationとは、CourseraでGoogleが提供するUXデザインに関するラーニング・プログラムです。全7コースすべてを完了すると以下のような修了証を獲得できます。コースで学んだことや進め方など共有したいと思います。 プログラムについて概ね6週間で1コースを完了するようにプログラムされています。テーマに関するビデオ、リーディング、クイズを繰り返し理解度を深めます。クイズは設定された回答率をクリアするまでは完了できません。

        Toshiyuki K…

        • デザインと倫理の関係 IDEO(2015). The little book of design research ethics.

          The little book of design research ethics（IDEO）読んだレポートの草案です。以下は文章の方向性を取り違えているとして没にしましたが、せっかくなのでここに残しておきます。まとまってないセンテンスもありますが、ご容赦ください。 はじめに倫理を学び理解することはとても有益です。本質的な美しさを知ることで、醜悪なものを避けることができます。 倫理を学ぶ倫理の3原則は、デザインと倫理が密接な関係にあることを証明しています。ユーザーの行動や

          Toshiyuki K…
        • 固定された記事

        UXケーススタディを作成する際の原則は？

        Toshiyuki Katsube

        マガジン

        • Figmaで作るデザインシステム設計 2010年度版
          4本

        記事

          Figmaで作るデザインシステム#3 "Text Styles" -Typography

          タイポグラフィを予め決めておくことで、Visual Designを素早く作成することができます。作ったTypographyはFigmaのText Stylesに登録し、必要であればスタイルをパブリッシュすることで、一貫性を保ちつつデザインを進めることができます。 作る要素1.Heading（H1-H6） 2.Paragraph 3.SubTitle 4.Button 5.Etc 作る種類1.Mobile assets 2.Desktop assets 3.Common a

          Toshiyuki K…

          Figmaで作るデザインシステム#3 "Text Styles" -Typography

          Toshiyuki Katsube

          Figmaで作るデザインシステム#2 Variant Buttonを作成する。

          VariantについてComponentのバリエーションをグループ化して管理することで、より直感的にComponentを使うことができる機能です。早速、Variantを使用して、ButtonのComponentを作りましょう。 作成するButtonのStateについて今回作成するButtonのStateは以下の通りです。場合によっては作成不要なStateもありますが、作っておいて損はないので、以下のStateをすべて作ります。 ・Resting／通常時の状態 ・Focus

          Toshiyuki K…

          Figmaで作るデザインシステム#2 Variant Buttonを作成する。

          Toshiyuki Katsube

          Figmaで作るDesign System開発 2021 #1

          以前のnoteで「Figmaで作るDesign System設計」を掲載しました。まだまだ手探り感もあったので、アップデート版を作っていきたいと思います。 はじめに以前はAtomic Designを同時進行で解説していました。今回つくるDesign Systemの開発は、Componentの在り方にフォーカスして作りたいと思います。 Design Systemを作る理由インターフェイスを設計する場合、ユーザーの操作やステータスによって適切なComponentの状態をデザイ

          Toshiyuki K…

          Figmaで作るDesign System開発 2021 #1

          Toshiyuki Katsube

          Figma branchingでコラボレーションは加速する

          2021年4月に開催されたConfig 2021でついにFigmaにbranchingが追加されました。非常にクリティカルな機能なので、かんたんに紹介します。 ブランチ・マージ・ワークフローFigmaはデザインファイル上でスマートにコラボレーションを実現することに長けています。これはチームでデザインを作る上で非常に大切なことです。一方で、承認を得ないままデザインがアップデートされてしまう問題がありました。 Version Historyを使って、擬似的にGit的な管理をす

          Toshiyuki K…

          Figma branchingでコラボレーションは加速する

          Toshiyuki Katsube

          【UIデザイン入門】プロトタイピングツールとキーワードまとめ

          ツールと使える機能などについて FigmaAuto Layout Variants Components Google Sheets Sync(Plugin) Unsplash(Plugin) XDStack State Repeat Grid Resize To Fit(Plugin) Remove Decimal Numbers(Plugin) オブジェクトのサイズ、位置の端数を削除 Atomic DesignGoogle Material Des

          Toshiyuki K…

          【UIデザイン入門】プロトタイピングツールとキーワードまとめ

          Toshiyuki Katsube

          【感想】アート・オブ・デザイン ｜ イアン・スパルター

          様々な分野で時代を切り開いてきたデザイナーたちに注目。その創造の源泉でもある内面に光を当てれば、生活のそこここに息づくデザインの力が見えてくる。 2019年に公開されたシーズン2から、特に印象的だったので感想・気づきを残しておきます。 デザインについて UXデザイン、UIデザインについての言及からドキュメントは始まります。デザインに対する姿勢、想いが明確で機能的であり、デザインに対する自問と解説が印象的でした。 Is it worth it? Is it actuall

          Toshiyuki K…

          【感想】アート・オブ・デザイン ｜ イアン・スパルター

          Toshiyuki Katsube

          UX UI 入門的な書籍などまとめ

          UX UIの入門として使える書籍情報 UX戦略実例を通してUX戦略とは何なのかを体得できる。最後に記載ある、UX分野のエキスパートへのインタビューにも様々な気づきがある。 情報アーキテクチャ情報アーキテクチャについて定義、実践を記述。 マッピングエクスペリエンス定義から手法まで一通り、具体例と解説がある。ダイアグラムやストーリーボードなどのサンプル例が秀逸。 ユーザーストーリーマッピングマッピングの手法、実例について詳細に記述。ストーリーマッピングの入門書籍として最適

          Toshiyuki K…

          UX UI 入門的な書籍などまとめ

          Toshiyuki Katsube

          Figmaでつくる【Variants解説】サンプルファイル付き

          Figmaの「Variants」という機能について解説します。 Variantsとは Variantsを使うと、異なる状態のコンポーネント一つのコンポーネントとして管理することができます。管理したコンポーネントを自由に取り出して表示することができる機能です。 コンポーネント名を「/（スラッシュ）」で区切るとことで、状態を階層管理することができます。 階層管理とAutoLayout機能を組み合わせると、自由度の高いデザイン制作が実現できます。 チュートリアル サンプルで

          Toshiyuki K…

          Figmaでつくる【Variants解説】サンプルファイル付き

          Toshiyuki Katsube

          【考察】【続・インタフェースデザインの心理学】EAN/DMN/SN/アハ体験について

          オライリー・ジャパンから刊行されている「続・インタフェースデザインの心理学 ─ウェブやアプリに新たな視点をもたらす+100の指針」に記載の一部の要件まとめと、自分なりの解釈です。 ひらめきを得る仕組み 脳の3つのネットワークを活用することで、クリエイティブな考え方（ひらめき）を得ることができる。 EAN（Executive Attention Network） 実行注意ネットワーク 集中するべき課題・問題やアイデアを明確に提起して、その構想をノートに書く、解決したい問題を

          Toshiyuki K…

          【考察】【続・インタフェースデザインの心理学】EAN/DMN/SN/アハ体験について

          Toshiyuki Katsube

          【感想】1兆ドルコーチ: シリコンバレーのレジェンド　ビル・キャンベルの成功の教え

          これが一般的なコーチの力、すなわち「試合に出ない」からこそ持てる、異なる視点を提供する能力だ。（中略）ビルはいつもチェスのすべての駒を目に入れていた。彼自身が『盤上』に乗らない余裕があるからだ。 コーチまたはマネジメントに於いて、自身の能力を存分に発揮できるポジショニングについて、そしてその場所で何をするかについて明確に記述してある。 広く視野を持てるようになると、渦の中では溺れる。自身のポジションをどこに置くかについて考えるきっかけとなりました。

          Toshiyuki K…

          【感想】1兆ドルコーチ: シリコンバレーのレジェンド　ビル・キャンベルの成功の教え

          Toshiyuki Katsube

          THE FIRST DRAW BOOK COVER

          Jony Iveのバイオグラフィーのカバーを模写しました。

          Toshiyuki K…

          THE FIRST DRAW BOOK COVER

          Toshiyuki Katsube

          【UXデザインの現場から#4】アイデアの可能性を素早く可視化する

          「こんなのはどうだろう？」「これはとても可能性があるんじゃないか？」と思いついたアイデアや想いを形にするとき、情報整理も兼ねて必ず行っていることがあります。とても狭い規模（友人・知人・同僚まで）で実施できる方法です。 曖昧な状態でも誰かに話すまず、近くにいた「誰か」にアイデアを話して反応を見ます。そして自分が思い描いている世界と、相手が思い描いた世界との乖離を探ります。2,3人程度にアイデアを伝えることで、簡易な評価と自分の頭の中のアイデアの整理を行います。 わからないま

          Toshiyuki K…

          【UXデザインの現場から#4】アイデアの可能性を素早く可視化する

          Toshiyuki Katsube