デザインシステム

← 用語集トップへ戻る

「デザインシステム」とは

デザインシステムとは、サイトやアプリの見た目と操作のつくり方を、あらかじめルールとして決めてまとめたものです。色、文字の大きさ、余白の取り方、ボタンや見出しといった部品の形と使いどころを一式で定義します。担当者が変わっても、ページが増えても、同じ考え方で作り足せる土台をつくるための仕組みです。

単なる「配色表」や「ロゴ使用規定」よりも範囲が広く、実際に画面を組むための部品と、その使い方の判断基準までを含むのが特徴です。紙のガイドラインで終わらせず、制作者がそのまま使える形で置いておく点が重要とされます。

ロゴやコーポレートカラーを定める従来のガイドラインは「守るべき決まり」を示すものです。デザインシステムはそこに加えて「作るための材料」を配ります。決まりと材料がひとつになっているため、迷いが減り、確認のやり取りも短くなる場合があります。

また、大企業のような大がかりなものだけがデザインシステムではありません。数十ページ規模のコーポレートサイトなら、色と文字の一覧、見出しの階層、ボタン3種類、告知欄1種類といった小さな一式から始めても機能します。自社の更新頻度と関わる人数に合った大きさで持つことが現実的です。

主な構成要素

• 基本の決めごと（色、書体、文字サイズ、余白の単位、角丸や影の強さ）
• 部品（ボタン、入力欄、見出し、表、カード、注意書きなど）
• 並べ方の型（1カラム、2カラム、一覧と詳細など、よく使う画面の骨組み）
• 文章の書き方の目安（敬体か常体か、ボタンの文言、エラー文の言い方）
• 使い方の説明（どの部品をどんな場面で使い、何をしてはいけないか）

なぜ重要なのか

中小企業のサイトは、公開後に少しずつページが増えていきます。採用情報、キャンペーン、事例紹介、お知らせ。その都度その場の判断で作ると、同じ意味のボタンが数種類の色で存在する、といった状態になりがちです。見た目のばらつきは、利用者から見ると「どこを押せばよいか分からない」につながります。

ページごとに雰囲気が変わるサイトは、丁寧に運営されている印象を与えにくいものです。逆に、色と余白がそろっているだけで、内容が同じでも落ち着いて読める印象になる場合があります。見た目の統一は、企業の姿勢の表れとして受け取られやすい要素です。

更新のたびに判断しなくてよくなる

ルールがあると、追加ページの見た目を毎回ゼロから相談する必要がなくなります。担当者が社内で文章と写真を差し替えるだけで公開できる範囲が広がり、制作会社に依頼する回数や確認の手間を抑えやすくなります。

担当者が替わっても崩れにくい

販促の担当者が異動する、制作を別の会社に頼む。そうした場面で、判断の根拠が個人の記憶にしかないと品質が落ちます。ルールを文字と部品で残しておけば、引き継ぎの説明が短くなり、作り方の再現性が上がります。

実務での使い方・進め方

最初から完璧な一式をそろえる必要はありません。今あるサイトの実態を並べて、重複と例外を減らすところから始めるのが現実的です。作った時点で終わりにせず、新しい要望が出るたびに「既存の部品で足りるか、増やすべきか」を確認し、増やすと決めたらその場で使い方も書き添えます。この小さな積み重ねが、数年後の作りやすさを左右します。

棚おろしから始める

• 既存ページのボタン、見出し、告知欄をすべて書き出す
• 同じ役目で見た目が違うものをまとめ、残す形をひとつ選ぶ
• 色は主役、補助、注意喚起、文字色、背景色の役割ごとに整理する
• 文字サイズは本文を基準に、見出しの段階を3〜4段に絞る

発注側が準備し判断すべきこと

発注する側にも用意しておくとよい材料があります。ロゴのデータと使用ルール、指定色の値、既存の印刷物やカタログ、更新を担当する人と作業できる時間、そして今後1年で増やす予定のページ内容です。判断すべき点は、どこまでを社内で更新するかの線引きと、例外を認める条件です。「キャンペーンだけは特別な配色にしたい」という要望があるなら、例外の枠を先に決めておくと後から崩れにくくなります。あわせて、ルールの保管場所と改定の責任者を1名決めておくと運用が続きやすくなります。

よくある誤解と注意点

導入をためらう理由として「デザインが画一的になるのではないか」という声もあります。実際に決めるのは色や余白といった土台の部分で、写真の選び方や文章の切り口は自由に残せます。土台がそろっているほど、力を入れたい箇所の工夫が目立ちやすくなります。

誤解1：大企業だけのものである

専任のチームがなければ成立しないという誤解があります。実際には、色と文字と数種類の部品を1枚にまとめただけでも効果は出ます。規模に見合った小さな形で持つのが正しい進め方とされます。

誤解2：作れば自動的に守られる

資料を用意しただけでは運用されません。どこに置いてあるか、誰に聞けばよいか、迷ったときどう決めるか。この3点が共有されていないと、数か月で例外が増えていきます。更新の依頼書に「どの部品を使うか」を書く欄を設けるなど、日々の流れに組み込む工夫が必要です。

よくある質問

Q. 小規模なサイトでも作る価値はありますか。

A. ページ数が少なくても、更新が続く予定があるなら価値があります。色と文字、ボタンの種類を決めるだけでも、追加時の相談が短くなります。まずは1枚の資料にまとめる程度から始めるとよいでしょう。

Q. 既存サイトに後から導入できますか。

A. 可能です。既存ページの見た目を書き出して重複を整理し、これから作るページから新しいルールを適用する進め方が一般的です。過去ページの一斉修正は、優先度の高い画面から順に行う判断もあります。

Q. 制作会社に何を頼めばよいですか。

A. 色や文字の一覧、部品の見本、使い方の説明をひとまとめで納品してもらうこと、そして社内担当者が触れる範囲を明確にしてもらうことを依頼します。納品形式と改定のときの費用の扱いも、あらかじめ確認しておくと安心です。