Upgrade to Pro — share decks privately, control downloads, hide ads and more …

業務用デザインシステムとUXHubの紹介

Avatar for Fixel Inc. Fixel Inc.
April 17, 2020

 業務用デザインシステムとUXHubの紹介

Avatar for Fixel Inc.

Fixel Inc.

April 17, 2020
Tweet

More Decks by Fixel Inc.

Other Decks in Design

Transcript

  1. Fixel Inc. All rights reserved. デザインシステム構築・運営における課題 l 初期コストがかかる • デザインガイドの作成

    • UI部品の作成 • デザインシステム公開のためのサイト構築 • デザイナーとエンジニアで構成されたチームが必要 l 継続的な運⽤が必要 • デザインシステムの専任チームが必要 l 結果的に現状は主に⼤⼿企業や有名サービスだけがデザインシステムを構 築・運営している 3
  2. Fixel Inc. All rights reserved. 課題解決の⽅法として l 初期コストがかかる • デザインガイドの作成

    ☞ テンプレートとなるデザインガイドを⽤ 意 • UI部品の作成 ☞ UI部品をあらかじめ⽤意 • デザインシステム公開のためのサイト構築 ☞ UXHubで公開 • デザイナーとエンジニアで構成されたチームが必要 ☞ デザイナーだけ l 継続的な運⽤が必要 • デザインシステムの専任チームが必要 ☞ 運⽤負荷軽減 l 結果的に現状は主に⼤⼿企業や有名サービスだけがデザインシステムを構 築・運営している ☞ 組織の規模に関わらず、⾃社のデザインシステムを作成・運⽤できる仕組 みを提供 4
  3. Fixel Inc. All rights reserved. ⼀般的なデザインシステムの構成要素 5 デザイン原則 • デザインプリンシプル

    • UXデザイン基本⽅針 • UIデザイン基本⽅針 ブランド アイデンティティ • ブランドガイドライン • ロゴ、フォント、カラー などのビジュアル基本要素 エディトリアル ガイド • ⾔語表現のガイドライン • メッセージや⽤語集 パターンライブラリ • UIコンポーネント • ページテンプレート • UIキット(PhotoshopやSketchなど) コード • コーディングガイドライン • 対象プラットフォーム (デバイスやOS、ブラウザなど) • バージョニング • 実装利⽤可能なUIコンポーネント集
  4. Fixel Inc. All rights reserved. 業務向けデザインシステムの構成要素 6 デザイン原則 • デザインプリンシプル

    • UXデザイン基本⽅針 • UIデザイン基本⽅針 ブランド アイデンティティ • ブランドガイドライン • ロゴ、フォント、カラー などのビジュアル基本要素 エディトリアル ガイド • ⾔語表現のガイドライン • メッセージや⽤語集 パターンライブラリ • UIコンポーネント • ページテンプレート • UIキット(PhotoshopやSketchなど) コード • コーディングガイドライン • 対象プラットフォーム (デバイスやOS、ブラウザなど) • バージョニング • 実装利⽤可能なUIコンポーネント集 ☞ 業務向けの内容や要素を追加したデザインシステムを作成
  5. Fixel Inc. All rights reserved. 「業務向けデザインシステム」の構成要素 l 構成要素 • デザインガイドライン

    • →デザイン原則 • →⽬的と対象者 • →想定するユーザー像 • →⽂体と表現 • →アクセシビリティ 7 ☞ 「業務向けデザインシステム」では、デ ザイン原則とエディトリアルガイドを「デザ インガイドライン」として、まとめています。
  6. Fixel Inc. All rights reserved. 「業務向けデザインシステム」の構成要素 l 構成要素 • スタイル

    • → background-color(背景⾊) • → text-color(テキストカラー) • → font(書体) • → font-size(フォントサイズ) • → line-height(⾏送り) • → radius(⾓丸) • → border-color(罫線⾊) • → border-width(罫線の太さ) • → opacity(不透明度) • → spacing(余⽩) 8 ☞ 「業務向けデザインシステム」では、デ ザイン原則(UIデザイン基本⽅針)とパター ンライブラリを「スタイル」として、まとめ ています。
  7. Fixel Inc. All rights reserved. 「業務向けデザインシステム」の構成要素 l 構成要素 • UIコンポーネント

    • → Button • → Icon • → Checkbox / Radio button • → Text input • → Select • → Table • → Dialog • → Tooltip • → Typography • → Header • → Navigation tab 9 ☞ 「業務向けデザインシステム」では、パ ターンライブラリとコードを「UIコンポーネ ン」として、まとめています。
  8. Fixel Inc. All rights reserved. 「業務向けデザインシステム」の構成要素 l 構成要素 • レイアウト

    • → Basic layout • → List & Filter • → Detail • → Stepper • ページ • → Basic layout • → List & Filter • → Detail • → Stepper 10 ☞ 「業務向けデザインシステム」では、パ ターンライブラリ(ページテンプレート)と コードを「レイアウト」と「ページ」とし て、まとめています。
  9. Fixel Inc. All rights reserved. 「業務向けデザインシステム」のメリット ü デザインシステムをフルスクラッチでゼロから作るのではなくテンプ レートとなるデザインシステムを利⽤(複製・変更)することで⼿軽 に始められる。

    ü UI部品もあらかじめ⽤意してあるので、⾜りない部品は追加するだ け。 ü デザインガイドライン、スタイル、UIコンポーネント、レイアウト、 ページが⼀元管理して公開されている。 ü テンプレートから始めることで、組織の規模に関わらず、⾃社のデザ インシステムを作成・運⽤することができる。 11
  10. Fixel Inc. All rights reserved. いままでのデザインとこれからのデザイン 作って 作り直す 12 作って

    使い続ける ü 持続可能なデザインのエコシステムを構築するために、デ ザインシステムの導⼊をおすすめします。 ü その際には、0 ➡ 1 ではなく、1 ➡ 2 で始められるUXHub で始めてみませんか︖ いままで これから
  11. Fixel Inc. All rights reserved. お知らせ lオープンベータテスト開始します︕ l興味のある⽅ or 利⽤したい⽅は、

    ☞ uxhub.tokyoにアクセス ☞ 弊社スタッフにお気軽にお声がけください 14