公開できる制作実績がなかったことから、自分自身でポートフォリオサイトを制作しました。自分のスキルや経歴をアピールすることが目的です。
HTML、CSS（SCSS）、JavaScript（jQuery）、WordPress（PHP）、XD
XDを使用してデザインしました。デザインカンプとしての使用経験はありましたが、自分でデザインするのは初めてで、苦戦しながら作成しました。コンセプトは「情熱」と「親しみやすさ」としたので、暖色をメインカラーにしています。
制作時間：1日
デザインはPCサイトのみでしたので、レスポンシブに対応するためにHTMLとCSS（SCSS）のコーディングを進めました。
制作時間：3日
プラグインとしての存在は知っていましたが実装は初めてでした。こちらも調べながら実装しましたが、苦戦したポイントと気付きは以下の2点となります。
ContactForm7のデフォルトではlabelタグを使用しています。私には使い勝手が良くなかったため、デザインからコーディングした際のHTMLコードをContactForm7に貼り付けました。ContactForm7を使う前にスタイルを整えていたので、デザイン通りに表示されます。
ContactForm7デフォルトのフォーム
自分でコーディングしたHTMLコードを貼り付けたフォーム
無知だった私はContactForm7の動作確認をしたくてサーバー契約をし、本番環境を整えてからメールが届くのかテストをしました。もちろんこの方法でもありだと思いますが、ローカル環境でも動作確認ができることが分かりましたので備忘録も兼ねて共有させていただきます。
以下はlocal by Flywheelでの動作確認方法です。
「Tools」→「Mailhog」と進み「Open MailHog」をクリックします。
メールの受信ボックスのような画面が表示されローカル環境で送ったフォームの記載内容が確認できます。
今回はデザイナー兼コーダーとしてサイトを作成しました。
そのためデザイナーの意図を理解した上でのコーティングとなりましたが、今後はデザインを基（デザイナーの意図を汲みながら）にコーディングしていく機会が多くなると思います。
この取り組みの中で、目に見えない部分や言語化されていない部分をどのように共有するかなど、コミュニケーションの重要性を再認識しました。
また、自分のスキルや知識の不足を痛感し、まだまだ成長する余地があることも感じました。自分でサイトを作り上げることで得た達成感や自信は大きく、今後も継続的にスキルアップに取り組み、より良いサイトを制作できるように努めていきたいと思います。
今後も課題や気づきをきちんと受け止め、実践的な知識を身に付けるべく積極的に取り組んでいきます。