【SCSS】【レスポンシブ】DarkHospital

# DarkHospital
架空の医療施設のHPを想定して作成。

新型コロナウイルス感染症による緊急事態宣言などが出ていた時期だったためテーマとしてチョイス。


## 概要
* パララックスデザインを実践
* 初めてCSS設計を用いた
* レスポンシブデザインを導入
* GitHubにアップしたのは作成から半年経過後です(作成時点ではGitは使っていなかったため)

## 使用技術
* HTML/CSS/JavaScript(jQuery)
* SCSS (CSS設計はFLOCSSを使用)
* gulp (v4 / SCSSのビルド、ファイル監視)

## 作成過程
* 【テーマ決め】<br>
できる限りその時期の流行や話題を重視、需要ありそうなサイトを考えるという点でも医療施設にしようと決定。

* 【全体】<br>
医療施設であるため、利用者が安心できるよう白と黄緑の優しめな色合いに。<br>
ボタンはホバーさせるとふわっと浮き上がるように。


* 【パララックスデザイン】<br>
フリー素材画像を探したあと、パララックスデザインを作成

* 【画像スライダー】<br>
時間経過で画像が流れていくように。
`overflow: hidden`の設定を忘れるなどやや苦戦

* 【モーダルの作成】<br>
PCサイズの時とSP時で表示の大きさを変更する点で苦戦。また、モーダルを開きながらスクロールすると、灰色の背景が動いてしまう問題が発生するなど時間をかけた。

* 【GoogleMap】<br>
現実の施設であればアクセス先がGoogleMapで用意されている方が利便性が増すため、練習も兼ねて実装(場所は富士急ハイランドにしました。)<br>
実装はほぼコピペで終わってしまったのでもう一度使い方を洗い直す必要があると考えています。

* 【お問い合わせフォーム】<br>
あくまでもデザイン練習であるため、実際に送信はしません。必要項目が入力されない限りは非活性状態となるようにしています。<br>ボタンはグラデーションを導入してみました。<br>ただ、一色にするかグラデーションにするかというのは顧客とのやりとりや要件次第だと考えています。

## 振り返り
* CSS設計、特にFLOCSSのlayoutとprojectの違いがわからなかったり、projectとcomponentの上下関係などを間違えるなど苦戦はあった。

* レスポンシブデザインにおいてはよく使われる414pxを想定したが、どこまで詰めるかは要件次第なのでよく確認する必要があるなと感じた。<br>(全てのブラウザや多種多様なAndroidなどにいちいち対応させていると大幅に時間を取られるため、どこまで対応させるかの確認が必要)

* 訴求できる文言やデザイン、文字の色、サイズなど考える点がかなり多い