サイト概要
Project
「好き」な物を形にする、というコンセプトで、東京にある5つの水族館を紹介しているサイト。自身で描いたイラストと撮影した写真、訪れて感じたそれぞれの水族館の魅力を文章で紹介。
さらに訓練校で学び興味を持ったCSSアニメーションを取り入れ、魚のイラストを動かすことで、より水族館の雰囲気を感じられるようにした。
Goal
- サイトの制作を通して、サイト全体のワークフローを理解する
- CSSアニメーションを活用して、より魅力的な表現を追求する
- Sassを導入し、理解を深めつつスタイルの管理を効率化する
- Gitを活用し、使い方を学びながらチーム開発が想定できるようになる
- 好きな水族館の魅力を多くの人に伝え、実際に足を運んでもらうことを目指す
Details
- 制作時間：1ヶ月
- 使用言語：HTML, Sass, JavaScript, jQuery, Git
- 使用ツール：Visual Studio Code, Photoshop, Illustrator
制作を通して学んだこと
- デザインから実装まで行ったことでweb制作の流れや手順の理解が深まった。
- 自身がクライアントとして要望を出し制作をしたことで、クライアントの情報を整理・言語化し丁寧に要件定義にまとめる経験を得ることができた。
- 水族館に行きたいという気持ちに繋がるように、水の中や水族館の水槽を覗いているイメージを持てるようなUIを目指し実装まで至ることができた。
- アニメーションとして動かす際に、視認性や導線を配慮した設計を心がけた。
またイラスト素材を実装するときに周りに影響を与えないように余白をつけずに素材にすること、 レイヤー情報や拡張子、見せ方まで考えてイラストを制作することを学ぶことができた。
制作の流れ
- 1サイトのコンセプト・設計
- 2イラスト作成
- 3メイン部分のワイヤーフレーム作成
- 4画像のトリミング・補正
- 5コーディング
- 6イラストにアニメーションを実装
- 7テスト・デバッグ
イラスト作成
イラスト制作の流れ
- ステップ1 ラフ案の作成
- ステップ2 線画の作成
- ステップ3 レイヤーごとの色塗り
- ステップ4 細部の微調整
CSSアニメーション
| プラグイン名 | 用途 | URL |
|---|---|---|
| Particles.js | 背景にパーティクルを表示 | https://vincentgarreau.com/particles.js/ |
| Rellax.js | イラストにパララックス効果をかける | https://dixonandmoe.com/rellax/ |
| Animate.css | 見出し等にアニメーション効果を付ける | https://animate.style/ |
| jquery-scrolla | スクロールに合わせてアニメーションを制御 | https://github.com/maximzhurkin/jquery-scrolla |
| Fancybox | Google Mapをモーダルウィンドウで表示 | https://fancyapps.com/fancybox/ |