【後編・デザイナー解説】目的のためのデザイン｜と言われても、しっくりこない方のために実例を元に紹介します。
こんにちは！カトウです！
今回は、Wantedlyのアプデ後編をお届けします！
前回整理した要素をもとに弊社デザイナーが新テンプレートを爆速で作ってくれました。
今回は、デザイナーの脳内を覗き見しようということで、爆誕した新規テンプレートを解説を聞いていきます！
「センス」で終わらない再現性のあるデザイン
最初は求人のテンプレートのご紹介です。
こちらが素人が奮闘して作ってみたものです。
こちらをベースに、（ベースに？）出来上がったものがこちら。
ベースという言葉を使うのが烏滸がましいほどの大進化。
隔世遺伝もびっくりです。
──👏👏👏 素敵なテンプレートありがとうございます！では、解説よろしくお願いいたします！
はい、よろしくお願いします。
──まず、全体的なコンセプトをお伺いしてもいいですか？
今のオフィスのテーマが”Aim for the moon”だから、今回のアイキャッチもそれをモチーフにしたんだよね。
──雲とかあって伝わってきました！
今回は3つ写真で2つは固定っていうルールだったから、小さい2つに関しては会社のイメージと社員のイメージが伝わる2つを選んで入れた。
でこの一番大きいものが満月をイメージしてるんだけど、
──え！あー！確かに！満月イメージで丸なんですね、、、！すごい！意味知るとちょっと違って見えてきます。
それで、大きいのが月だから、その後ろの線はエレビスタが月を通る車線？道筋？みたいなイメージで線を入れた。
──おー！！！月到達してますね！何となくオシャレな線だなって思ってました。我々の通り道なんですね、、、！
ですね。
──何も知らなくても、素敵だなって思ってたんですけど、丸に切り抜かれた写真とか後ろの黄色い線とか意味を知って素敵さ爆増しました。
ありがとう笑
──ちなみに、前回整理したルールの時は「もっと、もっともをつくる」は英語で飾りとしてっていう話があったと思うんですけど、
※参考
ルールまとめ
- 会社のカラーが見えた方がいい
- 社名を入れる
- もっと”もっとも”をつくるの英語を飾りとして入れる※不要であれば入れなくても大丈夫です！
- 写真を3つ入れて、一番メインの写真を差し替えられるデザインにする
──日本語にした意図とかありますか？
優先順位の話をしてたと思うんだけど、結局何を選ぶのかっていうのは手段の一つだから目的からそれてなければ、そこにこだわる必要はないんだよね。
──ふむ。
そしたら、前回カトちゃんが作ってくれたサイズなら絶対的に英語で飾りにするしかないんだけど、小さくすれば別に日本語でも問題ないし、むしろこっちの方が目的には近いなと思って日本語にした。
全体のバランス的にも整ってるし。
──めっちゃいいです。見栄えももちろん素敵ですけど、興味を持ってくれた方にも「エレビスタ＝もっとも」が伝わりそうだなって思いました。他に何か意識したポイントはありますか？
今回が1つ作って終わりじゃなくて、テンプレとして画像の差し替えをするってことだったから、figmaを使ったことないカトちゃんでも再現できるようにするっていうのは大きかったね。
そのために、操作できる部分は極力シンプルにした。
──道理で使いやすいわけです。figma初めてだったんですけど、サクサクできちゃうので自分使えるじゃんって錯覚しました。ドウキさんのおかげだったんですね。
使いやすいならよかった笑
そりゃ俺が全部作れるんだったらもっと凝ったのもできるけどデザイン性ゴリゴリのものにしても結局テンプレートとしては機能しないし、ある程度デザイン性を落とす必要があって、そのバランスには気をつけた。
テンプレートとして使いやすいものにするっていうのも目的のひとつだし。
──私でもできる最大限と、デザイン性の最大限のラインを攻めてくれたんですね。
そうそう。
──デザインを作るだけじゃなくて、その後の運用まで考えていて守備範囲が広いですね。奥深いです。デザイン。
求人と差をつける自社コンテンツのデザイン
──こちらのインタビュー記事用のアイキャッチも素敵ですよね。コンセプトなど教えてください！
まず「私がエレにきた理由」っていう言葉もあるから、過去の振り返りとか前職の時は、学生の時はこうだった、みたいな振り返りがあると思って、1枚のフィルムをイメージして作った。
──映画フィルムっぽくて素敵だなと思いました！この背景はどんな意味があるんですか？
さっきの求人のテンプレートは、月に飛んでるロケットを外から見てる画像だったんだけど、今回はロケットに乗ってるメンバーの話だからロケットの中から外を見てるってイメージ。
──うわー！すごい！！求人はまだエレの外だから外観で、メンバーは乗ってるので、車窓？中からの景色なんですね
そうそう。
それで、エレビスタはまだ宇宙にいけてないから窓の外は青空にした。
青空の写真をフィルムに合わせてぼかした感じ
──求人と視点が違うのストーリー性あって、めっちゃ良です。フォントとかは意図があるんですか？
さっきのデザイン性にも繋がってくるんだけど、figmaに馴染みがなくて機能も限られてるメンバーが使うっていうことで、選択肢はそもそもそんなに多くなくてその中でも一番いいものを選んだっていう感じ。
──確かに文字数の違いで細かく調整とか私の感覚ではできないのでありがたいです。
操作性とデザイン性の絶妙なバランス
この2つに関しては、正直他の2つと比べるとそこまでデザイン的にこだわったっていうことはないんだよね。
──そうなんですか？
というのも、これは画像に入れる文字数の制限が他の2つと比べると広かったんだよね。
──ですね、8文字以上15文字以内とかで依頼させてもらいました。
そうなると、文字数が少ない時にも多いときにも対応できるようなデザインにしないといけない。
──確かに文字数変えてもしっくりきます。なんか少ないってなっても文字大きくするとかできない人向けにマイナスをなくしてくれたんですね。
そうそう。
エレビスタのカラーをだしつつ、文字数が多くて装飾にかかるとか少なくて余白が気になるとかならないように意識したって感じ。
──めちゃめちゃありがとうございます。たくさんテンプレ活用させていただきます！
脳内で、ビフォーアフターをお流しください。
ということで、いよいよ実装してみました！
以前のページがこんな感じです。
かつては、画像を差し込むしか選択肢がありませんでしたが、
何ということでしょう。
増えました、選択肢。
すごく鮮やかになりました。
ぜひ実際のWantedlyページも見てみてください、
気づいたら応募してると思います。
ご応募お待ちしています！よ！！！！