個人サイトをリニューアルしました！
個人サイトをリニューアルしました！🎉
リニューアルは、今回で6回目です。
制作期間は、去年の12月27日から今年の1月28日までの約1ヶ月間です。
個人的には最速の開発期間でした。AIの力は偉大ですね。
本記事では、個人サイトのリニューアルでこだわったポイントについて紹介します。
ノート風という世界観
個人サイトを見て頂くとわかるかと思いますが、ノート風のデザインにしています。
デザイン元は、現実世界にあるノートのデザインをそのまま再現しています。
たとえば、以下の場所を拘っています。
- 右上の NOやDATEの表示
- タイトル部分の広い空間
- タイトル下にある文字のメモリ線
- 罫線付きの本文
メモリ線
特にメモリ線は苦労しました。
長いメモリ線と短いメモリ線が一定のリズムで表示されています。
また、線の先端を丸くしたりと細部まで拘っています。
最初は 先端を丸くさせなくても良いじゃんと思ったのですが、どうしても諦めきれずに1時間ぐらい格闘していました。笑
AIデザインレビュー
デザイン案を練る際には v0やfigma make などの AI と壁打ちすることがあります。
要素が増える際に、どういう配置にしたら良いか アイデアを貰うために チャットでやりとりしています。
AIに対してノート風のデザインを指示すると、ほぼ毎回 左側に縦の線を1本引いたデザインを作ってきます。
これは外国のノートなら有名なのかしれませんが、私はあまり見たことがないため、却下しました。
落書き
現実世界のノートを使う際、落書きすることはよくありました。
なので、右下の隅に アニメーション付きの落書きをひっそりと忍ばしています。
テーマカラーは緑
せっかくなので、好きな色をテーマカラーにしたいです。
私は緑が好きなので、全体的に緑色で統一しています。
青も好きなので、アクセントに青を少しだけ入れようかと悩んでいました。
作っている途中に青を入れていくよりも、最後に完成した後に 少しだけ青を付け加えた方が 整うかなと思ったので入れていません。
完成したのに、まだ入れていません。笑
また簡単にですが、ダークモードにも対応しています。
背景が黒、テキストが緑だと、ハッカーっぽくなっちゃいました。
付箋
ノートには付箋を貼ることがあります。
他のページへの移動は、付箋を使って表現しました。
開いているページの付箋は前に引っ付いていて、それ以外の付箋は後ろに引っ付いているイメージです。
付箋をホバーすると、ほんの少し上に持ち上がります。笑
角丸はしていない
ノートに貼っている画像などに、角を丸くさせることができます。
うまく言語化できていないのですが、記事本文中は 角丸をせずに、直角にしています。
写真に関しては、マスキングテープやセロハンテープで貼っている感じにしたいなと思っています。（できていません）
※ 追記: 簡易ですが入れました。
終わりに
拘っているところと、そうでないところがハッキリしています。
記事本文は時間をかけていますが、ホームや自己紹介ページはかなり手抜きです。笑
機能リクエストは以下のリンクより受け付けています！
短期間で拘り抜いて、大満足の1ヶ月間でした！
シェアする
フォローする
関連する記事
タグ「成果物」の記事
個人サイト（ジブンノート）をリニューアルしました。本記事では、個人サイトをリニューアルした際にあった出来事などを振り返りたいと思います。ちなみに、個人サイトは以下のページです。ノート風デザインで、ブログ記事が読めるようになりました！🎉
個人開発として、機能リクエスト投稿サービスを作成しました。 サービス名は Fequest で、Feature Request の略です。 Fequest は、プロダクトに対して「この機能を追加してほしい」「ここを改善してほしい」といった要望
2025-12-28