【WEBデザイン学習日記-126】リニューアル版ポートフォリオのコーディング開始
2024/5/20（月）～の学習日記です。先週から始めたポートフォリオのリニューアルのためのデザインブラッシュアップとPhotoshopを使って素材作りを進め、コーディングを開始しました。少し経験を積んだ分、前回よりは早く作業が進められそうな気がします。
☆★☆ ☆★☆ ☆★☆
2024年5月20日(月) ポートフォリオの素材作り：3時間【デザイン・制作物】
今日からまた新しい１週間の始まりです。
今朝は久々に求人欄チェック、気になる求人を保存。先週金曜日に英語関連の求人企業より英和、和英翻訳のトライアルをいただき、同日に返信させていただいたのですが、今日は履歴書の送付をご依頼いただいたので早速送付させていただきました。年齢で書類選考落ちになるだろうか。。。4月から始めた転職活動ですが、未だに面接まで進んだことがありません。今回は何とか書類選考をパスして欲しいです。
午後からは「デザイン・制作物」の時間割を兼ねて、ポートフォリオの細々したパーツをPhotoshopで作成していました。以前はこういう作業を全く思いつかず（Photoshopの操作もそれほど上手くなかったので）、全てコーディングを駆使し力技でポートフォリオの素材を作っていました。あらかじめPhotoshopで素材を作っておくことでコーディング作業がだいぶん楽になりそうな気がします。あと少しデザインブラッシュアップをしてからコーディング作業に入りたいと思います。
☆★☆ ☆★☆ ☆★
2024年5月21日(火) スマイルハウジングのコーディング続き＆scssの座学：2時間40分【コーディング】
お昼からは時間割に沿って「コーディング」の練習。スクールのコーディング課題のスマイルハウジングのコーディングを進めました。SCSSはまだ勉強中のため、CSSのファイルを整理して見やすくするためFLOCSSのフォルダ構成でfoundation, layout, object(component, project, utility)にフォルダを分け、BEMの命名方法でコーディングをしています。
細かいマージン設定やFlex、align-items:centerなどどこまでutility.cssを使って書くべきか悩みます。多用しすぎてもごちゃごちゃしていきそうで。
前回はヘッダーとFV、メインタイトルのコーディングをしたので、今日はボタンとフッター、本文のコーディングを終えました。これでほぼTOPページのコーディングが完成です。次回見本と自分でコーディングしたものをPerfectPixcelを使ってずれのチェックをしようと思います。
構成が比較的シンプルなのでコーディングしやすいです。
明日からポートフォリオのリニューアル版のコーディングに入るにあたりscssを使って書いてみたいと思い、夕方からはスクールの動画教材を活用して、scssの復習をしました。数週間前に少し動画で学習しましたが、数日経つと既に頭から抜けかけている・・・💦
scssの書き方、アンパサンド、変数、演算、彩度・明度の変え方、mixin、function、引数などを学びました。mixin、functionが少し複雑なので何度か繰り返し見ないと消化できなさそう。
終日コーディングをしていたので頭を使いすぎて疲れました・・・
☆★☆ ☆★☆ ☆★☆
2024年5月22日(水) scssの座学＆ポートフォリオのコーディング開始：1時間15分【デザイン・制作物】
最近、パソコンから怪しい音がすることがあるので、突然壊れた時に備えてエクスプローラー内のフォルダをきれいに整理し、大事なデータのバックアップをし直すことにして何時間も作業を進めていたのですが、バックアップ途中にデータを移したHDDの方が故障してしまい、開けなくなってしまいました💦大事な十数年分の写真データが入っているのにショック。半分ぐらいはMicrosoftのOne DriveのCloudに保存してあるので無事ですが、数年分はこのHDDにしか入っていないものなので、明日サポートサービスに電話してみて復旧を助けてもらおうと思います。痛い出費。
今日はデザインはできませんでしたが、夜は「制作物」ということでポートフォリオのリニューアル版のコーディングを少し始めました。scssはまだ理解するのに時間が必要なためcssでFLOCSSのフォルダ構成でBEMのクラス命名方式でコーディングすることにします。
☆★☆ ☆★☆ ☆★☆
2024年5月23日(木) WordPressについての座学＆リニューアル版ポートフォリオのコーディング：3時間15分【コーディング】
最近、転職活動が行き詰っているので、今朝は気分を変えるためダイニングエリアで座椅子に座りながら求人チェック。今日は県内のWebサイト制作会社数社に採用予定があるか問い合わせメールを送ってみました。
午後は「WordPress」の座学。Web関連の仕事ではほとんどの求人でWordPressのスキルが求められているので、WordPressがどういうものなのか基礎知識をつけるためにtorikumuで数本動画を見て学習をしました。実際手を動かして操作してみないと分からないと思うので、一通り動画で学習してから自分でも操作して何か作ってみようと思います。
夕方はリニューアル版のポートフォリオのコーディング。先日Photoshopでメインタイトルやサブタイトル部分、イラスト入りのボタンなどのパーツを作ったのですが、コーディング途中にふと画像をhタグにあてると文字の読み上げができなくなりアクセシビリティの観点からあまり良くないのかもしれないと思い、結局文字で打ち込みコーディングすることに。
結局はアクセシビリティを考えたら画像では使わない方がいいのかも・・・
と思い始めました
☆★☆ ☆★☆ ☆★☆
2024年5月25日(土) リニューアル版ポートフォリオのコーディング：2時間45分【コーディング・制作物】
今日は朝から市場調査の副業案件を進めていました。納期より早めに納品できそうです。
午後からはリニューアル版ポートフォリオのコーディングの続き。去年初めてポートフォリオを制作した時はコンセプトとデザインを考えるのに３週間、コーディングに１週間かかりました。今回のリニューアル版はデザインブラッシュアップに１週間かかり、コーディングは前回よりも早くできそうな気がします。FLOCSSのフォルダ形式でコーディングするとフォルダの場所が接頭詞ですぐ分かり作業が非常にしやすいです。
夜もコーディングの続き。サブタイトルの横につけた円がどうしても画面を縮めるとずれてしまうので、やはり以前Photoshopで作った素材を使用することに。先日悩んでいたhタグに画像を使用した場合のアクセシビリティやSEO上問題がないかについてですが（ポートフォリオの場合、限定公開にするのでSEOとは無関係ですが）、検索したらいいサイトが見つかりました。SEO観点からテキストの方がお勧めらしいですが問題はなさそうです。ただしalt属性を必ず設定する必要があるということで、これで悩みは解決。
☆★☆ ☆★☆ ☆★☆
2024年5月26日(日) デザイン考察＆リニューアル版ポートフォリオのコーディング：3時間20分【デザイン・コーディング・制作物】
日曜日の時間割は「デザイン、コーディング、制作物」のフルコースです。
最近時間割スタイルの学習が少し崩れ気味でしたが、今日はちゃんと時間割に沿って学習を進めたいと思います。
今朝はデザイン、実に1カ月ぶりに「デザイン考察」をしてみました。SANKOU!のデザインギャラリーサイトから目に留まったのは株式会社 鷺宮製作所さんのコーポレートサイト。ファーストビューの動画に思わず見入ってしまいました。
・サイト全体は白を基調に青色をアクセントカラーに使用されている
・ナビバーが左側に固定されているタイプ
・使用フォントはIBS Plex sans JPと欧文フォントはPoppins
・事業内容や製品紹介の説明文が簡潔明瞭で全くの素人でも何に使われている商品で強みが何なのか分かりやすい（時々ですが何を作っている会社なのかサービスが何なのか分かりずらいサイトも存在するので）
・ホバーアニメーションが凝っていると思った
・市場別ソリューションの箇所の画像が右から左に流れていくアニメーションをどうやっているのか気になった（検証ツールで見て見るも分からず💦）
今日もいくつかいいなぁ、と思うパーツをスクショを撮ってデザイン貯金しました。
午後はリニューアル版のポートフォリオのコーディングの続き。けっこう形になり、もうすぐTOPページが完成しそうです。根を詰めすぎると肩ががちがちになるので続きは明日にしたいと思います。
今週のWEB学習時間は16時間30分でした。週の学習目標時間10時間達成です。
☆★☆ ☆★☆ ☆★☆
＜5/20（月）～5/26（日）に出来たこと＞
【デザイン】ポートフォリオデザインブラッシュアップ（リニューアル）
【デザイン】デザイン考察×１つ
【コーディング】scss、WordPressの座学
【コーディング】コーディング課題のスマイルハウジングのコーディング
【コーディング・制作物】ポートフォリオのパーツコーディング、TOPページのコーディング
＜転職活動状況＞
◎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件、返信なし1件
◎5/1に副業案件1件に応募（コーディング）→トライアルに挑戦するも期限までに終えられず断念。努力を認めていただいたのかその後業務委託契約を締結いただけました
◎5/6に副業案件1件に応募（コーディング）→時間差で契約を逃す
◎5/8に2社応募（東南アジア関連）→書類選考落ち1社、返信なし1社
◎5/9に4社応募（WEB関連）→書類選考落ち3社、返信なし1社
◎5/10に6社応募（英語・WEB)→書類選考落ち3社、返信なし1社
◎5/11に1社応募（英語）→書類選考落ち
◎5/13に4社応募（WEB関連）→書類選考落ち3社
◎5/14に2社応募（WEB関連：派遣）→書類選考落ち2社
→41社の求人に応募
（書類選考落ち29社、返信なし10社、その他返信待ち）
→4つの副業案件に応募
（書類選考落ち３つ、１件トライアル後、業務委託契約へ）
＜WEBデザイン学習の時間割＞
☆★☆ ☆★☆ ☆★☆
＜今後の目標＞
★ 2024年6月末までにWEBデザインでの副業案件を１つ取る！ →トライアルに挑戦し、一応フリーランス登録のメンバーには入れていただけたようです。初めての案件をいただけるようになるまでスキルアップに努めます。
★ 2024年５月中にポートフォリオのリニューアルを終わらせる
★ 2024年中に近所の農産物直売所のサイトリニューアル（架空）とレストランのリニューアル（架空）を完成させ、営業をかける
★ 2024年5月末までに今までの経験を活かし、今後にもつなげられる仕事に転職する
★ WEBデザインの学習と制作活動を地道に続けながら少しずつ実績を積む
★ 2024年中に「色彩検定UC級」、「WEBクリエイター能力認定試験」のスタンダードに合格する
・
この記事が気に入ったらサポートをしてみませんか？