いずべママ実際に講座の生徒になった私が、Fammのママ向けWebデザイン講座の授業内容や自主学習のリアルをお伝えしたいと思います。
今回からは自分の復習も兼ねて、授業のまとめも入れてみました。
ちなみに当記事を書いたのは、第1回の授業が終わって13日が経過したところです。
Fammのママ向けWebデザイン講座を受講するかどうか悩んでいる方は、ぜひこの記事や関連記事を読んで、自分が受講する姿を想像してみて欲しいです。
Fammのwebデザイン講座の第2回目の授業を終えての感想
最初にバナー課題の総評があって、多くの方が修正まで完了しているという話を聞いて焦りました。私はまだ1回目提出したところだったので・・・
「Visual Studio Code」は少し難しいですが、予習の甲斐あって、なんとか授業について行くことができたといった感じでした。
またしても、あっという間に3時間の授業が終了しました。
Fammのwebデザイン講座の第2回目の授業内容
授業はZOOMです。今回からは15分前から接続可能です。（第1回は30分前から可）
最初に事務局の方が今回使用する「Visual Studio Code」のインストールができているか口頭で確認してくださいました。
第2回目の授業は次のような内容でした。
①第1回講座課題のバナー作成の総評
講師の見本等も見せてくださいました。
②ブラウザの種類
ウェブサイトを作った時は、様々なブラウザに対応できているか確認する必要がある。特に注意すべきはiPhoneで表示されるGoogle ChromeとAndroidスマホで表示されるGoogle Chromeは別物であるということ。なので、スマホの表示を確認する際はiPhoneとAndroidスマホの両方で確認しないといけないそうです。
③「Visual Studio Code」の使い方
事前準備で拡張機能のLive shareは入っていますが、使用方法についてはここで教えてもらいました。発行された自分のアドレスをZOOMのメッセージ機能で講師に送りました。
これを使うと講師が直接、生徒の「Visual Studio Code」に入れるので、画面共有が必要なくて楽チンでした。
④「Visual Studio Code」を使って、実際にHTMLを作る
講師が用意したhtmlファイルは未完成になっていて、入力したい文章は入っていますが、司令がコメントで入っています。その司令に合わせて作っていきます。
前回同様、少し講師が作成したら、次に生徒が同じように操作してみる。の繰り返しです。
今回はLive Shareで講師が画面を確認できるので、出来た時に手を挙げなくてもいいシステムでした。
見出し作成、画像挿入、リンク作成、リスト作成が入っていました。
入力時のポイント
- コード頭の「〈」は入力しない。入力すると予測変換機能が作動しない。
- タグの予測変換機能で、開始タグと終了タグの間に変なタグが入ってしまうことがよくある。原因不明だが、入ってしまったら「command+Z」で不要部分を削除してから進めればよい。
- 入力時には英数入力モードになっているか確認。かなモードだと全角になるからダメ。
- コードの予測変換で前後のコードが出来上がるので、その間に文章を入れる。素材に用意されている文章を使う時に、コピペしなくても、ドラッグ＆ドロップが使える。
- 「Visual Studio Code」画面上で改行をしても意味ない。改行には<br>等が必要。
- 全角スペース（「Visual Studio Code」画面上に黄色の四角が表示される）を入れるとスペースが表示されて、表示が崩れるので入れないようにする。
- <li>タグは連続して使うのでややこしいが、文字が<li>と</li>の間に入っているか注意。</li>と<li>の間に文字を入れてしまいやすい。
⑤ファイル名の付け方
ファイル名はほとんど自由ですが、
- トップページは「index.html」にしないといけない
- .htmlの前には半角英数と-（ハイフン）と_（アンダーバー）しか入らない。
添付画像の名前にも全角は使えないので注意。
⑥課題の説明
今回の課題の説明がありました。
課題のワイヤーフレーム作成にPhotoshop、Adobe XD、Figmaが使用できます。
Adobe XDは既に個別購入が終了しており、AdobeがFigmaを買収したことにより、今後サービスを終了する可能性があるとのこと。ですから、これから勉強するならAdobe XDはおすすめできないそうです。
⑦キャリアコンサルティングの紹介
こちらはFammの事務局の方からの案内でした。
Fammが共同でやっている事業のようです。
グループ1回と個別1回の2時間分が無料でできるということで、講座受講生の7割が利用しているそうです。私も是非利用してみようと思いました。Facebookに掲載されたURLから、講座最終日までの期間限定で申し込みが可能だそうです。
Fammのwebデザイン講座の第2回目の課題について
オリジナルウェブサイトの計画とワイヤーフレーム作成
こちらは提出はありませんが、スマートフォン向けとPC向けの2つのワイヤーフレームを作成します。題材は自由ですが、Photoshop、Adobe XD、Figmaのどれかを使用します。
この3つにつかえる枠のみ素材として用意されていました。
Photoshopは前回の講座で使用しましたが、Adobe XDとFigmaは全く触ったことがないので、これを自習で習得する必要があります。
Fammのwebデザイン講座の第2週目に私がした自習内容について
いずべママ実際に私がやった学習や、時間の都合上できなかったけどやりたかった学習についてお伝えします。
第2回講座の復習
授業の動画を見直したり、ウェブサイトのデザインについての記事を読んだりしました。
Figmaの練習方法
Mayuko Sogaさんの「初心者向けFigmaの使い方」というYouTube動画を観て、自分でも作成してみました。（動画のリンク貼りたかったのですが、Google検索からエラー表示されてしまい、削除させていただきました。ご興味ある方は検索してみてください。）
素材も提供してくれているのですぐに作業できます。ただ、結構時間がかかるので、だいたい機能を把握したところまででやめました。今回はワイヤーフレームを作りたいだけなので、Figmaの使い方さえ解ればOKと割り切った方がいいです。Figmaだけでもデザイナーになれちゃうレベルのツールなので、時間かけ過ぎ注意だと思いました。
メールアドレス登録で、Figmaのショートカット集ももらえたので、活用しています。
他にもFigmaの使い方動画はたくさんYouTubeにあり、いろいろ観てみましたがそんなに観る必要はなかったと感じたので、上記だけ載せておきます。Figmaのプラグインについての動画もたくさんありましたが、ワイヤーフレームを作る程度ならプラグインがなくても、写真のところに四角形を置いておけばいいだけでした。
ワイヤーフレームの作成フロー
ワイヤーフレームを作成するステップをYouTubeで学びました。
実際にデザイナーとして活躍する方がワイヤーフレームを作る姿をみることができ、お仕事に対してもイメージが湧き、モチベーションもアップしました。
「初心者は一箇所づつ作り込みがちですが、全体をざっくり作ってから調整した方が早い」というのは意識しておくべきポイントだと思いました。
続きのパート2も観てくださいね。
第1回課題の続き（お題自由バナーの作成）
こちらは結構、時間かかってしまいました。下の方で作品公開しています。
第2週目の平均学習時間について
第2回目講座〜第3回目講座前日までの7日間の平均学習時間は・・・
4.43時間でした。
先週が3.83時間だったので、1日36分程増えたということになります。
第2回課題の提出作品Before、Afterを公開！
サイズもお題も完全自由なバナー作成課題です。
私はサイズは前回と同じ1080px X 1080pxで子連れ旅行のバナーにしました。
●ターゲット層（誰に向けたバナーか）
普段子供を保育園に預けて働いているママ
●何のバナーか
「仕事の夏休みを使って、子供と旅行に行こう」
夏の旅行喚起、旅行会社の広告を想定
バナーから「子供との思い出づくり、ふれあい、リフレッシュ」を想像させたいと考えました。
●工夫したところ
使いたい写真の色が薄めでしたが、こども関係なのでポップな印象にしたくて、ポップな色の外枠をつけました。
子連れ旅行、夏休みの旅行のバナーはシンプルよりもごちゃちゃしたものが多いので、スイカ等のアイコンを入れました。
もっとアイコンを入れていましたが、まとまりがなくなったので、スイカとサングラス以外のアイコンは削除しました。
●想定している掲載場所
Facebook広告 （旅行、子育て、ワーママ等のターゲティング広告を想定）
第2回課題Before
第2回自由課題After（添削後）
講師からは、
①写真が上に上がり過ぎ感があるので、下げましょう。
②右上の社名が端すぎるので、写真の右端に合わせましょう。
とのアドバイスがあり、以下のように修正しました。
元々、素材写真の右上を使用しており、これ以上写真を下げることができなかったので、上の黄色枠を太くして写真面積自体を減らすことで対応しました。
いずべママ題材が自由だったので、結構悩みました。
素材写真を探すことの難しさも実感しました。
Fammのwebデザイン講座 受講生の過ごし方・講座全体の感想・受講料無料キャンペーンについて
＼こちらの記事に書いてます／
いずべママ今後も実際に授業を受けてみた感想や私の学習内容等も投稿予定ですので、受講を検討している方は是非、引き続き見てくださいね。
＼続きの記事はこちら／
コメント