【職業訓練3ヶ月目】最終課題”Webサイト制作”の流れ解説

おはようございます！ねむ子です。

今回は、職業訓練「Webデザイナーコース」に通って3か月目の活動内容をお知らせします。

この記事は、職業訓練レポートの最終話になります！
これまでのレポートは、↓からお読みください。

職業訓練のWebデザインコースでどんなことをするのか知りたい方は参考にしてください。

職業訓練3ヶ月目|実際に依頼を受けたWebサイトを作る

職業訓練3ヶ月目では、１か月かけてWebサイトの制作を行いました。

しかし、ただやみくもに作ればいいというわけではありません！

• 実際にクライアントから依頼を受けること
• クライアントが見つからなければ、依頼をうけた設定でサイトを作ること
• 趣味サイトはNG
• 完成したサイトを公開するかどうかは自由

以上の条件でサイトを作らなければいけません。

依頼人難民の私は、SNSや友人にWebサイト制作の依頼を聞きまわっていました。

そんな中、友人が代表を務めているスポーツサークルのホームページを、制作訓練に使わせていただけることになりました。

ということで、私の訓練3ヶ月目のWebサイト制作は

ということで、Webサイト制作は
“友人のスポーツサークルのサイト修正”に決定！

Webサイトの制作の流れ

Webサイト制作期間は1か月を使って、以下のことを行いました。

【職業訓練制作】ヒアリングで具体的に聞いたこと

Web制作をするにあたって、クライアントの要望をヒアリングすることは何よりも重要です

実際のWebサイト制作でも、ヒアリングはさけて通れません

私の場合は、クライアントが多忙だったため、メールでのやりとりのみでした。

ヒアリングでは、クライアントさんにこんなことを聞きました

人によってヒアリング内容は変わります
クライアントがこだわりたい部分は、深く・こまかく聞きましょう

【職業訓練制作】企画書に書いたこと

企画書は、サイトをつくるときのベースになります

企画書の作り込みが甘いと、クライアントの求めるサイトができません！

私が企画書に書いたことは、以下の4つです

上記の情報をまとめ終わってから、制作作業にとりかかりました。

制作で特に大切なのが、ロードマップ（工程表）です。

ロードマップがあると、作業が予定通りにすすんでいるか確認しながら制作ができます。

予定にズレが出たら、ロードマップを見て作業内容を修正しましょう。

また、5W1Hを考えておけば、サイトも作りやすくなります。

ワイヤーフレーム・デザインカンプで時間がかかる

企画書ができあがったら、いよいよワイヤーフレーム・デザインカンプの作成です。

何をやってもダサく見えてしまう呪いにかかりがち。

デザインに詰まるのは、引き出しが少ないから！
良質なデザインのサイトを見てアイディアを増やしましょう。

---

Webデザインの参考サイトならこれ！

SANKOU！はWeb制作の参考になる、素敵なサイトがまとめてあります。
サイトの種類や目的に応じて検索も可能！
自分の制作するサイトに合ったデザインを見つけられますよ！

配色に困ったら

Webセーフカラー216色と16進数が紹介されています。
他ページでは、ビビッドカラーやパステルカラーもまとめてあります。
配色パターンも紹介されているので、色づかいに困ったら是非利用してみてください。

画像えらび・画像修正が意外と大事

サイトの画像は、自分で写真を撮りに行ったり、クライアントからもらったりします。
画像の見栄えはサイトの印象に大きくかかわるので、必要あれば修正しましょう！

わたしは画像の修正の重要さを理解しておらず、クライアントからいただいた画像をそのまま利用していました。

やっとサイトが完成！…が、な～んか締まらない印象に。

トップページにどどんと出る画像の画質が悪かったのです。

この文章を読んでいるあなたがwebサイト制作をするときは、以下のことに気をつけて画像を用意・編集しましょう。

特にキービジュアル（サイトのメインとなるイメージ画像）の質で、ユーザーのサイトに対する印象も大きく変わります。

私と同じ失敗をしないためにも、画像編集は手抜きをしないようにしましょう。

コーディングは調べながら勧めていこう

さて、やっとコーディングです！

私は、訓練校ではDream Weaver、家ではVSCodeを使ってコーディングを進めました。

HTMLはスムーズにいきましたが、CSSで大苦戦…

また、がんばってjQuery（アニメーション）を入れようとしましたが、これも大苦戦。

jQueryは余裕があれば書くくらいの認識で、HTMLとCSSをとりあえずがんばりましょう。

それでもjQueryをいれたい方へ

わたしは、動くWebデザインアイデア帳のおかげで制作サイトにプルダウンメニューを実装できました！

長時間苦しんだJQueryがうまく実装されたときは、達成感と嬉しさで思わず崩れ落ちました。

「動くWebデザインアイディア帳」のコードは、３年間の期限つきです。
とりあえず課題制作を終わらせたいなら良いですが、長期でサイトを運用したいなら注意してください。

Webサイトの発表・講評

制作サイトがギリギリで完成し、最終日に現役のWebデザイナー（訓練卒業生）を招いた全体発表会がありました。

全体発表会では以上のことを1人10分程度で行いました。

クラスメイトの制作したサイトを見るのも面白い！

ジム、脱毛クリニック、レストラン、たたみ屋、塾など、さまざまなジャンルのサイトを作っていました。

職業訓練|転職活動の状況

就職活動に焦りを感じ始め、転職活動のやり方が変わる

さて、職業訓練も3ヶ月目になると、さすがに転職活動に焦りを感じ始めました。

訓練校の講師との面談でも、これまではどんな仕事に興味をもっているかといった話だったのが、具体的な転職活動の進みについて問われます。

わたしの転職活動の方法も1、２ヶ月目の頃とくらべてと変わってきました。

また、ポートフォリオの作成が意外と大変。

このブログでは、「職業訓練生が参考にすべきポートフォリオサイトまとめ」もありますので、参考にしてください。

転職活動の方法を変えたことにより、面接にすすめたり、求人の選択肢が広がりました。

訓練３ヶ月目からは、終了後手当も気にしなくてはならない

私が３ヶ月目に転職活動に焦りを感じ始めた理由として、「終了後手当」の存在も大きいです。

訓練が終わる１か月前に、終了後手当に関する書類がハローワークから私の元に届きました。

終了後手当をもらうためには、就活をがんばらなくてはいけません。

こちらの記事から、終了後手当について詳しく知れます。

記事に書いてあることを理解し、実践すれば終了後手当をもらえました。

職業訓練|Webデザイナーコースの3ヶ月目まとめ

以上が、私の通っていた職業訓練校3ヶ月目の活動内容です。

最後に：訓練の就活サイトに迷っている方におすすめなのはこちら

ミイダスは、診断にこたえるだけで自己分析・面接対策のヒントがわかる転職サイトです。
登録はミイダスの質問に答えるだけなので、履歴書・職務経歴書の作成は不要！

私はミイダスの診断でわかった長所を、面接で話しました。

訓練生はいそがしいので、かんたんに登録・診断ができるのはいいですね。

---

それでは、オヤスミナサイ。。。

ランキング参加中！投票していただけると嬉しいです！