10のコーポレートサイトデザインを見比べても重要なことがわかる「写真」という要素

みなさん、既にご存知だとは思いますが、ウェブサイトを作る際に画像を利用しないということはほぼありません。

何かしらの画像を利用することが多いです。ヘッダー部分、メイン部分やブログのアイキャッチ画像、フッターに掲載する会社外観写真など、使わないことはほとんどありません。

しかし、実際の制作では(特にクライアントさんと直接やりとりすることが多いフリーランスでは?)クライアントさんが画像素材を持ち合わせていないといった場合は、適当に見繕ってと言われることも少なくないでしょう。

確かにインターネットの世界では画像素材を探すのに苦労はしません。無償・有償問わず多くの画像素材を入手することは大変なことではなくなったからです。クライアントさんも同じようにインターネットを利用されて画像などを検索されたことがある方も多いでしょう。その流れで「適当になんとかなるでしょう」と思われている方も少なくありません。

しかし、ここで考えていただきたいことがあります。「御社は他にありますか?」ということです。

世間に流用されている画像素材(無償・有償問わず)でクライアントのビジネスを100%表現することができるでしょうか?言葉は悪いですが、そんな他人の画像素材を多く利用するようなサイトのビジネスは、すぐに淘汰されてしまうでしょう。

特にメインとなるビジュアル画像は閲覧者に大きく響く可能性があるパーツになります。そのイメージが言葉よりも先行して閲覧者に届く可能性は大変高いです。

そういった視点を大切にしてもらうために、今回は大手企業様ではありますが、数多くのウェブサイトのファーストビュー(ページを開いたら最初に目に入ってくる部分)部分を数社通して比較してみて、どのようなイメージ画像を利用しているのか、どのようなメッセージを持たせる意図でそのビジュアルを使用しているのかと考えてみましょう。

JAL企業サイト

JALの企業サイトのメインビジュアルには、コマ送り・早送りのムービーが採用されています。

こちらは企業サイトですので、当然「企業」に興味があるユーザーのアクセスが考えられます。そういったターゲットの中には就職活動を行なっている方も多くみえるという観点もあるのか、日々の業務が分かりやすく一目で伝わるようなムービーということで、「コマ送り」で目を引きつけ「早送り」で時間をかけずに認知してもらう、という流れを作っているように考えられます。

井村屋フーズ

井村屋フーズでは、メインビジュアルにスライドショーを利用しています。

掲載されている画像を見ると、まず最初に表示されるスライドには、閲覧者に知ってほしい情報を持ってきています。今回は「会社の合併」をしっかりと伝えるようにしています。

また、実際の業務風景写真をスライドに盛り込むことによって、社内の雰囲気がよく伝わり、透明性のある企業というイメージを自然と与えることにも繋がっていると考えられます。

森永製菓

森永製菓といえば、言わずと知れた老舗お菓子メーカーです。

最新では、お菓子の種類も多くなり、外国から輸入されるものも多く市場は飽和状態ではないでしょうか。

そんな中、メインビジュアルでは、「老舗」というポイントを代表的なお菓子のビジュアルと一緒にアピールし、それと同時に「安心感」も与えてくれるような、そんなビジュアルになっています。

飛鳥交通グループ

タクシー料金の初乗り運賃の値上げニュースというのは、毎度大きく取り扱われることが多いせいか、タクシー業界への新しい人材(求職者)も含めて、人員確保も簡単ではないのかもしれません。

その影響もあるのか、ファーストビューを見て印象に残るのは、「ドライバーになろうとする方へのメッセージ」が強く感じられます。ファーストビューにも求職者へのアクセスを促すバナーやボタンが複数見受けられ、企業サイトへ訪れた求職者を逃したくないという意図が感じられます。

また、メインビジュアルのスライダー内に訴えたいメッセージコンテンツを常設するというスタイルは、とても面白いなと感じました。

アイスペース

一目でターゲットは若い女性ということがよくわかるデザインになっています。また、メインビジュアルも画像素材だけでなく、そこにグラフィックデザインの要素も織りまぜることで、アーティスティックでナチュラルな印象を受けます。

コンタクトの導入や購入を検討している方が見る場合も多いのでしょう。ファーストビューの下部には「キャンペーン情報」の存在をしっかりと見せることによって、スクロールして情報を見てもらえうように導線を考えて作られています。

JAながの

「JAながの」と聞くだけで、ある程度掲載内容は把握できるくらい強烈な情報を「JA」部分が持っていますが、ここでは「ながの」の部分をしっかりとメインビジュアルでスライドショーを織り交ぜながら紹介しています。

自然の風景から、農作物を作っている田畑の様子などをスライドショーにて紹介することによって、「農作物」や「JA」、「ながの」の魅力をアピールしようという狙いが感じられます。

「JAながの農産物情報」というタイトルがスクロールを誘い、下位コンテンツも見てもらえるようにと導線を作っている点にも注目です。

亀田産業株式会社

こちらのサイトは、ウェブサイトのロード画面にも注目を集めることも大切にしているようです。

ウェブページを読み込んでいる間に表示されるロード画面もとても特徴を出して作られています。メインビジュアルにはスライドショー機能を採用して、会社外観や作業風景の様子、企業として推進するコンセプトなどを前面に押し出したメッセージ性を持たせています。

株式会社ビューティ花壇

お花に関係する企業ということが一目でわかるメインビジュアルです。

スライドショーの下には、取り扱う事業を紹介するページを掲載しています。こちらもビジュアルを用いてイメージと簡単なタイトルで認知してもらおうという流れを感じます。

株式会社リアリット

IT企業ということで、爽やかなイメージと共に企業が伝えたいメッセージを大きなタイポグラフィとビジュアルでアピールしています。

また、そこに徐々に吸い込まれるようなアニメーション機能を追加している点も工夫が見られます。画像切り替え時のフェードイン・アウトのスピードもストレスないタイミングで良いですね。

ヤマト運輸

先日から、色々とニュースに取り上げられることが多かったヤマト運輸ですが、ウェブサイトではメインビジュアルでメッセージを配信しています。

フェードイン・アウトのスライドショーでは、まず最初に企業からの大事なお知らせを打ち出すようにしています。そして、その後にはヤマト運輸が運営しているサービスの紹介に続きます。

シンプルなアイコンやイラストに加えて大きなタイポグラフィで確実にメッセージを届けようとしている点からも、新しいデザインテイストを取り入れつつも、ターゲット層を狭めない(若者だけではなく幅広い年齢層)配慮がされていることが感じられます。

まとめ

10のウェブサイトを実際にキャプチャを紹介しながらコメントさせていただきましたが、どのサイトもメインビジュアルを大きく設置し、方法は様々ではありますが、独自に考えた方法で色々なメッセージを訴求していることがよくわかっていただけるかと思います。

「うちはこんな大きな会社じゃないし、そこまでしなくても…」と言われることもあるでしょう。しかし、競合ではないからといって、わざわざ手抜きして競合にチャンスを与える必要はありません。

また、大きな会社だからオリジナルの画像素材を用意できる、というわけでもありません。

当方でもそうですが、クライアントさんにビジュアルの大切さを理解していただければ、しっかりと予算をいただいて写真撮影を当方で行うことも可能です。

ぜひ、メインビジュアルを軽く考えずに、オリジナルなものを採用することも検討していただければと思います。

お客さんに分かりやすい価格表記を考えてみる

先日、とある本を読んでいて、こんなことが書いてありました。

『料金表のない商売なんて…』

確かにそうですよね。金銭的に細かいことを気にする必要がないくらい裕福であれば、価格提示のないお店にも気兼ねなく入ることはできるでしょう。しかし、そのようなことができる方々はどれほどいるか想像できないくらい少ないのではないでしょうか。

僕も含めて多くの方々はメニューに価格表記のない料理屋には怖くて入れません。他の商売にも同じことが言えるでしょう。

明朗な価格表記が必要ではないか

そういう観点から考えると、明朗な価格表記というのは当然必要に感じてきます。しかし、フリーランスで仕事をしているとはっきりとした価格表記をすることが、なにか恥ずかしく感じたりする感覚があるのも事実です。

ですが、お客様第一で考えるとやはり絶対に必要なことでしょう。

Web制作や広告制作では、当然ではありますが専門用語も多くありますし、多くの方がどのような工程を踏んで完成に至るのかをご存じない場合もあります。そういった方々が見られても「分かって頂ける」「理解して頂ける」ような表記をするか否かというだけで、成約率にも関わってきます。

なにが記載されていれば分かりやすいか

それでは「Webサイトに表記する価格表」というケースを想定して、どのような価格表、どのような記載内容であれば、専門的な知識を持ちあわせていない方々にも明朗な価格表記となるかを少し考えてみましょう。

まずは項目ごとの価格表記

「わかりやすい価格表記をするのに、最初から項目を羅列するんですか?」と思われる方もみえるかもしれません。実際、僕も色々と考えてみましたが悩んだところです。

ですが、まずは数字だけでも見てもらって相場観があわない場合はそこで離脱(ページを見るのを止めること)されることも考えられます。各項目の説明を最初にしても親切な設計と感じて頂ける方も多いかもしれませんが、「わかりやすい価格表記」を目指すためにも目的である「価格」をまずは最初に表記しておくべきであろうと考えました。

項目の説明を並べて読んで頂いた挙句、相場観が合わないので離脱されるという流れになった場合、「お客様の時間を無駄に奪う」ということになってしまいます。そういう部分にも配慮しました。

項目の簡単な説明

各項目と価格を表記した後は、それら項目の説明を入れるべきでしょう。この部分は多くの制作会社・フリーランス様のサイトで欠けている部分かもしれません。

「企画構成費」「トップページ」「コーディング」「下層ページ」などなど、考えればなんとなくわかる方もみえるかもしれません。しかし、見て頂いている方々全てが、そのように察せれるわけもありません。(察しを期待している時点でアウトですよね)

ですので、言葉を噛み砕きながらわかりやすく説明してみることを心がけて、説明を記載しましょう。例えば、このような感じでしょうか。

企画構成費とは、お客様との打ち合わせにより、ご要望を詳しく伺い、Webサイト(ホームページ)の方向性を企画またはご提案させていただく費用となります。

回りくどく感じる方も見えるかもしれませんが、説明する部分に関しては誰が読んでもわかるように書くことは必要だと思います。

簡単な価格例

その後は簡単な価格例を数ケース、示してみてはどうかと考えました。

Webサイト(ホームページ)を作ると言っても、お客様それぞれにベストな構成というものが存在します。ですので、これといった型にはめるのが難しい場合もあります。(逆に型にはめることによって制作コストを抑えて提供するというパッケージ販売という方法もあります)

ですので、漠然とした形になるかもしれませんが、「このような構成だと、これくらいの価格となります」という表記をサンプル(例)として掲載することによって、価格表を見ているお客様に完成イメージとコストイメージを持って頂けるはずです。

制作工程を簡単にわかりやすく

ここまで見ていただけると、コストイメージはある程度分かっていただけていると解釈できます。ですので、次はお客様と一緒に歩んでいく制作工程を簡単に説明しておきます。

ここでは、できればフローチャートのような形で説明するべきでしょう。また、上で説明している内容もチャート内に盛り込むことによって、より一層お客様に制作工程をイメージして頂けるのではないでしょうか。ですので、フローチャートを作る際には、分かりやすい言葉(説明済みの言葉)や工程にかかる期間(目安程度)などは盛り込んでいおくと分かりやすいのではないでしょうか。

制作実績に価格表記をする

最後に、今までの制作実績資料に価格を明記して記載するというのも良いでしょう。

ここまででも、わかりやすく説明することによって、お客様にはかなりイメージしていただけると思います。ですので、最後に実際に今まで制作した実績を製作コストと共に紹介しておくとよいでしょう。

そうしておけば、実際のサイトにリンク経由で訪問し触って確認していただくことも可能ですし、掲載させていただけるサイト様の宣伝にも少なからずなるのではないでしょうか(掲載許可をいただく際には、そのような説明もありかと思います)。

まとめ

Web制作において、お客さんに分かりやすい価格表記を考えてみました。僕自身もまだまだそうなのですが、自分が分かっていることを相手も分かっているとは限らないということを、もっとしっかりと自覚して制作に取り組むべきだと確認させられました。

今回の記事では、以下のような項目と流れで価格を表記してみてもいいのではないかと考えました。

  • まずは、各項目ごとに分かりやすい価格を明記
  • そして、各項目についての簡単な説明
  • できれば、サンプル案件例をもとに価格例を説明
  • なおかつ、分かりやすい制作工程をフローチャートで説明
  • 最後に、制作実績に実際のコストを表記してコストイメージを明確に

このような流れで価格を説明することで、お客様には、内容・規模・コストともにイメージしやすい価格表に近づくのではないかと考えます。

早速、当サイトの価格表もわかりやすく作り直してみることにします(まだやってない)。

デザインというものを考えなおしてみる

新しい年度が始まりましたね。もう4月なんですね。僕にとっては年齢が一つ繰り上がる月であり、1年の4分の1が終了したことを痛感させられる月でもあります。

今年は自己投資を惜しまず行っていこうと考えているので、気になった書籍はしっかりと読むようにし、気になったイベントには率先して参加していこうと頑張っています(なかなかイベントには参加できてないんだけど)。

その中で、とある本に出会いました。そして今回は、それが原因でデザインってなんなんだろうってことを考えなおすいい機会を得ましたよっていうお話です。

デザインすることを錯覚する

日頃、デザイン制作したりコードを書いたりしているのですが、基本的な情報源というとインターネットとなります。なるべく外に出て物をたくさん見るようには意識しているのですが、基本的な生活サイクルがMacの前という状態ですので、どうしてもほとんどの情報がそこから入ってきます。

すると、TwitterやFacebookから「今、話題の記事!」的なものをよくチェックすることがあります。それは、今はやっているデザインだったりIllustratorのチュートリアルだったり、Photoshopのフリー素材だったり様々です。

そういうものを日々見ていると勘違いしてしまうことがあります。それは「装飾することがデザイン」と思ってしまうことです。

たくさんのキレイなフリー素材、シンプルなフリーフォント、魅力的な無料写真素材がインターネットには溢れています。そして、それらを活用したコラージュやバナーの数々。見ているだけでかっこいいデザインに触れられていると錯覚してしまいます。

しかし、デザインってそもそも何なんでしょうか。

目的を持ったデザイン

ここでは「デザイン」という言葉の定義などを用いて話をする訳ではありませんし、これは間違いなく個人的な考えなので万人に通用するわけでもなく当然反対意見もあるでしょう。しかし、誤解を恐れずに自分の考えを書くことにしました。

デザインには目的があります。

WebデザインにはWebデザインの、グラフィックデザインにはグラフィックデザインの目的があります。それは企業のPRであったり、新発売のPRだったりします。そして、単純なPRだけではなく細部に渡るPRも存在します。これはメインに打ち出したい、その次にはこれを…といった具合です。

しかし、それらの目的を達成できるデザインというものを作るのはなかなか難しいものです。

目的を達成できるデザインを

デザインを見ている一般の人々は、僕達が考えている以上に何も考えずに見ています。これは悪い意味ではなく、言い換えると自然体で見ていると言えばいいのでしょうか。

そんな自然体の状態の方々に自然に入っていくデザインというものがとても重要だと考えています。Webデザインやグラフィックデザインで言うならば、デザインが視線を誘導し認識させる力が必要なのです。

冒頭でも書きましたが、好きなだけ装飾を施したデザインというのはおおよそ視線を惑わす要素になりやすいです。それらをコントロール出来る人達が世に言うデザイナーだと思っています(だから僕自身はデザイナーなんて怖くて名乗れません。まだまだ力不足です)。

かといって、シンプルであればいいのか。そういうつもりもありません。僕達のデザインのほとんどが自己完結する案件以上にクライアントが存在する案件です。クライアントにもそれぞれ好みがあるのは事実ですし、常にバランスを取る必要があります。

全て思い通りできることは少ないです。しかし、できれば定期的にデザインする目的を考えなおす必要が自分にはあるなと感じました。そして、この様に考えなおす機会を与えてくれたのはこちらの書籍です。初版が1990年ということで、かなり前に出版された本ですが内容はまったく色褪せていない、むしろ今のこの誰でもデザインできると錯覚されている時代に必要な内容でした。

たまには自分の基本に戻ることも大切ですね。