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

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

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

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

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

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

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

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

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

JAL企業サイト

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

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

井村屋フーズ

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

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

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

森永製菓

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

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

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

飛鳥交通グループ

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

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

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

アイスペース

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

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

JAながの

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

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

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

亀田産業株式会社

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

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

株式会社ビューティ花壇

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

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

株式会社リアリット

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

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

ヤマト運輸

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

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

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

まとめ

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

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

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

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

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

SUZURIで作れるアイテムのAdobe Illustrator テンプレートを作成しました

ちょっとTシャツなりマグカップなりを手軽に作りたいなと思って、SUZURIを眺めていました。

suzuri-item

適当に画像を作って当てはめてみては、簡単にアイテムを作ることができる楽しいサービスなのですが、最適な画像の大きさや比率がアイテムによって様々なので、作りやすいようにイラレのテンプレートを作ってみました。

単純にSUZURIが配布しているテンプレートのサイズでアートボードをアイテムの数だけ作成してあるシンプルなものです。この他にアイテム別にAiやらPsdがあればもっと便利なのかな?

もしよかったら使ってみてください。GitHubに上げておきます。

https://github.com/OleinDesign/suzuri-template

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

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

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

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

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

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

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

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

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

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

目的を持ったデザイン

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

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

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

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

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

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

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

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

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

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

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

Olein Design がロゴを作る過程

先日、こちらのサイトをリニューアルして公開しました。TwitterとFacebookページにて皆さんにはお知らせさせていただきましたが、大変多くの反響をいただけました。改めまして、当サイトを見ていただきありがとうございます。

今日はちょうど先日業務でも行っていました「ロゴ・マークの作り方」を、私流ではありますがご紹介してみようと思います。こういったことは、なかなか同じような業種でもない限り知られることも少ないかと思います。また、人によって作り方も様々ではあると思いますので、こういう人もいるんだな、という程度で見ていただければありがたいです。

情報共有

ロゴ・マークというのは、その企業・団体・チームなどを象徴するものになります。ですので、まずはクライアント(ロゴをつくて欲しいという方)からいろいろな情報を得なければなりません。

その方法は様々です。最近、よく目にするクラウドソーシング系で受注すればメールやシステム内でのメッセージでの情報交換がメインになるかもしれません。遠隔地同士であればスカイプなどの通信ソフトを利用することも多いです。そして、実際にお会いしてお話を伺える場合はそのようにしています。

実体験としては、やはりメール(文面)よりも通話(音声)、通話よりもビデオ通話(顔を合わせて)、ビデオ通話よりも実際にお会いして情報共有する方が、効率という面でも認識の違いが発生する可能性という面でも良いと考えています。

情報共有の際には、このようなことをまずしっかりとお尋ねします。

  • なぜロゴを作るのか(理由)
  • どのような活動をしているのか(趣旨)
  • 社会に対してどのようにアピールしていきたいか(主張)
  • イメージしているものはすでに持っているか(イメージ概要)
  • 商標登録するかどうか

なぜロゴを作るのか

まず最初に理由をお聞きします。その理由によっては、ロゴを作る必要がない場合もあります。例えば、既存のロゴがすでにあってリニューアルしたい、という場合、既存のロゴのイメージ戦略の結果次第では継承していくことも視野に考えるべきでしょう。ですので、まずはクライアントがなぜロゴを作り直したいと考えているのか、をしっかりと理解する必要があります。

どのような活動をしているのか(趣旨)

そして、クライアントの団体がどのような活動をしているのかをしっかり知っておく必要があります。ロゴもマークもそうですが、まずはイメージで捉えられるものです。ですので、クライアントの活動内容にそぐわないイメージで作るわけにはいきません。極端な話、野球チームにサッカーボールを使ったマークは使えませんよね。簡単に言うとそういうことです。クライアントにあったものを提案するためには、しっかりと活動内容を理解しておく必要があります。

社会に対してどのようにアピールしていきたいか(主張)

次に、クライアント自身の意向として、ロゴを通して社会にどのようにアピールしていきたいと考えているかを確認しておきます。

前項目にて伺った内容の中から、クライアントにとってのアピールしたいポイントはどういう部分かを確認します。アピールしたいポイントの共有がしっかりとできていないと、いつまでたっても双方納得するものを作ることはできないでしょう。両者どちらかが妥協するようなものは完成とは言えません。この点もしっかりと情報共有しておく必要があります。

イメージしているものはすでに持っているか(イメージ概要)

現時点でクライアントがどのような完成イメージを持っているのかを確認しておきます。しかし、クライアントが思っているものを作るために聞くのではありません。どうしても必要な場合は、クライアントが考えているイメージを壊していく作業も必要になる場合もあります。

商標登録するかどうか

ただ単にマークとして、ロゴとして使うだけであれば、さほど権利等で問題になることはないでしょう(しっかりと商用利用可のデータを使うこと)。しかし、登録するとなるとそれとは別に権利等に触れることもありますので、しっかりと使用用途を確認して、それ用に制作しなければなりません。

アイデアを出す

アイデアを出す部分には色々な方法があります。ブレーン・ストーミングもその一つですし、他にもたくさんの方法論が存在します。しかし、自分が一番慣れている方法でいいのではないかなと考えています。

私の場合は、まず文字としてキーワードを上げていきます。作ろうとしているロゴに関する全てのキーワードを、クライアントから得た情報を元に出せるだけ出します。それこそノートに何ページかにはなりますし、付箋で行うと壁が埋まる場合もあります。

その後、それらのキーワードをグループごとに分けていきます。まぁ、ブレストですよね。この時点で多くもなく少なくもないグループにまとめます。このグループの数が後に作られるイメージの数につながっていきます。

サムネイルを描く

イメージの方向性がある程度導き出せたら、次はどんどん手を動かしてサムネイルを書いていきます。

人にも寄るかもしれませんが、僕はサムネイルの数を稼がないと作れないタイプのようです。例えば10通りのイメージでロゴ案を提出したい場合だと、サムネイルは少なくとも5倍は必要になります。

「遠回りしてるねー」と思われるかもしれませんが、僕にとってはこれが近道なのです。ボツ案も含めて、より多くのサムネイルを描く=頭に描いたイメージを明示化するという作業なのです。この作業を行わずして適当に作ったロゴは本当にひどいです。

清書する

サムネイルがある程度固まったら、そのグループごとに清書して数個にアイデアを絞ります。そして、なるべく具体的なイメージへと作り上げておきます。

清書するんだから、それでほぼ完成という訳ではありません。1つのイメージ系統に数個のイメージを用意するようにしています。この時点でもなるべく固めてしまわないように意識するようにしています。

データとして起こす

清書してある程度のイメージに固まったあとにPC/Macの作業に入ります。ここまではイラレ/フォトショは起動すらしていません。

データとして起こしていくわけですが、イメージによってはスキャナで取り込んだ後トレースすることもありますし、簡単なものであればそのまま作って調節する場合もあります。

ここまで来るとイメージはある程度洗練されてきているので、オペレーション作業という感じでスピード感をもって行います。ここで考える作業はしないようにも意識しています。いつでもどれだけでも迷うことは出来ます。迷う作業は前述した部分で済ませておきましょう。

最近では、イラレが使えればロゴが作れるとか、フォトショが使えるからWebデザインができるとか、そういうことを恥ずかしくも簡単に言う人が多くなってきました。自分で言うのは簡単なので、それはそれでいいと思いますが、作るものは“それなり”のものです。天才でなければほぼそうなるでしょう。そして、この部分で考え悩む人がとても多いようです。

案を提示する

データとして制作したものを、出力またはPDFにて先方に提出しプレゼンテーションします。

ここで僕が心がけているのは、どうしてこのようなデザインになったのかをクライアントにしっかりと伝えるようにしています。そういう部分も理解していただいた上でいただくフィードバックを重ねてブラッシュアップしていくことで、同じ方向を向いて制作していけると考えています。

「何案提出するのか」と聞かれることもありますが、基本的には3案以上提出するようにしています。あとは予算によってとなります。ここまでお読みいただいて、ある程度必要な時間や工数も理解していただけると思います。実際に提出案数が増えるほど、必要となる時間も比例するので、どうしても予算次第となってしまいます。

あえて言うなら、クラウドソーシングでの「ロゴ2万円!」とかいうものに参加しない/できないのは、この手法を取れるだけの予算がないのが理由です。金額的に良くても5万円ほどでしょうか。それでもコンペですので採用されるかどうかは提出してみなくてはわかりません。ここまでで分かって頂けるとは思いますが、かなりリスキーですし、そんな即興で作ったようなロゴがそれほど長く続くとも思えません。近い将来、飽きが来るのではないでしょうか。(個人的な考えです)

ブラッシュアップ

上でも触れましたが、クライアントに案を見てもらいフィードバックを頂きます。

ここでも一方的にフィードバックをもらうのではなく、建設的なフィードバックにするための意見交換を忘れないように心がけています。

クライアントの好き嫌いもありますが、それよりも良いものを提供することの方が大切です。クライアントが気に入ったもの=良い物(結果が出るもの)ではありません。最終的に投げたくなる場合もそれはあります。ないとは言えません。「もう、気に入ったもので検収してよ」という気持ちもわかります。が、なるべくそのような状況に至らないように、いい関係を築いて歩いて行きたいものです。

まとめ

ザックリとではありますが、Olein Designとしてロゴ・マークを制作する手順をご紹介しました。全く違う業界にみえる方々には新鮮に映るかもしれません。しかし、みなさんがこの通りではありませんし、自分に一番の方法を持ってみえると思います。「私はこうしてるよー」などのご意見も伺えると楽しいなと思います。

「ロゴ、適当に作ってくれない?」とか「ロゴ2万円でお願いします」なんていうお話もよくありますが、それが難しいということも少し分かって頂けるかと思います。

皆さんのビジネスに最適なロゴ・マークに辿り着けますように。