本文へスキップ

コーポレートサイト「酒田工務店」

コーポレートサイト「酒田工務店」のキャプチャ
案件区分
サンプル制作(仮想案件)
サイトの種類
静的コーディング
使用技術
  • HTML
  • CSS・Sass
  • JavaScript(jQuery)
デザインツール
  • Photoshop
担当範囲
  • コーディング
制作期間
制作工数
2日間(コーディング)
デモ認証
user: demo / pass: demo

概要

工務店のコーポレートサイトを想定して制作したサンプルサイトです(仮想案件)。
担当はコーディングで、Photoshop のデザインカンプをもとに実装しました。工務店という業態にふさわしい信頼感・落ち着いた印象を、デザインどおりに崩さず再現しています。
制作会社さまの視点では、Figma だけでなく Photoshop のカンプにも対応できる実装力と、短納期でも確実に仕上げる対応力を確認いただける一例です。

課題

工務店のサイトでは、地域に根ざした信頼感や堅実な印象を、デザインどおりに崩さず表現することが求められます。
加えて、限られた制作期間のなかで、品質を落とさず確実に仕上げることが想定した課題でした。

解決アプローチ

カンプ対応力: Photoshop のデザインカンプからスライス・実装を行いました。Figma 以外のツールで支給された場合でも、デザインの意図を正確に読み取って実装できます。

デザイン再現性への配慮: デザインカンプに忠実なコーディングを徹底し、レスポンシブでも崩れない適切な画像配置を行いました。PC からスマートフォンまで、工務店の落ち着いた世界観を保っています。

表示・検索への配慮: SEO を意識した HTML 構造で見出しや要素を適切にマークアップし、短納期のなかでも検索エンジンに評価されやすい土台を整えました。

工夫したポイント / 想定効果

短い制作期間でも、Photoshop カンプへの忠実な再現と SEO への配慮を両立できた点が工夫です。
地域名や業種での検索流入を見込める HTML 構造としており、問い合わせにつながる土台を整えられたことが期待できます。

お問い合わせはこちら

Web 制作・業務委託のご相談はこちらから。3 営業日以内に返信いたします。