Home > TagScript > Style Guide > Webデザインのスタイル・ガイド

Webデザインのスタイル・ガイド

新規作成日 2017-02-26
最終更新日

スタイルガイドは、Webサイトを分割してチームでデザインしたとき、デザインの統一性を保つために使われるデザインの指針です。具体的には、要素やグラフィック、デザイナーやエンジニアが従うべきルールを定めたものです。

個人で、Webサイトを作成する際には、コンポーネントのスニペット集として利用できます。それを必要に応じて、コピー&ペーストして利用する事で、ページの作成を効率化できます。

複数のWebサイトを運営する際には、html表現を統一し、cssを変更することで表示されるデザインが変更されるようにすれば、作業性を高めたまま、別のデザインのWebサイトを作成する事ができます。

使用するコンポーネントを前もって用意する

Webサイトで利用するコンポーネント部品を前もって用意しておき、その中から選んで利用する方法を取ると、デザインの統一感が保たれる上、それぞれのWebページを作成する手間も軽減できます。

CSSのid属性やclass属性の命名規則やインディエントの取り方などのCSSの記述ルールを含む、使用するコンポーネント部品を表現するhtmlスニペットとスタイルを定義するcssを前もって用意しておきます。

参考

使用するコンポーネントのhtmlとcssの組み合わせを作りためて、それを使い回すと効率的にページが作成できます。

インターネット上には、情報が散らばっていますので、自分で使いやすい形にまとめて利用したましょう。

タイポグラフィ

使用するフォントと大きさ、文字間隔、色や太さ、斜体などの装飾のことです。

見出しテキスト、本文、リンクテキストなどで使用する文字のスタイルを決めます。cssに設定しておけば、後は、意識することなく利用できます。

カラーパレット

使用する色を決めます。使用する色を限定することで、Webサイトのデザインに統一感が得られます。

文体

ですます調などの文末のスタイルや、性別、年齢、親しみやすさなどを設定し、それに合わせて文章を書くことで、文体を統一します。文章の視点や立場を明確し、ぶれないことで、読みやすさが生まれます。

アイコン

統一感を出すために、使用するアイコンを限定します。

勘違いや誤解を避けるように、対象となる閲覧者や宗教、歴史などに必ず配慮する必要があります。また、既存のブランドに類似したデザインの利用は避けましょう。

画像

使用する画像は、色調が似通ったものを使用すると統一感が得られます。

ボタン

統一したデザインで予め用意したものを使用します。

スタイルガイド・ジェネレーター

サイト上で見つかるスタイルガイド

Googleが、HTML/CSSについてのスタイルガイドを提供しています。一度読んでおくと良いかもしれません。