ネクサス様

Basic認証

ユーザー名：works
パスワード：test

サイトについて

架空のesportsカフェのサイトを作成しました。
このサイトはSCSSを使用し、FLOCSSで設計しており、WordPress化もしています。

制作期間

デザイン：6日
コーディング：5日
wordpress化：3日

制作範囲

ワイヤーフレーム/デザイン/コーディング

使用ツール

Figma/VS Code/wordpress

使用言語

HTML/SCSS/Java Script/PHP

デザインで意識したところ

Figmaのデザインのリンクはこちら
ゲーミングPCやゲーミングPCの周辺機器などのデバイスのデザインを調べていると黒色がベースで、少しだけ緑色が入っているものが多く、この配色がゲーミングデバイス感があり、かっこいいと思ったので、参考にしてWEBサイトをデザインしました。

コーディングで意識したところ

まずは、自分が作成したデザインから共通のパーツなどを探し出して、コンポーネントページにまとめました。
また余白のつける位置も、Block要素に余白をつけずに、Element要素に余白をつけて、コンポーネントの独自性を保つように意識しています。
コンポーネントページはこちら
CSSでネオン文字を作成し、アニメーションで点滅させることで、近未来感のあるWEBサイトにしました。
更新しそうな箇所の文章や画像などは、WordPressのカスタムフィールドのプラグインを使用して、管理画面から、編集できるようにしています。