田島光祥のポートフォリオへ
ようこそ!!

さくら病院の架空サイト制作

さくら病院のサイト制作

制作時間: 10h
役割: コーディング

技術スタック

HTML CSS JavaScript

プロジェクト期間

2026年02月
画像書き出し: 0.5h
コンポーネントの作成: 1h
ページの作成: 8h
全体確認・調整: 0.5h

チーム構成

デザイナー(生成AI Bolt.new): 1つ
コーダー: 1名

プロジェクト概要

新卒/中途を幅広く募集する総合病院の採用サイトです。病院の魅力(職場文化、福利厚生、研修など)をわかりやすく伝え、人材の獲得と定着率向上を目指します。さまざまな専門分野の優れた人材を獲得し、チームをより強化していきたいと考えております。


本プロジェクトでは、生成AIとFigmaを使用してデザインカンプを制作しました。そして、HTMLとCSS,JavaScriptを使って、デザインカンプを実装しました。


CSS設計はBEMを使用し、保守性・拡張性・再利用性を高めました。コンポーネント化も行いました。


ピクセルパーフェクトを意識し、デザインカンプを忠実に実装しました。画面幅が変わってもデザインが崩れないようにしました。

技術的実装詳細

コーディング技術

  • マップはGoogleマップを埋め込み
  • CSS設計 BEM による保守性・拡張性・再利用性の向上
  • PerfectPixel によるデザインカンプの忠実実装
  • Nu Html Checker によるHTMLコードチェック
  • CSS Validation Service によるCSSコードチェック
  • Analyze OGP and Twitter Cards によるOGPチェック

パフォーマンス最適化

  • アイコン画像はSVGで対応
  • TinyPNG 画像軽量化