ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

インバウンドサイトを作るときに知っておきたいこと

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

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

  • WEBデザイン
  • その他

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

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

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

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

解像度に注意しよう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

キャプチャ画像加工用Brand Style Guide Example

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

今回のまとめ

  1. 写真のクオリティは、サイトのイメージに大きく影響。解像度にも注意。
  2. 色やフォントはサイト全体のトーンに合わせて選定する。
  3. 全体のイメージに影響するパーツの更新はプロの手を借りるのがおすすめ。
  4. サイトのスタイルガイドを作成してもらうとイメージを保ちやすい。

<関連記事>
ブログやSNS投稿の魅力をアップ!スマホでプロみたいな写真を撮るコツ!
初めてでもできる!iPhone動画編集アプリ【厳選4つ】
こうすれば、もっと伝わる!コンテンツをより魅力的に見せる写真や図解の使い方

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  8. 8

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  7. 7

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND