新R25の内定者バイトで学んだ、サムネデザインの奥深さとUIデザインの難しさ
こんにちは、22卒デザイナーのぽちゃこ（@__pochaco___） です！私はサイバーエージェントの新R25というサービスで内定者アルバイトをしています。内定者アルバイトでは、トレーナーのムロさんのもと、記事サムネを作ったり、アプリのUIなどいろんなものを作っています。
約4ヶ月間アルバイトしていたのですが、この10月で新R25を一旦卒業することとなったので、これまでを振り返って成果プレゼンをした内容をnoteに書くことにしました。
学んだことが多すぎてとっても長くなってしまったのですが、最後まで読んでいただけると飛んで喜びます。。
ーーー
01 制作物
まずはじめに、この4ヶ月間で制作したものたちを紹介します。
１つ目の制作物は、記事サムネイルです。
記事サムネイルとは、新R25の記事の顔であり、ユーザーの第一印象を担う大事なものです。
こちらが、私がこのアルバイト期間中に作ったサムネイルたちです。数えてみたら36個作ってました。自分的にはもっと作ってた気がしたんですけど、意外と少なかった笑
ちなみに、今週の土日に新しく出たいしかわゆきさんの記事のサムネたちも作りました。「書く」ことを楽しく、ゆるく続けられるためのコツがたくさん載っているので、ぜひ読んでみてください！
話をサムネ作りに戻しますが、私ははじめからすんなりサムネが作れたわけではありませんでした。1番最初に作ったサムネイルは、なんと、制作に1日かかりました…笑
何故こんなにかかったのかというと、まず技術面の課題として、私がPhotoshopをほとんど触ったことがなかったからです。トレーナーのムロさんにPhotoshopの「キホンのき」から教わっていたので、かなり時間がかかってしまいました。
もう一つ、時間がかかった理由として、頭で考えることがめちゃくちゃに多かったからです。
サムネ作りって、一見に簡単に見えるかもしれません。特に新R25の記事は余分な装飾はしないシンプルなデザインが多いので、すぐ作れそう！と思われるかもしれませんが、考えなければならない要素がすごく多いのです・・・
最初のサムネで撃沈したぽちゃこは、サムネ作りの奮闘の旅に出ます。
まず初めに取り組んだのが、“新R25らしさ”の理解です。
①とにかく過去サムネを見まくって“らしさ”を言語化すること、
②ムロさんのnoteや新R25ブランドブックを何度も見返すこと
で徐々に“新R25らしさ”のコツを掴んでいきました。
↑新R25ブランドブックの一部
次に意識したことが、レイアウトです。
レイアウトを考えるために、サムネを作り始める前には必ずノートにラフスケッチするようにしました。このおかげで、いきなり制作に入って失敗するリスクの軽減と、いろんなパターンを網羅的に検討することができます。
このラフスケッチをするときに心がけていたことが『目線誘導』と『言葉の強弱』です。
上の画像は、目線誘導を意識したレイアウトの例です。
左のパターン01のサムネイルはキャッチと書影がサムネ下部に固まってレイアウトされているため、見た人の目線は自然と下の方のみに集まりがちです。一方、右のパターン02のサムネイルはキャッチを上下に分け、書影の位置も調整したことで、左上→右上→左下→右下の自然な目線の流れを作り出すことができます。
このように、レイアウトを工夫することで、見た人の目線を誘導し、より印象に残りやすいサムネイルをデザインすることができます。
上の画像は、キャッチの強弱の付け方の例です。
これは私が初めに提出したサムネイルなのですが、ここでは『親の言うまま』が1番大きく、次に『損害』に強い色を使って目立たせています。
修正したサムネでは、『人生の損害』という強いワードを1番強調させるように変更しました。今回は言い切りが強いキャッチなので、ここを1番目立たせるようにすることでよりインパクトが出るサムネとなりました。
あともう一つ、結局これが1番大事だよな〜と思ったのが、『苦しみながらも量をこなす』ことです。どれだけ考えて分かるようになっても、それが実践できるかはまた別の話なので、実際に手を動かす時間は大切でした。DM遡ってたら苦しんだ形跡があって笑いました。笑
このようにして、なんとかサムネを作れるようになったのでした☆☆☆
ここからは、サムネの他に作ったものたちを紹介します。
ウェビナーイベントのクリエイティブを一式作ったりしました。
イベントのサムネの他にも、差し込み動画の素材デザインだったり、イベント中に使うテロップなども一式デザインさせていただきました。特に動画素材の作成やロゴの検討などは新しい挑戦で、今振り返っても印象深いお仕事でした。
その他にも、連載や特集のカバーやロゴを作ったりもしました。この本気の睡眠革命のロゴは社内の皆さんに褒めていただいたりして、自分でも特に好きな仕上がりになってます〜！！ぜひ見てください☆
02 UI改修
ここからは、アプリや記事ページのUI改修をしたお話をしたいと思います。
一つ目に取り組んだのが、新R25ワイドショーのアプリの機能のひとつである、「参考になった人」リストのUI作成です。
「参考になった人」リストとは、ワイドショーの回答に「参考になった」ボタンを押した人が一覧表示される画面のことを指します。初めにこの画面のデザインの話をいただいた時、まだまだ未熟なぽちゃこは「1画面だからすぐ終わりそうだな〜」と思っていました。
しかし、現実はそう甘くはありません。実は、UIの作成は実装のために検討しなければならないことが多く、展開量がえぐい量なのでした。
「参考になった」ボタンを押した人の中には、新R25ワイドショーの会員ユーザーと、非会員ユーザーがいます。そのため、考える画面のパターンとして以下の4パターンがあります。
①会員ユーザーのみでリストが構成されているパターン
②非会員ユーザーのみでリストが構成されているパターン
③会員ユーザーと非会員ユーザーの混合パターン
④参考になったを押した人がまだいないパターン
また、様々なプラットフォームを考慮したデザインが必要になり、さらに同一のプラットフォームの中でもレスポンシブデザインをしていく必要があります。結局、考慮しなければならない画面は1画面どころでは無いのでした。
以上のように、UIの検討は様々なパターンを網羅的に想像し抜くことがとても重要なのだということを学びました。
改修の2つ目として取り組んだのが、新R25転職のWEBページ改修です。
今回改修したページは以下の2つです。
大きな変更の1つとして、ランキング表のアップデートを行いました。
表に載せる情報量が多くなったため、各項目の見せ方を大幅にアップデートする必要がありました。
各項目の見せ方として、2パターンを考えました。
画像左は、それぞれのサービスごとに項目の見出しをつけたパターンです。この場合、表のどこから見ても内容が分かるようになっているので、表全体を網羅的に見てもらうことができます。
画像右は、項目の見出しを表の左側にまとめてつけたパターンです。この場合、項目ごとに各サービスを比較しながら見るように誘導できます。
このように、ユーザーにどう見て欲しい？をデザイン次第で誘導することができます。この経験から、目的に合わせてデザインを使い分けることを学びました。
03 学び・感じたこと
わたしは、作る前から心配しすぎなところがありました。
デザイナーの強みは作って見せられること。作る前に色々心配するより、一旦作ってみて判断する（してもらう）ようにする。また、初めから正解を狙うのではなくて、何回か当てて修正していくんだ〜〜くらいの気持ちで取り組むことが大切なのだと学びました。
もうひとつ、心に留めておいていることが、ボツ案こそが栄養素ということです。これはムロさんに言われた言葉です。
めんどくさがらずに全部試してみる。ボツができることは悪いことじゃ無い、ボツになった分だけ成長できるのです。
色々試した後に最終的に最初の案に落ち着いたとしても、試した前と後ではその案の輝きは全然違います。
04 これから
いままでは、トレーナーのムロさんや新R25転職の改修でディレクションをしてくださった葛上さんなど、関わる皆さんが丁寧にゴールまでの道筋を見せてくれました。そのおかげで、紆余曲折しながらもゴールまで突き進むことができました。
しかし、デザインは答えがまだ無いことの方が多く、自分自身でゴールを考えないといけない場面が今後多くなります。これからは自分で考え、道を切り開いていくデザイナーになっていくことを頑張ります。
最後まで見てくださった皆様（いるのかな、いたらいいな笑）ありがとうございました！