DLL受講中の私が全力で『#マナブの宿題』に取り組んでみた

WEBデザイン

こんにちは!しかたです

今回はマナブさん(@manabubannai)がYouTubeで発信している企画『副業の始め方 完全ロードマップ』第4回の宿題に全力で取り組んでみました

第4回 副業の種類・始め方を解説する【宿題あり】

デザイナーの宿題は以下の通り

ソフトのインストール( イラレ or フォトショ ※どちらでもOKです )

バナナさんのバナーを作る( 素材: https://bit.ly/32WniyL

第4回 副業の種類・始め方を解説する【宿題あり」-YouTubeから引用

「ソフトのインストール」は完了しています。

バナナさんのバナー作成に奮闘するデザイン初心者しかたをとくととご覧ください



スポンサーリンク

宿題に全力で取り組んだ結果がこれだ!!

#マナブの宿題』でツイートしている皆さんの作品を参考に、マナブさんのブログ『manablog』を紹介するバナーを作ってみました

画像をクリックすると『manablog』に移動します

「3時間で完成」を1つの目標にしていたのですが、4時間半かかってしまいました・・・

ちなみに現在の私の技量はざっくりこんな感じ
  • 『Designer Learning Lab.(DLL)』の卒業課題前の基礎動作の復習と応用問題に取り込んでいる最中
  • Illustrator、Photoshopは少し使えるようになったが、HTMLやCSSは全く学習していない

ここまでの流れは以下の通りです



ペルソナを設定して、バナーに入れる文言を考える

ペルソナを設定する

ペルソナというのは仮想で定義した最も重要なユーザーのことを指します

ペルソナを設定することで具体的なユーザー像がイメージしやすくなり、デザインの方向性も固めやすくなります

企画動画を見ている中で「最近は40代、50代の動画視聴者が増えている」とマナブさんがおっしゃっていたので、そういった方の目に止まるバナーを作ろうと思い、以下のペルソナを設定しました

  • 42歳 専業主婦
  • 価値観:家庭を第一に考える
  • 家族構成:夫、小学6年生の娘、中校2年生の息子
  • 悩み:子育てがある程度落ち着いてきたが、パートにいくほどの時間・余力がまだない。副業などで隙間時間に稼ぎたい
  • ゴール:manablogにアクセスして、副業、ブログについて知る


バナーに入れるキーワードを考える

バナーに求められるもの=クリック数なので、マナブさんのプロフィールなどからペルソナ設定した人物がクリックしたくなるような権威性のある要素をキーワードにして文言を考えます

  • 副業、ブログを始めたい方必見!!
  • Twitterフォロワー28万人、YouTubeチャンネル登録者数44万人、ブログ収益8桁達成
  • ブログ・アフィリエイト・プログラミングを愛する男マナブの人生のアウトプットブログ(個人的にこの『人生のアウトプットブログ』って言い回しすごく好きです)
  • manablog
  • 気になる方はこちらをクリック

これらの要素をもとに、バナーのデザインを組み立てていきます!



手描きでデザインしてから単色でデザインする

まずは手描きでデザイン

いろいろ汚いのは目を瞑って下さい・・・

頭の中が整理出来てない状態でデザインすると作業効率が悪いので、まずは手描きでラフをおこします

私は互換性なども考えて『Adobe Fresco』を使ってiPadで描いていますが、紙に描いて写メをパソコンに送るなどでも出来ます

ここで求められるのは完成形をある程度明確にする事なので私みたいに絵が下手でも大丈夫ですよ〜


手描きのラフを見ながら単色デザイン

左右反転した方が見栄えが良かったので変えました

手描きのラフが完成したら、それを見ながら単色でデザインしていきます

いきなりフルカラーでやるよりも、単色でしっかり作り込んだ方が配色もしやすいし後々変な感じになることも少ないです

ここではとりあえず必要な要素を置いていって、ラフに近づけていきます

それが終わったら、今度はフォントを選びや素材挿入などの細かい調整です



スポンサーリンク

配色と視認性の確認

調整後。なんとなくそれっぽくなってきた!

細かい調整が終わったらペルソナを加味しながら、全体の配色を決めて微調整していきます

そして出来上がったのが1番最初に貼り付けたバナーです

完成!

主観ですが、『manablog』はブログ全体がスタイリッシュにまとめられていて見やすい反面、それが無機質的でとっつきにくく感じる方もいるのではないかと思い、バナナさんを主体に明るい色を使ったり、背景に小さなバナナさんを量産してキャッチーな感じにしました

また、袋文字(フチが白や茶色になってる文字)や影もつけて視認性も高めています



まとめ(という名の反省点箇条書き)

  • バナー作成までに4時間半かかった(ペルソナ設定〜単色デザインまで1時間半、単色デザイン微調整〜完成まで3時間)
    • 参考資料・素材探しや慣れないパスの編集など苦戦した時間込なので、経験を積めば3時間も夢ではない
  • ペルソナをそこまで活用できていない
    • 今回は素材のバナナさんがいて、対象人物に訴えかけるしずる画像などを入れるスペースがなかったので、ここまで細かい設定をする必要はなかったかもしれない
  • ブログなどで実物を見ると一部の文字が潰れてしまっているので、文字を小さくしすぎないように改善していく
  • パスの編集がまだまだ慣れていなくてガタガタなので要練習

全体的にまだまだ経験不足だなあと感じましたが、今回初めてバナーを1から作ったのでいろんな発見があって楽しかったです。今後もがんばります!

これからも精進しようと思える機会を与えてくださったマナブさんに感謝です



番外編

今回の企画動画ではブログの宿題として「記事を書く」事も出されていたので、自身のアウトプット兼宿題の提出としてこの記事を書いてみました

こちらも「3時間で完成」を目標にして

結果的に完成まで約6時間かかりました(汗

しかた
しかた

バナー作成より時間がかかった・・・

構想を立てるのに1時間、記事作成に4時間、微調整などに1時間といったところなんですが、原因は明白です

  • デザイン以上にブログ制作に慣れていない(先日やっとプロフィールが書けたレベル)
  • 今までブラインドタッチをやってこなかったせいでタイピングがめちゃくちゃ遅い

2つともこれからの経験で改善していけるので、ブログも精進します・・・!



宿題に全力で取り組んだ結果はこんな感じでした

課題点がたくさんありましたが、その分成長できる余地があると思うと今から楽しみです

副業始めたい(または初めてみたけど)何やっていいかわからない・・・」という方も良かったらマナブさんのこの企画動画を見て、何かのきっかけにしてみて下さいね

ここまでみて下さってありがとうございました!

またお会いしましょう〜


コメント

タイトルとURLをコピーしました