-詳細-
detail制作物名
title
制作期間
termデザイン： 4日間
コーディング: １ヶ月〜適宜変更
使用ツール
tool
目的
purpose•デザインカンプを 正確にコードへ落とし込む再現性 を証明
•UIコンポーネントを理解し、構造化して実装できるスキルをアピール
•企業から最も求められる「コーディングの正確さ」を示す
•Sass、BEM、Flexbox、Grid など
現場で使用される構造的な記述方法を実践
•スマホ〜PCすべてで美しく表示できる レスポンシブ対応力を示すため
対象
terget•HTML／CSSの実装力を確認したい制作会社
•LPや企業サイトの外注先を探しているWeb担当者
•“デザイン＋コード”を両方できるデザイナーを求める企業
•再現性とスピードを重視するコーディング案件のクライアント
“コーディングの品質・スピード・理解力” を確認したい採用担当者に向けています。
設計意図
designコンセプト：正確な再現性 × 見やすい構造 × レスポンシブ最適化
1. デザインの再現性を最重要視
•Figmaの間隔・色・フォントを忠実に再現
•枠線や余白、行間など細部も調整
•UIコンポーネントの統一性をコード上でも担保
2. HTML構造は“意味”に沿ってセマンティックに
•section／header／footer／nav など
文書構造を意識したマークアップ
•アクセシビリティも考慮（alt／aria）
3. CSS（Sass・BEM）での管理しやすい設計
•クラス名のルール統一
•Sassの入れ子構造で可読性向上
•可変しやすい UI を意識したコンポーネント設計
4. レスポンシブ対応
•スマホ優先（mobile-first）
•768px、1024pxなど一般的なブレークポイントに対応
•行間・フォントサイズ・余白の最適化
まだ学習の初期段階でもあり、制作物を全面に表示しスキルを簡潔に示すことが物足りない状態ではあるため、制作物と自身についてのコンテンツを同列の動線とし、双方を知っていただけるような構成にいたしました。
配色： 地元長崎で撮影した夕日の写真を使用したいと考え、自身の温厚な人柄を表現できるようメインカラーにオレンジを使用し、パステル系を組み合わせることで柔和なイメージを心がけています。
フォント: 英語にはCaveat,日本語にはひな明朝を使用し、こちらも配色と同様に柔らかい印象を保ちつつ、上品さを損なわないように選定いたしました。