ポートフォリオ④老人ホームのHPをコーディング （Photoshop）

1. サイトイメージ画像

2. 制作概要

制作時期：2024年11月

制作時間：30時間

作業内容：コーディング、クロスブラウザテスト、サーバーアップロード

使用ツール：VScode、Photoshop

使用言語：HTML、CSS、SCSS、JavaScript、jQuery

3. 工夫した点(コーディング)

Photoshopを用いてデザインをコーディングしました。

ローディングアニメーションやホバーアニメーション、スクロールアニメーションといった動きのある要素に加え、ハンバーガーメニューも実装しています。これらのアクションを取り入れることで、サイト訪問者を飽きさせない設計となっております。

また、一部セクションの背景には、オレンジと白を組み合わせた幾何学模様を採用しています。この模様は画像ではなくコーディングによって表現しました。さらに、ファーストビューの画像は丸く切り抜き、柔らかい印象を与えるデザインに仕上げました。

CSS設計ではBEMを使用し、可読性の高いコーディングを行いました。 

最後に、スマートフォン（iPhone・Androidの両方）を用いて表示確認を行い、崩れがないことを確認しました。