無重力体験や地球周回、月面着陸などの宇宙体験ができる会社の架空サイト（トップページのみ）を作成しました。
※アクセス制限
ID:グリーン文字
PW:オレンジ文字
https://spaceadventure.masanolio.com
HTML、CSS（SCSS）、JavaScript（jQuery）、XD、Photoshop
コーディングしたサイトを参考（レイアウト）にXDを使用してデザインしました。デザイン、ライティングともに多くの人が気軽に宇宙を体験できるサービスがあったら良いなという思いと遊び心を持って作成しました。
制作時間：4日
ナビバーはレスポンシブ対応でハンバーガーメニューにし、CSSアニメーションやjQueryの理解が深まりました。
制作時間：2日
一言でハンバーガーメニューと言っても表現方法は幾つかあるようですが、今回はCSSとjQueryを使用して表現してみました。 CSSではtransformを使って3本線とX印を表現し、jQueryではアコーディオン（slideToggle）を使用しました。
transformプロパティは基礎学習の時にどの値がどんな動きをするか学びました。今回は「わくわく感」や「ドキドキ感」を表現したかったので1回転してから45度傾けています。色んな動きを重ねると面白いエフェクトが生まれアクセントになりますね。
trandformで表現したハンバーガーメニューと同じく3本線またはX印をクリックすることがトリガーとなります。display: none;で表示させていなかったメニューをスライドダウンまたはスライドアップさせます。
iframeタグを使ってYouTubeを埋め込んだことはあったのですが、その時はレスポンシブを意識していませんでした。
今回レスポンシブ対応のため画面幅を縮めると縦横比が崩れることに気付きました。この問題の対処としてaspect-ratioプロパティをネット検索で調べ、初めて使用することができました。
JAXAや海外からの宇宙に関するニュースを目にする機会が増えたことが切っ掛けとなりSpaceAdventureを作成しました。
架空サイトということで、画像探しから提供しているコース、お客様の声は楽しみながら考えることができました。
遊び心や楽しむ気持ちはとても大事なことだなと感じましたし、良いサイトを作るのに重要な要素だとも思えました。
また、今回も自分のスキルや知識の不足を痛感しましたが、「分からないこと」「知らないこと」があっても調べて実際に手を動かすことで経験を積むことができました。
普段何気なく見ているサイトもどんなコードを書いているのか意識すると見え方が変わりますし、
サイトに動きをつける時はマジックの種を知った時のような驚きとさびしさがあります。