サイトを「湖畔の窓」にリデザイン
サイト全体を、新しいデザインシステム「湖畔の窓」で作り直しました。4月に入れたターミナル風の画面から、明るい紙のページに窓がひとつ開いている見た目に変えています。
窓の中の風景
トップの大きな窓には、午後2時の湖畔があります。風景は1枚の SVG で、手描きのパスに質感のフィルタを重ねて描いています。
窓の中ではいくつかの出来事が、終わりなく続いています。
- 雲が右へ流れ、船が96秒かけて湖を往復します。
- 31秒ごとに風が吹き、木と葦が揺れて湖面のきらめきが走ります。
- ときどき魚が跳ね、鳥の群れが横切り、雲の影が森と湖を通り過ぎます。
ナビの「作品」にカーソルを合わせると森へ、「書きもの」なら湖へ、窓のカメラがゆっくり寄ります。
動かすところと、動かさないところ
動くのは窓の中と、要素が最初に現れるときと、カーソルを合わせたときのわずかな浮き上がりだけです。文字の上では何も動かしません。
窓が画面の外にあるときは、風景の時計を止めています。OS の設定で動きを減らしている場合は、最初から完成した状態を表示します。風景の SVG は1本だけで、作品一覧などの小さな窓には書き出した静止画を使っています。
紙とインク
色は紙(明るいテーマ)とインク(暗いテーマ)の2組です。ナビの「夜の部屋」で切り替えられます。どちらのテーマでも、窓の中の風景は昼のままです。
書体は和文に Noto Sans JP、欧文と数字に Geist を使っています。
作品にスクリーンショット
作品カードに、各アプリのスクリーンショットを載せるようにしました。スクリーンショットのある作品は、カードの小窓に実際の画面が入ります。
デザインの細かな決まりごとは、GitHub のデザイン文書にまとめています。