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

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

    制作サイト情報

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

    制作時期・期間

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

    制作サイト概要

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

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

    意識した点

    自分なりにですがゲームの世界観を大事にしたかったので、ゲーム中で実際使用されている色を使ったり、一部見出し部分のフォントをテキストシャドーなどを用いて真似をして再現してみました。

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

    左上や中央上にあるチームのロゴはゲーム冒頭でも表示される開発元の会社「SUPERCELL」のロゴをモチーフにして制作致しました。

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

    参考・参照サイト

    今後の目標

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

    • jQueryやJavascriptの知識(動的なサイトを構築するため)。
    • PHPの知識(主にお問合せフォーム実装のため)。
    • WordPressの知識(公開されているサイト1/3が該当するため)。