デザインツールには、繰り返し使う要素を部品として登録する仕組みがあります。一度登録すれば、元を修正するだけで使用箇所すべてに反映されます。
ただし登録には手間がかかります。どのような状態の違いがあるか、どこを変更可能にするかを設計する必要があるためです。この初期工数は、後の更新回数で回収する構造になっています。更新しないサイトでは、回収できません。
この記事では、部品化が回収できる条件、部品にすべき要素とそうでない要素、規模による判断、そして発注側が確認すべき点を整理します。
この記事でわかること
・初期工数を、後の更新回数で回収する仕組み
・更新しないサイトでは回収できない
・部品にすべきは、繰り返し使い変更が波及する要素
・細かく分けすぎると管理が破綻する
・発注側は更新のしやすさで判断する
・引き継ぎの前提を確認しておく
初期工数を更新回数で回収する
部品化は投資であり、回収の見込みがあるかで判断します。
| 状況 | 初期工数 | 回収の見込み |
|---|---|---|
| ページ数が多く、共通要素も多い | 大きい | 高い |
| 更新が頻繁 | 大きい | 高い |
| ページ数が少なく、更新もしない | 大きい | 低い |
| 公開後すぐに作り直す予定 | 大きい | なし |
| 同じ構成のページを量産する | 中程度 | 高い |
数ページで更新予定もないサイトに部品化を持ち込むと、制作費だけが上がります。逆に、ページ数が多く共通要素が繰り返される場合、修正のたびに全ページを直す手間が消えます。
部品化は初期投資。更新回数で回収する。
小規模で更新しないサイトでは、費用だけが増える。
部品にすべき要素とそうでない要素
すべてを部品にする必要はありません。判断の基準は、繰り返し使うかと、変更が波及するかです。
| 要素 | 部品にすべきか | 理由 |
|---|---|---|
| ボタン | する | 全ページで使い、形を統一する必要がある |
| ヘッダー、フッター | する | 変更が全ページに波及する |
| 入力欄 | する | 形式が複数あり、統一が必要 |
| 一覧の項目 | する | 同じ形で繰り返される |
| 1ページにしかない図 | しない | 再利用がない |
| キャンペーン用の装飾 | しない | 期間限定で撤去する |
1箇所でしか使わない要素を部品にすると、管理の対象が増えるだけです。再利用の見込みがあるものに限定してください。
統一の意義はUIの一貫性はなぜ成果に効くのか｜崩れる原因と、揃えるべき範囲を参照してください。
繰り返し使い、変更が波及する要素に限定する。
1箇所だけの要素を部品にすると、管理対象が増えるだけ。
細かく分けすぎると管理が破綻する
分割の粒度は細かいほど良いわけではありません。
- 細かく分けるほど、組み合わせの数が増える
- どの部品を使うべきか、判断に時間がかかる
- 似た部品が複数生まれ、どれが正しいか分からなくなる
- 命名の規則がないと、探せなくなる
- 担当者が変わると、意図が引き継がれない
部品の数が増えたら、統合できないかを定期的に確認してください。似た部品が複数ある状態は、一貫性を保つという目的から外れています。
粒度の考え方はアトミックデザインは導入すべきか｜粒度で分ける考え方と、合わない場合を参照してください。
細かく分けるほど、組み合わせと判断の手間が増える。
似た部品が複数ある状態は、目的から外れている。
発注側は更新のしやすさで判断する
発注する立場では、部品化の技術的な内容より、更新できるかどうかを確認してください。
- 公開後、誰がどの範囲を更新するかを確認する
- その範囲が、専門知識なしで更新できるかを確認する
- 更新のたびに制作会社への依頼が必要な箇所を把握する
- その依頼にかかる費用と期間を確認する
- 自社で更新したい箇所があれば、事前に伝える
部品化されていても、更新に専門知識が必要なら自社では触れません。デザイン側の部品化と、公開後の更新のしやすさは別の話です。運用面は更新しやすい企業サイトの作り方｜CMS選定と運用設計のポイントを参照してください。
デザインの部品化と、公開後の更新のしやすさは別。
誰がどの範囲を更新するかを、事前に確認する。
引き継ぎの前提を確認しておく
制作会社を変更する場合、部品の設計が引き継げるかが問題になります。
| 確認項目 | 確認しない場合 | 対応 |
|---|---|---|
| データの所有者 | 引き継げないことがある | 契約時に明確にする |
| 部品の命名規則 | 意図が読み取れない | 説明を残してもらう |
| 使用しているツール | 移行できないことがある | 事前に確認する |
| 外部の素材の利用条件 | 使い続けられない | 範囲を確認する |
部品として整理されていても、意図の説明がなければ次の担当者は使えません。命名の規則と、使い分けの基準を文書として残してもらってください。
契約時の確認事項はデザイン制作会社の選び方｜見積り比較で確認すべきポイントを参照してください。
整理されていても、説明がなければ引き継げない。
命名規則と使い分けの基準を文書で残してもらう。
規模別の現実的な進め方
規模によって、適した水準が変わります。
| 規模 | 推奨する水準 | 理由 |
|---|---|---|
| 数ページ | ボタンと入力欄のみ | それ以上は回収できない |
| 10ページ前後 | ヘッダー、フッター、繰り返し要素 | 更新の手間が減る |
| 数十ページ以上 | 体系的に整理する | 手作業では一貫性を保てない |
| 継続的に追加する | 規定を文書化する | 担当者が変わっても維持できる |
最初から完璧な体系を作ろうとすると、公開が遅れます。まず頻出する要素だけを部品にし、運用しながら追加する進め方が現実的です。
体系化の判断はデザインシステムとは？導入するメリットと作り方の基本を参照してください。
最初から完璧を目指すと、公開が遅れる。
頻出する要素から始め、運用しながら追加する。
他の要素との順序
デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。
よくある失敗
小規模なサイトで体系的に部品化する
初期工数を回収できません。更新回数から判断してください。
1箇所でしか使わない要素を部品にする
管理対象が増えるだけです。再利用の見込みがあるものに限定してください。
細かく分けすぎる
組み合わせの数が増え、どれを使うか判断できなくなります。
命名規則を決めずに増やす
探せなくなり、似た部品が重複します。規則を先に決めてください。
公開後の更新のしやすさを確認しない
デザインの部品化と、自社で更新できるかは別の話です。
よくある質問
部品化すると制作費は安くなりますか
初期の制作費は上がることが多くなります。安くなるのは、公開後の修正費用です。ページ数が多く更新が続く場合に、総額で下回ります。短期で作り直す予定があるなら、初期費用が上がるだけになります。
既存サイトを後から部品化できますか
可能ですが、作り直しに近い工数がかかることがあります。次のリニューアルのタイミングで導入するほうが現実的です。
発注側が部品の構造を理解する必要はありますか
構造そのものを理解する必要はありません。確認すべきは、公開後に自社で更新できる範囲と、依頼が必要な範囲です。
ツールが変わったら作り直しになりますか
ツール間で完全に移行できるとは限りません。長期的に使うサイトでは、この点を契約時に確認してください。データの所有者と、移行の可否を明確にしておくことが重要です。
部品を増やしすぎた場合はどうすべきですか
似た部品を統合してください。統合すると使用箇所の見た目が変わる可能性があるため、影響範囲を確認したうえで進めます。定期的な棚卸しを予定に入れておくと、増えすぎる前に対処できます。
まとめ
デザインの部品化は、初期工数を後の更新回数で回収する仕組みです。一度登録すれば元の修正が使用箇所すべてに反映されますが、その登録には状態の違いや変更可能な箇所を設計する手間がかかります。したがってページ数が少なく更新予定もないサイトでは、制作費だけが上がる結果になります。
部品にすべき要素の基準は、繰り返し使うかと、変更が波及するかです。ボタン、ヘッダー、フッター、入力欄のように全ページで使われる要素は部品化の効果が大きく、1ページにしかない図やキャンペーン用の装飾は対象になりません。また細かく分けるほど良いわけでもありません。分割が細かいと組み合わせの数が増え、どの部品を使うべきか判断に時間がかかります。
発注する立場で確認すべきは、部品化の技術的な内容ではなく、公開後に誰がどの範囲を更新できるかです。デザイン側が部品化されていても、更新に専門知識が必要なら自社では触れません。加えて、制作会社を変更する可能性を考えると、データの所有者と命名規則の文書化を契約時に明確にしておくことが重要になります。
当社ではデザイン制作において、規模に応じた進め方をご提案しています。運用体制を含めた検討はホームページ制作とあわせてご相談ください。
