制作物

フリーランス向けサービス Workshipの模写コーディング

# 概要 フリーランス向けサービス **Workship** のサイトを参考に、HTML / CSS / JavaScript を用いて模写コーディングを行いました。 実案件に近いデザインを再現することで、UI 実装やコーディングスキルの習得を目指しました。 # 制作の流れ まずは約2週間で第一弾としてページ全体の模写コーディングを行い、基本的なレイアウトやレスポンシブ対応を実装しました。 その後、第二弾としてデザインの再現度や余白、アニメーション、スマホ表示などを見直し、より実案件に近い品質になるよう改善を加えました。 # 取得したスキル デザインの余白、配置、セクション構成、レスポンシブ対応を意識しながら実装することで、実案件に近いコーディング経験を積むことができました。 また、JavaScript を用いたコンテンツの出現アニメーションやアコーディオンなど、ユーザーの操作やスクロールに応じた動きのある UI 実装にも取り組みました。 # 今後の改善予定 現状、一部のアイコンが表示されていない箇所があります。 当時は、ページ全体のレイアウト再現、レスポンシブ対応、JavaScript による動きの実装を優先して制作しました。 今後はポートフォリオ全体の優先順位を見極めながら、アイコンの表示修正や細部のデザイン調整を行い、より完成度を高めていく予定です。 # JavaScript の使用箇所 * トップページのコンテンツ出現アニメーション * トップページのコンテンツが自動で流れる箇所 * よくある質問のアコーディオン # 画面キャプチャ ## ファーストビュー ### PC  ### スマホ  ## 特徴セクション  ## 募集案件セクション  ## 使い方セクション  ## よくある質問セクション  # 公開URL [公開URL](https://ki-hi-ro.com/reproduce/Workship/) ユーザー名 / パスワード：`khiro`