【WEBデザイン学習日記-93】 ポートフォリオのレスポンシブ対応難しい・・・

12/15（金）～の学習日記です。ポートフォリオのレスポンシブ対応に備えてまずはすっかり頭から抜けている内容を学習動画で復習。FigmaのデザインカンプはPC用しか作成してないので、SP用にもデザインを作成してからコーディングでレスポンシブ対応することにしました。長期戦になりそうですが年内完成を目指し少しずつ進めます。

☆★☆　☆★☆　☆★☆

2023年12月15日（金）　レスポンシブ対応デザイン：2時間半

ポートフォリオのレスポンシブ対応をPCのデザインを見て頭でSPデザインをイメージしながらコーディングしようと思いましたが、そんな器用なことは私にはできないと気づき、昨日からFigmaでSP用にデザインを起こし始めました。
PC用のデザインを崩し過ぎないように、カラーや雰囲気、余白感は保ちながらデザイン。2時間半でざっくりですが出来上がりました。フォントサイズや余白などは調整が必要ですが💦

WEBサイトの制作ってつくづく根気がいる作業だなぁと感じます。私はデザインも好きですが今は引き出しが少なすぎてアイデアがなかなか浮かばず、ちょっと苦しみながらデザインしている感じです。今はどちらかと言うとコーディングの方が楽しくて好きですが、プロパティやルールなど覚えることが多く、奥深すぎて何度も同じようなところでつまづきながら苦戦中。数年後にはささっとコーディングできるようになれるように地道に頑張ります。苦手なところは繰り返し反復練習するのみ。

☆★☆　☆★☆　☆★☆

2023年12月17日（土）　レスポンシブ対応デザイン：ながら作業なので30分ぐらい

今日は終日外出していました。
夜は観たかったWBCの映画「憧れを超えた侍たち　世界一への記録」をテレビで放送するということでこたつで”ながら作業”。普段仕事でも家でも２つの画面を使って作業するのに慣れているので、こたつでPC画面だけでの作業は作業効率が下がります💦

市場調査をしながら観ていましたが、どうしても見入ってしまい手が止まるので断念。昨日仕上げたSP用のデザインの余白やフォントサイズの調整をしながらWBC映画鑑賞することにしました。メキシコ戦の大逆転劇、そして決勝戦の大谷とトラウトの対決。WBCの感動が再びよみがえりました。

さて、SP用のデザイン調整終わりましたが果たしてこれをうまくコーディングできるだろうか・・・明日は納期の市場調査を午前中に終わらせて、終日ひきこもってレスポンシブ対応のコーディングに再度挑戦したいと思います。

☆★☆　☆★☆　☆★☆

2023年12月18日（日）　レスポンシブコーディング：3時間

今日は気温がぐっと下がり、風も強くて寒いです⛄
今年は暖冬だな～このぐらいの寒さなら余裕と思ってたら急に寒くなってきました。今まで年中温暖な気候の東南アジアにいたので、日本の冬の寒さは堪えます。。。でも夏より冬の方がまだ耐えられるかも。

朝は副業の市場調査を仕上げて納品し、ポートフォリオのレスポンシブ対応のコーディングに取り掛かりました。
昨日まで何をどうしたらいいのかさっぱり分からなかったのですが、自分なりに座学やGoogleで検索して調べたことを思い出しながらコーディングをしてみると、少しだけできました。文字の可変や画像の縮め方などがとても難しい・・・

☆★☆　☆★☆　☆★☆

2023年12月19日（月）　レスポンシブコーディング：1時間45分

今日もレスポンシブコーディングの続き。昨日と同じような箇所でつまづいています。今日新しい市場調査の案件をいただきましたが、レスポンシブコーディングに集中したかったので、年末年始休暇までお断りさせていただきました。

学習動画のハンバーガーメニューのコードをコピペして、自分のデザインに合うように微調整してハンバーガーメニューはできましたが、スマホナビは難しすぎて最後に残しておこうと思います。
レスポンシブ対応のコーディング難しいです。。。ある程度自分でできるところまで頑張って、どうしてもできないところはリストアップして、先生に質問して解決しようと思います。

☆★☆　☆★☆　☆★☆

＜12/15（金）～12/23（土）の学習目標＞　
・レスポンシブ対応（TOPと下層ページ２つは終わらせる）→まだまだ先は長い

＜今後の目標＞
★　2023年12月末までにポートフォリオを完成させ、WEBデザインでの副業案件を１つ取る！
★　2024年3月までに今までの経験を活かし、今後にもつなげられる仕事に転職する
★　WEBデザインの学習と制作活動は地道に続けながら少しずつ実績を積む
★　１月28日のTOIEC試験で800点以上を取る

#転職
#海外
#オンライン
#Webデザイン
#主婦
#制作
#Photoshop
#未経験
#学習日記
#クリエーターズファクトリー
#デザイン
#Figma
#初心者
#コーディング
#ポートフォリオ