いずべママ実際に講座の生徒になった私が、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で学びました。
実際にデザイナーとして活躍する方がワイヤーフレームを作る姿をみることができ、お仕事に対してもイメージが湧き、モチベーションもアップしました。
「初心者は一箇所づつ作り込みがちですが、全体をざっくり作ってから調整した方が早い」というのは意識しておくべきポイントだと思いました。
コメント