概要

フリーランス向けサービス Workship のサイトを参考に、HTML / CSS / JavaScript を用いて模写コーディングを行いました。

実案件に近いデザインを再現することで、UI 実装やコーディングスキルの習得を目指しました。

制作の流れ

まずは約2週間で第一弾としてページ全体の模写コーディングを行い、基本的なレイアウトやレスポンシブ対応を実装しました。

その後、第二弾としてデザインの再現度や余白、アニメーション、スマホ表示などを見直し、より実案件に近い品質になるよう改善を加えました。

取得したスキル

デザインの余白、配置、セクション構成、レスポンシブ対応を意識しながら実装することで、実案件に近いコーディング経験を積むことができました。

また、JavaScript を用いたコンテンツの出現アニメーションやアコーディオンなど、ユーザーの操作やスクロールに応じた動きのある UI 実装にも取り組みました。

今後の改善予定

現状、一部のアイコンが表示されていない箇所があります。

当時は、ページ全体のレイアウト再現、レスポンシブ対応、JavaScript による動きの実装を優先して制作しました。

今後はポートフォリオ全体の優先順位を見極めながら、アイコンの表示修正や細部のデザイン調整を行い、より完成度を高めていく予定です。

JavaScript の使用箇所

• トップページのコンテンツ出現アニメーション
• トップページのコンテンツが自動で流れる箇所
• よくある質問のアコーディオン

画面キャプチャ

ファーストビュー

PC

スマホ

特徴セクション

募集案件セクション

使い方セクション

よくある質問セクション

公開URL

公開URL

ユーザー名 / パスワード：khiro