講義資料の共有
WEBデザイン講座の１ヶ月間の学習内容は下記の通りです。
- １回目：Photoshopを使えるようになる
- ２回目：Webサイトの仕組みを学ぶ
- ３回目：Webサイトを作れるようになる
- ４回目：Webサイトにデザインを入れる
- ５回目：応用して実際に作ってみる
１ヶ月で学習する内容をまとめた講義資料を共有します。予習や復習にご活用ください。
講義資料はブックマークしておくと便利です！
また、講義内容につきましては下記サイトにもまとめていますのでブックマークして復習に活用してください。
マウスのご準備について
第１回目のPhotoshop操作では、小さなボタンを操作するなどの細かい操作が必要になり、トラックパッドでの操作は慣れないと難しいです。
そのため、可能であればマウスのご準備をお願い致します（安価なもので大丈夫です）。
2〜5日目のHTML、CSSについては、基本的にテキスト操作なのでマウスがなくてもさほど不便ではありませんがある方が操作はしやすいと思います。
モニターについて
オンライン講義では、オンラインで映像を見ながら一緒に操作をしていきます。
そのため、サブモニターがあると便利です。
また、実務においてサブモニターはほぼ必須となります。WEBデザイナーの仕事を本気で目指すのであれば今からサブモニターを用意しておくと良いでしょう。
サイズは15インチ以上のものが使いやすいです。
おすすめのモニター
Photoshopのインストールと起動確認
事務局様資料の「インストールマニュアル」に記載の手順に沿って、Photoshopをインストールし、問題なく起動するかご確認ください。
「Visual Studio Code」とその「拡張機能」のインストール
2回目以降のHTML、CSS講座では「Visual Studio Code（略してVS Code）」というテキストエディタを使用しますので、
- Visual Studio Code本体
- 拡張機能
のインストールをお願い致します。
エディタの設定や拡張機能のインストールについては下記記事を参考にご準備お願いします。
拡張の機能のインストール時に、検索すると似たような名称のものも出てきますが、非推奨という表示のものはインストールしないでください。
Figmaのインストールと起動確認
Figmaは世界シェア第1位のWebデザインツールです。下記を参考にFigmaのデスクトップアプリのダウンロードと起動確認をお願いします。
※こちらは講義では使用しませんが課題で使用する場合があります。
Visual Studio Codeの使い方に慣れる
下記サイトにて第2回目の講義までにVisual Studio Codeの使い方を練習しておいてください。
１回の動画が３分以内なのでスキマ時間を使って学習しやすいです。
Emmetについて学習する
Emmet とは、HTML や CSS を省略記法で入力できるプラグインです。
Visual Studio Code にはEmmet が標準搭載されているのでEmmetについて学習することで効率よくコーディングすることができます。
タイピングの練習をする
第２回目の講義よりHTML、CSSについての勉強が始まります。
HTML、CSSの勉強では、Visual Studio Codeを使用してタグを入力していきます。
タイピングに慣れていない方はローマ字タイピングの練習をしておきましょう。
実務においてもタイピング速度は仕事効率化のためにとても重要ですので、1日5分でも良いので練習して速いタイピングが出来るようにしましょう。
おすすめサイト
補足事項
おすすめの勉強サイト、書籍を紹介しますので余裕がある方は取り組んでみてください。
おすすめサイト
Progateにつきましては、現在においては多少古い方法も使用されていますが、初心者の方がHTMLやCSSに慣れる、基礎を固めるには最適なサイトです。
ドットインストールはプログラミングを学ぶのに最適なサイトで、１つの動画が3分以内で構成されているので隙間時間を活用して学習できます。Progateより内容が難しめなので講座終了後の自己学習としても活用できます。
おすすめの本
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
有名ブログWebクリエイターボックスの著者Manaさんの書籍です。
初心者向けに優しい解説がされており、内容も新しいです。
１冊手元に置いておくと便利です！