コーポレートサイトの採用ページ改善!
MVからもう一度、前回の復習からスタート!
前回不参加者にテスト。全要素は?
Wさん>未経験から始めるWEB制作アルバイト
コントラストがはっきりしていてキャッチが大きく出ていた。
自由勤務のピンクは印象に残っている。
キャッチの文字がインパクトがあって誰なのかはあまり記憶にない。
Mさん>最初は2枚位しか記憶に残らなかったが、見返すと、新卒・中途・インターン・契約社員・アルバイトの5枚なんだなと思った。
中途採用のキャッチは全然覚えていない。
N君>正直この瞬間にもどんどん忘れていっているが、1回目は本当に画像が残らずキャッチだけ。
2回目で新卒・中途・インターン・契約社員・アルバイトの5枚があると分かった。
トータルすると自分に関連する中途や契約社員が印象に残った。
つまり皆いい加減。
2回目は見方・捉え方が変わっている。1回目なんてひどいもの。
実際はスライダーの順番も違う。
確実に勝てるのは「来たれ若きチャレンジャー」と「契約社員」
他は、キャッチはなかなか覚えられない。絶対目立つように書いているのに誰一人言えない。
なぜか?
Mさん>具体的に入ってくる単語があると記憶に残りやすい。
やる気や仲間は明るくて良い言葉だがふわっとしていて記憶に残り辛い
N君>自分に関連するものが頭に残りやすい。MVのストーリー、流れも加味するべきではと思う。
Wさん>頭に残らなかったのがキャッチが長すぎたり文字の要素が多いもの。
かつ背景に人物画像が多いものは文字が入ってこない。
閲覧者の立場に立つと、働き方・働く条件を求めてみているので、自分と関係ないところは全く記憶に残らなかった。
T君>各画像に人やテキスト、採用職種の強みが多く入っていて、5枚もあるのでなかなか1枚ずつ記憶に残らなかった。
1枚目は若きチャレンジャーとシンプル構成で記憶に残りやすかった。
- 中途採用:顔の近くに文字があると、顔にひっぱられる
- インターン:キャッチよりも大学生インターンシップの方が記憶にあるのは、顔から遠いから。
- アルバイト:端に人物がいるからもう右に寄って左の要素が入ってこない
- 契約:多く使っているが顔から離れているから入ってくる。
デザインの際に覚えておくべきこと。
1枚1枚見るとOKのレベルだが、スライダーで流れるのだから、負けてしまう。
基礎中の基礎中の基礎!
スライダーの順番はあまり関係ない。
大前提はもちろん我との関連性。
方程式的に覚えるなら1枚目が一番印象的で、ラストが一番印象が薄い。
それをどう逆算して配置させるか。
デザインとしては、人物を使うのはありだが、キャッチの近くに置いてはいけない。
作成者の意図としては、それぞれ目的がある。
キャッチを伝えたいのか、雰囲気を伝えたいのか。
インターン:楽しい!ヤル気!仲間!は実際目立ってないが、それはそれで良い。
伝えたいのは楽しそうな雰囲気で、若い人がいっぱいいる。
コンセプトによってはキャッチより画像で楽しそうな雰囲気を伝えるのを優先しても良い。
つまりコンセプトとしてここでは楽しさが伝われば良いということ。
コンセプトでキャッチを優先するのか、雰囲気を優先するのか、デザインする前に知っておかねばならない要素。
採用ページTOPコンテンツ
【GUARDIAN’s “仲間”募集中!】
ナビゲーションコンテンツで、それぞれの目的別に移ってもらう
意識的な網羅性を持たせているナビゲーション
ただのインフォメーションではなく、意図的な網羅性を持たせたナビゲーションとして5つ並べている。
意図的な網羅性をもたせたナビゲーションのコンテンツであり、見る側がそれぞれの目的に応じてページ遷移してもらう。
中途採用
MVの2枚目
中途採用だから「成長」を意識して欲しいというのが人事のコンセプト
⇔「即戦力」になっていて、マッチしていないのでだめ。
設計意図がもうぐちゃぐちゃ。
この段階で誰もつっこまない。
1枚の画像を見ると良い感じに仕上がっているからOKを出してしまう。
でも我との関連性が一番根っこにある。
明らかな設計ミス。
ミスとまで断言できるレベルだが、これに気づく人は業界全体を見てもほとんどいない。
それくらいWEBサイトは適当に何も科学されずに作られている。
画像1枚単位で見るのではなく、前段のメインビジュアルと統一性をもたせることが大事。コンセプトもポイント。ページ離脱にならないように、画像を作り込む必要がある。
超実践長期有給インターン
「楽しそう」が一番の売りだった。
キャッチを捨ててでも楽しそうな雰囲気をということだったが、楽しそうな雰囲気ではなくシリアスな雰囲気。
⇔実践があるのでまじめな顔で良い。でも笑顔の写真で最初のコンセプトも担保しているので良い
コンセプト推しなのか、キャッチ推しなのかの観点で選ぶ画像、デザインなど見せ方が変わる。
インターン
長期と短期の二種類があり、短期は楽しそうが出たら良いので楽しそうを押し出しており大納得。
こういうものの見方は初めてかもしれない。
イメージ押しのMVか、キャッチ押しなのか。
MVから直下で踏襲され、どう戦略的に見せているか。
長期インターンと比較しても、短期インターンは楽しそうな雰囲気と親しみやすさが伝わればOK。
社内ではデザイナーは把握しながらデザインしているか?
N君>誰も言語化できないのでいないと思う
Wさん>デザイナーと連携してデザインのことを話している時にも回答が得られないことが多々あるので把握できていない
・今日知ったことは明日からでもすぐ使える。
常々勿体ないと思って居ること。知っているか知らないかだけの差。気づけるか体系化して論理的に話がアウトプットできるかは全く別の次元だが、そこまで求めているのではない。
知ればすぐ使える。
サイト設計ミスればCVに繋がらない。
先ほどの中途の設計ミスは離脱に繋がる、やってはいけないミス。
チェックする人も知らないからOKを出してしまう。
なぜCVが上がらないか後で分析しても多分たどり着かない。分析は数字が並ぶだけで分からない。
でも青山さんであれば一撃で直せる。
前回・今回の参加者はもう一撃で直せる。
知った今は絶対に見落とさない。
「WEB学校では今まででかなりの数の知識を教えてきている。これらの数ある方程式をどれだけ実務に落として活かしていけるかが重要。」
地方の住宅会社サイト
地方の住宅会社の既存サイトをみて・・・
N君>何屋かよく分からないサイト
Mさん>とにかく文字が小さくて強弱もなくて、読もうとしても読みづらい。見るレベルだと何も残らない。
M君>全体のデザインの印象としては最近のサイト。JSの動きもあるが、テンプレ的なサイト。型を用意してあてはめて終わりのサイト。
青山さん>
サイトを見るときにはデザイン的・マーケティング的見立、作り・工法、そしてページ遷移のデータベースがどうなっているか?等々複数頭に入れながらサイトを見て一瞬で判断しなければならない。
普段からあらゆる要素でサイトを見るようにする。
Iさん>良く見せようとする意識は感じるが施工事例ページで一番見せるべき画像が小さかったりやることが躊躇半端になってしまっている。
ガーディアンで制作途中のサイトを見て・・・
青山さん>
明らかに既存サイトとはレベルが違う。
構築途中でまだヒアリングもしていないが、ここまでできる。
細かいデザイン調整もしていない状態で、これから仕上げに入っていく。
仕上がりとしては6割だが、SCSC CUEで作られるサイトのレベル感としてはこれくらいある。
このサイトを見てどう思う?
N君>見ていない間にめっちゃレベルが上がって、他部署としてとても危機感を持った。
青山さん>
仕組み化して業務に落とし込むレベルにして提案すればパートナーにも喜んでもらえる。 絶対に変わる。
普通に少し運用したら、成果の面においても勝ち組サイトになる。
進捗6割でここまでの出来になっている。
皆で作ることでお客様も喜ぶ。
お客様マインドを持ちながら仕事をしていく。
Kさん>いち消費者として、どの地域に強いかも一発目で分かるし、他の住宅会社と違うところがすぐに分かった。さらに口コミ評価も分かる。
これが数時間で出来るのは本当に凄い。
青山さん>
やっている現場がイケると確信を持っている。
リニューアルは、見た目の印象が大事。良くなった!と瞬間に思ってもらえるかが大事。
超素人のぱっと見が大事になる。
多数決したら勝てるだろうが、既存に票を入れる人もいるかもしれない。
作る側からすると100-0を目指す強い想いが大事。
この意識を持つだけで品質の精度は大きく変わる。
こうしてモチベーションを上げていく。
参加者の
コメント
紀井 斎
*コメント*
・自分と関係がない情報から、記憶から消える
・流れ
・文字量の多さ
・人物画像多いと、文字が入ってこない
・サイトを見る閲覧者
・要素が多いうえに、画像(パターン)が多い
・顔の近くに文字があると引っ張られる
・初めが一番印象的、最後が一番印象が薄くなる
それぞれに、コンセプトがある
・キャッチを伝えたい
・画像を伝えたい
何を優先するのかを知ってデザインするべき
コンセプトは、イメージ推しか、キャッチ推しか
直下のコンテンツの見せ方はどうか?
をわかって、デザインしないといけない
というポイントを押さえておくだけで、
確認精度が高まる思います。
知らないのは罪であるという教えについて、改めての認識となりました。
部内スタッフコメント
主婦隊:寺田あやの
前半は、前回と連動する内容でした。前回同様MVを一通り見てから印象に残った事を発言する。皆さんの感想が殆ど前回の方と同じ事に、教えて頂いていることがまさにすぐ証明されたと感じました。
人物顔をテキストの近くに置いてしまうと、視線は顔に行ってテキストが印象に残り辛い、コンセプトと異なる文言があっても気付けない。これらの事は基本中の超ど基本。自分のような超ど素人でも、教えていただいて知ることが出来れば、次にサイトを見た時にはここ違うのではないかな?と気付けると思いました。
後半、制作進行中のサイトとその既存のサイトを見せていただきましたが、自分にも歴然とした差が分かりました。そもそも制作にどれ程の時間が必要なのかが分かっていないのですが、あのような分かりやすい見やすいサイトが、2000円でで手にする事が出来るのはあり得ない事だよなぁと感想を持ちました。
主婦隊 : 吉田けいこ
今回のWEB学校は、人事採用関係のコーポレートサイトでは、コンセプトイメージを考えてから、ナビゲーションコンテンツを配置する。またイメージ押しなのかコンセプト押しなのかデザインとストーリー性もとても重要ということ勉強になりました。スライダーや動きのあるコンテンツを使うと、ホームページが生きている感じ、楽しさも感じられて、今までのホームページとは、まったく違い雰囲気がガラッと変わるので、見た目も楽しい遊び心もあるとても良いホームページになるということ学ばせて頂きました😌
*コメント*
土清水 光琉
*コメント*
ガーディアンのコーポレートサイトでは、採用情報のページのMVを見たのですが、ほとんど画像に関する記憶が残っていないことに気付きました。
これは、人の顔の近くにテキストがあると文字が認識されにくいという法則があるようで、デザインをするときにはこういった細かなところまで気を付けなければならないと知りました。そして、最も大切なのは何を伝えたいのかであり、もし元気さや賑やかさを伝えたいのであれば文字は目立っていなくても良いということを教えていただきました。その下のコンテンツでは、MVで示された伝えたいこととずれている部分があり、そのコンテンツ単体では無く、全体を通してコンテンツを見ることが必要なのだと考えました。
そして、現在構築中のサイトと既存サイトを見比べてみると、レベルの大きな違いを改めて感じました。ただ、これはサイトの意図などをある程度知っているからそう感じるのであって、WEB初心者の方々に対してサイトを提供することになるので、直感的な第一印象の良さにこだわっていく必要があると知りました。
*コメント*
谷口 かなこ
*コメント*
特に前回はすぐに活かせる知識を教えていただいた回だったので更に「うんうん、そういう理由でそういうそういう見方になる、そういう記憶残りになる、そういう印象になる」という想いが強い前半でした。
特に採用サイトでは我との関連性が大前提の上で、
文字量や写真と文字の位置関係、スライダーの設置順等々科学があります。
更にコンセプトとして、キャッチなのか、画像から受ける雰囲気なのか?何を優先するのかもコンテンツ制作に関わる全員がきちんと認識を一つにした上で作成しなければ効果を発揮しません。
また当然直下のコンテンツとも合致していけなればなりません。
後半では実際に今ガーディアンでリニューアル案件として制作途中のサイトを皆で見ました。
正にSCSC CUEの通り、すごい!ヤバイ!状態です。
しかもまだ制作途中の段階かつ、今後ますます生産性も上がっていく具体的計画もあるため、自社ながらすごい!ヤバイ感が強くなりました。
AIもどんどん出てきて、自社ツールもどんどん進化していきますが、それらに使われないように、使いこなせるように自分のレベルも上げていかねばなりません。
*コメント*
宮城 わか
*コメント*
例えば1枚目の画像のキャッチはどういう文言で、画像はどんなだったかなど、画面共有で2度流していただいても、頭に残る情報はわずかであり、最後のMV画像を見る時にはすでに最初の記憶が薄れていくことを実感しました。
画像は1枚ごとには綺麗に仕上がっていても、コンセプトとずれがないか?ずれが発生した時点で見る側は離脱してしまうので、関連するコンテンツ全体を通して、矛盾がないか気づけるようになることが必要だと学びました。
今回はデザインの方程式として、知ったらすぐ実践できる内容を教えていただけたので、広い視野をもってあらゆる要素でサイトを見る力をもっと上げていきたいと思います。
ありがとうございました。
*コメント*
中澤 めぐみ
*コメント*
自分が学んだことを社内にどう伝播していくべきなのか?というお話で、
お話を進めていく中で、多人数で仕事をしていくことの難しさを感じました。
自分一人が理解することの難しさもある中で、さらにそれを全体に伝播していくとなると、
自分以外の人の考えや姿勢など、「自分ではコントロールしきれないこと」を
それでもコントロールしていく必要が出てきます。
私の考えでは、どうしてもどこかを諦めるような意見しか出なかったのですが、
青山さんの考えをお聞きして、自分自身が忘れがちなところに気付かされたように思います。
学習において、「頑張っている」うちは「楽しんでいる人」にどうしても勝てない、
という感覚を覚えることがよくあります。
つまり、「頑張ってもらう」ではなく「楽しいと感じてもらう」方向で考えていくことが
必要なのかもしれないと、今回で強く感じました。
(以前から、「楽しんでやってください」と、青山さんが何度もおっしゃっていたことも同時に思い出しました)
今回も、貴重な学びの機会をいただき ありがとうございます。
*コメント*
小川 みき
*コメント*
MVスライダーのデザイン構成の復習から入ります。
閲覧者が次のアクションを取った時、その先のコンテンツに矛盾がないか、もたらす情報から混乱を生まないかの視点で構成しなければ「離脱」につながってしまいます。
また今回は自己成長について意識をした回でもありました。
今の業務のやり方を続けた先は明るくないと、特に今年に入ってから強く感じます。
これは何をとっても情報の流れが早いガーディアンだからこそ身近に感じることかもしれませんが、社会で生きていくためにいかに自分ごととして捉え、ガーディアンの学びの場をどのように活かしていくのか。
時代の変化をポジティブに捉えることと、
自分の在り方と照らし合わせて変化させていく柔軟性が今の私に足りていないのだと気づきました。
*コメント*
星 翼
*コメント*
まず採用ページの内容の復習から始め、MVを含むコンテンツで大切な事は、しっかりと「コンセプト」を定めると学びました。
このMVでは、何を伝えたいのかをしっかりと定め、それがしっかりと伝わるように人やテキストを工夫する必要があります。
この内容は実際にサイトを見て残った記憶が証明しており、デザインは科学できると体感しました。
また自社制作サイトは、過去と比べると圧倒的な品質と生産性であり、このレベルまで来たんだ、、、と感じます。
AIの技術が進み、またWEB業界で働くものとして価値のある人材になれる様に、引き続き学んでいこうと思います。
*コメント*
河原田 ゆきえ
*コメント*
もうそれだけで危機感というか焦りを感じるようになってます笑
なので、日曜の夜に必死に録画視聴して学びを得る。
月末だろうが関係無く、自分のルーティンを死守です⭐
さて今回も採用ページのコンテンツが題材。
実は河原田、直近の業務が立て込み過ぎて採用ページを「思いっきり手抜き」しました。。><
「とりあえず無難な形に見せるだけでも…」という形の一時しのぎ。
それを青山さんが見逃されるわけもなく、見事に私の手抜き箇所をバシバシとぶった切り
できないなら任せないよ、とばかりに他のメンバーに差配されてしまいました。
でも、人事はるなが頑張った箇所はちゃんと認めてもらえていて、本当にちゃんと見てくださってるんだなぁと実感です。(当たり前だと叱られそうですが)
WEB学校は、専門知識を全く持っていなかった私が、本当に自分がWEB業界で生きていけるんだと自信を持てるようになった素地を作ってくれた場所であり、変化の激しいこの業界においても、10年前に学んだことすら今でも活用できる、WEBマーケティングの普遍的な真理を教えてくれる、本当に価値のある場なのです。
全員でレベルの底上げをと願い、毎週2回も開催し続けてくれる青山さん。
その想いと教えを受け継ぎ、伝えていけるようになれるよう、次回以降も学ばせていただきます!!
*コメント*
中川 あすみ
*コメント*
また設計だけでなくデザインも第一印象として大事だと学びました。マーケティングや開発、デザインなど同じサイトでも見方が全く異なると思うのでまずはマーケティングの視点から見ることができるように頑張りたいと思います。
*コメント*
木村 りえい
*コメント*
前回の復習では、
・自分と関係がある情報が目に入る
・人が沢山いると、キャッチが薄くなってしまう。
・顔の近くにキャッチがあると、顔の方に目線が移ってしまいキャッチが薄くなってしまう。
意図して、画像を目立たせ雰囲気を伝えるのか、キャッチを伝えるのか、デザインの復習になりました。
また、MVの意図とナビゲーションの意図がリンクしていないと、矛盾となり、結果、離脱につながることも復習致しました。
制作中のサイトと既存サイトを比べると、圧倒的に導線があり、文字量が違うことがわかりましたが、やはりデザイン的な面で違って見えてしまうんだなと感じるところもありました。
直近の業務では、設計の意図を汲み取ったチェックや、導線想定通りかのチェックなど、サイトの見た目以外のチェックもできそうだと感じました。
*コメント*
諸隈 ゆきこ
*コメント*
このWEB学校を視聴する前に実務にて青山さんから「顔の近くに文字があると、顔にひっぱられるので文字に目がいない」とお話しいただいたことを思い出しました。
スライダーの順番はあまり関係ないが、方程式で考えると1枚目が一番印象に残って、最後が印象が薄いとの学びました。ほかのサイトでも見てみると確かにと思いました。
画像1枚伝えたいことは文字なのか写真の雰囲気なのか。これも大事なポイントだと学びました。
また今回は学びについてのお話しも上がりました。
なかなかリアルで参加できない分動画視聴で学ぶしかありませんが、動画視聴の時は青山さんが質問を投げかけたときに一旦止めて回答する。一人でぶつぶつ言いながら、今後も学んでいきます。リアルタイムで参加できる時はしっかり参加し遅れをとらないようにします。
*コメント*
岡部 ちよ
*コメント*
・キャッチコピーは、第一印象を大きく左右するため、簡単でインパクトのあるものが非常に効果的であることがわかりました。
・画像やデザインは、文字よりも記憶に残りやすいということが改めて認識できました。
私自身、「文字を読む」ことが苦手なため、図解や画像があるととても理解がしやすい、と感じています。
・採用ページを作成する際には、明確なコンセプトを持つことが大切で
画像は、コンセプトを伝える上で重要な役割を果たすため、適当な選び方ではだめだと学びました。
さらに、閲覧者(応募者)の視点に立って、何が重要なのかを考え、それに合わせたWEBページ、WEBサイトを作成することが重要だと再認識いたしました。
*コメント*
山本 高広
*コメント*
メインビジュアルスライダーはパッと見で
なぜ印象に残らないのか?という点を論理的に説明がなされました。
重要なのはコンセプトで何を軸とするのか?
これをかかわる人間がきちんと理解していなければ、
コンセプトから外れたサイトになると学びました。
*コメント*
稲福 るか
*コメント*
画像1枚ずつを単体で見るのではなく、コンセプトをしっかりと定義し、統一感を持たせることが大切だと学びました。
何を伝えたいのか、どのような雰囲気を感じ取って欲しいのかをしっかりと把握し、ページ全体で訴求していく必要があるといいことも今回の学びです。
デザインの方程式を学ぶことはコンサルにも活かすことができるので、視野を広く持ち見る力を養っていかなければと感じました。
*コメント*
池内 大翔
*コメント*
復習では、顔の近くに文字があると記憶に残りにくいということや文字量、位置関係などを意識する必要があることを再確認しました。
また重要なのは、サイトを見る閲覧者に対しそのコンテンツを通して何を伝えたいのかということです。必ずしもキャッチが優先である必要はなく、雰囲気や画像を伝えるコンセプトのコンテンツがあることも勉強になりました。
実案件のサイトについては、先輩方の教えのもとで私も設計に携わらせていただきましたが、既存サイトと比べて、明らかに質の違いを感じました。
設計するときには、各コンテンツが存在する意図や影響を理解したうえで設計を行うようにしたいと思います。
今回の設計で学んだことを糧として、これからの設計もスピードを上げて取り組みたいと思います。
*コメント*
石川 航
*コメント*
採用TOPのMVにある中途採用の画像では「成長」を強調しているのに、
すぐ下の募集コンテンツでは「即戦力」が強調されていて、早くも矛盾してしまっていました
画像単体の出来は良いので、その矛盾に気が付けませんでした
ホームページのコンテンツの構成は点ではなく線、流れを計算して作っていかなければなりません
前回のMVの画像の印象についてもそうですが、
画像単体、コンテンツ単体で見る時は出来が良いのに、
ページ全体として見たり、TOPページから下層ページに遷移する時であったり、
連続性が意識されていない状態になってしまうことが多いと感じます
もっと広い視野でサイトを分析していかねばと感じています
*コメント*
森田 惟之
*コメント*
実際のサイトを見た上で、
これまでのWEB学校の学びがサイトを作るにあたり直接役に立つことを確認しました。
前回のコーポレートサイトで学んだ視点と直後全く別のサイトに持ち込み
応用を利かせることでそのまま一つ高いところでサイトを見ることが出来ました。
*コメント*
渡邉 大也
*コメント*
今回のWEB学校は、前回の復習から始まりましたが、やはりデザインにおいて目的、コンセプトを明確にすることがとても重要だなと感じました。
そしてキャッチを推していくのか、イメージで推していくのか、それぞれで見せ方、デザインが変わってくるのでこれを毎回考えなければいけないなと思います。
そしてこれはMVのデザインだけの問題ではなく、設計にも関わってきます。MVで与える印象が変わればコンテンツ、そしてページの内容が変わってくるということを意識して、設計をしていきます!
*コメント*
齋藤 圭亮
*コメント*
特に印象に残っているのは採用のMVです。一枚一枚はいいMV画像でも、スライダーになることで目立たなくなったり、人の顔と近いことで大きなキャッチコピーでも印象に残らなかったりすることを学びました。
全体を通じて、局所局所ではいいデザインや設計になっていても、全体を通して流れの中で見ると適切ではないなど、森を見る視点を学べたWEB学校でした。
*コメント*
児玉 尚哉
*コメント*
後半は制作中のサイトを見させて頂きましたが、これが月額2000円で良いのかという質の高さに驚きました。
また、これまで学んだ内容が盛り込まれているサイトだったため、しっかりと実務で活かすことをより意識して参ります。
*コメント*
鷲見 隆也
*コメント*
閲覧者が混乱せず、ストレスを感じない導線づくりが、結果的に離脱率の低減に繋がるという考え方を改めて学びました。
この学びを業務に活かして参ります。
*コメント*
廣澤 あやな
*コメント*
WEB学校で学ぶ前はキャッチは人物や人物の顔の近くに置くことで、視線が顔に向くのでキャッチも一緒に見てもらえるのでがないかと思っていましたが、これまでやってきたことは逆効果であったと気づきました。
デザインをするときは一つ一つ詳細を見てデザインをしてしまいがちですが、今後は閲覧者となるべく近い形で見て、伝えたいことがきちんと伝わっているかを見ながら取り組んでいきます!
*コメント*
*コメント*