1.0UX TIMEShttps://uxdaystokyo.com/articles高橋 祐哉https://uxdaystokyo.com/articles/author/yuya-takahashi/rich600338<blockquote class="wp-embedded-content" data-secret="CUndBEZlbS"><a href="https://uxdaystokyo.com/articles/glossary/style-guide/">スタイルガイド</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/glossary/style-guide/embed/#?secret=CUndBEZlbS" width="600" height="338" title="“スタイルガイド” — UX TIMES" data-secret="CUndBEZlbS" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2026/10/style-guide-eyecatch.png10241024スタイルガイドとは、具体的な決まりや見本を共有することで、画面や文書の見た目・言葉づかいをそろえる文書である。 例えば、ネットショップの「カートに入れる」ボタンを、複数の担当者が作る場面を考える。担当者は、使う色、角の丸み、周りの余白の値を見本とともに文書に残す。各担当者は、商品ページや一覧でも同じ基準でボタンを作り、新しい部品が増えたら文書も更新する。 スタイルガイドは、繰り返し使える画面の部品や決まりをまとめて管理する「デザインシステム」を構成する文書の一つでもある。 見本で作り方をそろえる このネットショップで、ボタンの決まりが書き残されていなければ、後から加わった担当者は、それまでとは異なる色や形を選ぶ可能性がある。スタイルガイドには、色や丸みの値だけでなく、そのボタンをどの場面で使うかも示す。 スタイルガイドが扱うのは、画面の見た目だけではない。文章（調子・表記）、ブランド（ロゴ・色の組み合わせ・文字の形）、Web画面（配置・部品）を扱うものもある。文章を扱うスタイルガイドは、編集や公開の手順まで含む場合もある。 ボタンなどの部品そのものを繰り返し使える形で管理する仕組みは、スタイルガイドが示す決まりや見本とは異なる。ただし、Web向けのスタイルガイドは、各部品の見本とコードを一緒にまとめる場合もある。コードは、部品を画面に表示するための指示を記したものである。 語源・提唱者 デザインの決まりを文書にまとめた歴史的な例として、ニューヨーク地下鉄の標識がある。当時は、新しい標識と、廃止された交通会社が数十年前に立てた標識が同じ空間に並んでいた。そのため、利用者にも職員にも分かりにくい状態になっていた。 ニューヨーク市交通局は1966年に、標識の計画を外部のデザイン会社Unimark Internationalに依頼した。同社は1970年までに、地下鉄の最初の公式なデザインマニュアルをまとめた。マニュアルは使う文字の形を指定し、標識の仕組みは決まった寸法の部品を組み合わせるものだった。ただし、交通局はその決まりを厳密には守っておらず、統一された標識が広く行き渡ったのは1989年から1990年代にかけてである。 表示の崩れや抜けを見つける 冒頭のネットショップで、「カートに入れる」ボタンを押したあとの表示や、在庫切れの表示が抜けている場面を考える。担当者は、ボタンの基本の見た目だけでなく、状態ごとの表示もスタイルガイドの見本に含める。担当者は、この見本と実際の画面を見比べて、表示の崩れや、状態ごとの表示・エラーメッセージの抜けを見つける。 また、スタイルガイドは、部品の名前についてチームで共通の呼び方を保つ助けにもなる。 UX水準を維持する デザイナーと書き手が、新しい画面に入る要素を見渡す場面を考える。チームは、できればデザインの段階からスタイルガイドを作り始める。デザイナーと書き手は、その文書を使って、何をデザインし、どこに文章を入れる必要があるかを確認できる。 英国政府のサイト「GOV.UK」は、「A to Zスタイルガイド」という文書で、画面の操作説明に使う言葉を定めている。すべての利用者がクリックするわけではないことを理由に、「click（クリックする）」ではなく「select（選択する）」を使うよう指定している。 この指定をネットショップの画面に応用するなら、書き手は「カートに入れる」ボタンの操作説明で「クリック」ではなく「選ぶ」と書く。書き手は、ほかの操作説明にも特定の操作方法だけを前提とする言葉がないかを確認する。そのうえで、チームは使う表現と使わない表現、選んだ理由を文書に残す。 多くのスタイルガイドは、慣習や言葉の使い方の変化に合わせて定期的に改訂される。 関連用語 コンポーネントライブラリ パターンライブラリ 一貫性と標準 ボイス＆トーン https://uxdaystokyo.com/articles/glossary/design-system/ https://uxdaystokyo.com/articles/glossary/style-tiles/