前書き#
先月から個人サイトの書き直しを始めました。そして先週ほぼ完成し、今見ているのは完全に新しいデザインのサイトです。このことは長い間計画していましたが、ついに 996 から逃れた後に実現しました。コードマラソンを経て、ほとんど毎日暇なく、狂気じみたことをしていました。実際、先月に Next.js App Router が安定版になったときには、kamiのリファクタリングも考えましたし、実際に試しましたが、1 週間後に諦めました。
https://innei.in/posts/programming/next-app-router-migration-what-is-new-php
だから、単に最初からやり直すことにしました。使い古された二次元のスタイルも変えてみました。
::: ギャラリー
:::
左側は書き直し後のもので、右側は以前のものです。スタイルには大きな違いがあります。以前の配色は非常に混乱しており、ガイドラインに基づいた色の使用がなく、メインカラーとサブカラーが混在していましたが、今では強調色が 1 つだけで、スタイルもより柔らかく、突出していません。
📜 A minimalist personal website embodying the purity of paper and freshness of snow.
色の選択#
今回の色については、色を使用する必要がある場所を除いて、基本的には薄い中立色を使用しました。強調色の使用については、いくつかのカラーサイトを見て、いくつかのまずまずの色を調整しました。強調色は一意ではありませんが、1 回のセッション中は固定されています。各ブラウジング時に、サーバー側でこのブラウジングの強調色を設定し、リフレッシュ後に強調色が変化するようにします。また、各強調色にはダークモードでの対応もあります。
このセッションでは、ダークモードの強調色は#A0A7D4で、ライトモードでは#69a6ccです。これが 1 セットの色です。
現在、次の色が指定されています。一部の組み合わせにはまだ満足していませんが、コメント欄で助けていただけますか。
また、vitepress のダーク / ライトモード切り替えのアニメーションも参考にしました。
ナビゲーションバー / ヘッダー#
今回のナビゲーションバー、つまり最上部のバーも非常に複雑な部分で、コードの量だけでも 1000 行になります。それはそのインタラクションのロジックが比較的複雑だからです。
まず、デスクトップモードでは 4 つのモードがあります。
- 通常のフローティングバー
- 記事タイトルバーの表示
- 記事タイトルバーが表示されているとき、上にスクロールすると表示される補助ナビゲーションバー
- コンテナの幅が大きく、記事ではない場合に表示されるぼかしのあるナビゲーションバー
上記の 4 つのシーンの判断ロジックは頭が痛くなります。また、<cali.so> からハイライトのエフェクトなどをコピーしました。ただし、現在の課題は、framer motion によるレイアウトのずれの問題で、現在解決策はありません。
紙#
日記エリアについては、Shiro ではまだ「紙」を媒体として使用しています。文言は全て「手記」と統一し、iOS 17 で導入される予定の手記アプリに由来しています。
私はこれらの誕生記録の媒体は紙であるべきだと考えています。Shiro は日本語で「白」を意味します。そして紙の色は白です。
レイアウト#
プレビューのレイアウトでは、「手記」、「水文」、「ページ」はそれぞれ異なります。
手記は最も大きな違いで、3 つのカラムで構成されています。中央には紙があり、左側にはタイムライン、右側には記事の目次があります。
水文とページは両方とも 2 カラムのレイアウトですが、水文の本文はより多くの内容があり、記事の目次と対応して中央に配置されるため、中央揃えではありません。
::: ギャラリー
:::
右側にパーセンテージが表示されていることに気付いたかもしれませんが、それは読み進捗です。
記事の目次が表示しきれない場合、サイドバーに移動します。
リアルタイムアクティビティ#
ヘッダー左側のサイトのアイコンの両側にあるリアルタイムアクティビティのアイコンも、<cali.so> からのアイデアを取り入れました。Swift を使用してシンプルなアプリを作成し、システムのリアルタイムプロセスとメディア情報を報告することができます。リンクは以下に貼ってありますが、コードは非常にひどく書かれています。現在は macOS のみで、Windows のバージョンは考慮していません。
上記のアプリを使用し、クラウド関数機能と WebSocket を組み合わせることで、リアルタイムアクティビティを表示することができます。
一部のアプリには興味深いサフィックスが追加されています。
たとえば、VS Code を使用している場合、「Innei is using Code Restart TSServer」と表示されます。また、Kitty を使用している場合、「Innei is using Kitty to play with cats」と表示されます。
もちろん、他の通知も受け取ることがあります。たとえば、公開された記事などです。
ここまでです。次の機会にお話ししましょう。
ここまで読んでいただいたのなら、Star を押して応援していただけませんか？
📜 A minimalist personal website embodying the purity of paper and freshness of snow.
この記事は Mix Space から xLog に同期されています。
元のリンクは https://innei.in/posts/design/new-website-design-about-shiro です。