コーポレートサイトの採用ページを改修していく!
採用情報のMV
MVのイメージは?覚えていることは?
どれもキャッチコピーは大きく目立つようになっているが、印象に残るのは人。だけど人も覚えていない。
キャッチにも印象に残るもの・残らないものはおおよそみんなの間で一致している。なぜか?
文字の近くに人の顔があると入ってこない。
文字の近くに人がいないのにはいってこないのは配色のせいで埋もれてしまっている。
左にキャッチがあり右端に人がいるので視線が右側に行ってしまう。
赤で大きく書いていても人の顔(美貌)に目が行ってしまう。
顔の下に文字があると目がいかない。人間の目は上下に弱い。
一個一個の画像のデザインを見たら見抜けないが通して見たら差が出てくる。
思ったより覚えてなかったけど、覚えているものは合致している。これはなぜか?
Hさん)
・我との関連性
・色の使い方
Mさん)
キャッチの近くに人の顔があると意識が入って、頭に入ってこない
青山さん)
・人の顔から離れている(人の顔から離れているが同系色があり目に入らない、また人がキャッチコピーの反対側にいるので反対側に目がいってしまう)
キャッチが顔の下にあると、人間の目は横についているので、上下に弱いので目が映らない
仲間募集中!ここでは何を訴えているのか?
作成者)楽しそう!を前面に打ち出しています。
青山さん) 長期有給インターン(作成者「長期は真剣、短期は楽しそう」というイメージの狙い)
→こういってもらえたら安心する。コンセプトを持って伝える。
カレンダー箇所
カレンダーをどう思いますか?
文字が見づらい、見えない人もいる。大きくすべき。
また前月、翌月にいく矢印が小さすぎる。
→みんなちょっと問われれば正しく言える。こういったところの連続になっている。
GUARDIAN PRIDE|会社の情報が広く載っているコンテンツの扱い
Kさん)
GUARDIAN PRIDEだけだとわかりづらい
「GUARDIAN PRIDE」以上で、他の採用情報がある部分は単なる目次。採用ページは強気で良いので普通に読む。しかし下になっても意味がないので、上に挙げている。
Sさん)見出しと画像で情報量が多い+人がいる部分に目がいく
Kさん)統一感がない
小見出しと画像のバランスが悪い。ここのパーツはわざと4つを横に並べて、くっつけているのでガチャっと感が急に出てきてしまった。
Hさん)独立しているコンテンツなので、良いのではないか。
Wさん)ごちゃついているので、画像の間に間があった方が良いと思う。
人事:ここのページはそこまで目を止めなくても良いのではないかという意図を汲んで、他のページで目を止めているのでここは目立たせないで良いと思った。
Sさん)
他のところにいってしまうと思うので、ここはぱっと見で良いと思った
Mさん)
ここで止まらなくて良いという意図があったにせよ、SCSCの文字など画像のテキストと見出しが被ってしまっていて、処理できず見ていて疲れるようなイメージになっているので、スルーされてしまう。また「ここは見なくて良い」ではなく「ストレスを感じるから見ない」という風になっているので、テキスト情報を減らした方が良いと思う。
Mと同じ意見。
サービスのロゴが小見出しで見えなくなっており、ホバーをかければ余計見えなくなったりしてしまう。つまり意図の前にちゃんと作られていない。興味喚起が終わって、真剣モードになった時必ず見る。最初は「おもしろコンテンツ」に引かれるが閲覧者が「この会社良いな」と思ったら真剣モードになって、戻ってきてここを見るようになる。となるとこの先のページはとても大事になる。
採用ページにあるサービス紹介は求職者向けに紹介しないといけない。
またどこかのページに飛ばすのではなく、詳細がそれぞれにないといけないと思っている。そしてそれぞれのページの直下にCVボタン(それぞれのCV)が置かれるべき。これが採用情報TOPに置いている意味。
またサービスのところに行くと戻ってこれない、つまりブラウザーバックをさせてしまうので、WEB設計上絶対ナシの状態になっている。サービスの情報であっても求職者向けになっていないといけない。
楽しませるコンテンツと真面目なコンテンツ
「とんでも社風」の先はページのテイストが真面目モードになっている。
クリックするときは楽しい雰囲気なのに、入った先のページが真面目モードになっていると「何か違う」となってしまう。
またタイトルに「おもしろコンテンツ」とあるが一番上のコンテンツは18訓となり、求職者の立場に立つと、楽しい雰囲気が一変するので最悪離脱となってしまう。
なのでここのコンテンツは並び方を考えないといけない。また見出しも求職者に向ける言葉に変更しないといけない(例:その悩み!一刀両断など)
詳細コンテンツのあり方
ここからさらに詳細を作って、ダイレクトでそこに飛ばす。ページ遷移は勿体無い。
TOPページからリンクを貼って終わりは勿体無い。
詳細から詳細はリンクで終わりで問題ないが、TOPなら興味づけをして飛んでくれているので、受け皿としてのコンテンツを残すべき。
中途採用
中途採用ページはなぜこの構成になっているのでしょうか?
N君:中途は条件を見にきているため
H君:indeed、Google対策
青山さん:indeed、Google対策のため!湯水の如く採用コストをかけられないならindeed対策を欠かしてはいけない。
CVボタンの下にある活字のところもindeed対策。募集要項は情報が命。コンサルをするときはガーディアンの中途採用の募集要項を見本にすれば良い。
はてなが出ることのないように徹底的に充実させるべし。募集要項を必ず見て、あとは「合うか合わないか」を判断する補足情報のみ。そしてどうせ充実させるならindeedにも対応できる内容にするというのが、ガーディアン中途採用ページの設計。
コンサルするときは、これくらい必要ですよとアドバイスしたらいい!徹底的に充実させるのが大事!!
事業紹介
採用情報から進む事業紹介も、戻れなくなってしまうのでナシ。求職者に向けた事業紹介をしなければならない!
SCSCページ
Gナビこれで良いの?
・制作費ゼロ円、最速納品=これは古い情報の伝え方(SCSC CUEでフェーズが変わっている)
・05プロフェッショナルが毎日
総合広告代理店はいない、毎日はない。今は毎週、毎月のMTGを訴えている。
プランの図解
縦長にしろといっている。そしてこの字を読めるか?
事業内容|勝てる資格を持ったHPの縦のプラン表を全部移植すれば良い
・SCSC個別商談会
SCSC CUEと同じところに飛んでいない
まとめ
自社主要サービスのコンテンツについて。
キャッチとして伝え方を変えたところがある。
人に依存したサービスを組織としての対応体制に変えたところがある。
可読性の改善が必要なところがある。
スタートアップのサービスではとくに改善が進むので
サイトの情報も漏れなく差し替えなければならない。
また、グローバルナビゲーションの文言についても
サービスについてその今後について熟知している社員でも意見が割れる、
議論を重ねて決定する必要がある。
サイトとしてサービスとしてどう見せるのか、
最後は会社のトップが議論するテーマ。
参加者の
コメント
鈴木 健太
*コメント*
文字の近くに顔があることで文字が頭に入ってこない、色によって埋もれてしまう、配置と視線の動きによって文字が頭に入ってこないなどさまざまな理由があるなと学びました。これらのことをしっかりと計算し、デザインをしないといけないと感じました。
また、意図してキャッチが見えなくても楽しい雰囲気がわかればよいということもありうるので、そのような意図に沿ったアウトプットがなされ期待通りの効果が発揮されていることが大事と学びました。
次に印象に残ったのはTOPページで興味をひいて、下層ページでしっかりと受け皿を作ることの重要性です。ただ表面をよくするのだけではなく、下層に遷移させどうしたいのかという戦略が重要と学びました。
*コメント*
清水 あやな
*コメント*
例えば、採用情報TOPの5枚の画像について、1枚1枚で見ると文章が端的でスッと頭に入ってくるように思えますが、全体を見た後に覚えている要素を挙げると、印象に残るものと残らないものではっきりと分かれました。印象に残らない理由として、「文字の近くに人の顔がある」「文章の色が地味」「文字が上下に偏りすぎ」など、様々な原因があることが分かりました。また、1つ1つの要素だけを見るのではなく、全体を見る必要があると強く感じました。
他にも、「画像で伝えたいことは何なのか」「どこに誘導したいのか」「ページに遷移する前と後とで閲覧者に異なる印象を与えてしまっていないか」「どのページにも必ず前のページに戻るためのボタンが付いているか」など、細かいところまで考えることが重要だと学びました。普段ここまでサイトの細部を見ることができていないので、お客様の目線に立ち、サイトの初めから終わりまでの全体の流れをたどりながら見ることを意識しようと思います!
*コメント*
鈴木 はるな
*コメント*
今回は採用ページがメインだったのでほとんど人事である私に関わることでした。
採用情報のMVでは、キャッチコピーをメインにしたいのか、写真をメインにしたいのかによって、デザインの配置の仕方が異なるということを学びました。
設計されたコンテンツでも読むレベルなのか見るレベルかを考える必要があるということで求職者向けのコンテンツを揃え、それぞれの詳細ページを新たに作成したいと思います!
また、手を付けることができなかったページについて細かく教えていただいたので、他のメンバーに助けを借りながら充実な採用ページにしていきます!
*コメント*
廣澤 あやな
*コメント*
特に最初に出てきたMVはデザイン性もよく、人が多く出ていて、インパクトがあると思っていたのですが、今回のWEB学校の内容から、そもそもMVの役割、何を伝えたいのかということが知らず知らずのうちに抜けてしまっていました。
しかし「コンセプト」を一言で表し、そこを大事な部分として認識を合わせておくことで、チームで業務を進めてもブレることがないのだと学びました。自分の業務においても常に簡潔かつ、的確にコンセプトを定め、ブレずに狙い通りの形にしていけるように取り組みます!
*コメント*
堀田 大渡
*コメント*
まず初めに解説いただきましたMV画像では、1枚1枚で見たときと、集合体として見たときの印象の違いについて教えていただきました。
自身で画像を見ていても画像単体で見れば、いいと思っていても画像5枚組の中の1つとして見てみるとがらりと印象が変わってしまうことがあるため、木ではなく森として物事を見ていくことが大切だと感じました。
各コンテンツにおいても、画像とタイトルとのあり方一つで訴求力が大きく変わってしまったり、コンテンツにリンクがある場合は、リンク遷移先にどのようなコンテンツがあるかによって閲覧者の離脱率が大きく変化してしまうことも改めて痛感いたしました。
今後自社のホームページを見ていく際にも単に見るだけでなく、閲覧者にどのような印象を与えるかをしっかりと考えながら行っていこうと思います。
*コメント*
齋藤 圭亮
*コメント*
特に印象的だったのは一つ一つのコンテンツはしっかりしていても全体を通してみたときに思った効果を発揮しないことがあるということです。
文字と人の画像の位置関係など、あまりなかった視点もありました。
そして、特に学びになったのはコンセプトをブラさないこと!
各ページ、コンテンツのコンセプトを明確にし、雰囲気や画像・テキストできちんと表現をすること。
モノづくりの掟として守ります。
*コメント*
齋藤 圭亮
*コメント*
今回の題材は採用ページでしたが、すべてに共通してコンセプトを持って設計して、コンセプトをブラさず効果が最大になるよう表現するというモノづくりの仕方を教えていただきました。
また、特にMVのデザインの考え方の基本を学べたWEB学校でもありました。
谷口 かなこ
*コメント*
まずMVのスライダーを一つずつ見ていくときちんと訴えかけるようなメッセージとデザインになっていて成立しているように思いますが、設置場所や人の視線・視覚トータルで考えるとバランスとして成立していないことにまざまざと気づかされました。
自社サービスであるSCSCやSCSC CUEといった同じトピックスでも、
お客様向けと求職者向け、設置するページによって専用のコンテンツとして揃えておかなければならないことも教えていただき、とても面白い回でした。
その中で即時改善すべきところや、今後よりよくしていく改善点も明確に気づかせていただきました。
同時にその大部分はWEBのプロではなくても、気付ける部分だということが露呈した回でもありました。
*コメント*
ZAW MIN OO
*コメント*
例えば、コーポレートサイトの採用ページは一応作成完了の状態ですが、よく見ると修正箇所がかなり多かったです。
制作の時、これで良いというデザインでも実際に見てみると修正がすごく出てきました。
僕自身も制作の時構築面ですごくかかわりが多かったのですが、気付いていなかったです。
あるコンテンツには設計の意図も分からないことが多かったです。
学んだとことして、自分の意見、自分のみで進まず、みんなで考えが必要で、終わった時点でも再度チェックなどが必要の事です。
今回もありがとうございます。
*コメント*
小川 みき
*コメント*
現在改修中のコンテンツが多くある中、まずは採用トップページのスライダー5枚の印象について深掘りしました。
全体を通して見た時に伝えたいキーワードがぼやけてしまった理由として、配置、配色、人という生物学的視点など様々な要因があることを知り「確かに」というものばかりでした。
また遷移先ページが適切でなかったり、情報が古い箇所も多くありました。
私のできることとして、自社サイトが常に適切な情報となっているか確認していきます。
*コメント*
野木 拓馬
*コメント*
ものづくり全般に重要なコンセプトを定めることですが、
コンセプトは採用ページでも重要となります。
例えばページのメインビジュアルは、キャッチがちゃんと見えているか?ということ以上に意図したコンセプトを訴求できているか?ということが重要です。
また、トップページから関連するページに遷移させる際、どういう雰囲気でコンテンツが並んできたのかの流れを下層ページが汲めているか?といったことを学びました。
また、中途の職種紹介ページで重要な点としては、
インディードのような採用媒体に対応できるコンテンツになっていること、
募集要項に情報が完全に網羅されていることがあると学びました。
*コメント*
紀井 斎
*コメント*
キャッチコピーの印象の残り方の違いがこれほどまでとは思いませんでした。
文字の近くに顔があるかどうかや、色や配置によっても変わってくるなど様々あるなと。デザインは、綺麗すること というのは大間違いだなという証明の回となりました。
部内スタッフコメント
主婦隊:寺田あやの
今回はコーポレートサイトの採用ページを見ながら色々な事を教えていただきました。
モノづくりでとにかく1番大切な事、それは【コンセプトをしっかり持つ事】
そのイメージや印象が閲覧者にしっかり伝わるようなサイトにしなければいけない。
その中でも注意する点は…
⭐︎人物顔の近くにテキストを置かない。
→視線が顔に行ってしまい、文字の印象が残り辛いため。
→人間の視線は右に流れるので、右に顔があると、文字から離れていても視線は顔に流れてしまう。
⭐︎色の効果も考えなければいけない
⭐︎情報が潰れてしまうほどの情報過多は離脱に繋がる。
⭐︎各コンテンツには詳細ページを作る
⭐︎カレンダーはコーポレートサイト内で連動させる
⭐︎中途採用では募集要項が最重要。対象閲覧者は必ず見るので、疑問をもたせないくらい充実させる
今まで教えていただいている事も踏まえ、今回の内容も頭に入れて様々なサイトを見てみたいと思います。
主婦隊 : 吉田けいこ
今回のWEB学校は、メインビジュアル、人事採用関係のコンテンツを我との関連性の人達に文字や画像の大きさ、色、配列、配置、雰囲気でいかに印象、インパクトを与えるか残せるかちゃんと繋げて誘導することが出来るのか本当にお客様、閲覧者目線が改めてとても大事だと学ばせて頂きました。今回、人事側、作り手側の貴重なコンセプトのお話しが聞けたこと、とても有り難かったです😌採用コンテンツとても楽しい雰囲気伝わりました😊
*コメント*
熊谷 ゆか
*コメント*
今回はコーポレートサイトの採用ページについての回でした。
MVは閲覧者の印象に残らないといけないと思うので、気を付けなければいけないポイントをしっかり意識して作成する必要があると思いました。
また、MV作成をする際にコンセプトを明確にすることもとても大切だと改めて感じました。
8月の終わりごろからMV作成にも携わるようになり、今回MVについてのお話をたくさん聞くことができとても勉強になりました!
*コメント*
中澤 めぐみ
*コメント*
具体的にどこをどう改善していったらいいのか?というお話でした。
受け身で教わる、というよりは、より実践的な内容だったように思います。
第170回の冒頭でもお話しいただいた内容ですが、
数秒間スライダーを眺める→どんな内容で、どんな要素があったかを説明する、という流れで
やはり私も今見たばかりの内容が全然説明できなかったり、
印象に残っている箇所と残っていない箇所にムラがあったりで、
閲覧者に届いて欲しい情報を狙い通りに届けるためには、伝える側の
緻密なテクニックが必要なのだと思い知らされました。
私の部署で制作しているホームページでも、MVは画像+キャッチの組み合わせなので、
「顔のそばに文字を置かない」
「画像とキャッチのどちらをメインに据えたいのかを明確化する」など
直接業務に活かせる部分が多かったです。
今回も貴重な学びの機会をいただき、ありがとうございます。
*コメント*
木村 りえい
*コメント*
MVのスライダーでは、印象に残る箇所は意図的になっているかが大事であることを学びました。
特に、画像よりもキャッチが目立つことが当たり前だと思っていたのですが、人物画像で雰囲気が伝わる事を優先させることも必要だということを知りました。
また、導線の要となるTOPページ(今回は採用)が仕上がっていても遷移後に元のページに戻る事ができないと離脱につながる事を今回のサイトでよくわかり、いかに導線が大事か改めて感じました。
*コメント*
池内 大翔
*コメント*
MVがもたらす印象については、個別で見るとキャッチフレーズが大きかったり目立つようにしていたりしても、通しで見るとそれぞれのMVが与えたい目的に沿ったものではなく改善が必要なものがあることを学びました。
またページの雰囲気やコンテンツについても見直すべきものがあり、求職者の目線に立って考えることが重要であると感じました。
コーポレートサイトにおいても全業種対応の型においても、コンセプトやそこに存在している意味を理解し、設計や見出し、テキストを考えるようにしたいと思います。
*コメント*
岡部 ちよ
*コメント*
・キャッチコピーと人物の配置が、視覚的な印象に大きく影響することが分かりました。
これまで、配置は、直観的な思考でしか考えたことがなかったため、あらためて「デザインは科学」であることを学ぶ機会となりました。
・特にデザインの細かい部分にも注意を払う必要があることが分かりました。
文字の大きさ、ボタンの大きさなど、一見些細な部分でも、ユーザビリティに大きく影響することが分かりました。
・さらに、情報量が多いコンテンツは、整理整頓が重要で、
見出しや画像のバランス、そして情報の優先順位を明確にすることで、より見やすいコンテンツになるということを学びました。
WEBページを作成する際には、デザインだけでなく、コンテンツの内容や構成、そしてSEO対策まで、様々な要素を考慮する必要があることを学びました。
*コメント*
中川 あすみ
*コメント*
各コンテンツにおいても画像やタイトル、リンク先のページがそのコンセプトに合っているのか考えなければひとつ一つは良いキャッチコピーや画像でも意味がないものになってしまうと学びました。
*コメント*
稲福 るか
*コメント*
MVのイメージを問われると、確かに印象に残っていないと実感し、その理由に文字と人のバランスが大きく関係していることを学びました。
また、MVに限らず一つ一つ見ていくと、問いのある部分が沢山ありました。その問いを自分自身で生み、正しく直していくことが大切と感じました。問われるとここに問題があると気づき、治すことが出来るので、自分で気づける視点を養うべきだと感じます。
さらに、採用ページでも見るコンテンツと読むコンテンツに分けて、それぞれのターゲットに向けた訴求をしていくことも大切と学ぶことが出来ました!
*コメント*
渡邉 大也
*コメント*
今回のWEB学校で1番印象に残ったのは、綺麗でかっこいいMVだったとしても、設計者の意図通り人の印象に残るわけではないということです。
例えば、キャッチコピーがあっても近くに人の顔があればそっちに気を取られてしまうなどがあります。
このようなデザインの基本を知った上で、その画像でどのような印象を残したいのかというコンセプトを明確に持つ必要があると思いました。
しっかりと一つ一つのコンテンツに意味を持たせることができるように意識して設計していきます!
*コメント*
山本 高広
*コメント*
メインビジュアルについて、印象を与える為に意図的にデザインする事が大事であると学びました。
キャッチコピーと人物画像の配置や色で、
パッと見の印象がだいぶ変わってしまいます。
印象、視線誘導、デザインで落とし込むには科学が必要であると学びました。
*コメント*
諸隈 ゆきこ
*コメント*
ガーディアンコーポレートの採用ページについてでした。
例えばおもしろコンテンツなのに中身がまじめな感じになっていたりと、ちぐはぐになっておりました。採用ページなので求職者はどんな会社なんだろうと気になります。最悪離脱の可能性もあると教わりました。
またコーポレートサイトのグローバルナビゲーションは現状のままでいいの?SCSCとSCSC CUEどちらかをいれる?という質問でした。考えた末に意見が真っ二つにわれこの回は終了となりました。結論を首脳陣の皆さまの中でお話しいただき、どちらも入れるが正解でした。
サイトって本当にうつり続けるだけではだめなんだと改めて感じました。
ありがとうございます。
*コメント*
加藤 良紀
*コメント*
今回はコーポレートサイトの採用ページメインで学習していきました。
MVの改善は実業務においても、重点改善ポイントとして取り組んでいるため、僕自身はデザイナーではないですが、見るべき視点を学ぶことができました。デザインとして言語化ができる状態を日々鍛錬していきます。
*コメント*
石川 航
*コメント*
未来の同志を集める重要なコンテンツのはずが、改めて見てみるとあれ?という結果に
MVの画像は、人の顔にばかり目が行きやすくキャッチの印象が意外なほど頭に残ってこない
1つ1つの画像の見栄えは良いのに、連続する画像となるとじっくり見ないうちに次の画像に切り替わってしまう
これ以外のコンテンツも1つ1つ分析していくとコンテンツの繋がり方がちがはぐになっている部分もあり、
Webサイト全体の構成を意識して組み立てていくことの重要性を実感しています
*コメント*
森田 惟之
*コメント*
ということは、修正や改修で新しく作った一枚をじっくり見て主観で評価をすると見逃してしまう問題があるということで。
実際に設置をしたときにどうかという視点とそこでどう見えることになるのかを学び、1枚を見ただけでも問題を発見できる目が必要だと思いました。
*コメント*
鷲見 隆也
*コメント*
また、TOPページだけではなく、その後のページでどうユーザーを導くか、という視点も印象的でした。ただ「見せる」だけではなく、ちゃんと次の行動に繋げる戦略が必要だと理解できました。
一番響いたのは、デザインには「何を伝えたいか」という明確な意図が必須だということです。キャッチコピーが目立たなくても、楽しさや雰囲気が伝わるようなデザインもあり得るという話は、デザインの柔軟性と奥深さを感じさせられました。
*コメント*
児玉 尚哉
*コメント*
またデザイン(見せ方)の話となりますが、MVも一つ一つの出来は良くても全体を通して流れで見ると印象に残らなかったり、印象に残らない理由を教えて頂きました。
言われてみればその通りだと納得するものばかりでしたが、言語化出来ていないものだったのでしっかりと言語化させて実業務の改善に活かして参ります。
*コメント*
瀬戸 ゆうか
*コメント*
最初に出てきたMVはデザイン性もよく、人が多く出ていて、良いMVであると思っていたのですが、今回のWEB学校の内容から、そもそものMVの役割や何を伝えたいのかということが思考から抜けてしまっており、設置場所や人の視線・視覚などを考えるとバランスとがとれていないことに気づきました。
また、一つ一つのコンテンツはしっかりと成立していても全体で見たときに思った効果を発揮していないことがあることも学びました。画像の選定や視線誘導はもちろん、コンセプトをブラさないことも重要です。各ページ、コンテンツのコンセプトを明確にし、雰囲気や画像・テキストで表現をすることが重要だと知りました。
コンセプトを戦略的に定め、明らかにしていくことで、全体的にバランスがとれたサイト作りができると思います。業務においてもコンセプトを定めブレないHP設計を行いないと思います。
*コメント*
*コメント*