いずべママ実際に講座の生徒になった私が、Fammのママ向けWebデザイン講座の授業内容や自主学習のリアルをお伝えしたいと思います。
ちなみに当記事を書いたのは、第1回の授業が終わって6日が経過したところです。
Fammのママ向けWebデザイン講座を受講するかどうか悩んでいる方は、ぜひこの記事や関連記事を読んで、自分が受講する姿を想像してみて欲しいです。
Fammのwebデザイン講座の第1回目の授業を終えての感想
初回はFamm事務局の方が30分前からZOOMを繋げて待っていてくれました。素材ファイルがダウンロードされているかの確認や、画面共有の練習をしてくださいました。休憩も1時間おきに10分弱くらいありました。クラスルーム感があって、少しリラックスできました。
授業は3時間とは思えない程、あっという間に終了しました。密度が濃い感じです。
私は自分の画面を共有して先生に教えてもらう場面が3回ほどありましたが、他の方をお待たせしているので少し焦りました。でも他の方も何回か画面共有していたし、それくらい時間を取っても授業に支障をきたす程ではないと思います。
画面共有した時に他の方には映りませんが、ZOOMの画面が一番上に表示されてしまうのでクリックしないといけないボタンが隠れてしまったりして、余計に焦りました。ZOOMの表示位置の移動方法は押さえておく必要がありそうです。（ZOOMのタブをクリックしたままドラッグで動きます）
Fammのwebデザイン講座の第1回目の授業内容
Fammの授業は1ヶ月と言っても、3時間×5回の計15時間しかありません。
いずべママそんな短時間で、お仕事を受注できるようになるの〜！？
って私も疑問に思っていました。
何しろ、授業では最初のところだけやって、後は自習でカバーする形です。
授業はZOOMです。既に自己紹介会で顔合わせを行なった後なので、1回目でも開始時間になるとすぐに授業は開始しました。
第１回目の授業は次のような内容でした。
①デザインの4大原則（近接・整列・強弱・反復）
②デザインソフト「Photoshop」の使い方（立ち上げ方から）
③Photoshopを使って一緒にバナーを作る
②③については、講師が数手順やったのを見てから、生徒が同じように自分のPCでやってみます。
受講中は生徒は音声をミュートにしているので、講師と同じところまでできた人は人差し指を立てて手を挙げます。（「1歳」って言う時の指です）
わからない人は普通に手を挙げたり、ミュートを外して講師を呼んだりして教えてもらいます。画面の共有もできるので、解決が難しそうな時は自分の画面を共有して、直接講師に教えてもらえます。
もちろんその間、既にできている方は待つことになりますが、わからないまま置いていかれることはありません。スモールステップで、一緒に進めていきます。
Fammのwebデザイン講座の第1回目の課題について
Photoshopでのバナー作成・提出
早速、課題が出ました。講師の作った応用動画を見たり、講座で作成したバナーをいじってみるというもの以外にも、バナーを2つ作って講師に提出する課題があります。1つは素材や必ず配置する文言等の指定があるものですが、もう1つは完全に自由です。
授業中は講師の真似をして見本と同じバナーを1個作っただけなのに、課題では自分でオリジナルのバナーを作成しなくてはいけません。つまり、バナー作成手順（リサーチやラフ作成等）や加工技術は自習で学ぶ必要があります。なお、次回の講座はHTMLについてなので、もうPhotoshopのバナー作成はやりません。
期限は講座翌月10日までとなっているので、次回の講座までに提出できなくても大丈夫ですが、次回の講座でも次の課題が出るので、早めに手をつけておかないと課題が溜まってしまう可能性があります。
ProgateでのHTMLやCSSの学習
Progateは無料で学べるプログラミングのサイトです。アプリもあります。
HTMLとCSSについては、初級編が無料で中級編以上は有料会員のみのコースとなっています。
次回講座までに初級編をクリアするのが課題です。
とてもかわいいキャラクターが出てきますが、問題部分は正解するまで先に進めないというスパルタです。無料でできるので、HTMLって何？って方はイメージを掴むためにやって見てほしいです。
Fammのwebデザイン講座の第1週目に私がした自習内容について
いずべママ実際に私がやった学習や、時間の都合上できなかったけどやりたかった学習についてお伝えします。
第1回講座の復習
復習用動画や、講座で作成したバナーをさらに良くするための応用動画を講師が用意していたので、それを見ながら作業しました。
デザインの4大原則の理解
これは第1回の授業の前にしておくべきだったと思いますが、原則を理解して「良いデザインとは何か」を押さえておく必要があります。
私は多くのサイトでおすすめされている以下の2冊の本を急いでAmazonで購入して、読みました。
Webデザイナーの方は必ず持っている本らしいので、中古でもいいので買っておくことをおすすめします。
ノンデザイナーズ・デザインブック
「文字の中央揃えは理由がある場合にしか使ってはいけない」という教えがあり、これだけで同期よりレベルの高いバナーが作れたのではないかと思います。
良いデザインと悪いデザインの比較がたくさんあり、何が違うのかクイズ形式になっていて鍛えられます。後ろのページにきちんと回答も載っています。
ただ、英語を日本語に訳した感が強く、日本語訳文章にアレルギーのある方には読みづらいのが難点です。
ポチップ
なるほどデザイン
フルカラーで中は写真や絵が多く、雑誌みたいでとても読みやすいし、眺めていて楽しい本です。
ポチップ
どちらも、Kindleアプリをインストールすれば試し読みができます。
バナー作成の練習方法
YouTube動画
こちらの動画を観て、自分でも作成してみました。
素材を探すところからやってくれていて、プロのデザイナーが素材を探す時にどんなことを考えながら探しているかもわかります。定規の使い方も参考になりました。
Photoshopの技術向上
私は「フォトショの5分ドリル」の動画を参考に少しずつ勉強しています。
ポチップ
kindleアプリを入れれば試し読みができますが、実はこの試し読みページに特典動画や素材のURLが掲載されているので、本を買わなくても解説動画を観ることができます。
バナートレース
オリジナルのバナーを作成する前に「バナートレース」と言って、既存のバナーと同じものを作ってみて、その技術を習得する練習をするのが一般的なようです。
この講座内ではその時間を取るのは難しいのでまだ取り組めていませんが、講座終了後にはやってみたいと思います。
ただ、どんなバナーをお手本にしたらいいのかがわからない。そして、そのバナーに似せて作るための素材集めに時間を取られる。という問題を解決するための専用の本がありました。ただ解答は掲載されていないそうなので、わからない時はネット上で回答を集めることになるみたいです。
ポチップ
バナーの作成フロー
バナーを作成するステップをYouTubeで学びました。
YouTubeのサムネデザイン方法として紹介されていましたが、他の方のブログでバナー作成にも使えると紹介していましたので参考にしました。（私が観た動画は削除されたみたいです）
①競合リサーチ
同じ業種のバナーを調べて、業界の常識を探る。自分が素敵だと思うバナーを集める。
私はお手軽に「ピンタレスト」を使いました。
②優先順位付け
デザインの4大原則の「強弱」に関わるところです。一番目立たせたいのはどれかを考えます。
③ラフ作成
いきなりデザインソフトを使うのではなく、紙やメモアプリ等に文字や写真の位置を書いてみます。
④デザイン作成
実際にPhotoshop等のデザインソフトを使って作成します。
⑤作り込み
バランスを見ながら、効果等を足していきます。
第1週目の平均学習時間について
第1回目講座〜第2回目講座前日までの6日間の平均学習時間は・・・
3.83時間でした。
目標1日3時間なので、それ以上はできていました。
第1回課題の提出作品Before、Afterを公開！
第1回のバナー制作課題は、香水のバナーです。ルールは以下の通り。
①以下の4フレーズを入れること。
- 春、香る。
- 4月1日 新登場
- Twitterフォロー&RTキャンペーン
- 10名様にプレゼント！
②サイズ 1080px X 1080px
③香水のブランドカラー #ff67a0 を入れること。
④配布の香水パッケージ写真と社名ロゴを入れること。
提出作品Before
提出作品After
講師からは
①香水や「春、香る」の文字の光彩（バックの白い光）を減らす。
②右上の社名「COSMETICS」の背景色をなくす。
の2点のアドバイスがあり、以下のようになりました。
いずべママ初めてのバナー作品です。がんばりました。
Fammのwebデザイン講座 受講生の過ごし方・講座全体の感想・受講料無料キャンペーンについて
＼こちらの記事に書いてます／
いずべママ今後も実際に授業を受けてみた感想や私の学習内容等も投稿予定ですので、受講を検討している方は是非、引き続き見てくださいね。
＼続きの記事はこちら／
コメント