sapporo_aquarium

このリポジトリは、Webサイト【さっぽろ水族館】 | 海を、もっと身近に のソースコードです。

※仮想、架空のWebサイト

上記リンクは、このリポジトリをGitHub Pagesで公開しています。

コンセプト

Web上で配布された制作課題を元に、新しくできる水族館の仮想HPというテーマで作成しています。

課題元

• 【ポートフォリオ掲載OK】デザイン練習に使えるワイヤーフレーム配布します - mogaBlog
• 制作者さまTwitter: @ayaweb3

お題

• 札幌市(自由選択)
• 水族館
• 言語切替

特徴

• デザイン: メイン写真から抽出した配色で統一感を出し、全体を明るい印象のライトトーンでまとめ、下部を濃い色にすることで全体を安定させています。水や海が連想されるよう、波形のセクション境界になっています。

• レスポンシブ対応: PC版・タブレット版・SP版と、画面幅に対応してレイアウトが変化します。

• 言語切替機能: 言語選択メニューから、英語・中国語(繁体)・韓国語・日本語に切り替えることができます。

構成

開発環境

• Mac Pro (Late 2013)
  • macOS Mojave 10.14.6
• VSCode
• Adobe Photoshop 2020
• Adobe XD

動作確認

ブラウザ

• Chrome
• Safari

実機

• Mac Pro (Late 2013)
  • macOS Mojave 10.14.6
• Mac Book Air
  • macOS Mojave 10.14.6
• iPad Pro
• iPhone XR

未実施事項

• バナー制作
• Chrome/Safari以外のブラウザ対応
• OGPの設置
• ブラウザ感知への多言語対応

制作まとめ記事

• デザインまとめ記事
• コーディングまとめ記事

参考(使用ツール等)

• HTML5 Reset Stylesheet | HTML5 Doctor
• 2.400万点以上の高品質なフリー画像素材 - Pixabay