生き物紹介サイト詳細 | Moonlight Web Studio

Desktop View

概要: ポートフォリオとして、生き物を紹介する１ページサイトを制作しました。
ターゲット: bynは生き物好きなブロガーという設定で、その読者や熱帯魚が好きな人などが興味を引くような生き物の解説サイトを制作しました。
制作期間: 2週間
担当: 構成 / デザイン / コーディング
使用技術: HTML5 / CSS3（レスポンシブデザイン対応）/ JavaScript
工夫した点: どの端末から見ても画像の対象が見切れないよう、余白や画像サイズの調整に力を入れました。

どの端末で見てもストレスのないよう、グリッドを変えるタイミングを細かく調整しました。

JavaScriptを使ってスムーズな動きのアコーディオンを実装しました。

ヘッダーや背景色により2種類の生き物がいることを視覚的に分かりやすくしました。
今後の改善点: まずは熱帯魚の写真と説明を入れます（未完成ですみません）。

ブログに誘導するリンクをヘッダーに入れるとより実務的になると思います。

今後、生き物が追加しやすいように生き物一覧を別ページに分けてWordPressを導入しても面白いと思います。
サイトのURL: サイトを見る
改(Arata)のGitHub: サイトを見る

作成する際、特に工夫した部分です。1枚目はFV（ファーストビュー）、2枚目はイモリのセクションです。

スマートフォン表示では読みやすさを重視し、余白と縦の流れを意識して調整しています。