皆さんこんにちは！Langooプランナーの本田美なつです。

今回は、当社でデザイナーインターンとして大活躍してくれている弓庭璃子(ユバ・リコ)さんに、Wantedlyのサムネを作る際に大切な「セーフエリア」について解説していただきました。

いつもLangooのWantedlyフィードで素敵なサムネを作ってくださっている弓庭さんのセーフエリア講座、見逃すと損ですよ！

それでは！はじまりはじまり〜

＝＝＝＝＝＝＝＝＝＝＝＝＝ー

こんにちは！株式会社Langooでデザイナーをしております弓庭璃子と申します！

今回はWantedlyフィードのサムネイル作成時のポイントについてユーザーの見え方の観点から解説します。

突然ですが、こんなお悩みを抱えてはいませんか？

「Wantedly更新の担当になったけど、今までブログの編集などしたことがなくてよく分からない…」

「サムネとかは、普通に画像を貼っちゃえば良いのかな？」

そんなあなた、要注意！

「セーフエリア」を知らないと、意図しない見え方になってしまうかも？

セーフエリアとは何か。

こんな経験はありませんか？

「このサイト、パソコンだと普通に見れるのに、スマホで見ると画面が小さすぎて写真が見切れちゃうな…」

「Wantedlyのサムネに写真を登録してみたけど、見切れちゃってうまく入らない…」

このようにアプリやWebサイトでは、写真のサイズを考慮しないと、端末の画面の大きさによって見切れてしまう現象がおきます。

画像が見切れるのを回避するには、どの端末の画面でも共通して表示されるエリアに画像の絶対見せたい要素（人の顔など）を収める必要があります。

この、「どの端末の画面でも共通して表示されるエリア」のことを、「セーフエリア」と呼びます。

そして、Wantedlyのサムネにもセーフエリアがあるんです！

2020年2月現在、コーポレートページのカバー画像のセーフエリアや募集要項カバー画像のセーフエリアは公開されていますが、フィードのサムネのセーフエリアは公開されてないようです。

そこでWantedlyフィードのサムネのセーフエリアと実際の見え方の検証結果を紹介します。

セーフエリア対応をマスターして記事のメッセージがきちんと伝わるようなサムネに一歩近づきますように！

「セーフエリアを考慮する」とは？

まずはセーフエリアのサイズから紹介します。

セーフエリアはこちらです。どーん

赤　 PCフィード一覧

黄色 SPフィード記事ページ

青　　 SPフィード一覧

緑　　 PCフィード記事ページ

※PC：パソコン　SP：スマートフォン

それぞれの色で囲まれているエリアの内側が、それぞれのデバイス画面×サイトページで見ることができるエリアです。

上の画像では全てのセーフエリアを重ねて表現しているので、分かりやすいよう、下にそれぞれのセーフエリアの参考画像を載せます。

セーフエリアはわかったけど実際にユーザーにどう見えているかって気になりますよね？

これから実際の見え方の検証結果を紹介していきます。

・セーフエリアを考慮せずに作ったサムネイル

・セーフエリアを考慮して作ったサムネイル

この2つを用意して、違いを検証していきましょう！

まず、こちらがセーフエリアを考慮せずに作ったサムネイルです。

<セーフエリアを考慮せずに作ったサムネ>

こちらのサムネイルは以下のガイドを使わずに制作しました！

試しに当ててみると...

赤い線と青い線から文字が大幅にずれていますね！

お次は、セーフエリアを考慮して作ったサムネです。

<セーフエリアを考慮して作ったサムネ>

こちらのサムネイルは以下のガイドを使って制作しました！

全ての文字情報と重要な視覚情報(人物の目など)が赤い四角と青い四角の重なる部分におさまっています。

では次は、各媒体/各画面ごとに実際にサムネイルがどんな風に見えるかを検証していきましょう！

デバイス別にセーフエリアを見てみよう！

まずは【スマートフォン(iPhone 8)】です！スマートフォンアプリでWantedlyのフィードを見るときは、２つの画面があるかと思います。

・フィード一覧

・フィード記事ページ

それでは、まずフィード一覧の方から見ていきます。

違いがわかりますか？

左が<セーフエリアを考慮して作ったサムネ>で、

右が<セーフエリアを考慮せず作ったサムネ>です。

よく見ると、左のサムネでは文字情報が全て見えているのに対し、右のサムネでは「生」「捕」が切れてしまっています。このように重要な情報をセーフエリア外に配置してしまうと、文章が読めなくなってしまうかもしれません。

次はフィード記事ページです。

左が<セーフエリアを考慮せず作ったサムネ>で、

右が<セーフエリアを考慮して作ったサムネ>です。

この画面ではどちらも問題なく表示されています。フィード記事ページでは画像がそのまま画面のサイズに合わせて縮小するので問題ないようですね。

次は、【PC】の画面で検証していきます。ブラウザ上でWantedlyのフィードを見るときも、２つの画面がありますね。

・フィード一覧

・フィード記事ページ

それでは、まずフィード一覧の方から見ていきます。

上が<セーフエリアを考慮せず作ったサムネ>で、

下が<セーフエリアを考慮して作ったサムネ>です。

上のサムネは、「魚」「手」といった記事の内容に関わる重要なキーワードが切れてしまっていますね！記事の内容に関わる重要な「魚」のイラストも切れてしまっています。

次は、フィード記事ページの方から見ていきます。

上が<セーフエリアを考慮せず作ったサムネ>で、

下が<セーフエリアを考慮して作ったサムネ>です。

上のサムネは一部分文字が切れてしまっていますが、どちらも記事内容を把握するのに支障なさそうです！今回は問題なしでしたが、重要な情報や人の顔を上下の端っこギリギリに配置するのは避けるのが良さそうです。

結論：セーフエリアはとても大切！

ここまで、セーフエリアを考慮して作ったサムネとセーフエリアを考慮せずに作ったサムネで画面での見え方がどれくらいかわるのかを検証してきました。

さあこの記事をWantedlyフィード担当のデザイナーに紹介してみましょう。

もう一度セーフエリアはこちらです。

赤　 PCフィード一覧

黄色 SPフィード記事ページ

青　　 SPフィード一覧

緑　　 PCフィード記事ページ

セーフエリアを考慮しないと、伝えたい大事な情報が画面に収まらず、伝えられないかもしれません！

皆さん、セーフエリアを考慮して、素敵なフィードを作ってください！

Langooでは、デザインの技術を上げるべく、勉強会を定期的に行なっています。

セーフエリアの概念も、ぜひ色々な会社のデザイン勉強会で役に立てていただけると幸いです！

今回サムネイルのモデルになってくれた比留間くんに興味が湧いた方！

インタビュー記事がこちらにあるので、よかったら読んでみてください！

それではみなさん、Wantedly更新は何かと大変ですが、それぞれ会社の魅了くをちゃんと伝えられるように、頑張っていきましょう！

＝＝＝＝＝＝＝

弓庭さん、ありがとうございました！

セーフエリアを考慮して作るだけで、こんなに見え方が変わるんですね！

なお、弓庭さんご自身のインターン生活が気になるあなたのために、近日中にまた新しいフィードを更新予定ですので、お楽しみに ^ ^