![見出し画像](https://assets.st-note.com/production/uploads/images/57282221/rectangle_large_type_2_44a841ea0a122822b2454e424e5158de.png?width=1200)
【デザイン改修】オトナ帝国Webページが変わりました
オトナ帝国発足して、だいたい1年が経ちまして、Webページを改修しました。いやもともとのページも好きでしたよ、好きでしたが・・やっぱり少しびみょいな!と思ってたんです。
デザイナーがいなかったこれまでのホームページ
これまではなんとデザイナーなしで制作してました・・ちなみに私はフロントエンドエンジニアとして2年間ほど従事していたので、コーディング(html/css/js)はある程度やれるのですが、デザインはさっぱり
なので、基本的にデバイスフォントでのコーディングになってしまうので、見出しのところやキービジュアルのところは、デザイン的に何となく不満あるけど、どうしたらいいのか・・・わからないみたいな状態でした(モヤモヤ)
この記事ではTOPページのデザイン変更をがっつりご紹介!
キービジュアルをスタイリッシュに!
【旧デザイン】
![画像2](https://assets.st-note.com/production/uploads/images/57283305/picture_pc_f3f8aef4fbd0bef9f9d9e1c15cc4a625.png)
【新デザイン】
![画像2](https://assets.st-note.com/production/uploads/images/57283362/picture_pc_27c63951522ec7b6ea8ac5bcb5adf1df.png)
違い分かりますでしょうか?そう、「懐かしいゲームでコドモに戻れる宿泊施設」のところを画像に変換しました。少しスタイリッシュになりました!
【スマホ版デザイン比較】
![画像3](https://assets.st-note.com/production/uploads/images/57283968/picture_pc_0828f9463015584d5db506426c975708.png)
だいぶ感じが変わりますね。実際のサイトを見ていただくほうが見やすいかもですが、これまで太字のデバイスフォントにしていたところを細字のフォントに変えました~
見出しテキストもロゴイメージに合わせて刷新
【旧デザイン】
![画像4](https://assets.st-note.com/production/uploads/images/57284312/picture_pc_634b914606911628118bf8d2180612e4.png)
【新デザイン】
![画像5](https://assets.st-note.com/production/uploads/images/57284319/picture_pc_ec3879eb3a8e5706bc8b8dd4c198d7ec.png)
こちらもだいぶ華やかになりました!今までデバイスフォントでやってたところをデザインテキストに変えるだけで本当に雰囲気変わりますね!かっこよくなったな、と。
もともとオトナ帝国のロゴのイメージもそうなんですが、「ゲーム」「懐かしい」「楽しい」が含まれていていいな、と身内でもよかったな~と盛り上がりました!!
Topicsエリアを新たに追加
これまではnoteをメインでちょくちょく記事コンテンツを出していたオトナ帝国ですが、今後はオトナ帝国ページ配下でも運用していこうと思って、エリアを追加しました!
こちらの実装に関しては少し特殊なことをやっているのでまた次回に!
【追加エリア】
![画像6](https://assets.st-note.com/production/uploads/images/57285032/picture_pc_7d89dcbff0b0d476749d41d30ee2127e.png)
TOPページの今後の改修
今回はTOPページの改修について、記事にしてみました。デザインが変わると、同じ内容でも結構印象が変わりますね。
前のデザインをこちらに貼っておきます!ぜひ現在のデザインと見比べてみてください!
一方でこのページまだまだ課題があると思っております。
ヘッダーがファット、キービジュアルの画像がでかすぎて予約するボタンの改修、ナビゲーションもう少し何とかしたい、ハンバーガメニューびみょいな~、全体のデバイスフォントをWebフォントに変える、スライドショーのところの〇ポチびみょい、画像加工・・などなど
今後オトナ帝国では、Webページ関連の改修もこんな形で記事として発信していきます!!!!!
ゲームし放題の施設「オトナ帝国」の2拠点目となる浅草橋基地を作るにあたり、クラウドファンディングを実施しています!支援していただけると「懐かしさに浸れる秘密基地」をいち早く体験して頂けます。限定数のあるメニューもあるのでご興味ある方はお早めに!
![コドモの頃に熱中したゲームで遊べるオトナ帝国の新拠点をOPENしたい!](https://assets.st-note.com/img/1643460848522-pAN13TGQtj.png?width=1200)