🪴 ショップだけでも、Blogだけでもない場所へ。tsukurun-Labのサイトを見直しました

tsukurun-Labでは、Notionテンプレートなどの作品とBlogの両方を続けています。

以前のHomeでは、その2つが少し別々に見えていました。作品を見に来た人にはBlogが、Blogを読みに来た人には作品が、もう少し自然に見える場所にできないかなと思ったのが今回のきっかけです。

土台は、おとよ（アルパカログ）さんが開発した astro-notion-blog です。フォークして、tsukurun-Labに必要な表示や機能を追加・調整しながら使っています。Notionの記事をAstroで静的なページにする仕組みは、そのまま活かしています。

今の色や雰囲気は気に入っていたので、全部を作り直したいわけではありませんでした。ショップの一覧でもBlogだけの場所でもなく、 つくったもの、試したこと、途中の記録が同じ場所にある小さな制作室のような入口 にできたらいいなと思っています。

今回も、仕様の整理やPreviewで気になったところの確認にはChatGPTを使い、実装はCodexへ頼みました。ここではAIの使い分けより、実際にサイトの見え方がどう変わったかを中心に残します。

以前のHomeは、Hero（ページを開いたときに最初に目に入る大きなエリア）とテンプレート紹介が中心でした。

左にコピー、右に画像枠があり、その下にテンプレートが並ぶ構成でした。Blogへの入口は少し控えめで、作品を見る場所と記事を読む場所が分かれて見えていました。

今回は余白を広く取り、テンプレートを並べる Works と、記事を見せる From the Lab を同じHomeに置いています。

「毎日に、自分らしさを少しずつ。」というコピーや、白からアイボリーの背景、淡い水彩、実際のテンプレート画像は気に入っていたので、形式は変わりましたが、敢えて残しています。変えたかったのは雰囲気そのものではなく、作品とBlogがもう少し自然につながって見えるところでした。

ここでは、公開中の画面を Production 、本番へ出す前の確認用画面を Preview と呼びます。

変更前のProduction。左のコピーと右の画像枠が並んだHomeです。

現在のProduction。同じ幅でスクショを撮りました。

現在のWorks。大・中・小で見せ方を変えています。

見た目は、一度決めたら終わりという感じにはなりませんでした。

Heroの背景が少し薄く感じて、黄・紫・緑の色を一度戻しました。すると今度は、バナー画像の四角い輪郭が目立ちます。

原因を調べると、画像そのものに不透明な背景が入っていました。そこで透明背景のバナーへ変更し、そのあと背後に置いていた3色のにじみも外しています。

最初から「背景色をなくそう」と決めていたわけではありません。Previewで実際の画面を見て、ひとつ直すと別のところが見えてくる。その繰り返しでした。

最終的なHeroには、最初に戻した3色の背景は残していません。

Blog一覧は、以前は大きな記事カードが続く形でした。

大きなカードがずっと続くより、ぱっと見たときに「何か読んでみようかな」と探せる方が、自分は好きでした。そこで、最新の記事は少し大きく、その後の記事は小さなサムネイルとタイトルを中心にしています。最新記事を見せる Latest 、最近よく読まれている記事や反応の気配を見せる Signals 、少し前の記事を並べる Recent notes 、テーマから探せる Tags に分けて、一覧全体は小さな雑誌の目次に近い雰囲気へ寄せました。

現在のBlog一覧。Latest / Signals / Recent notesが並びます。

Signalsには、最近読まれた記事や反応の気配を添えています。数字を並べて順位を競うというより、「最近このあたりが動いているようです」と、そっと見えるくらいにしました。データを取得できないときはSignalsだけを隠し、記事一覧そのものは残ります。

以前あった左側のサイドバーを外し、本文と目次の2つを中心にしています。目次は本文の横の余白へ置いて、白い紙面のように読める場所へ寄せました。

現在の記事ページ。スクロール中もヘッダーと目次を使える状態です。
記事本文やURL、Notionから記事を表示する仕組みは引き継いでいます。

読み終わったあとには、Tags、Like、前後の記事、同じカテゴリの記事を順に置きました。Likeは淡い水彩の見た目に変えていますが、保存と取り消しにはこれまでの仕組みを使っています。

公開前に実際に長い記事を読んでいると、Blog一覧へ戻るためにページの一番上まで毎回戻っていることに気づきました。。そこで公開後の調整として、上部のヘッダーはスクロールしても残るようにしています。目次から見出しへ移動したときに、見出しがヘッダーの裏へ隠れないよう位置もあわせて調整しました。狭い画面にすると、ヘッダー左側の小さな葉が消えてしまっていたので、そこは残るように修正しています。

サイト全体を整えるだけだと少し面白みがなかったので、右下には小さな遊びを加えてみたくなりました。そこで入れたのが、スクロールに合わせて育つ植物です。

Homeでは、ページを開くと芽、Worksを過ぎると葉が伸びて、From the Labまで進むと花が咲きます。

Homeをスクロールしたときの、芽・葉・花の3状態です。

鉢を押すと、花びらや葉が散ってページの上へ戻ります。Blog一覧と記事ページにも置き、そこではスクロールの進み具合に合わせて育つようにしました。

ただ、動きが付けばそれで良いわけでもありませんでした。

茎が葉より飛び出して見えたり、「上へ」という文字がなくても動きは伝わりそうだったり、花も1種類だけだと少し寂しかったり。。Previewで見ながら、こういう細かな違和感をひとつずつ調整しています。

花には黄、コーラル、ラベンダー、アイボリーの4種類を用意しました。

また、端末側で「動きを減らす」設定を使っている場合は、散る演出を止めて、押すとすぐページ上部へ戻るようにしています。

幅320pxの現在のHome。狭い画面でもヘッダーの葉とHome / Blogを残しています。

植物のモチーフは、右下だけではありません。

ヘッダーとfaviconにも小さな葉を置いています。faviconは、ブラウザのタブなどに表示される小さなアイコンです。

最初のfaviconは葉を塗りつぶした形でした。でも、サイト内の植物を見比べると、バナーなどで使っている細い線画の方が雰囲気に合います。そこで塗りを外し、サイト内の線の表情を揃えました。

現行faviconのサイズ見本。ブラウザのタブを撮った画像ではありません。

リンクを共有したときに出るプレビュー画像も見直しました。これはOGP画像と呼ばれるもので、SNSやチャットへURLを貼ったときなどに表示されます。

以前はHomeのプレビューに宇宙飛行士の画像が出ていました。記事のFeaturedImageが原因ではなく、サイト共通のOGP画像が使われていたためです。

HomeとBlogには新しいブランド画像を用意し、記事ページではそれぞれの記事のFeaturedImageを使う形にしています。

画面が整っていても、それだけでは公開前の確認は終わりませんでした。

最後に生成されたHTMLやRSSを確認すると、検索エンジンに「このページの正式なURLはこれです」と伝える設定や、SNSで共有するときの情報、RSSのリンクに http://localhost:4321 が残っていました。

localhost は、自分のPC上で確認するときに使うURLです。RSSはBlogの更新情報を配信するためのデータで、どちらも普通にページを眺めているだけでは気づきにくいところでした。

このときはコードを直したのではなく、PreviewのURLを正しく指定してビルドし直しました。その後に確認したHTMLとRSSからは、 localhost への参照がなくなっています。

ここまでPreviewで確認してきた内容は、その後本番にも反映しました。

また触れば、たぶん気になるところは出てきます。

つくったものを置く場所と、その途中をBlogへ残す場所が、前より少し近くなりました。まずはこの形で実際に使ってみて、また必要になったところから直していこうと思います。