Webデザイナーの仕事

半年のWebデザイン職業訓練。カリキュラム・授業内容を完全レポート!

この記事は2019年以前他サイトに執筆したものを引越し掲載しています。

WEBデザインやってみたい!!でも訓練校ってどのくらいの時間で具体的に何をやるのさ?っていう人も意外と多いんじゃないでしょうか?(私がそうでした^^)

なので、ここではできるだけ初心者向きにまとめていきたいと思います。

私は半年間の職業訓練を経てWEBデザイナーとして就職しました。これを書いている今からさかのぼること4か月前に卒業したので、まだ記憶が新鮮なうちに情報を残しておこうと思います。

そもそも何を習うの?(知ってる人はとばしてね)

WEBデザインの世界はとても広~いです。しかも深いです。

でも基礎は意外とシンプルで、とりあえずこれを知っていればWEBページ作れちゃいます、っていう部分だけを学校で学びます。

なので、ついていけるか心配だなあ~と思っている人でも基礎の基礎部分はたいてい大丈夫です。

まず、大別すると以下の2つを学びます。

  1. デザインソフトの使い方
  2. Web言語の書き方

デザインツールの使い方

まず1.デザインソフトの使い方です。これは主にAdobeという会社が出している「illustrator(イラストレーター)」と「Photoshop(フォトショップ)」の使い方を学びます。

デザインの現場では圧倒的な割合でこの2つが使われているからです。事務で言うとMicrosoft社のWordとexcelみたいなものです。

「illustrator(イラストレーター)」…イラストを描くソフトです。

「Photoshop(フォトショップ)」…画像(写真)の編集ソフトです。

この2つについて主に操作方法を勉強します。

でも美大ではないので、デザインのコツみたいな内容はほとんど学べません。あくまで「操作の仕方」を勉強します。(パソコン教室でWordを勉強しても文章が上手くはならないのと同じ感じです。)

Web言語の書き方 HTMLとcss

次に2.Web言語の書き方ですが、これは主にHTMLとcssというのをやります。はじめて聞いたら、「???」ですよね。

この2つはさっきのAdobe社の製品みたいなソフトの名前ではありません。今このページを表示しているときにも活躍してくれている「Web用の言語」です。

パソコンは電気信号で動いているので0と1しか理解できません。かなりはっきりしていますよね。一方人間はかなりあいまいな言い回しを好みます。

なので、人間とパソコンの両方を橋渡しできるちょうどいい感じの言語がいろいろ生み出されてきました。その一つがWeb用の言語である「HTML」と「CSS」です。

「HTML」というのはページの骨組みを作る言語です。家を建てることで言うと基礎や骨組みです。

「CSS」はHTMLで組んだものに飾り付けをする言語です。壁の色を決めたりするイメージです。

その他の学習 動きを出すなど

あとは他のことも少しだけ学びます。

私が受けたカリキュラムでは「jQuery」というものを学びました。これで「動き」を出します。

Webページを見ているといろんな動く仕掛けがありますよね。スライドが流れていたり、押すとページの一番上にスルスルと戻ったり。そういうのを作れます。さっきの家の例で言うと、ボタンを押したら電気がつく、みたいなイメージです。

さて、ここまでで概要がつかめたでしょうか?

ではこれが半年間でどうやってスケジュールがされていたかをご紹介しましょう。

半年間のカリキュラム

デザインソフトの使い方を2か月、Web言語を3か月、最後に卒業制作が1か月でした。

初日にPCのセキュリティや安全衛生(姿勢や目の疲れとかの話)の授業があり、2日目から早速授業に入ります。

ケ月目 ソフトウェア・言語 内容 課題
1 illustrator(イラストレーター) グラフィックデザイン・イラスト
2 Photoshop(フォトショップ) 画像編集・写真加工
3 HTML・CSS WEBページの基礎
4 HTML・CSS(レスポンシブ) 上に加えてスマホ対応させます。  
5 jQuery さらに動きを出していきます。  
6 卒業制作 集大成のWEBサイトを作ります。

※表一番右の課題というのは各学習の区切りに行なう各自の制作(作品作り)です。これについては後述します。

なお、こういうカリキュラムは訓練校ごとに公開されているはずですので、申し込み前に把握してできる範囲でイメージをしておくといいと思います。

授業日数・内容

デザインソフト(illustrator,Photoshop)の使い方

学習日数

  illustrator(イラストレーター) Photoshop(フォトショップ)
14日間 テキストを進め、区切りで小課題 テキストを進め、区切りで小課題
3日間 課題制作 課題制作
1日間 課題発表 課題発表

私のところは上記のカリキュラムでした。実際には授業や課題制作の進み具合で日数の変動はありましたが。それぞれのソフトについて18日間、約1か月弱で基本操作を学習します。

illustrator(イラストレーター)の学習内容

先にも書きましたが、やるのは操作の仕方です。なので、授業を受けてもカッコいいデザインが作れるようにはなれません。

そして実はこれらのソフトはかなりベテランのプロでもすべての機能は使いこなせないと言われるほど多機能です。当然授業でやる部分は基礎の基礎に絞られます

まず最初の数日で、超基本の図形を描くとか変形するとかをやります。かなりゆっくり進むので、パソコン初心者でも大丈夫です。

テーマ 内容 難易度
基本オブジェクトの描画 丸とかの図形を描く、並べる、変形する等
描画ツールの使い方 主にペンツールという自由に描けるツールを使う
色のコントロール グラデーションや透過といった機能を使う
応用的な加工 立体、写真の利用など
テキストと画像のコントロール パンフレットやロゴなどに使用できる加工・調整法

 

練習が必要なのは、「ペンツール」という曲線などが自由にきれいに引けるやつです。イラストレーターは基本的に自由に直感操作できるので、誰もが楽しめると思います。Windowsのペイントとかを使って遊んだことがある人ならそれが超高機能になったものだと思ってください。

フォトショップの学習内容

イラストレーターよりちょっとだけとっつきにくくなります。いきなり写真加工とかではなくて、最初に基礎の基礎となるフォトショップの概念を学びます。

テーマ 内容 難易度
加工の前段階となる基礎 選択範囲、マスクといった加工の前段階の操作
写真の補正 写真のごみや歪みを取り除く、色合いの調整
写真の加工 動感を加える、照明効果を与える等
写真の合成 写真をつなげて一枚に見せる、背景を変える等
イラストと文字 (Photoshopももちろんイラスト・文字を扱えます)

 

最初に学習する「マスク」などの基礎操作、また「レイヤー」という概念を理解することが大切です。

これを習得することで、どの部分に、あるいはどの写真に、操作するのかを指定することができるようになります。これさえできるようになれば大丈夫!いろいろな効果もワンクリックで出せますから、すぐにかっこいい加工ができるようになります。

私はこのへんとても苦手でしたが、今はPhotoshop使って仕事してます。なんだか難しそうだな、と思っていても、いろいろ作っているうちにだんだんとできるようになります。

illustratorとPhotoshopの授業の進み方はとてもシンプルでした。

  1. 先生がテキスト通りに操作を実行して見本を見せる
  2. 「では各自やってみましょう!」(全部テキストにやり方が書いてあるのでそれを見ながらでOK)
  3. 必要に応じて先生のフォロー
  4. これを繰り返した後、今度はやり方が書いてない(テキスト以外の)小課題で練習

上の流れで進んでいました。はじめての人でもぜんぜん大丈夫な代わりに、ちょっと経験があるという人は訓練校では物足りないと思います。

Webページ制作(HTML・CSS・jQuery)

ここから本格的なWebページ制作に入ります。

テーマ 内容 難易度
HTMLとCSS基礎 HTMLとCSSの基礎、PC表示の簡単なページ作成
レスポンシブ対応 スマホなどのデバイスでも最適表示する技術
jQuery スライドやタブの開閉などの動きをつける技術

 

HTMLとcssは勉強は得意じゃなかった、あるいは文系だという人でも問題ないです。必要なのは新しい言語への慣れだけです。

後半、プログラミングなどは難しく感じるかもしれません。でもプラグインなどを使って組み立てることもできるのでそんなに心配ありません。

プラグインというのは、料理で言うと「○○の素」みたいな感じです。基本の焼く、煮る(HTMLとCSSでの組み立て)がしっかりできていれば、ササッと加えて出来上がり!というわけです。

実際制作現場では時間の関係もあり、自分で組める人でもプラグインを使うことが多いです。

こちらも授業の進み方は基本テキスト通りです。

  1. 各セクションの概要を先生が説明するので、テキストを見ながら聴く。
  2. その後、実際に手を動かしてコードを書き、ブラウザに表示をさせてみる。(テキストのサンプル通りに書く)
  3. これを繰り返していろいろな技が蓄積されてきたら、学んだことを応用して1枚のページをつくる。

 基本的にはテキストに沿って進むので、難しそうだなと思っても大丈夫です。よくわからなくてもテキストを写す作業を繰り返していくとどんどん慣れていきます。 

課題制作・発表

それぞれの学習内容の区切りでは、学んだことをもとに各自で制作を行ないます。ここでの制作も就職活動用の作品集に含められるので大切です。

下の表にあるように私の受けた訓練では全部で4回課題制作と発表がありました。

内容 制作期間 課題のテーマ
illustrator(イラストレーター) 3日 ポスター制作
Photoshop(フォトショップ) 3日 バナー数種類(5~6個)
Webデザイン(レスポンシブではない) 7日 2ページ以上Webサイト
Webデザイン(卒業制作・レスポンシブ) 17日 自由(できれば実在店舗など)

上記表は本来のカリキュラム日数でまとめています。実際には、Photoshopなどでは生徒のリクエストにより制作期間延長→代わりに卒業制作期間は3日ほど短縮など変更がありました。

課題ができたら簡単な発表をやります。就職訓練の一環として本当はプレゼンのような形でやるという前提みたいでした。が、実際はゆる~い雰囲気の発表会みたいな感じでした。

私は最初の課題で、上手い人のをみて軽く心を折られました…笑。と同時にアドバイスをもらえたり刺激をもらえたりするので貴重な機会でした。

卒業制作

最後の一か月弱で、今までに学習したことを用いてWebページを制作します。数ページの小規模なホームページです。

スマホ対応はもちろん、スライドなど動きをつけていきます。

実在の店舗をモデルに作らせてもらうと楽しいですし、とても勉強になります。私もクライアントワークをやりました。

その他就職関連でやること

ハロワに来所(毎月1回)

月1回指定日にハローワークにいきます。失業保険を受給したことがある人はご存知だと思いますが、この日にサボると大変というやつです。

また卒業後も就職が決まらない人は最大3か月まで月1回の来所が必要です。

キャリアコンサルティング(全3回)

略して「キャリコン」。

担当講師ではなく、訓練校の責任者や人事の人と20分ほど進路相談などをします。

私の場合、初回は授業についていけているか、馴染めているか、今までの仕事は?、などが話のテーマでした。後半は就職関連のことを具体的に相談したりします。

就職案内・講話(全4回)

職業人講話という形で4社から話を聴く授業がありました。(2時間×3社+5時間×1社)

内容は自社事業の紹介であったり、Web業界に関わる知識などでした。講義の質はさまざまでした。

講義の最後には登録などの用紙が配られるので、就職機会の一つになり得ます。もっとも周りにはこういった形で就職した人はいませんでしたが。

実務研修(あるところもある)

訓練校によっては、企業で実務を体験できる研修があります。

私の通っていた訓練校では実務研修はありませんでした。いいな~実務研修。就職した今でも受けてみたかったなあ…と思っています。

自身の体験は書けないので、同じ会社の訓練卒の先輩に聞いたことを書いておきます。現場でやらせてもらった内容は、既存サイトの細かい修正とかだったそうです。

自分では指示通りできたつもりで報告しても、ここの幅が少し違うとか細か~いところを指摘されることが多かったそうです。その時は聞いても納得できないくらい細かいことも多かったとか。

ちなみに制作会社の実務は、社内のやり取りもクライアントからの要望もそういった細かい修正など多いです。

こういった学校の制作ではやらないところを在学中に経験できるのは大きいと思います。学校は基本的には好きなように作るだけですから。

また私が就職活動中に感じていた不安と手探り感は、現場を全く知らないことからくるものでした。一度でも、雰囲気だけでも、現場を知れるのは就活する上で大きいと思います。

以上のことから実務研修がある訓練は積極的に検討してみる価値があると思います。

ポートフォリオ制作(主に訓練期間の後半、自主的に)

ポートフォリオというのは作品集のことです。紙とWebの2パターンあります。

Webデザイナーの就職活動には必須と言われています。

なくても応募できるところもありますが、未経験でこれもないとなるとまず選考対象にすらならないと思います。逆にポートフォリオが素晴らしければ未経験でも十分選考してくれるところも多いです。

ちなみにそれなりのものを作るのは結構大変です。時間がかかります。

ですが訓練のカリキュラム上はそのための時間は特に振り分けられていません。ですので作らない人もいますし、Webデザイナーへの就職意思がある人が自主的に作っていた感じです。

半年後には就職しているのが目標ですから、カリキュラムの後半はこれを作りながらということになります。就活もどんどん行なう人はけっこう忙しくなるはずです。もっとも意識が高い人は授業の一環で作ったものなども、作品集にのせることを前提に最初からストックしているようです。

私の場合、訓練期間中はWebのポートフォリオを作るのが精一杯で、紙のポートフォリオは卒業後に少しずつブラッシュアップしていきました。

訓練校は、とりあえずやってみたい!という人にはおすすめ

さてさて、職業訓練校のカリキュラムと授業内容、いかがでしたでしょうか?

Webデザインやってみたい!と思っている方は無料ですので、積極的に検討してみるとよいと思います。

人生かけてて超本気!とか、ちょっとは経験あるんだけど…という方は、物足りないとかもっと高いレベルを!と感じてしまうかもしれません。実際そういう方もクラスメートに何人かいたので、専門学校や民間のスクールも調べてよく検討するのがいいかもしれません。

実はまだまだ書きたいこともありますが、長くなってしまったのでこの辺でこの記事はいったんおしまいにします。

興味がある方は他の訓練の記事も書いているので参考にしてください。