こんにちは、塚本です。
2026年6月26日、先月に引き続き、デザイナーミーティングを行いました。
今回のテーマは、「How We Build a Design System」。
各チームが普段どのようにデザインルールを整理しているのか、文字や色、余白をどのように管理しているのか。現在感じている課題や、他のチームから学びたいことも含めて共有しました。
同じ会社のデザイナーであっても、担当する案件や所属する国、経験年数によって、デザインシステムとの向き合い方はさまざまです。今回は、それぞれの発表内容の一部をご紹介します。
改善を重ねてきた、タイチームのデザインシステム
Sineさんからは、タイチームで運用しているデザインシステムが、Version 1からVersion 4までどのように改善されてきたかが紹介されました。
初期は、カラーや文字、余白などのルールが十分に整理されておらず、担当者ごとに判断が必要な状態でした。
その後、FigmaのVariablesやStylesを導入し、色や余白のルールを体系化。項目をまとめるだけでなく、それぞれの用途や使い分けを説明するガイドラインも整備していきました。
最新バージョンでは、カラーを用途ごとに整理し、余白の名前や管理方法も見直しています。文字の設定についても、言語やデバイスごとに複数のスタイルを用意する方法から、Variablesのモードを切り替えて管理する方法へ変更。より使いやすく、修正や更新もしやすい形へ改善されています。
複数言語に対応する難しさ
タイチームでは、タイ語・日本語・英語の3言語に対応する必要があります。
同じフォントサイズを指定しても、言語によって文字の高さや幅、必要な行間は異なります。特にタイ語は、文字の上下に母音や声調記号が付くため、英語よりも広い行間が必要です。日本語は、英語とタイ語の中間程度の設定が適しています。
こうした違いは、ボタンやフォーム、カードなどのコンポーネント設計にも直接影響します。言語によって改行位置やテキスト量が変わるため、同じレイアウトをそのまま適用すると、文字のはみ出しや余白のずれが起こる可能性があります。
そのため、設計段階から複数言語での表示を想定し、繰り返し確認することが重要だと共有されました。
デザインと実装の認識を揃えるために
もう一つの課題として挙げられたのが、デザインチームとエンジニアチームのコミュニケーションです。
デザイン側の考えだけでルールを決めてしまうと、実際にWebサイトをつくる段階で、実装が難しくなったり、調整が増えたりすることがあります。
そのため、デザインと実装の両方の視点を取り入れながらガイドラインを整えること、制作の早い段階から一緒に確認すること、実際に使うメンバーの意見を継続的に取り入れることが大切だと共有されました。
デザインシステムは、完成したら終わりではありません。チーム全体で使いながら、継続的に改善していく仕組みが必要です。
既存ルールを参照しながら、判断基準を探る
続いて、私自身のデザインルールとの向き合い方を共有しました。
現在の日本チームでは、すべての案件で共通する一つのデザインシステムを使用しているわけではありません。既存サイトを検証ツールで確認し、そこで使われている文字サイズや余白、カラーのルールを参照しながら制作することが多くあります。
余白は8pxの倍数を基本としていますが、4pxや12pxをどのような場面で使い分けるべきかなど、判断に迷うこともあります。
既存デザインに柔軟に対応できる一方で、判断の理由を他のメンバーへどのように共有するか、後から見返したときにも分かりやすい形で残すにはどうすればよいかという課題もあります。
発表では、文字サイズや余白の決め方、色の管理方法、Figmaでどこまでコンポーネントを作るのかなど、普段の制作で疑問に感じていたことを各チームに質問しました。
発表後には、Sineさんから「デザイナーになりたての頃、自分も同じ悩みを持っていた」と声をかけてもらいました。
経験を重ねたデザイナーも同じ過程を通ってきたと知り、迷いながら判断基準を身につけていくこと自体が、成長の一部なのだと感じました。
情報を整理し、視線の流れを組み立てる
続いてくみこさんから、普段どのようにレイアウトを組み立てているかが紹介されました。
くみこさんはまずページのゴールや目指す雰囲気を整理し、参考サイトを集めたうえで、情報の優先順位と視線の流れを意識して配置を検討しています。
ワイヤーフレームの情報をそのまま並べるのではなく、ユーザーがどの順番で情報を見るのかを考えながら要素を配置すること。コンテンツ同士が窮屈にならないよう余白を設け、メリハリのあるレイアウトにすることを意識しているとのことでした。
カラーは全体の印象に合わせてベースとなる色を決め、画面が散らからないよう使用する色数を絞っています。
フォントや文字組みについては参考となるWebサイトを分析し、行間や文字間、フォントの組み合わせを研究。欧文フォントを探す際には、AIも活用しながら候補を検討しているそうです。
発表の後半では実際に制作したチケットデザインの改善過程も共有されました。
情報量や写真の見せ方、見出しの強弱、余白などを調整しながら、より内容が伝わりやすい形へと更新していく様子から、デザインを一度で完成させるのではなく、比較と検証を重ねながら改善していく姿勢が伝わりました。
アクセシビリティをチーム共通の基準にする
あいりさんからは、Webアクセシビリティを制作チームの共通基準として取り入れるための考え方が共有されました。
発表では、WCAGの内容をもとに、実務で確認しやすいよう、アクセシビリティを「読める・押せる・伝わる」という3つの観点に整理していました。
「読める」という観点では、本文サイズは16px前後、行間は1.5〜1.8倍を目安とし、1行の文字数や文字のコントラストにも配慮します。
「押せる」という観点では、スマートフォンのタップ領域を44×44px程度確保することが推奨されました。アイコンそのものが小さくても、操作可能な範囲を広く設けることで、押しやすさを確保できます。
「伝わる」という観点では、エラーや状態を色だけで表現せず、テキストやアイコンも併用することが重要です。また、「送信」のような曖昧なボタン文言ではなく、押した後に何が起こるのかが分かる言葉を使用します。
最後には、これらが「読める・押せる・伝わる」のチェックリストとして整理されました。
アクセシビリティを個人の知識や案件ごとの判断に任せるのではなく、日々の制作で繰り返し確認できる基準にすることで、チーム全体の品質向上につなげる内容でした。
台湾の制作環境に合わせたルール設計
台湾デザイナーのCarinaさんからは、BtoB企業サイトを例に、文字や色、コンポーネントの整理方法が紹介されました。
フォントサイズや行間、文字間隔を一覧化し、カラーはPrimary、Secondary、Grey Scaleなどの役割ごとに分類。ボタンやカードなどのコンポーネントも一か所にまとめ、ホバーやアクティブの状態まで含めて管理していました。
また、Figmaだけでなく、Webflow上でもVariablesを設定し、デザインと実装のルールを揃えている点が特徴的でした。
台湾ならではの視点として、言語や利用環境によって、適したフォントの選択肢が異なることも共有されました。
案件や地域の条件に合わせてフォントを選びつつ、Category、Sub-category、Statusのように命名ルールを定め、デザインと実装の双方で理解しやすい構成を目指しています。
正解を決めるより、考え方を共有する
今回のミーティングでは、各チームがこれまでに整えてきたルールや、日々の制作で意識していること、現在感じている課題などが共有されました。
所属する国や担当する案件、経験年数が違えば、デザインルールのつくり方や重視するポイントも異なります。
一方で、判断の基準を分かりやすくすること、デザインと実装の認識を揃えること、チームで使いやすい形に整えていくことは、どのチームにも共通していました。
特に印象に残ったのは、デザインシステムには、すべての案件に当てはまる一つの正解があるわけではないということです。
プロジェクトの規模や目的、言語、制作体制に合わせて必要なルールを考え、実際に使いながら改善していく。それぞれの取り組みや考え方を共有したことで、自分たちの制作にも取り入れられそうなヒントを多く得ることができました。
今後も各チームで知識や経験を共有しながら、より分かりやすく、制作しやすい環境につなげていきたいと思います。
