海洋保護活動を行うNPO団体様の活動紹介と応募フォームを備えたWebサイトです。
URL
https://save-the-oceans.xhakuray.com/
担当
デザイン・コーディング
サイトの目的
子供をはじめとした、親子、近隣住民、学生、社会人などをターゲットにした海洋保護活動の紹介と海の掃除ボランティアの募集をする目的
使用技術
HTML/CSS/JavaScript/jQuery/レスポンシブ対応/WordPress
デザイン・コーディングについて
・魚が動く、泡がプクプクと浮かぶ、TOPとfooterに白いオブジェクトを波のように動かす、猫がポヨンと跳ねる、フェイドイン等のアニメーションを取り入れ、子供が楽しいと感じられるサイトにする
・ローディング画面のテキストに波っぽさを実装し海を感じられるデザインにした。
・プラグインを使用せずJavaScriptでクイズ機能を実装し、柔軟なカスタマイズを可能とした。
・メニューにはアイコンを設置し目を引くデザインにした。
・団体理念にはきれいな海を固定背景にし、半透明の白いガラスの枠の中にテキストをフェイドインさせ、透きとおった海のデザインを実装