2015-12-16

更新作業でサイトをダメにしていませんか？心がけたい3つのポイント

WEBデザイン
その他

WordPressなどのCMSを使ってホームページを作るやり方は、すっかり定着。情報更新を外注しないで、社内で行っているという方も多いと思います。

自分たちで必要な時にスピーディに更新できて、費用の節約にもなるのは大きなメリット。しかし、闇雲に更新してしまった結果、開設当初の雰囲気はどこへ？という、混乱した状態に陥ってしまうサイトは決して少なくありません。開設時のデザインクオリティを損なわないようにするためには、どこに気をつければいいのでしょうか？更新時に心がけたい3つのポイントをお伝えしていきます。

ポイント1. 写真のクオリティに気を使う

更新で使う写真のクオリティが低いと、それだけでページ全体の質も下がって見えてしまいます。せっかくコンテンツ内容が良くても、読もうという気持ちが半減。SNSのアイキャッチ画像としても使われるブログなどの写真の場合、その質はシェア数などにも影響します。写真のクリティは、多くの意味でとても重要なポイントです。

解像度に注意しよう

まずは、ある程度解像度の高い写真を使うようにしましょう。最近はPCやタブレット、スマートフォンのディスプレイが高解像度になってきているので、荒れた画質の写真があるだけで、サイトのクオリティが低く見えてしまいます。

一眼レフやデジカメを使わなくても、最近の機種なら、スマートフォンでも十分解像度の高い写真が撮れます。このインバウンドブログでも、「ブログやSNS投稿の魅力をアップ！スマホでプロみたいな写真を撮るコツ！」という記事で解像度について書いていますので、参考にしてください。

人物写真撮影のコツを掴んで、クオリティアップ！

インタビューや取材などで人物写真を撮ることも多いと思いますが、ちょっとしたコツを知っておくと、記事のクオリティアップにつながります。撮影テクニックを紹介した記事はネット上に多くありますが、いくつかおすすめのものを紹介しておきましょう。

以下の記事では、良いインタビュー写真の撮り方がよくわかります。取材のほか、職場の様子や社員紹介などの際にも役立ちそうです

【参考】「カメラのド素人が、インタビュー写真撮影時に最低限抑えたいポイントだけの即効特訓を受けてみた」（HUFFINTON POST）

こちらの記事では、意識しないで撮っていると、ついやってしまいがちなダメ構図を紹介してくれています。知っておくとかなり参考になります。
【参考】「商業写真で首切りと串刺しがダメな理由」（ASCII WEB Professional）

また、静止写真だけでなく動画を使うのも効果的。これまでは写真ばかりだったという方も、一度チャレンジしてみてはいかがでしょうか？当ブログの「初めてでもできる！iPhone動画編集アプリ【厳選4つ】」も参考にしてください。

ポイント2. 色味やフォントの種類を闇雲に増やさない

写真と合わせてWEBサイトの見た目の印象を決定付ける重要な要素として、色味（トーン）とフォント（書体）があります。

ブログなどで、本文の一部を目立たせるため、あるいはジャンル分けなどを表現するために色を使う場合は要注意です。よく目にするのは、文字や文字の背景に赤や黄色などの目立つ色を使っているケース。強調したいという気持はわかるのですが、全体のイメージとアンバランスになってしまいがちです。このような場合は、サイトに使われている色、もしくはその色に似た色を使うようにするだけで、全体のトーンを壊すことなく、まとまった印象にできます。

ネット上には基調色を決めると、それに合う色を選んでくれる配色ツールなどもたくさんありますので、そのようなサービスを使ってみるのもおすすめです。「知識がなくても簡単に使える！WEBデザイン配色お助けツールまとめ」も参考にしてください。

「簡単なバナーなどは自分たちで作ってしまう」という場合もあるかもしれませんが、そのような際にも、サイトで使われている色を基調にした色使いにすると違和感がありません。フォント（書体）も、サイトで使われているものと同じ、あるいは似たものを使いましょう。「目立たせたい」という気持ちから、サイトのテイストにそぐわないポップ体などクセの強いフォントを使うのは禁物。バナーだけが浮きすぎて、サイト全体の印象を大きく損なってしまいます。バナー単体で考えず、ページ全体のバランスを考えるようにしてください。

ポイント3. 重要なパーツは、プロに依頼する

ホームページを運営していると、いろいろと変更したくなる部分が出てくるはず。例えば、メイン画像を差し替えたい、メニューを増やしたいなどといったケースです。小さな変更なので頼みにくい…と思う方も意外と多いようですが、重要な部分にはプロの力を借りることも大切です。

例えば、社員の写真1つとっても、ブログ記事中で使う写真とトップページのメインビジュアルに使う写真とでは、明らかに求められるクオリティが変わってきます。社員の入れ替わりなどで、プロが撮った写真の中に素人が撮った写真が１枚だけ混じっているなどというサイトを見かけることもありますが、ひと目でわかり、サイトの信頼感が損なわれてしまいます。

ヘッダー画像なども、たったひとつのパーツであっても、全体のクオリティを大きく変えてしまう影響力を持っています。このような重要なパーツは、デザインに詳しい方以外は触らない方が無難です。ぜひ、プロに依頼するようにしてください。

スタイルガイド活用のすすめ

CMSで作ったサイトなら、HTMLやCSSの知識がない人でも更新できる。よくそう言われますが、やはり更新にかかわる基礎知識やルールの理解は必要です。サイトの納品時には、更新マニュアルと合わせてスタイルガイドをつくってもらい、説明を受けるようにするのがおすすめです

スタイルガイドとは、サイトのデザインについて書かれたルールブックのようなもの。これがあれば、更新時にもそれにそって色やフォントを選ぶことができ、サイトのトーン＆マナーから大きく逸脱してしまうといった事態を防ぐことができます。

最近、海外では自サイトのスタイルガイドを公開するところも増えているようです。以下に紹介するのは、有名ブランドサイトのスタイルガイドやガイドラインを集めた、いわばスタイルガイドのまとめサイトです。

Brand Style Guide Example

スタイルガイドってどんなもの？と思われた方は、この中からいくつかをランダムに見ていけば、そのイメージがつかめるはず。各サイトが、自サイトのクオリティを保つためにどのようなルール化をしているのかがわかり、参考になります。きっと、サイトのイメージを壊さないための更新のヒントが得られると思います。ぜひ、クリックしてご覧になってみてください！