もんちゃんブログ 
今回は、案件にて学んだことをまとめていきます。
私は現在、看護師として働いており、WEB制作は未経験から独学とメンターをつけ学習を行い、クラウドソーシングサイトにて案件をいただいています。
案件の内容について
この度、クラウドソーシングサイトで2件目の案件を受けることができ、この案件がWordPressを使用した初めての本格的な案件となりました。
案件をくださったクライアント様が、とても丁寧に指示やご指摘をしてくださる方で、今回の案件を通して多くのことを学ぶことができ非常に感謝しております。
今回の案件では、デザインデータをいただき、WordPressでテーマ制作を行うという内容で、トップページを含む5ページの内容でした。
できるようになったこと
・カスタムフィールドにてクライアント様が文章を変更できるコーディング
参考動画
参考サイト
https://www.webdesignleaves.com/pr/wp/wp_custom_fields.html
・各要素をふわっとさせるアニメーション（css、js）
参考動画
お問い合わせフォームやプライバシーポリシーなど、縦幅が長いコンテンツを表示させる時はclientHeightの値を小さくすると早めに読み込まれます。
・MW WP Formを使ったお問い合わせフォーム
参考サイト
https://form.run/media/contents/website-lp-creation/mw-wp-form/
今回は、上記にある「コピペだけ」…を使用して土台を作ったのですが、指示されていたデザインが姓と名で分かれているデザインでした。
flexboxを使用し横並びのデザインにしたかったのですが、なぜかフォームのHTMLにdiv要素やspanタブを追加できずに、うまく横並びに調整することができませんでした。
そのためposition:absoluteを使用しなんとかコーディングを行いましたが、ここが今回の反省ポイントでした。
上記サイトのコピペを使わずに1から自分でコーディングをするか、floatなどを使うと良かったと反省しております。
学んだことと反省点
学んだこと
今回学んだこととして、cssのfont-familyの設定があります。
いただいたデザインデータにはYu Gothicとの記載がありましたが、私はMacBookを使用しており、初期設定でMacBookに入れられていた游ゴシックと同じものだと思い、font-familyを游ゴシックで設定しておりました。
その後、クライアント様からご指摘をいただき、macOSとWindowsでフォントの表記の仕方が知らないと初めて知りました。
参考記事サイト
また、フォントのご指摘をいただいた時に、HTMLコーディング時にフォントのクラスをつけるとわかりやすいとのアドバイスまでいただきました。
font-family :YuMincho, /* Mac用 */ ‘Yu Mincho’, /* Windows用 */ serif;
}.bold {
font-weight: bold;
}
このような感じで、参考コードまで記載していただきました。
反省点
コーディング後の確認作業をもっと、もっと慎重にやるべきだったと感じました。
細かな間隔のズレもですが、widthを大きく指定しすぎて画面横幅からはみ出てしまっていることもありました。
また、フォントの指定が違っていることもありました。
クライアント様目線でしっかりと確認作業を行う必要がありました。
そして、今回初めて本格的な案件だったこともあり、自宅での時間をほとんど案件に費やしており、実生活が少し乱れてしまったことも反省です。
母と家事を分担していたはずなのに、自分はずっとパソコンに向かっていたり、部屋も少しずつ乱れてきたり、植物への水やりが疎かになったり…
今後は、納期の関係もありますが、自分のやるべきこともしっかりと考え、ペース配分できるようにしていきたいです。
【おすすめ】UdemyでともすたさんのWordPress講座を学んでみる！！ 
まとめ
今回はデザインをいただいたのが、ちょうど2連休の前日夜だったため、コーディングを行う時間がたくさんあり、2日で土台をコーディングし、その後修正対応を行わせていただきました。
デザインをいただいてから約1週間で納品の形となりました。
今回は何度も記載しておりますが、クライアント様がとても丁寧に指示や指摘をくださる方だったので非常に感謝をしております。
今後も日々学習を重ね、また反省点を生かし、気持ちのいいコーディングができるようになっていきたいです。
最後まで読んでいただき、ありがとうございました。
広告
