-詳細-
detail制作物名
title
制作期間
termデザイン： 訓練校提供のためなし
コーディング: 7月12日〜7月1３日（２日間）
使用ツール
tool
目的
purpose•デザインカンプを 正確かつ丁寧にコーディングできる再現性 の証明
•写真主体・余白多めのデザインを崩さず調整する力を見せる
•インテリア系ブランドで求められる
落ち着き・美しさ・読みやすさ をコードで再現
•スマホ〜PC全幅まで破綻しないレスポンシブ設計を実践
•UIパーツの構造化（BEM）による保守性の高いコードを書く練習
対象
terget•HTML/CSSの再現度と品質を重視する制作会社
•LP・コーポレートサイトを外注したい企業
•“デザインの理解力が高いコーダー／デザイナー” を求める会社
•インテリア・ライフスタイル系ブランドのWeb担当者
デザインの意図を読み取り、正しく再現できるスキル を提示するための制作物です。
設計意図
designコンセプト：静かな美しさ × 整った余白 × 世界観の統一
1. 余白設計（Whitespace）
•写真を活かすために余白を大きめに設計
•Figmaの間隔・比率を正確に再現
•行間・字間まで細かく調整し、文章の読みやすさを向上
2. 写真を主役にしたレイアウト構築
•インテリア写真が映えるようシャドウや飾りは最小限に
•テキスト量と写真量のバランスを慎重に調整
•明るい写真に合わせフォント色は濃淡を変えて可読性を確保
3. タイポグラフィ
•シンプルなサンセリフを使用し、柔らかい雰囲気を演出
•hタグ／pタグを整理して情報階層を正確に設計
•コンテンツの意味に沿ったセマンティックなHTML構造
4. レスポンシブ設計
•モバイルでは縦幅を優先し、読みやすさに特化
•画像サイズの調整と余白の最適化
•PCでは横幅を広く活かし、余裕ある見た目に
先述のようにデザインについては訓練校の提供となるため、実装の時点でレスポンシブ対応した場合のロゴの扱いについて、常時表示という形をとり、企業情報を強調する方向で実装いたしました。