初心者🔰のWebデザイン独学記録🐣✏️

その日の気づき・疑問点・進捗📝

#Day51-52 デザインを開始🐢

#Day51-52

 

体調不良のアクシデントで、youtubeを視聴するのと、前回のサイトマップにURLをリンクさせるだけで土日終了・・😭

 

体調戻るもいざやろうとPCを開き、何からやるんだっけ!となりもういちどyoutubeに戻る。。。

作業スピードについていけず、見て止めて、同じようにやる、見る、止める、やる。

 

真似して進めながら、揃えることやグループを意識する。

ボタンや見出しが離れすぎていたサイトは見にくかったよなーとデザインレビューを思い出す。

進捗

 

最初にやったWFの時に文字のサイズやコンテンツが大きすぎたんだよな。サイズは文字16とかで設定しなおしたよね・・見出しは30くらいに最終的にしたな・・とWFを見ながら作業。

 

フォントはテキストスタイルをつけて後々変更できるようにした。(多分できていると思う・・)

テキストスタイルつけすぎたかもしれない。4つある。

Google fontの"NotoSansJP"をダウンロードした。

figma上で使えた。これは成功か。

 

途中でプレビューを見てなんだか表示が変。

PCサイズのフレームを使っていたけどなんかサイズ違う?!

オリエンで自分でメモしていたノートを見ると

【日本はデスクトップ1920✖️1080】【コンテンツは1000-1200くらい】🧐

このサイズとずれていたので直す。

でもひろさんはyoutubemでデスクトップフレームサイズでやっていた。

でもここら辺は差があるってオリエンで言ってた。

 

ヘッダーの検索ボックスを、無料素材からフォトピーで色彩を変えて使ってみた。

色彩の調整ができる時とできない時があった。

取り込み方の問題だろうか。

ヘッダーに関してはサイト全体の色味を決定する段階でまた変更する可能性あり。

今なぜかプレビューでアイコンたちが表示されない。なんで😵‍💫?

→進捗pngでエクスポートしたらアイコン出た。😵‍💫💦

メモ:エクスポートしたのみたら上のロゴの位置とフッター揃ってないから直す。

コンテンツ幅グリッド使ってやってるけどメイン画像に対して検索ボタン小さすぎ?!メイン画像が大きすぎなのかも。もう一度これはyoutubeで手本見よう。

 

 

あと前のWFの時はプレビューしたらPC画面のような表示だったのに今回はそのまま表示。なんで😵‍💫?サイズ設定がまだ変なのか?

WFの時のプレビュー表示

今回のプレビュー表示

 

スロースタートになってしまったが作業し始めたらまたやる気スイッチが入ったのでここから頑張ろう💪😎

 

まだWFを揃えただけのような進捗なので、次は素材を探してなんとなく近づけていきたい。

youtubeでも最初はWFで画像入れながら調整してた。

今回思ったが、作業も時間がかかるけど素材探しが大変すぎ。時間がかかる。

あとフォトピーを使いこなせていなくてこれまた時間がかかる🤔

慣れもあるきっと!!🌈