おはようございます！ねむ子です。
今回は、職業訓練「Webデザイナーコース」に通って3か月目の活動内容をお知らせします。
ついこの間入学したと思ったら、もう卒業…
あっという間の充実した3か月でした。
この記事は、職業訓練レポートの最終話になります！
これまでのレポートは、↓からお読みください。
職業訓練のWebデザインコースでどんなことをするのか知りたい方は参考にしてください。
職業訓練3ヶ月目では、１か月かけてWebサイトの制作を行いました。
しかし、ただやみくもに作ればいいというわけではありません！
以上の条件でサイトを作らなければいけません。
えぇ…そんな訓練で2ヶ月しか習っていない人間に依頼する人なんかおらんやろ…
依頼人難民の私は、SNSや友人にWebサイト制作の依頼を聞きまわっていました。
そんな中、友人が代表を務めているスポーツサークルのホームページを、制作訓練に使わせていただけることになりました。
うちのサイトを使っていいよー
ヒアリングも協力するし、何でも聞いてねー
ということで、私の訓練3ヶ月目のWebサイト制作は
Webサイト制作期間は1か月を使って、以下のことを行いました。
サイトの方向性やデザインについて、クライアントの要望を聞きます
ヒアリングで聞いた要望をもとに、情報を紙面やデータにまとめていきます
企画書の情報をもとに、サイト内のコンテンツの配置を決めます
“ワイヤーフレーム”とあるように、線と枠だけのサイトの設計図です
各コンテンツに使用する画像・文章の用意をします
画像に修正や調整が必要であれば、この段階でしておきます
デザインカンプとは、サイトのデザインの完成案です
STEP4で用意した文章や画像を、ワイヤーフレームにあてはめます
デザインカンプを参考に、HTML・CSSを使いコーディングをします
訓練校によっては、jQueryなどのアニメーションを使います
ここからは、それぞれ私が苦労した部分や、困ったときに参考にしたサイトも紹介します！
実際のWebサイト制作でも、ヒアリングはさけて通れません
私の場合は、クライアントが多忙だったため、メールでのやりとりのみでした。
クラスメイトには、実際にクライアントと会って打ち合わせをしている人もいました
ヒアリングでは、クライアントさんにこんなことを聞きました
人によってヒアリング内容は変わります
クライアントがこだわりたい部分は、深く・こまかく聞きましょう
企画書は、サイトをつくるときのベースになります
企画書の作り込みが甘いと、クライアントの求めるサイトができません！
私が企画書に書いたことは、以下の4つです
上記の情報をまとめ終わってから、制作作業にとりかかりました。
制作で特に大切なのが、ロードマップ（工程表）です。
サイトが完成するまでの作業を時系列順にまとめたもの
ロードマップがあると、作業が予定通りにすすんでいるか確認しながら制作ができます。
予定にズレが出たら、ロードマップを見て作業内容を修正しましょう。
また、5W1Hを考えておけば、サイトも作りやすくなります。
Webサイトの目的（ 集客or認知度アップor信頼度アップ など）
サイトのターゲット層（性別・年齢・住んでる地域など）
サイトが多く見られる時間はいつか
どのデバイスで多くサイトを見られるか
ユーザーはなぜそのサイトを見るのか
ユーザーがどのようにしてそのサイトにたどりつくのか
企画書ができあがったら、いよいよワイヤーフレーム・デザインカンプの作成です。
デザインカンプが意外と時間がかかってしまいました…
予定では2日ほどで終わらせるはずが、休日も込みで4日もかかってしまいました。
何をやってもダサく見えてしまう呪いにかかりがち。
デザインに詰まるのは、引き出しが少ないから！
良質なデザインのサイトを見てアイディアを増やしましょう。
Webデザインの参考サイトならこれ！
SANKOU！はWeb制作の参考になる、素敵なサイトがまとめてあります。
サイトの種類や目的に応じて検索も可能！
自分の制作するサイトに合ったデザインを見つけられますよ！
配色に困ったら
Webセーフカラー216色と16進数が紹介されています。
他ページでは、ビビッドカラーやパステルカラーもまとめてあります。
配色パターンも紹介されているので、色づかいに困ったら是非利用してみてください。
サイトの画像は、自分で写真を撮りに行ったり、クライアントからもらったりします。
画像の見栄えはサイトの印象に大きくかかわるので、必要あれば修正しましょう！
わたしは画像の修正の重要さを理解しておらず、クライアントからいただいた画像をそのまま利用していました。
やっとサイトが完成！…が、な～んか締まらない印象に。
トップページにどどんと出る画像の画質が悪かったのです。
この文章を読んでいるあなたがwebサイト制作をするときは、以下のことに気をつけて画像を用意・編集しましょう。
特にキービジュアル（サイトのメインとなるイメージ画像）の質で、ユーザーのサイトに対する印象も大きく変わります。
私と同じ失敗をしないためにも、画像編集は手抜きをしないようにしましょう。
さて、やっとコーディングです！
私は、訓練校ではDream Weaver、家ではVSCodeを使ってコーディングを進めました。
HTMLはスムーズにいきましたが、CSSで大苦戦…
CSSがうまく効かなかったり、思ってもいない動きをしたり…
１人で悩むと沼にしずんでいくだけなので、すぐに先生に聞きましょう。
また、がんばってjQuery（アニメーション）を入れようとしましたが、これも大苦戦。
jQueryは余裕があれば書くくらいの認識で、HTMLとCSSをとりあえずがんばりましょう。
それでもjQueryをいれたい方へ
わたしは、動くWebデザインアイデア帳のおかげで制作サイトにプルダウンメニューを実装できました！
長時間苦しんだJQueryがうまく実装されたときは、達成感と嬉しさで思わず崩れ落ちました。
制作サイトがギリギリで完成し、最終日に現役のWebデザイナー（訓練卒業生）を招いた全体発表会がありました。
全体発表会では以上のことを1人10分程度で行いました。
クラスメイトの制作したサイトを見るのも面白い！
ジム、脱毛クリニック、レストラン、たたみ屋、塾など、さまざまなジャンルのサイトを作っていました。
さて、職業訓練も3ヶ月目になると、さすがに転職活動に焦りを感じ始めました。
訓練校の講師との面談でも、これまではどんな仕事に興味をもっているかといった話だったのが、具体的な転職活動の進みについて問われます。
わたしの転職活動の方法も1、２ヶ月目の頃とくらべてと変わってきました。
また、ポートフォリオの作成が意外と大変。
このブログでは、「職業訓練生が参考にすべきポートフォリオサイトまとめ」もありますので、参考にしてください。
転職活動の方法を変えたことにより、面接にすすめたり、求人の選択肢が広がりました。
私が３ヶ月目に転職活動に焦りを感じ始めた理由として、「終了後手当」の存在も大きいです。
公共職業訓練を受け終わった人が、卒業したあとも最大３０日の失業手当をもらえる制度
（新型コロナウイルスの影響により、60日の延長対象となる場合もあります）
訓練が終わる１か月前に、終了後手当に関する書類がハローワークから私の元に届きました。
終了後手当をもらうためには、就活をがんばらなくてはいけません。
こちらの記事から、終了後手当について詳しく知れます。
記事に書いてあることを理解し、実践すれば終了後手当をもらえました。
以上が、私の通っていた職業訓練校3ヶ月目の活動内容です。
とにかく忙しく、でも充実した3ヶ月だった…
大人になってクラスメイトができ、集団で同じことを学ぶ経験は貴重です。
最後に：訓練の就活サイトに迷っている方におすすめなのはこちら
ミイダスは、診断にこたえるだけで自己分析・面接対策のヒントがわかる転職サイトです。
登録はミイダスの質問に答えるだけなので、履歴書・職務経歴書の作成は不要！
私はミイダスの診断でわかった長所を、面接で話しました。
訓練生はいそがしいので、かんたんに登録・診断ができるのはいいですね。
それでは、オヤスミナサイ。。。
ランキング参加中！投票していただけると嬉しいです！