私は現在WEBデザインの職業訓練校に通っています。
WEB業界で働くかはさておき、そのスキルは身に付けたいと思ったからです。
この記事では私が訓練校で学んだ内容を細かく紹介することで、WEBデザインの職業訓練ではどのような事が学べるのかを皆さんに分かってもらえたらと思います。
学校名は言えないんです…
本当は学校名を言った方が皆さんの参考にもなるし自分も言いたいのですが、学校に関する情報発信が禁止されているので言えないのです。
なので時間割やカリキュラム等も大体の感じでお伝えします。授業内容については嘘偽りありません。
期間
私が通っているのは学校は8月某日から2月某日までの6ヶ月の学校です。
平日は年末年始以外は毎日授業で、しばしば土曜日も授業があります。（日曜は絶対休み）
時間割
9:00頃から1限が始まり、14:30頃に終了します。
1日に50分授業×5コマで授業間の休み時間が10分あります。
3限と4限の間は、50分の昼休みとなっています。
この時間割は大体どこの訓練校も同じでしょう。
人数
人数は約16人でした。
男女比は例年は1:1くらいらしいのですが、私の時は男性が4人くらいしかいませんでした。
1日目〜2日目
初日はオリエンテーションだけです。
出席をとって、色々と説明を受けて教科書を貰い、教科書代を払ってその日は解散です。午前中に終わりました。
2日目は自己紹介等が中心です。
そのあとは「安全衛生」といって、PCに向かって仕事をする上で大切な事を学びました。
具体的にはディスプレイの適切な明るさであったり、休憩の重要性についてです。正直そんなに重要度の高いものではありません。基本的な事です。
3日目〜4日目
3日目はWEBサイトのいろはを学びました。
デザインの構成要素
・レイアウト
・形
・色
・文字
【レイアウト】
・整列（いちいち揃える）
・コントラスト（大小、濃淡、太細）EX）タイトルの文字サイズと本文の文字サイズ
・反復
・近接 EX)画像と文字を近くする
【色】
・２色でサイトは作れ（ベースカラー（背景）、メインカラー、アクセントカラー）
メインカラーとアクセントカラーは色相環の真逆を選べばいい
【文字】
・明朝体→ひげ（セリフ）がついてる。小さくなった時読みづらい。
高級感が出る。
・ゴシック体→これ（サンセリフ）
オーソドックス
【形】
四角→堅苦しい
角丸ーポップ、柔らかい
サイトを作る時はこれらの要素を考えて作ると良いそうです。
また、自分がWEBサイトをデザインするとき参考になるサイトがあります。
・WEBデザインの見本帳
・イケサイ
・IO3000
これらに掲載されているサイトデザインはとても参考になるので、デザインに困ったら覗いてみましょう。
4日目は3日目のつづきからでした。
WEB画面で、スマホで見た時どのように見えるか確認する方法を習いました。（ブラウザはGoogle Chrome）
【手順】
メニュー→その他ツール→デベロッパーツール→スマホアイコンクリック（ショートカットはC＋シフト＋I）
また、（現在は変更されて存在していない）過去のサイトを閲覧できるサイトを教わりました。（https://web.archive.org/）
このサイトを使えば、有名企業の過去のサイトデザインを見ることができます。
WEB上の文字サイズを調べるツール「whatfont」（クロームの拡張ツール）
使い方はこちらです。簡単ですね。
その他、板書の内容を羅列しておきます。
・WEBの本文の文字サイズの基準は１４，１５pxくらいが普通。デフォは１６px。１２pxは若い人向け。
PC１３６６×７６６px
・サーバーとドメインの話
これはググった方がわかりやすいです。
5日目
今日からはIllustrator（イラストレーター）の授業に入ります。
Illustratorとは、図形を組み合わせて絵を描く事ができるソフトです。
板書の内容を羅列しておきます。
・カラーモード
紙ーCMYK（シアン、マゼンタ、イエロー、ブラック）
WEB−RGB（レッド、グリーン、ブルー）
・コントロール＋Zの連続で２０回まで戻れるが、PSではそうはいかない。
6日目
Illustrator（グループ化）
・オブジェクトーグループ化（コントロール＋G）
解除は（コントロール＋シフト＋G）
立方体の作り方
- 正方形を作る
- 上と右にそれぞれコピーする
- 色を変えても良い
- 選択ツールから自由選択ツールに持ち替え、アンカーポイントを任意の位置にずらす
グリッドについて
- 「表示」から「グリッドを表示」でグリッドが出せる
- マス目の大きさは「Illustrator」（ウィンドウズの場合は「編集」）から「環境設定」ー「ガイド・グリッド」で変更可能
ペンツール
- ペンツール選択
- クリックとドラックを繰り返し、自由に描画ができる
- ペンツール長押しでアンカーポイントツールに持ち替えると
- ハンドルを出したり、しまったり出来る
7日目〜8日目
この日は今までのIllustratorのスキルを生かして、キャラクターを作成しました。
主に図形を組み合わせて作りました。
9日目
二日間の費やしたキャラクター制作の発表（プレゼン）を行いました。
その中で、何個か新しいスキルを教わりました。
ブレンドツール
オブジェクトの間を補完してくれます。
- 任意のオブジェクトを2つ用意する
- ブレンドツール選択
- 2つのオブジェクトをクリックで
- 補完される
- 「オブジェクト」ー「分割・拡張」からのグループ化解除で個別のオブジェクトとしても扱える
遠近グリッドツール
立体的に図形が置ける
- 複数のオブジェクトを用意する
- 遠近グリッドツールを選択
- どの面に置きたいのかを選択する
- 任意のオブジェクトを選び、選んだ面に移動させる
- 遠近グリッドを終了したいときは「表示」ー「遠近グリッド」ー「グリッドを隠す」
線を塗りにする方法
- 任意の線を選択
- 「オブジェクト」ー「パス」ー「パスのアウトライン」
角を丸くする方法
- オブジェクトを用意する
- 「効果」ー「スタイライズ」ー「角を丸くする」
- またはハンドルをドラック
なびく旗を作る方法
- オブジェクトを用意する
- 任意のオブジェクトを選択し、「効果」ー「ワープ」ー「旗」
10日目
この日もキャラクタープレゼンの続きです。
今日も新しいことを何個か学びました。
パスに沿って文字を描く方法
- 何かしらのパスを用意する
- 文字ツール長押しー「パス上文字ツール」
- テキストが入力できる
- 文頭の青線をドラックして文字の移動ができる
- 文中の青線を内側にドラックすると文字が内側に来る
パスの中に文字を書く方法
- 何かしらのパスを用意する
- 文字ツール長押しー「エリア内文字ツール」
- テキストが入力できる
アルファベットを無理やり縦書きしたいとき
- 対象の文字を選択
- 文字パネルのメニューから「縦組み中の欧分回転」
まとめ
以上がWEBデザインの職業訓練校で私が10日間で習った内容です。参考になればと思います。
次回は11〜20日目の記事でまとめるつもりです。
お疲れさまでした。
