00:00
ちょいさきトーク、あなたよりちょっと先歩いてきた人のWebと仕事の話。 この番組では、フリーランスでWeb制作をしている私、けいが、上司じゃないけどちょっとに軽に話ができる隣の席の先輩のような立場でWebと仕事について語ります。
やっぱりちょっとエアコンをかけて収録をしていると結構感想がひどいですね。 ちょっとこれ収録終わったら今日も諦めて少し寝ようかななんて思っているところです。
本当に皆さん体調にはどうぞご自愛ください。 さて今週はですねWebと画像というのをテーマにお話をしています。
昨日は改めて画像形式の基本ちゃんと気にした方がいいですよという話をしました。 適材適所という言葉がありますので用途に合った画像形式を選んで必要以上に重くならないように配慮すると。
そういう工夫結構大事だなという話でした。 さて今日なんですけども皆さん悩んだことがあると思います。よく悩むでしょう。
メインビジュアルの画像の話をしたいなと思います。 トップページのファーストビューの一番大きく表示される場所にどんな写真を置くかというのがやっぱりサイトを制作するにあたって最も大事といっても過言ではないような
そういう検討事故になるのかなと思いますが、意外と適当にそれっぽい感じだけで決めてしまっているケースも多いんじゃないかなという気がします。
なかなか意味のないどの会社でも通用するような画像を置くというケース結構多いんじゃないかなというふうに思いますよね。
これはですね、私もそういうのをよくやっておりました。 特に会社員時代はデザインパターンが決まっていて、このレイアウトの写真が入るとここが決まっていてそこに合う素材を選ぶというようなプランがあったんですけれども
なかなかお客さんからいい素材が毎回出てくるわけではないので、ストックフォトでそれっぽくいい感じに作るということは多かったですね。
もちろん今もそういうケース結構あるかなと思うんですけど。
このお客さんからいい素材がなかなか来ない問題というのは明日のテーマになるので、また明日皆さんに問うてみたいなと思うんですけれども。
なかなかこれだという写真がお客様から支給がない場合ですね。
私会社員時代ですと会社で素材辞典というストックフォトを買ってましたので、素材辞典の中からそれなりに万人に印象が良さそうな定番の写真を選んで入れる。
それっぽいキャッチコピーを入れるというようなので大体作ってましたね。
皆さん思い当たることたくさんあると思うんですけども。
例えば新緑の画像、新緑と空とかですね。
あと水の波紋が広がっているブルーの背景があって、その余白っぽいところにキャッチコピー入れるとかですね。
あと花、あと握手、オフィスでみんなが会議してる写真とか、ああいうやつですね。
03:00
まあ無難ですよね。今でもそういうサイトを本当によく見るかなと思います。
キャッチコピーとして身近なあなたのパートナーとかですね。
そういったものが入ってくるというのはもう本当に困った時はこれみたいな定番のパターンがあるのかなと思うんですけど。
当時は素材辞典でしたけど、今だとピクスタとかアドビーストックとかその辺を使うことも多いのかなと思いますが。
だいたいですね、よく見る画像でお決まりのパターンあるのかなというふうに思います。
まあでもですね、冷静になって考えてみると、その写真で何が伝わるんだろうというのがありますよね。
去年、企業家の方向けにウェブマーケティング講座をやったという話、この配信でも再三してるんですけども。
その時の私の講義の中でですね、サイトを一目パッと見た時に、あなたは何屋さんですかっていうのを一目でわかる画像を使いましょうっていう話をしたんですね。
NG例とOK例みたいなのを二つ並べまして、ちょっと実際にあるサイトを並べたので、具体的にこの写真だっていうのをちょっとここで出すのは出しづらいんですけど。
例えばですね、法律事務所さんとかで一つは風景とおしゃれなテクスチャーみたいな画像があって、キャッチコピーとして英語の文章と皆様一人一人が輝くためのお手伝いをします、みたいな感じのキャッチコピーが入っているサイト。
もう一つはですね、侵略の画像は背景に入っているんですけども、弁護士の方のポートレート写真と解決の第一歩としてどういう問題を扱っているか、例えば離婚問題、相続問題を中心に何件以上相談の実績があります。
女性スタッフ採用とか、初回相談無料とかそういうのが書いてあるというやつですね。それを二つ並べて、パッと見た時に何屋さんかすぐわかりますかっていうのをお見せしたりしました。
もちろん迷うことなく後者を皆さん選ばれるわけなんですけれども、今の時代のサイトを見る方、短期なので皆さんも経験あると思うんですけど、サイト見に来て何見に来たんだっけっていうのを3秒後に忘れているってことは結構あるのかなと思います。
抽象的なメイン画像がバーンと来たところで、私何調べに来たんだっけっていう感じになってしまうっていうところがあるので、そこをそうさせないというのがデザインを作るデザイナーであったりとか、情報設計するディレクターなのか、担当の制作者の腕の見せ所なのかなというふうには感じます。
もちろんすべてのケースで完璧なものが作れるということは少ないと思いますし、私もないぞ素材ないし載せることが出てこないみたいなので悩むこと本当に多いんですけれども、特に今弁護士のサイトの例を挙げたんですけれども、
やっぱり弁護士さんだと人がイコール商材になるので、写真を出した方がいいとはいえ、やっぱりちょっとメインに自分の写真出すのちょっとみたいなふうに遠慮される先生とかもあるので、じゃなかったら代わりにどういうものを出せるのかとか、例えばお顔はバッチリ出さなくても後ろ姿で相談に乗っているような写真を撮りましょうかとか、なんかいろいろ工夫できることはあるのかなと思うので、
06:25
何屋さんなのかっていうので頭を使わせないというのは割と大事なことかなと。これちょっと今、自戒も込めて今お話をしています。
どうしてもですね、過去私が作ったサイトを振り返ってみても、握手、パソコン、会議風景、その写真を使ったこと数知れずあるんですけれども、本当に最後の手段として撮っておく。
それをどうしても使わざるを得ないときに何かキャッチコピーなり何なり他の方法で保管する術はないかというのをやっぱり頭を使う必要はあるなというふうに感じております。
それこそブランディングサイトみたいな有名ブランドが世界観を表現するみたいな、そういうサイトもあるとは思うんですけれども、なかなか私たちが普段お商売で相手にさせていただいている企業さんだと、
そういうサイトは少数派だと思いますので、見た人がですね、忙しい現代人が3秒経って何しに来たのかわからないですね、ちゃんと忘れずにそうだそうだというのを覚えていられるようなファーストビュー、これを意識していきたいなというふうに感じております。
もしもこの見た目のデザインが先に来ちゃうと、そこにどういう意味があるのかというのが後回しになってきてしまうのかなと思います。
先日ですね、ウェブ系フリーランスとマーケティングという集でお話をした、だなどこ、誰に何をどのように、どういう効果を与えられるのかというのを意識しましょうという話をしたんですけれども、
ウェブサイトの構成も全くその通りだと思いますので、誰に何をさえるためにどういう写真を選ぶのかというのをですね、みんなが意識して、そしてお客さんにも意識してもらえるようにうまく制して引き出してあげられるといいなというふうに思いました。
最近ですね、よくあるのがですね、ワードプレスの規制のテーマとかでメインビジュアルに管理画面から写真セットして、自動でいい感じにレスポンシブになってくれるパターンとかあるんですけれども、あの時にメインビジュアルに画像をはめてキャッチコピーとかテキストで入れた時に、
ああいうのってこのCSSのオブジェクトフィットカバーっていうプロパティとかで画面のサイズに合わせて、よしなに上下左右がうまくこう自動でトリミングされて真ん中へんがいい感じで映るみたいな、そういうふうに表示されるようなコーディングしてあること結構あるんですけれども、
そういうのを使う場合にですね、メインビジュアル入れた時に本当に見切れてもいい要素ありますかというのは気にしたいところですね。風景画像があって多少サイド上下見切れても、そんなに伝えるのに意味は、もう欠損ないですよっていう画像だったらいいんですけれども、
09:16
例えば人物の画像とか集合写真とか商品の写真とかをメインビジュアルに使う場合に、このオブジェクトフィットカバーを使ってしまうとデバイスのサイズによっては商品の大事なところが欠けてしまったりとか。
今週1日目の話にもなるんですけれども、人物の変なところで画像がちょん切られてしまったりとか、そういったことが起きてきますので、ワードプレスのテーマ、既存のものを使うとしても、本当にその成り行きで画像がトリミングされてもいいんですかっていうところはやっぱりちゃんと考えるべきだなというのは思います。
必要に応じてデバイスごとに縦長と横長作るとか、これぐらいの工数は惜しまない方がいいんだろうなというのは思いますね。逆にトリミングをされる前提で1枚画像でどういう画像を用意するのかっていうのを考えるのも結構スキルがいるので、だったら最初から2枚作っちゃった方が、かえって工数的に早いよねっていう判断をした案件も先日ありましたので、
当たり前にレスポンシブだからこれで有機で表示されるからいいよねではなくて、実際じゃあどう見えるのか、メインの商品の必要な情報がちゃんと伝えられているのかとか、そういったところをやっぱり気にして最終的にチェックをする必要はあるなというふうに思います。
さて今日のまとめになるんですけども、ウェブサイトのメインビジュアルどうするか問題、これは悩む方多いと思うんですけども、まずはこのサイトは何屋さんのサイトなのかというのがちゃんと伝わるというところ、制作のサイトのですね、ちょっと通ってお客さんに出す前に1回通ってみるという姿勢は大事かなと思いました。
お客さんにもそこをちゃんと認識してもらって、素材が出てこない場合でも何とか良いものにしたいのでどういうのを載せましょうかというところをですね、お客さんにもちゃんと考えてもらうというのは大事かなと思います。
ウェブの制作に従事する我々の使命としてやっていきたいなという決意を新たにして今日のまとめとしたいと思います。
さて、これをお聞きくださっているリスナーの方はですね、メインビジュアル何載せていいのか迷った経験ありますでしょうか。きっとあるんじゃないかなと思います。
こういうふうに対応したよとか、あとはですね、昔の苦い思い出でこんな画像載せたけど微妙だったなとか、今だから言える話とかですね、多分皆さん持ってるんじゃないかなと思いますので、そういうのありましたらちょい先トークのハッシュタグとかお便りフォームからお寄せいただけると嬉しいです。
今日も最後までお聞きくださりありがとうございます。お便りや感想は概要欄のお便りフォームかXでちょい先トークのハッシュタグでポストしてください。それではまた明日。
