Search

LIVE LIKE A TRAVELER

旅するように暮らす

【Web勉強会レポート】CSS Nite in KOBE Vol.31覚書(2017.11.03)

久々の勉強会共有です。
最近、インプットばかりしていて、一切アウトプットしていないので、絶対忘れていってると思うww
心を入れ替えてアウトプットもしようと思います。

CSS Nite in KOBE Vol.31

CSSとか一切書けませんが、来てみました。
でも、今回はかなりWebディレクター向けの内容だったと思います!
昔、ハッカソンに行ってしまい、フリーズした自分にとっては夢のようだね(´▽`)

今回のセッション内容はこちら!
セッション1
「事例から学ぶ!今日から使える、ECサイトの売上を380%上げた写真撮影テクニック」鍋坂樹伸(サン・スタジオ)
セッション2
「ハンズオンでマスターするマーケティングツール制作に便利なCanvaの実践テクニック」神森 勉(KDDIウェブコミュニケーションズ)
セッション3
「撮影後をふくめた全体の作業効率を良くするための商品撮影ワークフロー」岡田陽一(ふわっと)

セッション1 写真撮影テクニック

まずはプロのカメラマン鍋坂さんによる写真撮影テクニックのセッション。
撮影テクニックはもちろんですが、テクニックに入る前の土台の部分も本当によかった!

なぜWebサイトには写真が必要なの?というところから考えましたからね。
写真にはイメージ写真と説明写真という2つの用途があることも初めて意識しました。

2つの写真
イメージ写真は想像をかきたてる写真。
ここで大事なのは、シズル感や商品のコンセプトなんだと思います。
だから、ここでは商品の色味とか全体が入っているかとか、関係ないんです!
いやー、とりあえず全体を入れようとしちゃってたよ。
もしくは、「なんか、いー感じ」と思って、その写真を選んだとしても、
「全体が入ってないじゃないですか」って言われたら、
「そうですよねー」的なことを言っていた気がする…。

もうひとつの説明写真は、「判断させる写真」。
こちらは商品の色、全体像(場合によっては縫製など細部)、色味など、
商品を買うときに価格に見合うものか、自分の好みに合うかを判断してもらうための写真。
撮り方の技術的には画像加工の際に切り抜きができるようにすることも大切。

そっか、この2つは分かれていいんだ。
今まで、1つの写真にいろんなものを背負わせていたよ…。
ごめんよ…。

目的に合わせた写真表現をしてこそ「伝わる」。
当たり前だけど、そんなにちゃんと考えたことなかった…。

人物写真
人物写真はコーポレートでもECでも重要。
安心感や使用感を表現するには人物が一番。
人物は目線ありとナシの意味を区別しよう。
目線がある方は意志を持った感じ、ない方は自然な感じということかな。
まっすぐ見ている写真だと、場合によっては怖くなることもあるので要注意なんだな。

どんな写真も仕上がり時の他の要素のスペースを意識して撮影するのが大切。
縦位置、横位置なども本来は使用するスペースが決まっていないと判断できないですもんね。
と言うことは、段取りとしてはデザインが出来上がってから撮影に行かないとダメということだな。

人物写真の例としてAppleのサポートサイトはとてもよいとのこと。
人が楽しそうに働いている写真や、
老若男女が写っていることから多様性を感じさせ、
どんな人が行っても対応してくれそうだなぁという印象を与えるのですね。
https://support.apple.com/ja-jp

楽天でも写真が違うと全然違う

これは本当にちょっと衝撃だった。
正直、楽天のサイトは見栄えがあんまり…というイメージを持っていたのですが、変わるものですね!

今回はセッションタイトルにもあった380%成長を成し遂げた高松のアパレルショップ、
ラ・エールさんの事例を使ったケーススタディだったので、全てが具体的で、めちゃくちゃわかりやすかったです。

ラ・エールの楽天サイト
(ナチュラルでかわいい)
1
https://www.rakuten.co.jp/laair/

鍋坂さんは、今後スタッフさんが写真撮影までできるように指導するという形で携わられたそうです。
(自分たちでここまで撮れるもんなんだ!)

撮影前にクライアントと共有すること
写真撮影の前にショップの方と共有されたことは下記のとおり。

1.写真撮影の前に売上目標を確認する
1,000万円→3,000万円
こんなふうに目標を共有するってあまり考えたことなかったかも。
毎回必須というより、この事例ではたまたまだったということですが、
同じするなら目標を持ちましょうってことですね。
「だってその方が楽しい♪♪」とのこと。
確かに気持ちあがりますね!

2.競合他社のビジュアル認識
このあたりは撮影だけじゃなくて、サイト作りでも意識しないといけないことだな。

こんなふうに1つの目標に向かって進んでいくって、
なんだろう、
これは、
まさに”青春”!!

撮影場所の設営
撮影で気をつけることはカメラ以外のことも意外と多いそうです。
撮影場所の光の入り具合も大切。
自然光を入れる前提ならシーツなど目の細かい布をカーテンにするとよい。
(レースだと柄が写っちゃったりする。)
自然光を使う場合は時間をずらさないようにすることも大切です。

写真の撮り方
さて、いよいよ写真について。
顔はあえて写さずに首下だけ写すアパレルサイトも実際よく見ますが、
せっかくスタッフをモデル(着用例として)使う場合は表情込みで撮影するのもひとつの選択肢です。
表情を魅力的に撮影すると訴求力が上がるかもしれません。

顔出しNGのモデルさんがいる場合もあると思いますが、理由などお聞きしてうまくコミュニケーションすることが大切。
モデルさんの空気感を掴むために食事の時間をとったりもされていて、そういうの大切だなぁと思いました。

後、モデルさんには早い段階で、自分が写っている写真を見せて、
自分の写り方を意識してもらうというのも、素敵だなと思いました。
和やかな雰囲気と、モデルとして頑張ってもらうことをうまく両立されていると感じました。
完全なプロモデルの方だとまた違うかもしれないのですが、写真に写ることって、照れや緊張もあると思うので、
早い段階で写り具合を共有する方が「写る」ことが自然になるんだなと思いました。

目線の意味についても最初から考えておくこと。
カメラ目線は熱意や信頼感などを与えますし、
アパレルなどでは、あえて下を向かせて自然な表情を切り取るのもありです。
何を表現するためにその目線にするのか、撮る側は言葉にしておくべきなんですね。

写真の選び方
写真選びはディレクターに任せられることも多いので、特に参考になりました!
飛行機の機内誌のバランスは抜群とのことです。今度よく見てみよう。

3~4カットで構成することを意識すると、フォトディレクションのよいトレーニングになるとのことです。
Webだから何カットでも載せられるという意識はよくないなと思いました。
確かによく似た写真をスクロールするのってストレスになることもあるな。
といっても、絞りきれずに多めに写真を載せるっていうのは、よくやっちゃってる気がする。
もちろん、説明のためにその枚数が必要っていうんだったらいいけど、ただの優柔不断で載せとくってのは、やめます!

屋外ロケについて
続けて、こちらも本当に勉強になりました!!
撮影同行行く前に知りたかったー(笑)

屋外ロケは絵コンテが必要
・あたりの写真ではなくて絵で描いた方がバッファがある。
・自分で考える余地を残すことが大事。
・写真だとカメラマンの発想を制限してしまう場合がある。
・絵の方が場の雰囲気や空気、流れを捉えられる。

絵コンテ、描いたことなかった…。
撮影ディレクションってこんなに準備に時間かけてもいいのかって思いました。
でも、ディレクターの頭の中にどんな写真が欲しいかがなかったら、
何撮ったらいいかわかんないですもんね!

モデルさんの手持無沙汰はよくない!ものを持っていく!
これは本当にそう!
自分が撮影同行したときも、めちゃくちゃ実感しました。
(ちなみに私が撮影同行したサイト。
ミス奈良さんと奈良の名所を巡りました♥
ogp
https://narashikanko.or.jp/

何も持たずに自然な位置に手を持っていくって、本当に難しいんですよね。
観光サイトなどの場合はご当地の名物とか写真がきれいなパンフレットとか、持たせることでPRにもつなげられると思うので、
今後必ず用意したいと思いました。

先に用途を考えましょう!
特に時間に制限があるロケの場合は無限に撮れるわけではないので、あらかじめ用途を考えて、縦位置横位置など、ちゃんと決めて挑むべきなのですね。
こんな場合も絵コンテは有効。下手でも関係ないので、描くべきですね。

ロケはしっかり役割分担しましょう
ちなみに、自分がディレクションしたときも、飲み物手配とかメイク直す人とか絶対必要だと思いました。
メイクさんは予算がなかったらつけられない場合もあると思うのですが、道具系はちゃんと持っていかないとだめだなぁと思いました。

ポージングの指示はディレクターの大切な役目。
外でしか撮れないポーズを意識して事前に考えておくことも大切。

「イメージ写真」のテーマを決めておくこともディレクターの役目。
テーマが決まっていないと撮影時に迷ってしまうんですね。

「~してるように撮りましょう」は気持ちまで持っていかないと撮れない、という話も印象的でした。
指示通り撮ってもいい表情じゃない、なんとなくカッコイイはないというのも非常に納得。

その他の役割分担としては、購入物、ロケ地、タイムテーブルなどの段取りも必要、
複数人でやるなら仕上がりイメージの共有も忘れずやっていかないとなぁと思いました。
このへんは全部まとめて、事前にメールくらいはしておかないとなぁ。
ロケ地やタイムテーブルなど不可欠なことはやっていたけど、テーマやイメージの共有までは全然できてなかったわ。

撮影実践

今回は撮影のワークショップもご用意いただいてました!

時計のECサイトのイメージ写真という想定で行った撮影が1番心に残りました。
時計を売るんだから、時計の文字盤が見えなきゃダメでしょ!って思っていたんですが、そういうことじゃないんですね!

説明写真を撮るなら、もちろん文字盤も色味もちゃんと見えないといけませんが、
実際に身につけたところをイメージ写真として撮るなら、
写真の目的は「身につける人の手を綺麗に見せること」だったりします。
目的は商品の特性によって変わってくるので、クライアントや、場合によってはユーザーの声も聞きつつ、事前に詰める部分ですね。
イメージ写真と説明写真は別物!と実感。

実際に写真を撮ってみて、角度によって手の美しさがこんなに引き立つんだ!って思いました。
人間の手ってもちろん3Dなので、指の長さが全く変わって見えるんですね。

そして豆知識として、ECサイトの商品撮影をする場合、レンズを買い足すならマクロレンズがオススメと教えていただきました。
ECサイトなどであれば、衣料品の縫製や生地など思い切り寄って見せたいことも多いですもんね。

まとめ

何より思ったのは、「サイト制作」を依頼されたからと言って「サイト制作」をしたらあかんな、ということ。
「サイト制作」の目的は何なのか?
その「サイト制作」はありものの写真や購入画像を貼り合わせたものでいいのか…

もっと視野を広く持ってマーケティング全般で考えないといけないんだよな。
例えば、実店舗があるならフライヤーも作ってWebに誘導するのもいいかもしれないし、
なんならまだWebサイトのリニューアルは不要かもしれないし、
ECから実店舗への来店も視野に入れる必要があるだろうし。

そんな、たくさんの選択肢の中で写真撮影は大きな力を持つオプションの1つなのだと思いました。
それにしても、先にECの写真撮影の充実からやって、資金充実させてからコーポレートリニューアルって、正しい順番やよなぁー。
現在のECサイトが例えば楽天だとしたら、Webサイトをよく見てる人間から見たら、洗練されてないように見えるかもしれないけど、
じゃあサイトデザインが洗練されたら売れるのかって言ったらそうじゃないと思う。
サイトデザインが同じでも写真で全然変わるし、楽天カード持ってるから楽天で買う人だっているやろうし、楽天内で他社と比べる人もいるだろうしな。

テクニックだけではなく、根本的なところから学べる、とてもよいセッションだったと思います。

本も買ってみたのでじっくり読んでみます。
Web制作と運営のための 写真撮影&ディレクション教本 ~段取りから準備、撮影テクニック、実践ポイントまで~

Canva実践テクニック

2つめのセッションはCanvaのハンズオン!
最近すごくハマっているWebサービスです。
そもそもCanvaについて調べるうちに、このイベントを発見したくらい。
(もちろん今回のアイキャッチもCanvaで制作)
https://www.canva.com/
オーストラリア発祥のWebサービスだけあって、UIなど全てが海外っぽくオシャレ過ぎる!
ちなみにローディングの時間もアニメーションがかわいいので、全然苦に感じないのはさすがですね。

Canvaって何?

Canvaとは、テンプレート集から好みのものを選んでアレンジしていくだけで、デザイン知識がない方でも簡単に美しいグラフィックを作成できるというオンラインツールです。
しかも無料版もめっちゃ充実しています!

Canvaのアイデアは、もともと創業者が大学でグラフィックデザインのプログラムを教えていたときに、生徒が基礎を学ぶのに苦労している様子を見て思い浮かんだものだそうです。
たしかに、Photoshopとか難しいんだよ!
デザインとかやってみたーい→でも、Photoshopとか無理、インストールとかどうしたらいいのかわかんないし、お金ない
っていう負の無限ループを断ち切るアイテムがCanvaですね。
インストール不要で使えるのが本当にありがたいなー。手軽。
0からじゃなくてレイアウトが出来上がってるので、センスがなくても、いい感じにできるし。

私のお気に入り-プレゼンテーション-

個人的にCanvaの中で1番気に入っているのはプレゼンテーションのレイアウト集があること。

提案書ってパワポでディレクターが作ることが多いじゃないですか。
提案書の段階ってまだ受注できてないわけだし、そんなもんのデザインまで全部デザイナーさんにお願いできないしね。
でも、やっぱりデザイン性がいい方がいいし、
もっと切実な問題として、レイアウトが思いつかないから、資料がまとまらないときもありますよね(どんだけセンスないんだって思われそうですが…)

Canvaのプレゼン資料レイアウトは、ひとつのプレゼンテーマの中に、10パターン程度のレイアウトが入っているので、ページごとに情報量が増減してもかなり対応できると思います。
なんだかんだ私はパワポで資料を作ることもあるのですが(←おい)、パワポで作るときにもCanvaのお洒落なレイアウトをよくパクっています。
実は現在は30ページ以内のプレゼンテーションしかCanvaでは作成できないのですが、これからページ数も増加するかも?だそうです(^^♪

有料版

実は私はCanvaファンと言いつつ無料版しか使っていないのですが(←おい)
Canva for Work(有料版:月約1500円/1ユーザー)ならチームでCanvaを使うことができるそうです!
便利そう。
それに全ての画像を無料で使えるようになるみたい!これは大きい。

有料版の機能としてマジックリサイズもオススメ。
マジックリサイズを使用すると、特定のサイズで作成されたテンプレートやデザインを異なるサイズにシームレスに変更できます。
バナー用、OGP用などいろいろ使えるんですね。

Canvaは本当に専門知識0で使えるので、Web制作会社はデザインのテンプレートだけ作ってあげて、お客さん側が自らバナーなどを作るという使い方もありとのこと。
なるほどー。
同じテイストで作れる体制づくりはいいな。
お客さんもいちいち頼んだり、追加費用発生したり大変だもんね。

Canvaの使い方Tips

別記事にした方がいいかなと思いつつ、ここに覚書。

Canvaで背景に画像を載せようとすると、変なところで画像が切り取られることがあると思います。
そんなときは、画像をダブルクリックしたらやり直しできますよ!
(ハンズオンで作業していて気づいた)

ちなみにShiftを押しながら、ドラッグで画像のサイズ変更をすると縦横比率が変わります。
パワポだとShiftを押しながらドラッグで変更した場合に縦横比率が保持されるので、逆だ!と思いました。

まとめ

Canvaのようなサービスが出てくるからこそ、ユーザーフローやデザインの目的を考えないといけないんだろうなーと思いました。
なぜ、そのレイアウトを使ったのか、なぜそこに導線があるのか、常に目的と合わせて説明できないといけない。

ただはめ込むだけのデザインなら、本当に誰でもできるようになるんだろなぁ。

そんなときのことを考えて、「デザインは見た目がきれいなだけじゃない」という考え方を徹底していかないとな。
逆にデザイナーが「ルーティーン作業」に手を取られず、もっと本質的なものを見られるようになるために、Canvaは役に立ってくれそうです。

もちろん、我々非デザイナーには本当に強い味方で、仕事でも、仕事以外でもガシガシ使うと思います。
今後Canvaから印刷会社にダイレクトにデータを飛ばすこともできるようになる予定ですし、
人気の日本語フォントが使えるように交渉中とのこと!
もっともっと広まってほしいサービスです♥

ちなみにCanvaが発信しているデザインチュートリアルも素敵すぎるので、
ぜひチェックしてください!
英語ですが、シンプルな文章なのでブラウザの翻訳でも結構読めると思います。
https://designschool.canva.com/

商品撮影ワークフロー

これは本当に自社で写真撮影を手掛ける前に聞いておいてよかった!
今後、イメージ写真はプロに頼むにしても、物撮りは自社で、なんてことも出てくるかもしれないので。

こちらもとあるネットショップさんがぶち当たったお悩みからのケーススタディで、とってもわかりやすかったです。

お悩み内容は、
商品撮影を自社でやっているけれども、写真の色と実物が合わず、
しかも写真ごとに色味もバラバラで補正がとても大変。
カメラも照明も用意しているのになぜ??
というもの。

撮影現場を訪問すると、原因が見えて来たようです。
怪しいのはこちら。

・商品ごとに撮影
・(三脚を使わず)手持ちで撮影
・毎回同じWB設定
・ストロボ+蛍光灯+自然光(混合光・ミックス光)
・JPEGで保存

カメラがわからない私にとっては、何がいけないの?って感じでしたが、
基本的に今あげたことは全部だめ!

ということで、改善策はこちらです。

1.必ず三脚を使おう!
ブレを防ぐ。
手持ちでは正確なフレーミングは行えない。
位置を固定して取っていればライトルームで座標を指定して、一括で傷や汚れを消せる。
三脚は2万円くらいのものでok。

2. 撮影順はモノ別ではなく、シーン別。
トルソー→アップのような感じ。

3. WB(ホワイトバランス)はオートはダメ!
オートにするとカメラが勝手に色温度を調整してしまう!
だから1枚1枚違った色になっちゃうんです…

毎回18%のグレーカードを使って露出を合わせる必要があります。
グレーカードはアマゾンで2,000円ぐらいで売っているらしい。

4.複数光源は難しい!
光源によって色温度が違うから、全部消してひとつの光源だけのライトを使った方がいいんです。
ストロボあるなら蛍光灯は消しましょう。
外からの光は時間帯によって色が変わるので遮光しましょう。

5. JPEGはやめてRAWモードで!
JPEGだと加工すると劣化する。
RAWモードなら劣化しない。
iphoneでもRAWで撮れるアプリあり(7+以降)

6. Lightroomでセレクトから現像、管理まで行う
これがないと写真管理できないというソフトとのこと。
Adobeのやつです。
写真管理するなら、これ必須なんだなー。
これの存在知らずに、カメラマンさんに「生データもらったら、こっちで管理しますんで」
とか言ってたら死んでたな…。

7.大量の写真の保存と受け渡し
Amazonプライムフォトが便利。
容量無制限でRAWデータもバックアップできる!
年間3,900円以内で画像はいくらでも保存できる。
ビデオ、イラレのデザインデータなどは5GB超えると追加料金。
1回Amazonに上げられているので、再共有も簡単。

こちらのご本も気になります!
デザイナー&ディレクターが写真を上手に撮る方法

次回のCSS Nite Kobeは中川流!?間違いのないWebデザインの極意&実践

次回もめちゃくちゃ面白そう!
Webサイト自体を擬人化する…??その発想はなかった…
これは社内の人にもアナウンスするべし!

お申し込みはこちらからー
CSS Nite in KOBE, Vol.32 開催概要

Rie@LLT

旅するように暮らしたい…そんな気持ちで始めたブログです。

Leave a Reply

Name *

Email *

Website

© 2018 LIVE LIKE A TRAVELER . All Rights Reserved.