Blog

  • デジハリ

デジタルハリウッド 中間課題 ー主婦ママクラスに入学して3ヶ月目 デザイン編ー

入学して3ヶ月目になりました。

先月でメインパートの動画を全て見終わり、残す課題は中間課題と卒業制作だけになりました。卒業制作のクライアントも先月決まって、挨拶や打ち合わせもあり、準備も進めていますが、今月はほとんど中間課題を行いました。

中間課題のスグ食べって?

中間課題は3コンテンツから選べます。一応。

ただ、ほとんど95%くらいの人が「スグ食べ」という野菜の産地直送サービスのランディングページの作成を行います。(自分調べ)

というか、そのほか2コンテンツの説明書類はほぼ見つけられないし、対面授業ではスグ食べの深掘り授業があったりと、「中間課題はスグ食べ」と洗脳された。。。気がします。笑

今となっては、過去のたくさんの生徒さんのデザインを確認できるコンテンツだったので、やりやすかったなと感じてます。

中間課題は締切があるよ

今までの課題は「卒業するまでにチェックしてもらう」、という感じでしたが、中間課題には締切があります。先月知り合った先輩ママの話では、締切はあってないようなことを言ってた感じでした。お仕事TRY(10ヶ月コース)というコースをとっている人は、卒業までが長い分、それまでに提出することでOKらしいです。

私は6ヶ月コースだし、なかなか約束事を間に受けてしまう方なので、締め切りに間に合うように、なんなら余裕を持ってやりたいタイプどす。

中間課題の締め切りはこんな感じです↓

入学して3ヶ月目の上旬:デザインのトレーナーチェック
入学して3ヶ月目の下旬:コーディングのトレーナーチェック

私たち5月入学ママの場合、8月上旬までにWF→デザインのトレーナーチェック、8月後半までにコーディングのトレーナーチェックです。

ペルソナ〜デザイン制作

ミッション設定からのペルソナ決め

今回の課題を取り組むにあたって、自分なりのミッションをいくつか設定しました。

  • コンテンツとコンテンツの区切りを曖昧な表現にしてみたい(全部平面での区切り、はいやだ)
  • 文字か背景にグラデーションを使いたい
  • アニメーションも使いたい
  • 余白多めにする
  • 背景がのっぺりしない工夫(ざらざら感や紙っぽい感じ、シャドウとか?)する
  • javascript使う
  • Q&A、押したら出てくる感じにしたい。(アコーディオン化
  • ゴシックではなく、セリフ体・手書きが似合うサイトにする。レストランっぽい

なのでミッションに合うペルソナを作成して、デザインに落とし込めたらなあーと思いました。

このコンセプトに合うペルソナとして浮かんだのが「御手洗家、炎上する。」の御手洗さんだったので、ドラマを見た私の御手洗像をイメージしながらペルソナをパワポ1枚分作り上げてその人に合うWFとデザイン作りを始めました。

私の担任はペルソナ一人にしてその人をじっくり考察して落とし込みしろ!という考えでしたが、トレーナーによっては数人ペルソナを出せ、という考えの人もいるようです。

デザイン制作編

デザインを考える上で参考にしたのは、Pinterestとパーツ別デザイン集が掲載されているサイトでした。自分のペルソナに合う、上品な感じを出すにはどんなデザインがいいかコンテンツ別に悩んでたのでその時にとても役立ちます!

LPサイト集も見たりして、いいなと思うコンテンツを片っ端からクリップしていました。

フリー素材はイラストACや写真AC、O-DANからダウンロードしました。メイン画像はAdobe FireFlyも使いました。AC系は1日にダウンロードできる枚数や検索回数が決まっているので、数日かけてダウンロードしました笑。

担任にデザインを見せる日まで、5人のトレーナーにチェックをしてもらいました。担任ではないトレーナーさんはどことなく、忖度されているというか、大幅修正を喰らうことは少ないなーという印象でした。

「これ、トレーナーに見せるの何回目?」と何度聞かれたか…。。。どういう意味やーん。今更大幅修正させるの可哀想かな?とかで忖度されたのかね?と思っちゃう私がいました←笑

担任、登場

対面授業が終わった後、担任と中間制作についてチェックしてもらったところ。。。

  • トレーナーチェックの際、ペルソナに沿った説明ができていない
  • ペルソナに沿った文章に用意された文章が変更されていない
  • ボタンが可愛くない
  • CTA部分のデザインが弱い
  • コーディングをすることを考えたデザインになってて面白みにかける
  • 私が用意したペルソナならいらないコンテンツが多い(全額返金保証&こんなお悩みありませんか?)

とのことで、半分くらいのコンテンツを削除&変更。大幅の大幅に修正です。笑笑笑

ちょっと恥ずかしいですが、ダメ出しだったデザインがこちら。

私自身、ペルソナはこれでもか!って作り込んだ割に、コンテンツの順番やデザイン構成を考えるために使ったくらいで、文章は用意されてた文章をベタ打ちしているだけでした。けどそれじゃあペルソナに全然合う感じじゃなかったんです。

なので、御手洗さんだったらこのLPを見てボタンポチってくれるか、をイメージして作り直しました。

「華やかさ」、「旬」、「センス」、「彩り」、などデジハリが用意した文章にはなかった、ちょっと上品な言葉を使ったり、おしゃれ写真をこれでもか!と入れました。

お金に困っている人ではなかったので、「全額返金可能です」コンテンツや、「こんな悩みありませんか?」コンテンツは削除削除削除!!!

確かに、言われてみたら担任の言うとおりすぎて、目から鱗の連続です。

バージョン2の制作開始。。。

すぐに理解して落とし込める部分と、落とし込めない部分があって、苦戦したーーーって感じです。文章のペルソナに合わせた変更は、AIにペルソナを読ませて、文章改善の提案をしました。ボキャブラリーの少ない人間なので、この部分の改善提案をしてくれるのはとても助かります。感動。

難しかった部分は、ボタンとCTAコンテンツ部分のリッチ化です。私のミッションにある、明朝体でゴージャス感を出すためには、どうすればいいか、、、。「CTAボタン」で調べるとゴシック体だったり吹き出しが使われてたりと、上品さには合わないかなと思い、どうやったらリッチになるのか?が本当に苦労しました。

頭の中でずっと考えて悶々とするより、手を動かしてトライ&エラーすることを続け、またできるだけ理由をつけてトレーナーチェックを続けました。担任のチェックまで2週間あったので自分で出来る限りを尽くし、他のトレーナーチェックでデザインOKが数回出てたので卒業制作の準備をしたり、デジハリのトレーナーさんが執筆している「HTMLサイトをWordPress化する方法」を見ながら、卒業制作時に取り組みたいと思っているWordPressのオリジナルテーマの作り方をちょっとずつ勉強を始めました。

※この時期に少しでもWordPressに触れてて本当によかったです。特に卒業制作や将来的にもWordPressでの制作を考えている場合、ちょっとでも時間ある時に手を動かしながら進めることをオススメします🙌

担任に2回目のデザインを見てもらう際は、ペルソナに対しての説明の仕方にも注意を払いました。なので説明文章も作って読み上げました。笑

結局担任に2回をデザインを見てもらって、修正ポイントをさっと直し、トレーナーチェックOK出たらコーディングに行くことにしました。

デザインで終わりではない

設定したミッションは、いくつかなかったことになってしまいましたが、納得いくデザインのサイトができたと思います!

デザインは明確な終わりが見えないから本当に終わらせ時がわからない。。。そんな時にトレーナーチェックで強めに「早くコーディング行きなさい!」と背中を押してくれたkbt先生、ありがとうございます…✨。

そしてデザインが終わってもここからコーディングがあるのか、、、と落ち込み。将来の自分に託してたjavascriptとか、本当にできるのか?と不安もあって手放しに喜べない。そしてデザイン終わった脱力感もあり、やる気スイッチが切れた状態。。。。

長くなってきたのでコーディングについては次の投稿で📝。

Page Top