ひぐのカメラとプログラミング日記

大学院生の日記です。主にプログラミングとカメラについて。最近はデータ分析・Kaggleにハマっています

ポートフォリオサイトのトップページ完成【Day8】

こんばんは、ぐちです!

 

f:id:zerebom:20180626214345p:plain

 

100DaysOfCode、もう1週間経ったの!?

驚きです(白目)

 

 今日のブログはこれの続きです。↓

zerebom.hatenablog.com

 

今日は、ついにポートフォリオサイトの1ページ目をデプロイできました↓

 

--------------これ↓------------------

Higu`s Portfolio

--------------これ↑----------------

 

 

作成時間は大体4時間くらいです。。。(笑)

モックアップ1時間半、コーディング2時間半くらいかな

 

慣れている人なら30分ぐらいで出来そうですが・・・('_')

 

 

初めて自分でWebページを作ったので、その所感でも書きたいとおもいます。

作って凄く経験値を得られた気がします!

 

 

作成の工程

①まずWebデザインの基礎について学び、構想を練る

 

こちらは本を読んで学びました。

 

色使い、フォントはどんなものを使ったらいいか、

そもそもWebデザイナーはどんな風に仕事を進めるのか。全部書いてあります!

超おすすめ本です↓

SBクリエイティブ:いちばんよくわかるWebデザインの基本きちんと入門

 

②デザインカンプをつくる

 詳しくは過去記事へ↓

zerebom.hatenablog.com

 

③htmlをコーディングをする

CSSをコーディングする

⑤レスポンシブ(スマフォ)対応をする

この辺はProgateなどで勉強しましょう!↑

いきなり作るのが難しかったら、模写とかから初めてもいいかもしれないですね!

 模写した記事↓

zerebom.hatenablog.com

 

 

 

GitHubにデプロイする

こちらを参考に!↓


prog-8.com

 

 

 

 

 

 

作ってよかったなと思うところ

・デザインカンプ➡コーディングの流れを知ることが出来た。

・形に残るので、自分はこれぐらいなら出来るぞ!と自信になる。

・教材と違って、周辺知識を身に着けることが出来る。

 

 

作って気づいたところ

・自分がデザインできるものは、自分の記憶にあるものだけ。プログラミングだけでなくデザイン自体の勉強・インプットもしなくてはいけないなと気づいた。

 

・当たりまえだけど、デザインカンプを模写して作るので、デザインカンプの出来は相当大切。あとから修正はかなり面倒くさい。

 

・自分の中で得意なデザインパターンを暗記すれば、今後使いまわせる

(例えば、ボタンをhoverした時に色を反転させる。とか)

 

大変だったところ

・レスポンシブ対応のデザインカンプが無かったので、行き当たりばったりで実装した

コーディングがぐちゃぐちゃになったので修正が大変そう&思わぬデザイン崩れがありそう

 

次回、気を付けること

・画像サイズが大きすぎて、重い。

スマホ用のデザインを作ってから実装するべき。

 

 

 

自分は結構ウロウロしちゃったのですが、今Progate一通り終わったって感じてる人はぜひ、こういったチャレンジをしてみてください!!

 

 

 

今後は、残りのページを実装していきたいと思います!

次のページはbootstrap付きで実装、その次はCSS AnimationかReactを足して実装したいと思います!

 

 

では~

 

google-site-verification: google1c6f931fc8723fac.html