【WEBデザイン学習日記-124】コーディングスキルをもっとアップしたい
2024/5/6（月）～の学習日記です。クラウドソーシングサイトでコーディング案件のトライアルに挑戦できる機会をいただきました。ボリュームもあり、初めてのBEM形式でのコーディングで苦戦しました。
☆★☆ ☆★☆ ☆★☆
2024年5月6日(月) トライアルのコーディング作業3日目：9時間
今日はトライアルコーディングの納品日（納期は着手日から３日以内）。朝から9時間かけて休み休みコーディングをしていましたが、BEMで書くのが初めてなのとFigmaの開発モードが使えなくなり効率が落ちたこと（今年から有料になりました💦）、自分のコーディング経験不足から（これが一番大きい）、やってもやっても終わりが見えず。
夕方に右手首に痛みを感じ始めたので、このまま深夜まで頑張っても今日中の納品は無理だと判断し、正直に経験不足により期日までに終わらせられないことへのお詫びをした上でできたところまでのデータとテスト環境リンクを送り納品させていただきました。無念。。。
PC画面のコーディングはほぼ完成し（２つだけどうしてもCSSが効かなかったところあり）、ホバーもかけられたのですが、複雑なレイアウトのレスポンシブ対応に苦戦しました。PCサイトをコーディングする際にレスポンシブのことも念頭に置いて可変しやすいコーディングをするスキルが必要です。明日からも少しずつこの課題のトライアルコーディング作業を続け、せっかくなので最後までやり遂げたいと思っています。分からないところはスクールのSlackで質問しようと思います。
今回トライアルに挑戦させていただき、思うように作業が進まず、書けなくて本当に苦しく大変でした。1年学習しただけなので仕方ありませんが、改めて自分の未熟さを痛感。もっとコーディングの練習をして数ヶ月後、数年後にはもっとサクサク書けるようになりたいです。
夜、副業のサイトを見ていると自分にもできそうなコーディング案件を見つけたので早速応募してみました。するとすぐにお返事をいただき、案件の内容資料をいただきました。自分でもできそうなので、是非担当させていただきたい旨を返信しました。採用されるといいのですが。
☆★☆ ☆★☆ ☆★☆
2024年5月7日(火) トライアルのコーディングの続き：3時間半【コーディング】
長いGW休暇も終わり、今日からまた日常生活に戻りました。
GW中は転職活動がほぼストップし、WEBの方に時間を割いていたのでまた今日から気持ちを引き締めて転職活動の再開です。
昨晩応募したコーディングの副業案件ですが、私の返信が遅く、時間差で別の方と契約が決まってしまったとのこと😢取れそうな案件だっただけに非常に残念です。次回はチャンスを逃さないように取引メッセージをメールで通知されるように設定をし直しました。
午後からはコーディングのトライアル課題の続きを少ししていました。レスポンシブ対応をしているのですが、PC画面でかけたpositionをSP画面で解除するにはposition: staticをかけるなど、日々新しいことを学べます。レスポンシブ対応に未だに苦戦中で今日中には終わらせられず。今週中に終わらせられるように頑張ってみよう。
夜はレスポンシブ対応で文字の可変に頭を悩まされているため、基礎をもう一度おさらいしようと思い、絶対値、相対値の復習をしました。em, rem, px, %, vh, vwについて下記のサイトでとても分かりやすく解説されていて理解が深まりました。
☆★☆ ☆★☆ ☆★☆
2024年5月8日(水) バナー模写：20分【デザイン・制作物】
今日はGW中に完全に止まっていた転職活動を再開。トライアルコーディングがひとまず終わったので（中途半端な形になってしまいましたが、勉強のために時間がかかっても引き続きやります）燃え尽き症候群のようになり、モチベーションが少し下がり気味。GW前に応募していた求人の書類選考結果が出て、ほとんど書類選考落ちでした。今日は二つ新たに応募しましたが、心惹かれる求人がなく、思うように進まない転職活動に正直焦ります。
今日は求人欄チェックで１日潰れ、夜にバナー模写を始めましたがどうしても集中力が続かず20分で断念。明日はもっとメリハリをつけて時間を過ごそう。
☆★☆ ☆★☆ ☆★☆
2024年5月9日(木) BEMとSassについての座学＆カフェサイトのコーディング修正：3時間50分【コーディング】
今日は昼過ぎまで求人欄チェック、未経験でも応募できるWEB関連の求人を見つけたので４社応募してみました。書類通過はかなり厳しいことを覚悟の上で英語関連の仕事と並行してWEB関連（コーダー）の求人にも応募し続けようと思います。
ここ数日トライアルコーディングのレスポンシブ対応（あくまでも自主学習）がうまくできずかなり行き詰っているので、一旦休止してスクールのコーディング課題（シンプルなレイアウトのもの）のレスポンシブ対応に挑戦することにしました。いきなりレベルを上げるのではなくて徐々にレベルアップしていこうと思います。
今回トライアルコーディングで初めて学んだBEMの書き方に慣れるためとスタイルシート言語のSCAAを詳しく学ぶためにスクールのtorikumuのサイト動画を見て学習することにしました。Sass（サス）というスタイルシート言語にはSASS記法とSCSS記法の２つの記法があり、SCSSが広く普及しているようです。今までCSSの書き方しか知りませんでしたが、SCSSはCSSの課題を解消するために開発されたCSSの進化版の言語のようです。
コーディング課題のカフェサイトのPC版のコードは既に完成済みであとはレスポンシブのみなのですが、BEMとSCSSの書き方をしっかり学んでから、こちらの書き方でコード修正をしていこうと思います。
☆★☆ ☆★☆ ☆★☆
2024年5月10日(金) バナー模写：50分【デザイン・制作物】
今日は朝から夕方まで転職活動。途中海外経験がある人に特化した求人を取り扱う人材紹介会社とZoom面談。やはり今後の転職活動の方法を再度考えなおした方が良さそう。特に私が住んでいるエリアは求人が少なく、今はフルリモートの求人も少ないとのこと。キャリアカウンセラーの方のアドバイスにより、転職サイトに合わせてindeedでも求人をチェックしてみることに。今日は６社応募しました。ほぼ終日求人欄チェックをしていて肩ががっちがちです💦
今日は学習時間は少なめ。torikumuのバナートレース30本ノックの最後30日目のトレースを50分ほどしました。先日Photoshopの応用編で学んだ操作スキルが役立っています。けっこう細かいデザインなのでもう少しかかりそうです。
☆★☆ ☆★☆ ☆★☆
2024年5月11日(土) CSS設計の座学＆カフェサイトのコーディング書き直し：3時間【コーディング・制作物】
今日は休み休みですが、求人欄をチェック＆応募したり、torikumuの動画でCSS設計について（SMACSS、FLOCSS、BEMなど）学びました。先日既にコーディング済みのコーディング課題のカフェサイトをFLOCSSスタイルでフォルダを作り、BEMスタイルでクラス命名をし、コードを書き直し始めました。以前はスクールで習った方法でCSSはreset, base, styleの３つで作っていますが、コードが長くなりすぎて該当するコードを探すのが大変でしたが、FLOCSSのスタイルでフォルダ分けするととてもすっきりし、修正作業が楽だということが分かりました。
☆★☆ ☆★☆ ☆★☆
2024年5月12日(日) バナー模写１つ、カフェサイトコーディング修正：4時間半【デザイン・コーディング・制作物】
今日は転職活動は少しお休みし、WEBデザイン学習を楽しむことにしました。今朝はtorikumuのバナートレース30本ノックの最後のバナーの模写をしました。前回の続きから始め、2時間ほどで模写ができました。これで去年5月から少しずつ取り組んだバナー模写課題30本全部終わりました！
（難しかったところ）
◎フォント探し（マッチフォントを使いましたがやはり難しい）
◎画像やイラストの切り抜き（数が多く、一つ一つ切り抜いく作業が大変だった）
（気づき・新しく学んだこと）
◎背景の青海波、波線、わかめのイラスト、色使いから海のイメージをバナー全体から感じることができる。
◎赤みがかったオレンジ色を補色に使うことでアイキャッチになっている
◎切り抜きの画像、イラスト、手書き風の文字を使うことで全体的に可愛らしく、親しみやすい印象を受ける
背景の青海波（せいがいは）の模様は下記のURLから無料でダウンロードでき、パターン登録して背景にすることができました。少し色味はちがいますが💦今回、波線の作り方も学ぶことができました。
https://bg-patterns.com/?p=328
お昼過ぎからはカフェサイトのコーディング修正（BEM、FLOCSS）。シンプルなレイアウトのものなのでレスポンシブ対応まで修正完了しました。
ここ数日、時間割での学習が完全に崩壊していましたが、今日は時間割に沿って夜は「制作物」に取り掛かりました。近所のレストランのサイトリニューアル（架空）のデザインブラッシュアップの続きをしました。Photoshopの応用を学んでいる時に、無料のイラストサイトでダウンロードしたものを切り取って色を変えたりして使えることを学んだので、さっそくその方法を使い、ドライフラワー風のイラストセットを使ってみました。こういう無料イラストをうまく活用してもっと洗練されたデザインにブラッシュアップしていこうと思います。
今週BEMやFLOCSSのコーディングを学んでいて思ったこと。去年の年末に仕上げた自分のポートフォリオですが、再度デザインブラッシュアップし直し、コードもBEMとFLOCSSで書き直してみようかなと思います。作って終わりではなく、どんどんブラッシュアップしていこうと思います。色んなデザインに触れている今、去年よりはいいデザインができるような気がします。
今週のWEB学習時間は24時間45分でした。週の学習目標時間10時間達成です。
☆★☆ ☆★☆ ☆★☆
＜5/6（月）～5/12（日）に出来たこと＞
【デザイン】バナートレース30本ノック最後の1つ
【デザイン】近所のレストランのサイトリニューアルデザインブラッシュアップ（架空）
【コーディング】トライアルのコーディングに挑戦
【コーディング】BEM, FLOCSS, SASSについての座学
【コーディング】コーディング課題のカフェサイトのコード書き直し
＜転職活動状況＞
◎4/8に4社応募（WEB関連） →2社書類選考落ち
◎4/10に2社カジュアル面談応募（WEB関連）→1社書類選考落ち
◎4/10に副業案件１件に応募（コーディング）→書類選考落ち
◎4/12に２社応募（WEB関連、英語関連）
◎4/15に2社応募（英語関連）→1社書類選考落ち
◎4/18に3社応募（英語関連）→3社書類選考落ち
◎4/22に1社応募（英語関連）
◎4/23に1社応募（英語関連）→書類選考落ち
◎4/24に3社応募（東南アジア関連）→1社採用枠埋まり済み、1社選考条件満たさず
◎4/25に1社応募（WEB関連）→書類選考落ち
◎4/25にコーディングの副業案件1件応募（コーディング）
◎4/26に5社応募（英語関連）→書類選考落ち3件
◎5/1に副業案件1件に応募（コーディング）→トライアルに挑戦するも期限までに終えられず断念。努力を認めていただいたのかその後業務委託契約を締結いただけました
◎5/6に副業案件1件に応募（コーディング）→時間差で契約を逃す
◎5/8に2社応募（東南アジア関連）→書類選考落ち1社
◎5/9に4社応募（WEB関連）
◎5/10に6社応募（英語・WEB)→書類選考落ち１社
◎5/11に1社応募（英語）
→35社の求人に応募
（書類選考落ち17社、返信なし6社、その他返信待ち）
→4つの副業案件に応募
（書類選考落ち３つ、１件トライアル後、業務委託契約へ）
＜WEBデザイン学習の時間割＞
☆★☆ ☆★☆ ☆★☆
＜今後の目標＞
★ 2024年6月末までにWEBデザインでの副業案件を１つ取る！ →トライアルに挑戦し、一応フリーランス登録のメンバーには入れていただけたようです。初めての案件をいただけるようになるまでスキルアップに努めます。
★ 2024年中に近所の農産物直売所のサイトリニューアル（架空）とレストランのリニューアル（架空）を完成させ、営業をかける
★ 2024年5月末までに今までの経験を活かし、今後にもつなげられる仕事に転職する
★ WEBデザインの学習と制作活動を地道に続けながら少しずつ実績を積む
★ 2024年中に「色彩検定UC級」、「WEBクリエイター能力認定試験」のスタンダードに合格する
・
この記事が気に入ったらサポートをしてみませんか？