デジハリ卒業制作　ー入学して5ヶ月目ー

デザインがほぼ完成し、コーディングに入りました

デザイン制作編

トレーナーチェックをしたのはデザイン制作を初めて3〜4日目したくらいでした。まずトップページの方向性がこんな感じでいいか？というのを見てもらいたくて、トップページのデザインがヘッダーからフッターまで一通りできた時にトレーナーに初めてチェックしてもらいました。

WF期間にAmazon kindleで安売りしていた「Webデザインプロセスbook」という本を読んだので、WF→デザインの落とし込みの時にデザインを修正する時は消さないで横に残しつつ、以前のデザインを比較しながら前より良くなっているかな？を考えることを意識するように。

デザイナーは何を考え、どう作っていくのか？　WebデザインプロセスBook [ 加藤 千歳 ]

https://amzn.to/3XzefPq

残すことで自分が頑張ってきた軌跡がわかるし、デザインもちょっとずつ良くなっているような、言語化できるデザインに近づいているような…！とモチベーションにもつながりました。

一度トレーナーにチェックしてもらうと、修正→トレーナーチェックを繰り返しできるので些細なことでもほぼ毎日チェックしてもらいました笑。デザインの引き出しが欲しかったので、どうしたらもっと良くなるか？の意見をいろんな人から聞くためにチェックしてもらいました。

そんなことをしていたらトップページのデザインに約一週間考え込んでしまい、この調子で下層ページ終わるのか！？と不安が押し寄せてからは下層ページ制作もマルチに行うことに。

トップ＋下層1ページのデザインには時間がかかりましたがトレーナーチェックを挟みながら進めたこともあり、トップ＋下層1ページが固まるとヘッダーとかフッターは一緒だし、大体のあしらいの方向性も決まってくるので他の下層ページはサクサク進みました…！！！簡単なページだと1日に3ページとかできる日も…！

トップページ＋下層ページ10ページを大体2週間くらいでPC版を制作し、その後の1週間でトレーナチェックによる部分調整＋レスポンシブをしました。

企画発表

時はちょっと遡り。。。企画発表では休学や退学、お休みなどがありメンバーは7人でした。この日はいきなり発表が始まるスタイル。一人5分間の企画発表（WFやデザインができていればそれも発表）＋担任からのフィードバックでした。実際の発表は1人6分くらい話す人が多く、担任からのフィードバック含め20〜25分程度で全員で3時間かかりました。

今回は祝日を挟んだのでクラスの皆とリハーサルすることはできず。なので前月のクラスの発表を前日に見てから臨みました。発表の時はトップ＋下層3ページ＋ナビゲーションメニューのデザインをなんとか作って持っていき、企画書の概要＋サイト（デザイン＆WF）について発表をしました。

人のフィードバック内容もとても勉強になるし、ディレクターとしてやっていく場合のお作法が学べたなあと感じてます！

担任からのフィードバック内容は。。。

• 色に役割を持たせてしまってる。（キャンプには青、コテージには紺、など意味合いが発生している。）
• 余白を決め始めよう
• ボタンがところどころダサい
• タイトル横のあしらいが色が多くて散漫になってる

全体的に褒めてもらいました。今度のデザイン発表会の時にはコーディングしていていいよと。

人によって企画書のフィードバックが多い人、WFのフィードバックが多い人、デザインのフィードバックが多い人と進み具合は全然違いました。ページ数やコンテンツ量も全然違うし、仕事しながらの人もいるので今まで以上に「人は人、自分は自分。」でやっていく必要があります。

今回のフィードバック内容はみなさん違いましたが、次のデザイン発表の時には、全ページ（レスポンシブ含む）のデザインを用意できることが目標！とのことでした！

企画発表くらいにとても悩んでたところ

配色が全体的に濃い色合いだったため、文字を読みやすくするためにはどうすればいいか、コントラストについて考えていました。

コントラストについて参考になった記事と、コントラストの確認ツールが下記です。

青や紺背景＋黒文字や黄色背景＋白文字はコントラストがやはり微妙で。そうならないデザインの組み直しを行いました。

コーディングを始めた今となっては、Googleの検証ツールで簡単なコントラストの確認はできることに気づいてしまった…。これも一つの勉強ですね。

最後まで悩みに悩んだ配色

PCデザインがほぼ完成くらいのタイミングで2名のトレーナーに言われた「配色これでいいの？」。私としては配色ツール使ったし、お作法的（彩度明度など）に問題ないから大丈夫な配色だと思ってたけど何度も言われると不安しかない。。。色の使い方も良くなかったためアクセントカラーたちがメインカラーを押しつぶし、ごちゃごちゃして見えるようでした。

「可愛い・POP・元気」だとしてもまとまりを持てるようにしなさいと。ほぼ全ページのデザインができてからトレーナーにキツく言われたのを覚えてます笑

ロゴの色がもう決まっているので、それに合わせて「可愛い・POP・元気」を出すのが難しいいいい。使いたい色は紺色でした。「紺色」であればお作法に合う中から探せばいいと思っていたから探し方とかがほぼ感覚だったことに気付かされました。

「ロゴの青色はグレイッシュだから…」、とトレーナーがアドバイスをくださり、その一言をもとにAIに聞きました。最後の頼みの綱です。

AIが出した色をメインカラーと並べたり、figmaではデザインをする時全てスタイルカラーに登録していたため、スタイルカラーを変更した時のデザインを確認してみたり試していくと気に入る色合いがありました！というか、格段に可愛くなっていくのを感じて、ワクワクが止まらず新しいデザインが進む進む…！！トレーナーにこっぴどく言われた時はとても落ち込みましたが再考してほんと良かった…！私の中で配色の引き出しが広がった瞬間でした。

配色ツールでなんとなーく選んでたらダメと感じました！なぜその色になったのか理由もわからないし、AIだと出してきた色に対し、言語化してくれる点もいいなと感じました。

全体を修正し、次の日同じトレーナーに会いにスタジオへ行き、良くなったねえ！とお言葉いただけましたっ！！！感動！！

企画書・デザインの時に調べたショートカットたち

今回作るにあたって調べたショートカットたちです。要するに使う機会がめっちゃ多かったやつ。

• Canva
  • ⌘(command)＋J：ページの複製
    • 同じような矢印とか枠の太さとかフォントサイズとかを維持したかったため、スライドを複製して作ってたため
• Figma
  • ^(control)＋G：ガイドライン表示/非表示
    • ガイドライン引くと色味とか見にくくなるから配色難あるデザインだったしガイドラインの表示/非表示の切り替えをめっちゃ使った。

デザインを大体作り終わった後で最終確認した部分

• 余白（他のページと同じ条件になっているか）
• 英語のスペル
• 写真補正＆圧縮（なるべく300KB以下になるように）
• アイコンの角丸統一　　　　

コーディング編

とりあえずトップページから作成しました。やっぱり色々忘れてて、毎度こんな感じの始まりなの？と笑いが止まりません。自分の記憶力の悪さｗｗｗ

HTMLは大体書いて足りないところはCSS書いている時に足せばいいかーというスタンスでサクサク進めました。セマンティックになるように、動画では出てこなかったけどdivで括らない方がいいコードっぽそうなのはAIに聞きながらコーディングしました。知らないタグを覚えるきっかけになって良きです。

問題はCSSです。色々忘れている中でトップページを上からやるのってハードル高すぎではない？。メイン画像やらハンバーガーメニューやら。。簡単なところからちょこちょこ作ろうと思ってフッターから始めてやりました。笑

さらにトップページはなるべく型にはまったデザインにしたくなかったので余白などがきっちり決まっておらずニュアンスで作り上げた部分も多く、さてどうしたものかなーって感じでした。後回しsectionがちらほら。

コーディングはデザインよりは得意（な方だと思ってた）なので、今までトレーナーに相談したことなかったのですが、ニュアンス部分などを早めに聞きに行きました。時間ないし。そしたらわからない部分ももちろんですが、検証ツールをどうやって使ってるのかなど、プロがどう考えているのかを見ることができてとてもためになりました…！これからどんどん使ってやるぞ…。

デザイン発表

入学する月によって、企画発表→デザイン発表までの間が2週間/3週間のどちらかになっており、私たちのクラスは2週間と短いスパンでした。（その代わりデザイン発表→コーディング発表が2週間ではなく3週間と長め。）

担任からはPC/SP全てのページのデザインを持ってくることが目標！という感じで。だいぶタイトなスケジュールなのでデザイン全部やるのは本当に大変。みんな前日は夜中の2時とかにmetalifeにログインしている人がちらほらいて祝日だったのに頑張ってました。

一人当たり6分発表＋フィードバックで合わせて20〜30分くらいかかり、8人のクラスで3時間弱でしたた笑。軽食を取ってから臨みましたが14時前に終わったのでお腹が空く空く。

私はPC/SPのデザインと、トップページ（PC）のみコーディングが6割くらいできたのでそれをちょっと報告。コーディングが思うように進まず気持ち的にも折れており、11ページ分レスポンシブやjavascript込みでできる気がしない、という報告もしました。

フィードバック内容はアイコンの色や見てほしいポイントをどう強調するか、キャンプ場の案内図の見せ方についてでした。この進捗状態であれば11ページ頑張れ、というエールをいただきました…、できる限り頑張ってみようと思います。。。

今更ながら中間課題お疲れ様会をしました

みんなの予定を調整したら中間課題から1ヶ月以上空いてしまいましたが、出産を控え休学したママも含めてオンライン飲み会をしました！

卒業制作についてや、卒業後のお仕事トライについて、卒業後について話しましたが、そのほかにも他愛もない話もできてとっても楽しかったです！（人によっては聞きながら作業やってたりしました。笑）

まとめ：身体が資本だよ

残り2ヶ月だと思うと本当に制作完了するか不安で不安で。時間がかかるコーディングの落とし穴がどこにあるかわからないからスケジュール通りに進むかわからず、予定がないならほぼ座って作業してました。

そんな状況が続いていたから、ついに体が悲鳴をあげてしまいました。伸びをしたら背中がぎっくりに。6、7年ぶりになってしまいました…。2時間くらいはどんな態勢をしても辛い。寝るのも座るのも立っているのも。このまま治らなかったらどうしようかと本当に辛い数時間でした。

幸い数日で良くなりましたが、椅子に座りっぱなし＆運動不足が原因でしょう…。作業中に座っている椅子もキャンプ椅子だし身体に負担はかかっているんだろうなあ。

ということで！育休復帰も近づいてきているし、産前よりも7〜8kg太ったままだし、健康維持のためにちゃんとストレッチやジムで運動をしようと思います！！身体が一番大事！

発表について思ったこと

発表順は最初と最後のどちらも経験しました。私としては、最初の方が絶対いい！！です。何も考えを巡らすことなく終わります。最後だと人と比べたり、フィードバック内容を聞いて言い方変えた方がいいか考えたり、勝手にハードルをあげてしまったので私は最初がいいなあと思いました。あと昼ごはんをいつ食べればいいか考えるのもめんどい。

担任曰く、今回のクラスはいつも以上に早め早めからお尻を叩いている。とは言っていたいたのでこれが普通ではないのかもしれませんが、参考になれば幸いです！