← 書きもの

サイトを「湖畔の窓」にリデザイン

hidekingerzsite update

サイト全体を、新しいデザインシステム「湖畔の窓」で作り直しました。4月に入れたターミナル風の画面から、明るい紙のページに窓がひとつ開いている見た目に変えています。

窓の中の風景

トップの大きな窓には、午後2時の湖畔があります。風景は1枚の SVG で、手描きのパスに質感のフィルタを重ねて描いています。

窓の中ではいくつかの出来事が、終わりなく続いています。

  • 雲が右へ流れ、船が96秒かけて湖を往復します。
  • 31秒ごとに風が吹き、木と葦が揺れて湖面のきらめきが走ります。
  • ときどき魚が跳ね、鳥の群れが横切り、雲の影が森と湖を通り過ぎます。

ナビの「作品」にカーソルを合わせると森へ、「書きもの」なら湖へ、窓のカメラがゆっくり寄ります。

動かすところと、動かさないところ

動くのは窓の中と、要素が最初に現れるときと、カーソルを合わせたときのわずかな浮き上がりだけです。文字の上では何も動かしません。

窓が画面の外にあるときは、風景の時計を止めています。OS の設定で動きを減らしている場合は、最初から完成した状態を表示します。風景の SVG は1本だけで、作品一覧などの小さな窓には書き出した静止画を使っています。

紙とインク

色は紙(明るいテーマ)とインク(暗いテーマ)の2組です。ナビの「夜の部屋」で切り替えられます。どちらのテーマでも、窓の中の風景は昼のままです。

書体は和文に Noto Sans JP、欧文と数字に Geist を使っています。

作品にスクリーンショット

作品カードに、各アプリのスクリーンショットを載せるようにしました。スクリーンショットのある作品は、カードの小窓に実際の画面が入ります。

デザインの細かな決まりごとは、GitHub のデザイン文書にまとめています。