ウェブサイトの印象の良し悪しを決める「画像」には2つあると言います。具体的な説明のために使う画像と、雰囲気を高めるために使う画像です。
これら画像の扱いとテーマカラーをうまく使いこなして、BtoBサイトにおける「勝負強いサイト」を作るテクニックを身に付けましょう。
実際にあるスタートアップ企業「株式会社ミライフォース」のサイトを題材に、企業のWeb構築を数多く手掛けるプロフェッショナルが実例を用いて解き明かします。
<BtoBサイトを作るうえでの秘訣を説く連載の第３弾>
前回の記事はこちら
BtoBサイト作りの秘訣②：テンプレートはお客様視点で選ぶ
第3回：コンテンツ力で勝つための企業サイトの作り方
第3回は、前回で選んだテンプレートをもとに、コンテンツの編集作業を行ないます。具体的には、文章と画像の入れ込みや変更が中心です。また、デザイン（BiNDでは「Dress」という設定名）を編集し、ウェブサイトの雰囲気を演出しましょう。
目次
1. トップページの内容とデザインをカスタマイズ
2. 必要なページの生成と内容の編集
1．トップページの内容とデザインをカスタマイズ
まずは、トップページの内容とデザインをカスタマイズしていきましょう。
各コンテンツブロックで必要な内容は「文章」と「画像（写真）」です。テンプレートではダミーの文章と画像が入っていますので、これらを自分たちが伝えたい内容に変更したり、新しいコンテンツブロックを作り、内容を入れ込んでいきます。
画像の扱いをマスターする
ここで、画像には「通常の（コンテンツとしての）画像」と「背景画像」の2つがある点に注意しましょう。
通常の画像は、人物写真、商品写真、グラフやチャートなど、具体的な説明のために使う画像です。一方、背景画像は、コンテンツの下に敷く写真などであり、雰囲気を高めるために使う大きめの画像です。
ウェブサイトの印象の良し悪しには、この写真の使い方が大きく関わります。
特に背景画像には、質が高く、よい構図の写真を使いましょう。BiNDでは、各コンテンツブロックを編集する「ブロックエディタ」の設定画面から、素材フォルダに用意されている写真を選択できます。よい写真がたくさんあるので、これらから選ぶとよいでしょう。
BiNDクラウドでは、日本の素材を扱う提供サービス「PIXTA」と連携している「materials」の画像素材が使えるため、ぜひ活用しましょう。※2018年2月現在
materials（BiNDクラウドユーザーが使える素材ダウンロードサービス）
あるいは、外部の無料素材を使う方法もあります。たとえば、以下のようなサイトを利用するとよいでしょう。
Public Domain Images（海外の無料写真提供サイト）
ぱくたそ（国内の無料写真提供サイト）
なお、写真などの画像は、無料（無償）利用を前提に提供されていない限り、自分のウェブサイトで勝手に利用することはできません。インターネット上で気に入った写真を見つけたからといって、それをそのままウェブサイトで使ってよいわけではありません。
したがって、上記のようなサイトで提供されているものを利用するか、オリジナルの写真を用意すると考えておきましょう。最近ではスマホでも高画質の写真が撮影できます。もし「こんな感じの写真を……」ということが決まっていれば、無料素材を探すよりも、自分で用意したほうが早いかもしれません。
自分たちで撮影をする場合は、岡田陽一著『Web制作のための撮影から管理、レタッチまで デザイナー&ディレクターが写真を上手に撮る本』（2015年10月、KADOKAWA/アスキー・メディアワークス）を参考にするとよいでしょう。
また、撮影をプロカメラマンに依頼するのもよい判断です。オリジナルの写真は、向こう数年にわたって使える貴重な資産です。ある程度予算をかけて撮影することは、むしろ合理的といえるでしょう。
サイトのテーマカラーを決めるときのポイント
ウェブサイトの印象上、テーマカラーも重要です。選択したテンプレートは紺色を基調としたデザインですが、ミライフォースでは、B2B事業としての落ち着きや信頼感と、スタートアップ企業としての勢いや前向きな姿勢の両方を表現したいと考え、濃いめの赤（#aa0000）をテーマカラーにすることとしました。
画面右上のほうにある「Dress」ボタンから「現在のDressを編集」を押し、さまざまな部分で指定されている紺色を濃いめの赤に変更していきます。
テンプレートを使っても見栄えのするウェブサイトに仕上げるには、すでに説明したとおり、背景画像に質の高い写真を使うこと、テーマカラーを自分たちのイメージにあった色に変更することが、まず大切です。
キャッチコピーの考え方
加えて、キャッチコピーや見出しに力強い言葉を含めると、いっそう訴求力の高いウェブサイトになるでしょう。ミライフォースでは、ホーム（トップページ）のキービジュアルの上に「UXD×Marketing」というコーポレートコピーを配置しています。
他業界の人にとっては、特に「UXD」という言葉はすぐに理解できないと思いますが、その分、「プロフェッショナルなサービスを提供する会社である」という雰囲気を醸し出せるという判断からです。
ウェブサイトに訪れた人は、まず写真や色、次に大きな文字（キャッチコピーや見出し）、最後に小さな文字（文章）という順序で、内容の理解に努めてくれます。自分たちが伝えたいことを、文章でていねいに説明することも大切ですが、まずは「キャッチコピーや見出しで、伝えたいことをしっかりと伝える」という意識が大切です。
1．トップページのデザインと内容のカスタマイズ前
2．トップページのデザインと内容のカスタマイズ後。文章と写真を事業内容に合わせて変更してから、Dress（デザイン）を編集し、自分たちのイメージどおりの仕上がりになるようにした
3．BiNDには素材フォルダー内に写真やアイコンなどが多数用意されているので、これらから選ぶとよい。また、無料素材などを利用してもよいだろう
4．Dress（デザイン）の編集画面。「設定一覧」を押し、紺色が指定されている部分を濃いめの赤（#aa0000）に変更していくことで、ウェブサイト全体のテーマカラーが変更できる
2．必要なページの生成と内容の編集
ウェブサイトで必要なのは、トップページだけではありません。第1回で説明した「サイトマップ」にもとづき、必要なページを作っていきましょう。
画面左上の「追加」ボタンから、新しいページを生成します。そのページの内容にあったテンプレートを選択し、内容を変更していきましょう。レイアウトが共通するページであれば「複製」でコピーを生成し、内容を書き換えるのが便利です。
このような作業を繰り返しながら、必要なページをひとつひとつ作っていきます。ページごとに、画面上部の「設定」ボタンで、ページタイトルなどの基本情報を指定するのを忘れないようにしましょう。
ページタイトルは、検索エンジンの結果画面などでも目立つように表示されるため、ユーザーがそのページを見るかどうかの判断に大きく影響します。わかりやすいページタイトルにすることで、高い集客効果が期待できます。
ミライフォースでは、ホーム（トップページ）は「株式会社ミライフォース – ウェブ戦略コンサルティングとワークショップの企画運営なら」というタイトルに、個々のページは「Philosopy（理念） | 株式会社ミライフォース」というように、「ページ名（半角スペース）|（半角スペース）会社名」というタイトルにしました。ホームは特に、ウェブサイトの顔となる重要なページなので、会社名だけでなく事業内容がわかる文言を含めておくのがおすすめです。
1．画面左上の「追加」ボタンから、新しいページを生成。レイアウトが共通するページであれば「複製」でコピーを生成し、内容を書き換えるのが便利
2．内容を書き換えたページ。このような作業を繰り返しながら、必要なページをひとつひとつ作っていく。ページごとに、画面上部の「設定」ボタンで、ページタイトルなどの基本情報を指定するのを忘れないようにしよう
次回予告
連載第4回では、ブログ型コンテンツの生成や問い合わせや資料請求などを入力フォームの作成、ウェブサイトへの集客力を向上させるコンテンツチェック機能「SEOアシスタント」もしっかりと学び、成果につながるウェブサイトを目指しましょう。
ASCII.JPより転載
POINT
- ウェブサイトの印象の良し悪しには、写真の使い方が大きく関わる
- 撮影をプロカメラマンに依頼するのもよい判断
- キャッチコピーや見出しで、伝えたいことをしっかりと伝える