私はウェブカツというプログラミングスクールの女性割引を利用してプログラミングを学習しています。
ウェブカツでプログラミング学習を始めたのは2019年3月19日ですので、プログラミング学習を初めて約7ヶ月半が経ちました。
ウェブカツの女性割引を利用する場合は「毎日のプログラミング学習の進捗をツイートする」「15日と月末にプログラミング学習の進捗報告ブログ記事を書く」というのが条件になっています。
プログラミングスクールに関する記事にはアフィリエイト報酬を得るための記事が多いのですが、ウェブカツの女性割引適用者はアフィリエイト対象外なのでこの記事はアフィリエイト記事ではありません。
ウェブカツでプログラミング学習を初めて7ヶ月、やっっっっと本格的なアウトプットを始めましたので、今回の報告ブログではアウトプットの過程を書きたいと思います。
アウトプット始めました
HTML＆CSSの初級を終えた後に、サイト模写はやりましたが、それ以降アウトプットはせずにここまできました。
アウトプットをしてこなかったのは、平日の勉強時間は1時間から2時間しか取れない、土日は子どものために時間を取られるので勉強できない日が多く、アウトプットをしていたら最後までたどり着くのに相当な時間がかかるのではないか・・・というのが理由です。
js・jQuery部上級が終わり、楽しみにしていたLaravel部に入ろうとしたのですが、さすがにこの辺で一度アウトプットをしておこう！と思い、アウトプットに入りました。
そしたらその直後にかずきちさんがこのようなツイートをされていました。
はやる気持ちを抑えられず卒検突入して戦意喪失して去ってく人いるから
✅webサ部でOP（アウトプット）済
✅obj指向部でOP済
✅FW部でOP済
✅html部上級でOP済
✅js部上級でOP済
✅Laravel部視聴済（OP済だとなお良し）
✅テスト部視聴済
✅鬼練全クリこの状態になるまで受けるな
— かずきち@プログラミングスクール経営者 (@kazukichi3110) October 15, 2019
危うく「卒検突入して戦意喪失して去っていく人」になりそうでした。。。
卒業試験のためには各部でアウトプットが必要になりましたので、各部が終わったらアウトプットをその都度するというのが一番効率がいいと思います。
作りたいWEBサービスを考える
まず最初に作りたいWEBサービスを考えます。
これは以前から作りたいと思っていたものがあったので、あまり迷うことなく考えることができました。
ワイヤーフレームを作る
次にワイヤーフレームを作っていきました。
ワイヤーフレームを作るのに便利なツールがないか検索し「prot」というツールを使って作ることにしました。
マニュアルや説明を見なくても感覚的に使えましたし、無料の範囲でも十分な機能が備わっていました。
テーブル設計
次はテーブル設計です。
WEBサービス部の解説を見返しながら、設計していきました。
以前、情報処理系の資格を勉強した時に（すごくざっくりですが）正規化について勉強したことがありますし、仕事でもいろんなデータベースを見てきましたので、ここについてはそんなに苦戦はしなかったです。
そう、ここまでは順調だったのです。
画面デザイン
そしていよいよ画面デザインですが、、、、ここで手が止まりました。
デザイン、本当に苦手なんですよ。できる気がしない。
ウェブカツ生のツイートでも「女性部員はデザインすごい！」というツイートをよく見かけますが「女性部員ってひとくくりにしないで〜〜。私は苦手なんです！」と心の中で泣き言を言うくらい、本当に苦手で。
でも、もう苦手とも言っていられないので、ウェブカツのブログ記事を参考に取り組み始めました。
まずはツール選び
ウェブカツのこちらのブログ記事で「フォトショ」と「イラレ」の違いを解説されています。
恥ずかしながらこれまで「この2つよくわからんわー」って思っていたんですが、この記事でよく分かりました。
この二つもともとは商品名の通り「写真加工」とイ「イラスト作成」のためのソフトなわけですが、画面デザインを作るのだけであれば高機能すぎるそうです。
そこで最近できた画面デザイン用に「AdobeXD」というソフトが登場したんですね。
しかもAdobeXDは無料で十分な機能を使えるということで、早速AdobeXDをインストールしました。
AdobeXDについて学ぶ
早速色々動かしてみたのですが、さすがにいきなり使い出すのにはハードルが高かった。。。
なので、最初に公式チュートリアルを見ました。
公式チュートリアルにはたくさんのコースがあるのですが、とりあえず「XDの基本を学ぶコース」から始めることにしました。
すごく丁寧な解説だったのですが、動画を見ながらAdobeXDを操作するのがなかなか煩わしくて。
ipadで動画を表示して、Macbookで操作していたのですが「あれこの前の操作はどうだっけ？」と思って動画を戻そうとした時に、思ったところに戻らずに無駄に時間がかかる、、、という状態で「操作しているより動画を操作している方が時間長いやん！」みたいになってしまいました。
で、他に何かいい方法がないか探してみたところ「AdobeXDスターターキット初級編」「AdobeXDスターターキット中級編」というのを見つけました。
これは、AdobeXDで使うXDファイルをAdobeXDで読み込み、AdobeXDの画面上で解説を読みながらそのまま実際に操作を練習できるようになっていました。
これがかなり分かりやすくて、30分くらいで基本的な操作を覚えることができました。
私は割とチュートリアルや説明書は見ずに直感で使っていくタイプなのですが、AdobeXDは多機能で便利機能がたくさんあるので、チュートリアルやなどはやっておいた方が後の作業を効率良く進めることができます。
これからAdobeXDを使われる方は公式チュートリアルかスターターキットで基本操作を学ぶことをオススメします！
配色を決める
基本的なAdobeXDの使い方を覚えたので、次に配色を決めました。
自分で配色を決めるようなセンスは持ち合わせていないので、こちらから自分の作りたいイメージに違いサイトを見つけ、メインカラー、サブカラー、アクセントカラーを決めました。
フォントを決める
次にフォントです。
フォントも先ほどのサイトから自分の好きなフォントを見つけ、英字フォントと日本語フォントを決めました。
またフォントサイズもこちらの記事を参考にフォントサイズを決めました。
ここまで決めてやっと画面デザインが完成しました！ふぅ長かった。。。。だいたい4、5時間くらいかかりました。
HTML&CSSでマークアップ
完成した画面デザインを元にマークアップを始めました。
今回はBEMを使ってCSSを設計することにしました。
Qiitaの記事やいろんな方がブログにまとめられているので、参考にしながらCSSを設計しています。
アウトプットは大切
やっぱりアウトプットは大切です。
なかなか思うように前に進まなくて「私プログラミングに向いてないのかも」と思うこともありますが、最初のアウトプットなので「不安になるのは当然」と思って進めています。
不安にはなりますが、すごく楽しい。
画面デザインも苦手でしたが、いい感じに画面ができたときは嬉しいし、HTMLとCSSも徐々に画面が出来上がっていく過程が楽しい。
楽しいからプログラミング学習の集中力も高まるし、時間もあっという間に過ぎ去ります。
楽しい分、まとまった時間が取れないことが本当に悔しい。
平日の2時間前後の時間と休日の細切れ時間では全然進まないし「あれ、さっきどこまでやったかな？」という状態になってしまうし。
とはいっても、子育てして働いてたら誰もが直面する課題で、私と同じような状況でアウトプットをきちんとされている方も多くいらっしゃるので、自分の置かれた状況を受け入れながら少しずつアウトプットを進めて行きます！！
コメント