siema-design

元々、インターナショナルスクールである、ホシノコグローバルスクールのWebサイトのみでしたが、ホシノコスタディーコース、ホシノコキッズクラブ、ホシノコサタデーコースとコースごとにLPサイトを作成し、hoshinokoglobal.jpのトップページを、hoshinokoglobal.jp/topに移動させて、hoshinokoglobal.jpにアクセスすると、各Webサイトにアクセスできるリンクページを作成しました。

インターナショナルスクールに通う園児達の生活を保護者に見せたり、今後入園される家庭への紹介動画を作成しました。子供達の、家庭では見られない毎日の生活風景や息遣い、成長が垣間みれるように、先生や友達と手を繋いでいたり、ハグしているスキンシップのシーン、工作している手元や歌を歌っているシーンをふんだんに入れました。

デザイナーが描いた「デス・ストランディング」のような世界観を、ホームページ上で再現するため、コーディング面から表現を担当しました。 単なるビジュアル再現ではなく、動き・質感・間の取り方によって“世界観を感じさせるコード”を意識しています。 実装のポイント ゆっくりと変化するグラデーション背景を CSS アニメーションで実装。 非常に低速で動く滑らかなトランジションを設定。 中央の Tlegit ロゴ の周囲に、CSS/SVGで構築した 六角形モチーフのボタンやマークを配置。 ロゴを中心に軌道上に並ぶようスクリプトで制御し、ホバー時に色が反転するようにした。 全体のトーンは、無機質な金属感と深い空気感を意識したダークグラデーションで統一。 静けさの中に緊張感を感じさせるデザインとしました。 スクロールすると、メインビジュアルを固定したまま、コンテンツが現れるようにし、視覚的にも 楽しめるUIデザインを実装しました。