Webサイトのデザインの統一感を保つーサイト更新のルール

Webサイトのデザインの統一感を保つーサイト更新のルール

ウェブサイトは公開から更新を重ねていくにつれて、特定のページだけデザインの雰囲気が変わったり、突然そのページにしかない色使いをされたり、更新に携わる人が多ければ多いほど、デザインの統一感を持たせることが難しくなります。

これは、ウェブサイトを作った段階で、ある程度の更新に関するルール決めをしておくと、統一感を保ちやすくなります。
サイトのデザインの統一感を保つことで、ページを開く度に「あれ?なんか雰囲気が違う・・・」という悪い印象を与えることがなくなり、企業ブランド面でのイメージアップに繋がります。

この記事ではウェブサイト更新していく上で決めておくと良いデザイン上のルールについてチェックすべき点をまとめました。
それぞれご自身のサイトに合わせてルールを決めて、サイトの更新をしていくようにしましょう。

Contents

Webサイトのデザインの統一感を保つために守るべきルール

使用する色を制限する

新着情報などの本文の強調したい箇所に、唐突にギラギラした赤や、他で全く使ってない色が使われることがよくあります。

確かにこういう目立つ色を使うと、目を引くのですが、非常に素人臭く見えてしまいます。
過剰に使われている場合、怪しいサイトに見えてしまうこともあります。

こういう場合は、あらかじめ強調箇所のスタイルを決めておくと良いです。

例えば、サイトのロゴやデザインに使われているメインカラーがブルー系の場合、強調箇所は文字は太字で、背景に黄色い背景色をつけるなど、サイト全体の雰囲気を決めているメインカラーを基本に、強調箇所の配色を決めていくと効率的に決められます。

一般的にWebサイトを制作会社に中している場合、メインカラーや協調箇所の色はある程度考慮されている場合が多いので、すでにあるページの強調箇所を参考にすると、間違いありません。

強調箇所でいうと、どこにあっても目立つ色(赤やオレンジ)を使うというよりは、ページ内の文章の中で目立つということが重要です。

また、色がやたらと多く登場するデザインも素人臭く見えます。
(色数が増えると、全体の色のバランスを取るのが難しくなるためオススメしません。)
そういう意味でも、色を絞った方が賢明です。

使用するイメージ画像の色味・雰囲気を合わせる

サイトに使用する画像は、独自に撮影したオリジナルのもの以外に関しては、画像の雰囲気を合わせるようにします。
雰囲気を合わせるのに一番わかりやすいのは、「画像の色味を合わせる」ことです。

その他、抽象的な表現ですが画像の雰囲気も合わせるとよいです。
カッコイイ雰囲気のサイトには、先進的なイメージのシャープな画像を使い、ナチュラル系のサイトで親しみやすさを伝えたい場合は、ナチュラル系の背景で柔らかい雰囲気の女性のイメージ画像を使う等です。

余白の大きさを合わせる

画像と文章の間の余白や、段落の下の余白などは合わせるようにしましょう。

人によって段落の文字数がバラバラだったりするんですが、一段落50文字などあらかじめ決めておくと良いかと思います。
この点は見た目の問題もありますが、サイトの文章の読みやすさにも影響してきますので、仕上がりをチェックして決めましょう。

文体を合わせる

文章はデザインとは違う要素ですが、Webサイトの雰囲気を感じさせる要素としては、重要な要素です。
先に作られているコンテンツの文章が「です・ます調」であるならば、更新する文章は「です・ます調」で、「だ・である調」で書かれているのであれば、「だ・である調」で書きましょう。

更新のルールを決めたら文書で共有しましょう

更新のルールは作った後にちゃんと文書に残して、更新担当するメンバーで共有しておきましょう。
そうしておくことでメンバー間で共通認識ができ、更新箇所の見た目に関して考えることが減るので、更新の効率も上がります。

デザインが整う上に、更新作業の効率もアップする、一石二鳥の施策です。

更新ルールは、ワードなどでドキュメントを作って共有することも出来ますが、オンラインのマニュアル作成サービスを利用すると便利です。
wikipy」など色々ありますが、無料でトライアルできるものもあります。

こういったサービスを利用する目的として、オリジナルのドキュメントを一つにしておくこと、メンバーがアクセスしやすい状態を作ることにあります。
そうしておくことで、最新のドキュメントがどこにあるのか分からないなど、共有ドキュメントとして避けておきたい事態をあらかじめ防ぐことが出来ます。

ぜひお試しください!

関連記事

  1. 企業イメージに影響するCSR活動とはなにか?

    企業イメージに影響するCSR活動とはなにか?

  2. ホームページでちゃんと成果を出すために必要なこと

    ホームページでちゃんと成果を出すために必要なこと

  3. 間違いの少ないホームページ修正依頼の方法

    間違いの少ないホームページ修正依頼の方法

  4. 【テンプレート付き】お問い合わせフォームの自動返信メール解説

    【テンプレート付き】お問い合わせフォームの自動返信メール解説

  5. ホームページを限定公開する方法【ベーシック認証】

    ホームページをID・パスワードで限定公開する方法【ベーシック認証】

  6. Webサイトリニューアルのお知らせ文例

    Webサイトリニューアルのお知らせ文例