ポートフォリオサイトのトップページ完成【Day8】
こんばんは、ぐちです！
100DaysOfCode、もう1週間経ったの！？
驚きです（白目）
今日のブログはこれの続きです。↓
今日は、ついにポートフォリオサイトの1ページ目をデプロイできました↓
--------------これ↓------------------
--------------これ↑----------------
作成時間は大体4時間くらいです。。。(笑)
モックアップ1時間半、コーディング2時間半くらいかな
慣れている人なら30分ぐらいで出来そうですが・・・('_')
初めて自分でWebページを作ったので、その所感でも書きたいとおもいます。
作って凄く経験値を得られた気がします！
作成の工程
①まずWebデザインの基礎について学び、構想を練る
こちらは本を読んで学びました。
色使い、フォントはどんなものを使ったらいいか、
そもそもWebデザイナーはどんな風に仕事を進めるのか。全部書いてあります！
超おすすめ本です↓
SBクリエイティブ:いちばんよくわかるWebデザインの基本きちんと入門
②デザインカンプをつくる
詳しくは過去記事へ↓
③htmlをコーディングをする
④CSSをコーディングする
⑤レスポンシブ（スマフォ）対応をする
この辺はProgateなどで勉強しましょう！↑
いきなり作るのが難しかったら、模写とかから初めてもいいかもしれないですね！
模写した記事↓
⑥GitHubにデプロイする
こちらを参考に！↓
作ってよかったなと思うところ
・デザインカンプ➡コーディングの流れを知ることが出来た。
・形に残るので、自分はこれぐらいなら出来るぞ！と自信になる。
・教材と違って、周辺知識を身に着けることが出来る。
作って気づいたところ
・自分がデザインできるものは、自分の記憶にあるものだけ。プログラミングだけでなくデザイン自体の勉強・インプットもしなくてはいけないなと気づいた。
・当たりまえだけど、デザインカンプを模写して作るので、デザインカンプの出来は相当大切。あとから修正はかなり面倒くさい。
・自分の中で得意なデザインパターンを暗記すれば、今後使いまわせる
（例えば、ボタンをhoverした時に色を反転させる。とか）
大変だったところ
・レスポンシブ対応のデザインカンプが無かったので、行き当たりばったりで実装した
コーディングがぐちゃぐちゃになったので修正が大変そう&思わぬデザイン崩れがありそう
次回、気を付けること
・画像サイズが大きすぎて、重い。
・スマホ用のデザインを作ってから実装するべき。
自分は結構ウロウロしちゃったのですが、今Progate一通り終わったって感じてる人はぜひ、こういったチャレンジをしてみてください！！
今後は、残りのページを実装していきたいと思います！
次のページはbootstrap付きで実装、その次はCSS AnimationかReactを足して実装したいと思います！
では～
