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