酒田工務店 Webサイト

デザインカンプを正確に再現しながら、さまざまな画面で快適に閲覧できるよう実装した課題制作です。

Photoshopで作成されたデザインカンプをもとに、酒田工務店のWebサイトをコーディングしました。デザイン制作は担当せず、HTML・CSS・JavaScriptによる実装と表示最適化を担当しています。

課題制作コーディングレスポンシブ対応画像最適化 SEO内部対策

制作内容

支給されたPhotoshopのデザインカンプから、レイアウト、文字組み、画像配置などを読み取り、ブラウザ上で再現しました。見た目を合わせるだけでなく、画面幅の変化や読み込み時の負荷も考慮して実装しています。

パソコン、タブレット、スマートフォンでの閲覧を想定し、画面サイズに応じてレイアウトが自然に変化するよう調整しました。文字の読みやすさや画像の見え方、操作しやすい余白をデバイスごとに確認しています。

サイズの大きい画像にはWebP形式を採用し、画質を保ちながらデータ容量を抑えました。また、すぐに表示する必要のない画像には遅延読み込みを設定し、初期表示時の通信負荷を軽減しています。

JavaScriptはページ表示を妨げにくい読み込み方法を採用しました。画像最適化や適切なHTML構造とあわせて、表示速度と検索エンジンの読み取りやすさを意識したコーディングを行っています。

デザインカンプの印象を保ちながら、幅広い画面サイズで見やすく、軽快に表示できるWebサイトに仕上げました。デザインを正確に読み取り、実際の閲覧環境に合わせて最適化するコーディングの重要性を確認できた制作です。