概要

先日、前々から気に入らないと言い続けていたこのサイトのデザインを全体的に改修してきました。ので、その記録とマジでデザインがわからんという話と、近況報告みたいなおまけ付きの日記みたいな内容となります。

以前から弊サイトを見てくださってる方ならなんとなく変化が分かっていただけると思うのですが、主にUIの統一感を作るっていう部分と、色を加えるってところに力を入れてきました。

経緯

このサイトを作った昨年秋時点では、当時作り上げたこのサイトのデザインをとても気に入っていました。がしかし、世に溢れるAI感満載のUIのwebアプリを見る中で、自身のサイトも他人から見ると同じように見えているのかもしれないと思うようになってしまい、改修したい思いがじわじわと湧き出ていました。

あとは、ミンゲイインターネットさんで見つけた素敵な個人ブログサイトの影響も大きいと思います。

ミンゲイインターネットは、ミンゲイを感じるブログを xx 件あつめているサイトです。

と紹介ページにもある通り、ミンゲイインターネットさんは色んな個人ブログが集められているポータルのようなサイトです。自身のブログがなぜかそちらに掲載されていることをアクセスログから知り、色々と他の方の個人ブログを見るようになったんですが、まあみなさんサイトのデザインが素敵なんですよね。

Hugoなんかで配布されているテーマを使っている方ももちろん多数いらっしゃいますが、全部自作だと思われるサイト運営者の方も同じくらいで、そういうサイトを見た後に自分のを見るとどうにも見劣りするといいますか……。

改善

まず色々見てみて何が悪いんかなあと思って気付いたのが、shadcn-ui感が強すぎることです。まあそりゃshadcn使ってるから強いのは当たり前なんですが、統一感あるのはいいけど見慣れた感じになってしまうなと。

shadcn自体のインポートは変更してませんが、中身をちょろっといじってみました。

カードのふちのボーダーを外したのがいい感じに効いてる気がします。デザインのセンスが自分にないことわかっていたので、今回はGoogleのmaterial3を全体的に参考にしてみました。

Google Pixelにメインスマホを変更したことでmaterial UIを見る機会が超増えたんですが、これ、とてもシンプルで見やすくていいんですよねえ。このサイトにも適用しやすそうだしってことで、全体的にできる限り寄せてみました。

紆余曲折しながらなんだかんだいい感じにできましたが、やっぱりデザインはムズイ…。単純にその分野を勉強したことがないからというは要因として大きそうではありますが。

つよつよエンジニアさんで、個人サイトのデザインまで素敵な方は一体どこでその技術を仕入れてきたのが気になりました。

おわり

UIリニューアルしたぞ！とアピールしたかっただけなので大して書くことがありませんでした！！！！！せっかく色々変えたので良ければ見ていってください。あと、デザインのいろはをどうやって学べばいいかも俺に教えてくれ！

では、また次回👋　人生最後の夏休みに入ったので、恐らく次の更新はおでかけ記事とかになると思います！（適当）

おま〇け

記事にするほどではなかったですが、テスト前に色々おでかけしたりしたのでその写真です。俺の思い出鑑賞会:blebcat: