CSSグリッドテストサイト完成

制作概要

今回の目的はCSSグリッドでのサイト構築に理解を深めることに重きを置いていたので、題材は自由に設定しました。題材は趣味のゲームのチーム紹介サイトです。

大きな理由としては好きなものを題材にした場合、記事の作成が比較的容易である点、モチベーションの維持にも最適であると感じたためです。画像はネット上に存在するものを自由に使用しました。

※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。

※ルール確認ページと戦術紹介ページに関しまして、スクリーンショットが正しく表示されておりませんが、Web上では問題なく表示されておりました。

自分なりにゲームの世界観を大事にしたかったので、ゲーム中で実際に使用されている色を使ったり、一部見出し部分にテキストシャドーなどを用いゲーム内のテキストに施されているエフェクトに寄せて再現してみました。

また、サイトを制作するにあたり世に出てる様々なサイトを参考にしました。その中でヘッダー部分がスクロールしても付いてくる仕組み・スクロールに応じてフェードインするアニメーションが多数見受けられましたので、当サイトにも組み込んでみました。

左上や中央上にあるチームのロゴ「BLKMAPLES」は開発元の会社「SUPERCELL」のロゴをモチーフにして制作致しました。

サイト自体の目的はチームの活性化です。チームに来られた新人が何に重きを置いたどんなチームなのかを知ってもらう、ルールの確認をしてもらう、また効果的な戦術の提案や他メンバーの情報発信を今後していくことを目的としました。

2019年11下旬～2020年2月初頭の約2ヶ月少しの約70日(構想・企画・レイアウト・コーディング・自己判断修正全て含む)。制作人数1人。制作時間約200時間(おおよそです)。また、webとは無関係のお仕事を週4日フルタイムで勤務しながらの制作。

新技術を身に着けた折にはサイトに反映させていきたいと思っています。今回の制作を通じて今思い浮かぶだけでも下記のようなことを今後勉強していきたいと思いました。