Studioのグローバルスタイル入門——色・フォントをサイト全体で一括管理する

サイトを作っているとき、ボタンの色や見出しのフォントを、目についた場所からその都度決めていくことはないでしょうか。

最初のうちは早く進められますが、ページ数が増えてくると、あとから「ブランドカラーを少し変えたい」と思ったときに、1つずつ探して直すはめになります。この記事では、色やフォントをサイト全体で一括管理する考え方の基本を紹介します。

「その場で指定」を積み重ねると、あとで困る

ページを作るたびに、その場で色やフォントを指定していく進め方は、最初の1〜2ページまでは特に問題になりません。

ですが、似たようなボタンや見出しが増えていくと、微妙に違う色やフォントが紛れ込んでいくことがあります。あとから「サイト全体の色味を少し変えたい」と思ったときに、1つずつ見つけて直す作業は、ページ数が多いほど大変になります。

「1箇所で決めて、あちこちで使う」という考え方

多くのノーコードツールやデザインツールには、色やフォントを1箇所で定義して、複数の場所から呼び出して使う仕組みが用意されています。

この考え方の利点は、あとから土台の定義を1つ直すだけで、それを使っているすべての場所に変更が反映されることです。ページごとに1つずつ直して回る必要がなくなります。

何を「共通ルール」にすべきか

最初からすべてを共通化しようとすると準備が大変なので、まずは使う頻度の高いものから始めるとよいでしょう。

• サイトのメインカラー・アクセントカラー
• 見出し用のフォントと、本文用のフォント
• 基本の文字サイズ
• ボタンの角の丸みなど、繰り返し使う形の基本

途中から始めても遅くない

すでにページ数が増えてしまったサイトでも、共通ルールをあとから導入すること自体は可能です。

すべてのページを一度に直そうとせず、アクセスの多いページやテンプレートになっている部分から少しずつ揃えていくと、無理なく進められます。

まとめ

色やフォントをその場その場で指定していく進め方は手軽ですが、サイトが育つほど「あとで揃え直す」負担も育っていきます。1箇所で決めて、あちこちで使うという考え方を早めに取り入れておくと、あとからの修正がぐっと楽になります。共通ルールにするフォントそのものの選び方（システムフォント・Webフォント・独自フォントの違い）はStudioで使えるフォントの基本で扱っているので、あわせてご覧ください。