Design System

こちらは、日本市場向けに最適化されたビジネス志向のデザインシステムで、私は日本語ローカリゼーション、デザイントークン、レスポンシブデザインガイドライン、コンポーネントデザイン、ユーザビリティテストを担当してる。

・Produce scenarios, user flows, wireframes, and prototypes that translate an understanding of user and business needs into intuitive user experiences.

・Effectively communicate ideas to stakeholders using evidence such as research data, user feedback, usability guidelines, and best practices.

・Support team leads to identify measures to calculate impact and achievement by selecting and applying effective UX metrics that align with the product’s Key Performance Indicators.

・Contribute to the structure and building of the KIT Design System.

プロジェクト所属：ヘイズ・ジャパン

役割説明：

• ユーザーやビジネスのニーズを理解し、それを直感的なユーザー体験に変えるシナリオ、ユーザーフロー、ワイヤーフレーム、プロトタイプを作成する。

• リサーチデータやユーザーフィードバック、ベストプラクティスを用いて、ステークホルダーに効果的にアイデアを伝える。

• チームリーダーをサポートし、KPIに沿った効果的なUX指標を選定し、成果を測定する。

• KITデザインシステムの構築と運用に貢献する。

日本のローカリゼーション

このデザインシステムのUSPは、日本のローカリゼーションで、Open SansやNoto Sans Japaneseなどのフォントを使い、可読性のために適切な文字サイズ、間隔、改行を提案する。日本独自の日付、時間、住所の形式と、日本の都道府県の正しい順序に従う重要性も強調する。目標は、ローカルの基準に合わせてデザインを適応させることで、使いやすさを向上させることだ。

日本のローカリゼーションに関する最初の問題は、英語から日本語に翻訳する時に、ページに適用されるフォントスタイルが日本語の文字には大きすぎて、可読性が下がり、レイアウトの問題が出てくることだ。

Japanese kanji require more pixels due to their complex strokes. For instance, “A” needs 7x7 pixels, but “艦” needs 15x15. Japanese characters are generally larger, with no upper or lower case, and don’t reach descender height. Japanese web content combines Kanji, Hiragana, Katakana, numbers, symbols, and alphabets.

日本の漢字は複雑な筆画のため、もっと多くのピクセルが必要だ。例えば、「A」は7x7ピクセルだけど、「艦」は15x15ピクセルが必要。日本の文字は一般的に大きくて、大文字や小文字がなく、下の高さにも達しない。日本のウェブコンテンツは漢字、ひらがな、カタカナ、数字、記号、アルファベットを組み合わせてる。

テキストサイズの問題の解決策は、タイポグラフィトークンを使って、日本語の可読性を上げるために、異なるテキスト要素に対して適切なフォントサイズと一貫したスタイリングを確保することだ。

タイポグラフィトークン

このスライドは、いろんな見出しや本文のテキストサイズに関する英語と日本語のタイポグラフィトークンを比べて、両方の言語でデザイントークンが一貫して使われているのを示してる。さらに、可読性を上げるために、14未満のフォントサイズを削除した。

テキストの折り返し

日本語のテキストは英語よりもよく折り返して、単語が分かれることが多いから、レイアウトが読みづらくなって、ユーザーフレンドリーさが下がってる。

テキストが途中で分かれる問題は、日本語にはoverflow-wrapを使って、長い文字列でレイアウトが崩れるのを防いでる。英語にはword-breakを使って、テキストの流れをスムーズにするために、中国語、日本語、韓国語（CJK）みたいな言語でソフトラップの機会を提供してる。

将来の解決策は、メディアクエリを使って異なる画面サイズでのテキストの折り返しを管理して、単語の分割をビューポートに基づいてあらかじめ決めることで、いろんなデバイスで一貫したレイアウトを保つことだ。

日本語の文は仮名と漢字で構成されているから、段落の幅が1100pxのように広すぎると、読みづらくなる。推奨される解決策は、可読性を向上させるために、810pxのように幅を狭くすることだ。この調整により、テキストが追いやすくなり、日本語の読みやすい体験が確保される。

レスポンシブデザイン

私たちが提案したもう一つの将来の解決策は、マージンを調整することで、レイアウトをもっとクリーンにして、テキストの読みやすさを上げることだ。これで、適切なスペースを確保して、テキストが画面の端に近すぎないようにする。

これらのブレークポイントを設定することで、メディアクエリが効率的に適応できるようになる。いろんな画面サイズで異なるレイアウトをトリガーするために、一連のブレークポイントを決めた。

実装サンプル

Media Queryを作成することで、異なる画面サイズに合わせた別々の状態をデザインすることができる。このバージョンでは、スペースを節約するためにナビゲーションバーの折りたたみ仕様をデザインし、Tax関連のアプリケーションに実装した。

このバージョンでは、開発チームと協力してコンポーネントの折り返しを実装した。ブラウザのサイズがメディアクエリを発動すると、コンポーネントを折り返すことができる。これは過去のビジネスアプリケーションにとって大きな改善だと思ってる。

リスト項目の順序

The 47 Japanese prefectures are arranged in a standardized order from 1 to 47 based on the National Local Public Organization Code established by Japan’s Ministry of Internal Affairs and Communications (MIC). The Gojūon order, a traditional method of arranging Japanese kana characters in the a-i-u-e-o syllabary, starts with “あ” (a) and ends with “わ” (wa) and “ん” (n). Characters can also be organized by numbers, English, Furigana (phonetic reading of Kanji), or Kanji.

日本の47都道府県は、総務省が定める「全国地方公共団体コード」に基づいて、1から47までの標準的な順番で並ぶ。五十音順は、日本語の仮名を「あ・い・う・え・お」の順で並べる伝統的な方法で、「あ」から始まり、「わ」や「ん」で終わる。また、文字を数字順、英語表記、ふりがな（漢字の読み方）、または漢字で整理することもできる。

日付と時間の形式

In Japan, dates are written as Year/Month/Day with kanji (e.g., 2022年12月31日), while internationally, it’s often Month/Day/Year or Day/Month/Year. For time, Japan used kanji for AM/PM and sometimes showed hours beyond 24 (like “25:25”). International formats typically use a 12-hour or 24-hour clock without kanji. These differences highlight the need for localization when designing for Japanese users.

日本では、日付は年/月/日の形式で漢字を使って書かれる（例：2022年12月31日）。国際的には、通常、月/日/年または日/月/年の形式が使われる。時間については、日本ではAM/PMを漢字で表記し、時には24時間を超える時間（例えば「25:25」）が表示されることもある。国際的な形式では、通常、漢字なしで12時間または24時間制の時計が使われる。これらの違いは、日本のユーザー向けにデザインする際のローカリゼーションの必要性を強調する。

住所の形式

一方、日本の住所は通常、郵便番号から始まり、都道府県、市、区、具体的な建物名と番号が続く。英語ではこの順序が逆で、住所は小さな詳細（建物や通りなど）から始まり、最後に市や国が書かれる。この画像は、異なる住所形式に合わせてフォームレイアウトがどう調整されるべきかを比較していて、グローバルユーザー向けに住所入力フォームを設計する際のローカリゼーションの必要性を強調する。

コンポーネントデザイン

デザインシステムには、テキストや選択入力などのいろいろなコンポーネントと、UIのニーズに基づく標準サイズと小サイズのボタンのサイズやタイプが含まれている。その主な目的は、ブランドイメージと一致させ、ビジネス要件を満たすことだ。

標準サイズと小サイズのボタンには、次の状態がある：通常、ホバー、押下、フォーカス、無効、ローディング。スプリットボタンのオープンボタンも、通常のボタンと同じすべての状態がある。

ドロップダウンコンポーネントには、通常、ホバー、フォーカス、無効、ローディング、選択された状態の詳細な状態がある。これには、単一選択、多重選択、チェックボックス、検索可能なドロップダウンが含まれていて、アイテムの選択やオプション内での検索など、いろいろなユースケースに対して明確なインタラクションを保証する。

コンポーネントの動作には、柔軟な幅、固定サイズ、明確なクリックエリア、キーボードナビゲーション用のフォーカス状態がある。インタラクション中にカーソルの種類を調整して、ホバー時にツールチップを表示し、画面の端の動作を管理して展開/最小化オプションを提供する。また、必要に応じてトランジションアニメーションも適用される。

コンポーネント分解と特有のトークン

In component design, anatomy refers to the structure and organization of a UI component, broken down into individual parts or tokens. These tokens define attributes like color, size, border radius, font size, and spacing to ensure consistency across the design system. Each component combines these defined tokens, allowing flexibility while maintaining visual harmony throughout the UI. コンポーネントデザインで、解剖学はUIコンポーネントの構造と組織を指し、個々の部分やトークンに分解される。これらのトークンは、色、サイズ、ボーダー半径、フォントサイズ、間隔などの属性を定義して、デザインシステム全体の一貫性を確保する。各コンポーネントは、これらの定義されたトークンを組み合わせて、視覚的な調和を保ちながら柔軟性を提供する。

コンポーネント特有のトークンは、個々のコンポーネントに割り当てられたユニークな値で、その外観や動作を定義する。これらのトークンは、グローバルトークンから派生していて、各コンポーネントの特定のニーズに合わせて調整され、一貫性と柔軟性を確保する。これらは、色、ボーダーの厚さ、ボーダー半径、フォントサイズ、間隔などの属性を制御する。

信息可视化（图表和图形）

情報視覚化の部分では、データ視覚化における色と形の使用が強調される。色はデータポイントを区別するのに役立ち、プライマリーブランドカラーを使ってカテゴリや地域を表現する。円、バー、線などの形は、割合、比較、トレンドを示すために使われる。これらは一緒に、データ理解を深めるための明確で効果的な視覚化を作り出す。

インフォグラフィックやチャート用のカラーパレットを示していて、ダークブルー、ライトブルー、パープル、ピンク、グリーン、ニュートラルがある。主要な色には、いろんな青、紫、ピンク、緑、グレーのシェードが含まれてる。点線の色はチャートにだけ使われて、ニュートラルなトーンはコンテンツを強調して分けるのに役立って、明確で一貫したビジュアルスタイルを保ってる。

データの種類、例えば変数の数、アイテム、カテゴリ、または期間によって、フローチャートは棒グラフ、カラムチャート、散布図、折れ線グラフ、円グラフなどのいろんなチャートタイプを提案してる。この文書のガイドラインがフローチャートより優先されて、いろんなデータビジュアライゼーションの選択を決める時に役立つ。

カラー トークン

カラー トークンシステムは、青、パシフィック、紫、ピンク、緑、オレンジ、黄色、赤、黒、白、いろんなグレーを含む各カラー ファミリーのプライマリー、セカンダリー、テリータリー シェードに色を分類してる。各色は複数のシェードで表されてて、ライト (Q20) からダーク (Q900) までのコードでマークされてる。これらの色はブランドガイドラインに対応してて、W3Cのカラコンプライアンスに基づくユーザビリティテストを通過してて、いろんなプラットフォームでのアクセシビリティと可読性を確保してる。

W3Cカラコンプライアンス

コンポーネントをデザインする時、ずっとユーザビリティを考えてきた。KITデザインシステムのすべての要素、カラー トークンを含めて、テキストのW3Cカラコンプライアンスに合格してる。また、デザインシステムデモの第2版では、テキスト関連コンポーネントの接触テストや可読性テストなどの他の検査も行った。