WORK
概要
美容室「chez cie」様の新規開業に伴う公式Webサイトのコーディングを担当。デザイナーが作成したデザインデータをもとに、HTML・CSSによるシンプルかつ正確なWeb実装を行いました。予算と運用の利便性を考慮してCMSは導入せず、静的サイトとして軽量で保守性の高いコード構造を実現しています。
顧客の課題とコンセプト
- 新規開業に伴うWeb上の「名刺」の構築：サロンオープンにあたり、店舗のコンセプトやメニュー、アクセス情報をわかりやすく伝え、名刺代わりに安心して案内できる公式Webサイトが必要だった。
- デザイン素材の制限とデバイス最適化：ターゲット層の大半がスマートフォンユーザーで、支給されたデザインデータもスマホ版のみだったため、PC表示でも違和感なく美しく見える実装設計が求められた。
CONCEPT
「スマホファーストを追求した、洗練されたレスポンシブ実装」。スマートフォンでの閲覧体験を最優先に設計されたデザインの世界観を忠実に再現しながら、PCなどの大型ディスプレイでもレイアウトが崩れず、美しく画面中央へ収まるモバイルフレンドリーな表示構造を構築しました。
工夫した点・実績
スマホ専用デザインのPC表示最適化
スマホ版デザインのみが支給された条件に対し、PC画面で閲覧した際も余白やカード配置が自然に見えるよう緻密に調整。どのデバイスでもサロンの洗練された雰囲気が損なわれない、スタイリッシュな表示設計を徹底しました。
CMSに依存しないシンプルなコード構造
予算・運用面の要望を踏まえ、WordPress等のCMSを使用しない軽量な静的サイトとして構築。表示速度と、将来的な自動化・保守運用のしやすさを考慮した、無駄のないコードを実装しています。
デザイナーとのスムーズな連携
意図されたデザインのニュアンスやトーン＆マナーを正確に読み取り、デザイナーとの緊密なコミュニケーションを通じて、支給デザインを忠実に再現するフロントエンド実装を完遂しました。
制作情報
- 担当領域
- フロントエンドコーディング
- レスポンシブ設計
- デプロイ環境構築
- 制作ツール
- VS Code
- GitHub
- 制作体制
- 分業体制（デザイナー1名／コーダー1名［小島］）