デザインのメンタリングって実際どんな感じ？ 作ったデザインに対してフィードバックを受けてみよう
こんにちは！ Muse Academy（ミューズアカデミー）でWebデザインコースの講師を担当しているまるみ（@yaserumaru0910）と申します。
Muse Academyには「メンタリング」という制度があります。このnoteでは、「デザインのメンタリングってなに？」「どういった感じのことをやるの？」というお話をしてゆきたいと思います！
Muse Academyについてすこし詳しく
「働き方を選びたい」ママのためのオンラインスキルスクール、Muse Academy（ミューズアカデミー）は、女性がライフイベントに合わせて柔軟に働き方を選べる社会を目指し、完全オンラインで「Webデザイン・Webライティング・こども向けプログラミング（Scratch）」が学べるオンラインスキルスクールです。
はじめに…メンタリングとは
メンタリングという言葉は近年Web制作の業界でよく聞かれるようになってきている言葉です。もともとは、自己啓発方法のひとつとしてアメリカで導入された概念です。指導者と指導される側で1対1の関係でペアを組み、両者の間で良き指導を行う…というとわかりやすいでしょうか。
メンタリングにおいては、指導する側をメンター、指導される側をメンティーと呼びます。
指導というと一方的に教えられるのでは？と思う方もいるかもしれませんが、メンタリングは、メンターが一方的に教えるという形ではありません。メンターとメンティーが対話を重ねる中で、「良い体験」「良い指導」を通してメンティー本人が気づきを得るという方法を重視しています。
ちなみに、ミューアカではまとまった時間の取りにくいママのために、オンライン通話（zoom）での対面メンタリングと、チャットベースでのテキストメンタリングを選ぶことができ、このテキストメンタリングが「自分のペースでじっくりメンタリングを受けやすい」「時間制限があると緊張しちゃって聞きたいことが出てこない」という受講生さんからも好評を頂いています。（時間が限られていると焦ってしまって、後からあれ聞けば良かったな〜…とか、思うことありますよね！）
…というわけで、今回はバナーのデザインについてメンタリングのご依頼を受け、バナーのデザインをブラッシュアップしていった事例です。ミューアカの受講生であるメンティーさんに許可をうけ、実際のメンタリングの流れについてを以下にまとめてみました。
バナーデザインのビフォーアフター
バナーデザイン・ビフォー
メンタリングのご依頼時に提出いただいたバナーです。バナーの内容としては、ミューアカWebデザインコースの課題「シンプルバナー」になります。この状態でもバナーとしては読みやすく良いデザインと思いましたが、より良くしていくにはどうしたらよいか？という部分を重視してメンタリングを行いました。
バナーデザイン・アフター
主に文字の扱い、細かな装飾などをレビューしました。前述の通りメンティーにもレビューを通してより考えてもらうことにより、ビフォーにくらべて明るく楽しい印象のバナーになりました！
それでは実際のやりとりを掲載してゆきます。
実際のやりとり・１往復目
fromまるみ（メンター）
はじめまして！ 今回メンターを担当いたします、まるみと申します！
今回はバナー課題のフィードバックが欲しいと伺っておりますが、具体的に気になることや聞きたいことはありますか？
Mさんの気になる箇所を中心にフィードバックをしたいと考えております！
・書き出したバナーの画像と元のpsd
こちらをお手すきの際にDMにて送付いただけますと幸いです！ 画像の形式はpngもしくはjpgどちらでも大丈夫です。
どうぞよろしくお願いいたします✨
from Mさん（メンティー）
この度はよろしくお願いいたします！
オリジナルでバナーを作ったのは今回が初めてなので、レイアウトを中心にフィードバック頂ければと思います。
以下、制作するにあたって意識した点です。
●文字の優先度
①おいしい時短レシピ、ここにあります！
②まりもママの時短レシピブログ
③詳しくはこちら
と考え、①を一番大きくしました。
●Zの法則を意識し、①→②→③になるように配置しました。
●野菜を美味しく見せたいとの要望から、野菜の写真を全面に配置しました。
●詳しくはこちらボタンの色は、写真のピーマンの色を取りました。
●ターゲットが｢子育て中のママ｣なので優しい雰囲気を出すために丸ゴシック体を使いました。
まだまだ勉強中のため何をどうしたら良いのやら…という状態なのですが、自分なりに考えて制作してみました。
どうぞよろしくお願いいたします！🙏
fromまるみ（メンター）
遅い時間に失礼いたします。さっそくありがとうございます✨
オリジナルでバナーを作られたのははじめてとのことですが、
可読性に気を配られていて素敵な仕上がりになっていると思います！
もうすこし手を入れるとグッと良くなりそうな部分がありますので、
レイアウトを中心に一度チェックしてみますね！
私が海外に住んでいる都合上、メッセージを送る時間が遅めになってしまいますが、このあとのやり取りなどMさんのご都合の良いときに進めてゆければと思います！
適宜通知OFFなどご使用くださいませ。
では、具体的なレビューについては今しばらくお待ちくださいませ！
引き続き何卒よろしくお願いいたします
from Mさん（メンティー）
お世話になっております
カナダにお住まいなのですよね！
ご丁寧に連絡くださりありがとうございます
お忙しいところ恐縮ですが、どうぞよろしくお願いいたします！
やりとり・２往復目
fromまるみ（メンター）
お世話になっております！ 早朝のお時間に失礼いたします〜
今回がはじめてのオリジナルバナー作成ということなのですが、
非常によくできているというのが第一印象です！
その中でもおそらくMさんが悩まれているのが、レイアウトする際の文字の扱いかなぁという印象も受けました。
そこで今回のデザインについてですが
【印象】【可読性】という視点で、バナーレイアウトのレビューを行いました。
赤字で色々書きましたが、読みづらかったらすみません…！
以降は赤字の補足説明です！
今回のデザインでいうと、野菜のみずみずしさは伝わるデザインでありとても好印象なのですが
以下の部分ちょっと手を入れるとよいかなと思いました！
【印象】バナーを見た際の「パッと見の印象で気になる部分」です。
・なんのジャンルかわかりづらいので、食というジャンルのなかでも「料理レシピ」の印象があるとよりGOOD、ということでアイコンなどのあしらいを入れたい
・メインキャッチのドロップシャドウがもう少し絵と馴染んでいるとバナーとしてのクオリティが上がる
・まりもママの料理レシピブログという文字は語順が気になる、左→右で読むので「まりもママの」というワードは一番左に置きたい
・角丸ボタン、これくらいの小ささだと真円に近づけたほうが綺麗に見えそう
【可読性】バナーの文言がどれくらい読みやすいか？です。
・基本的には白黒にしても読みやすい構成ですが、メインキャッチはもう少しメリハリがあるとよりGOOD
・小さい文字は大きい文字より可読性が落ちるので、読みやすくするよう気をつけるとよりGOOD
とりいそぎですが、こちらで一度ご確認いただき
わからない部分などひきつづきご質問をいただければと思います！
また、もしこの赤字でわかりづらい…実例が見たい…などあれば、私だったらこういう手の入れ方をするかも〜という作例を準備することもできます。その辺りはMさんとご相談しつつメンタリングを進められればと思います
from Mさん（メンティー）
お世話になっております!
これから朝のわちゃわちゃした時間なので(笑)ザッとしか目を通せていないのですが、とても細かく見ていただきありがとうございます
レビューを参考に改正版を作りもう一度見ていただく、と言うことは可能でしょうか？
少しお時間いただいてしまうかもしれないのですが…
引き続きよろしくお願いいたします！
fromまるみ（メンター）
ご確認ありがとうございます
私のレビュー、長くなりがちですみません… わからない箇所などあれば適宜ご質問くださいませ！
改正版、もちろんですー！
直してみないとわからない箇所もあるかと思います！ ぜひ拝見したいです
やりとり・３往復目
from Mさん（メンティー）
お世話になっております！お時間かかってしまい申し訳ありません
レビューを参考に作り直してみているのですが、迷子になってしまったので一度見ていただきたいのですが……
●悩んでいる点
メインキャッチの扱いについてです。
文字の大きさに強弱をつけて、ドロップシャドウを辞めました。
｢ここにあります！｣を小さくすると読みづらくなるので何か工夫したいのですが(添付の写真では吹き出しに入れています)、どのように扱えばしっくりくるのか悩んでいます。
何か実例を見せて頂きたいと思ったのですが、可能でしょうか？
取り急ぎ、スクリーンショットの画像で失礼します(右側が改正案です)。
fromまるみ（メンター）
ありがとうございます！ キャッチにメリハリがついてきていますね〜！
良い方向性だと思います！
おそらく要素を足したことで整理がしづらくなっている状況かなと思いますので、ここから若干整理していけば全体のデザインもまとまるように思います。
このように、白黒にしてみると「おいしい」をはじめとした箇所の可読性が改善できそうというのと
メインの写真に文字がかかりすぎなので、もう少しゆったりと見せてあげたい…という箇所が改善できそうかなと思いました！
方向性としては目に留まるポイントができてきているので、要素を整理してあげたいというところですね
私が手を入れた実例がこちらになります〜！
紫の色がちょっと唐突感があったので、色数を減らすために白丸にしています。また、写真については背景を塗り足すことで文字を置くゾーンを作りつつ、雰囲気も少し出しています
下の文字ですが、小さい文字は傾けず可読性を高めるほうがまとまるかなぁと思い、エールっぽいあしらい外してお鍋のあしらいを入れました！ 傾けはなかなか扱いがむずかしいのですよね…
背景部分の塗り足しなど、いろいろと小技を使っているので、psdも見てみてください！
あと、ベクトルスマートオブジェクトのリンクが切れている箇所がありました〜！（なんかリンクが切れてるよ〜！ってやつです 参考：https://note.com/cha_sd/n/n4e959865748e#eyjmG）
ここ結構実務でお客様からツッコミ入れられがちな部分なので、確認しておくとよいかなと思いました
やりとり・4往復目
from Mさん（メンティー）
いつも大変お世話になっております！
お返事いつも遅くなってしまい申し訳ありません…、0歳3歳を自宅保育中のためどうしても毎日パソコンを開ませんでして…
貴重なお時間を割いていただき本当にありがとうございます
レビューじっくり読ませていただきました。
白黒にして可読性をチェックすることは今後しっかり取り入れて制作していきたいと思います！
また、リンク切れについても参考URL貼っていただきありがとうございます
指摘して頂かなければ知らないままだったので、教えていただき本当に良かったです。
恐れ入りますが、2個ほど質問させていただいてもよろしいでしょうか？
●あしらいについてです。
今回あしらいという言葉が何度か出てきたかと思うのですが、これを養うにはいろいろなデザインやバナーをたくさん見たりトレースしたりしていくと良いのでしょうか？
●背景塗り足しの部分についてです。
レイヤーを確認させていただき、
・背景の足りないところにぼかした背景を敷く
・上部分に白のグラデーションを不透明度を下げて塗る
までは分かったのですが、レイヤー６という部分でどのような処理をしているのかよくわかりませんでした
お忙しいところ大変恐縮ですが、ご教授いただけると幸いです。
fromまるみ（メンター）
遅い時間に失礼いたします！
我が家も２歳を自宅保育中なので、大変さが少しわかります…というか２人のお子様を自宅保育しながら学習されているMさん、素晴らしい努力だと思います！！ １人でも毎日いっぱいいっぱいなので、２人を見られているというのはひたすら尊敬です…
レビューのご確認、ありがとうございます！
以下、ご質問について返答になります。
あしらいについて
この場合のあしらい＝装飾、という意味合いで考えていただければと思います。Mさんのおっしゃるとおり、トレースやデザインの確認をすることで「どういうときにどういうあしらいを使うか」を学習できます。pinterestを活用してもいいかなと思います〜（バナー あしらい と検索すると結構いろいろ出てきます）
また、参考書籍ですと「あたらしいあしらい」がまとまっていてとても面白いです！
https://www.amazon.co.jp/dp/B08FSZDMF3/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
背景塗り足しの箇所について
今回は「コピースタンプツール」を使用しています。
ぼかしている最背面のレイヤーと、前面のレイヤーの境目をわかりづらくするために使っている感じです。
以下のURLがわかりやすいかなと思います！
https://kentakakenta.hatenablog.com/entry/2019/01/05/154954
ただ、このやり方は非常に感覚的なため
「コンテンツに応じた塗りつぶし」のほうが再現しやすいかなーとも思います！
https://design.webclips.jp/photoshop-bg-stretch/
まずはこちらの「コンテンツに応じた塗りつぶし」一度試してみてください〜 簡単にレタッチができるかなと思います✨
5往復目-最終やりとり
from Mさん（メンティー）
お世話になっています！
まるみさんも自宅保育なさっているのですね。
自宅で見ながらお仕事されているの凄すぎます…
ご返答いただきありがとうございます！
あしらいの件、トレースなどで学んで行きたいと思います！書籍もチェックしてみます
塗りたしの件、コピースタンプツールでこんなに綺麗にできるのですね！
今後練習していきたいと思います！
レビューと実例を参考に仕上げてみました！
バナー制作初めてだったのですが、とても学びが多くて有意義なメンタリングでした！
最後に1点確認なのですが、ここで作成したバナーはSNSやポートフォリオなどに載せることは可能ですか？
fromまるみ（メンター）
自宅保育、ほんとに大変ですよね…
仕事は子どもが寝ている時などになんとか回しています…
回答が参考になったならとても幸いです！
レビューについては一区切りかなと思いますが、技術面でわからないことなどあればまたWebデザインコースのチャンネルなどでもご質問くださいませ！
バナーの仕上がりも拝見しました〜 おなべに火が入って、調理している感が上がりましたね！！とても良いと思います！
今回がはじめてのバナー作成ということでしたが、Mさんの色に対する感覚やデザインの素養を感じられてとても良かったです！レビュー後のあしらいの使い方も面白く、今後の制作がとても楽しみだなーという印象でした
ぜひこれからも制作を重ねて、ご自分のデザインを追求いただければと思います！
バナーですが、ぜひMさんのSNSやポートフォリオに是非ご掲載くださいませ〜
from Mさん（メンティー）
やはり寝ている間にされているのですね…
お疲れさまです
この度はメンタリングしていただきありがとうございました！
こんなに褒めていただいて嬉しいです
オンライン通話などでのメンタリングはよく見かけるのですが、子供と24時間ほぼ一緒なのでなかなか受けるハードルが高くて…。
今回、テキストチャットでメンタリングできるということで思い切ってお願いしてみました。
毎日ゴリゴリ作業できるわけではないので進みも遅く、多分ご迷惑おかけしてしまったのではないかなと思うのですが、自分の都合の良い時間に自分のペースで進められたので本当にありがたかったです
バナーの掲載許可ありがとうございます。
この度は本当にありがとうございました！
機会があればまたお願いしたいと思います
今後ともよろしくお願いいたします
********************************************
以上、メンタリング・デザインレビューの実例でした！
長くなってしまいましたが、あえてはしょらずに掲載させて頂きました。
お互いに子育て中ということで、「同志よ…お互いに頑張ろう！！」感が滲み出ていますね！
自宅保育されている方も多い昨今ですし、文中にあるように私も自宅保育中のフリーランスです。さまざまな状況に応じ、最適なレビューおよびメンタリングをお届けできれば…！と思っております。
この記事を読んで、少しでもMuse Academyに興味を持ってくださった方は、ぜひこちらの動画もご覧ください！ミューアカの魅力がぎゅぎゅっと詰まったイメージムービーです！
この記事が気に入ったらサポートをしてみませんか？