ホームページを更新した話

どうも。初投稿です。

初投稿は私のホームページを更新した話をしていこうと思います。

なぜ更新しようと思ったのか

まずなんで更新しようと思ったかの話ですよね。
答えは簡単です。ダサすぎる。 とにかくダサいの一言でした。

さらに言えば画像が無駄にデカかったりと最適化の面でも全然ダメなホームページで前々から作り直したいな～と思っていたのでした。

そんなことを考えながら何もしていなかったのですが。転機が訪れたのは友人とDiscordでしゃべっていた時のことでした。友人がFigmaを利用してデザインを作っていたのでした。前々から名前を聞いたことはあり、デザインを作るソフト。というくらいの認識はしていました。たまたま配信してたので見てみたらなんだこの使いやすそうで面白そうなおもちゃソフトはと軽く衝撃でした。

私は思い立ったが吉日を重視している派なのでその場でfigmaをインストールし、webデザインを始めました。
（ちなみに日曜日の夜23時くらいのことです。次の日仕事なのに何してんだか。）

デザイン

とりあえずデザインは前述のとおりFigmaで作りました。初めてのソフトで右も左もわからず上と下くらいしかわからなかったので操作方法からだったのですが直感的に操作できたのでそこまで苦ではありませんでした。（もしかしたらBlenderを少し触ったことあったのでそれとUIが似てた影響もあるかも？）

デザインの内容に関しては何も考えてませんでしたがとりあえずトップページにアクセスした際に自分のVRChatのアバターがドーンと出るようにしたいなと考えていました。

ちなみにこのアイデアは私がすげーと思ってる人の1人のつきみんさん（@tukimin_vrc）のホームページからパクっインスパイアを受けたアイデアです。こういうの好き。

というわけで2日くらいでデザインを完成させました。

コーディング

作ったデザインをもとにHTML/CSSにを書き起こしていきました。基本的にググりながら頑張っていきました。
Astroという静的サイトジェネレータを利用して作っていきました。テンプレート機能とリアルタイムで反映されるやつ便利。

中の構造としてはベースのテンプレートとそれに上物を少し載せたトップページ以外用のテンプレートの2つを作ってる感じです。トップページはベースのテンプレートに載せています。

googleフォント便利だね

サイト内コンテンツはM PLUS Rounded 1cとZen Kaku Gothic Newの2つを利用しています。
このページでフォントを選んでコピペすればフォントを適用できます。見た目がいい感じになっていいね。

画像をwebpに

画像を普通にpngで配置してたのをwebpに圧縮しました。圧縮にはSquooshを利用しました。ドラッグアンドドロップしてフォーマット指定してダウンロードするだけだから便利だね。いい感じになった。

そんなこんなで完成したのがこれです。コンテンツ自体はそんなに変わってないです。

今後やりたいこと

とはいえまだまだ課題があるのでやりたいこと自体はあります。

トップページのコンテンツ

スクロールすると横から出てくるやつあるじゃないですか。あれやりたい。

背景を豪華に

背景が単色なので図形を入れたい。でも入れすぎるとごちゃるので悩みどころ。

まとめ

まだまだ伸びしろはあると思うのでまたしばらくしたらリメイクしたいですね。
もっとデザインの練習もしてみたい。