Lovableでブログを育てる――限定公開と画像ギャラリーの設計判断

自社ブログを運営していると、「こういう記事を書きたい」「こういう見せ方がしたい」という思いが少しずつ溜まってきます。

最近、2つの機能を追加しました。

1つ目は、記事の後半を限定公開にする仕組み。

2つ目は、ブログのカバー画像を個展のように見せるギャラリーページ。

どちらも「あったらいいな」という単純な思いつきではなく、設計判断の積み重ねで形になりました。

この記事では、その判断プロセスを残しておきます。

Lovableについて

Lovableは、LLMを使いながらウェブサイトを自由に構築できるツールです。このブログもLovableで作っています。もし興味があれば、こちらの招待リンクから始められます。

限定公開設計：記事を段階的に開示する

判断①：別記事ではなく、同一記事で後半をロック

最初に考えたのは、noteのように「前半は無料、後半は限定公開」という形です。

別の記事として分ける方法も検討しましたが、それだとSEO的にも分散してしまいますし、読者体験としても分断されてしまうように感じました。

同一記事で、途中から「ここから先は限定公開です」とロックする方が、思想的にも技術的にも合っているのではないかと考え、この形を選びました。

理由は3つ。

判断②：ユーザー管理をしない設計

次に考えたのは、「誰がアクセスできるか」をどう管理するか。

一般的には、ユーザー登録してログインして、という仕組みが必要になりそうです。

ただ、ブログでユーザー管理をすることに、個人的には少し違和感を覚えました。

このブログは「読みたい人が読む」という前提で作っているため、ユーザー登録を求めることで、その前提が変わってしまうように思えたからです。

選んだのは、決済後リダイレクトでロックを解放する方法です。

具体的には：

これなら、ブログ側でユーザー情報を持つ必要がありません。

決済が完了した瞬間に読めて、メールを送る必要もありません。

実は、この設計を考える過程で悩んだ部分がありました。

「ユーザー管理しないのに、どうやって認証するのか？」という点です。

ただ、「Stripeを信頼する」「URLに権限を載せる」という発想に切り替えることで、シンプルな実装にたどり着くことができました。

画像ギャラリー設計：素材屋ではなく、個展として見せる

課題：ブログのカバー画像を活用したい

ブログの記事には、Lovableで作ったカバー画像を使っています。

せっかく作った画像なので、「これ、ギャラリーとして見せられるのでは？」と考えました。

ただ、単なる「素材配布サイト」のようにはしたくないという思いがありました。

判断①：個展のような雰囲気にする

画像を並べるのではなく、個展のように見せて、持ち帰りもできるという位置づけにしました。

具体的には：

こうすることで、「素材を探す」ではなく「作品を鑑賞して、気に入ったら持ち帰る」という体験になります。

判断②：「今日の一枚」で問いかける

もう一つ工夫したのが、「今日の一枚」というセクションです。

ライブラリの中からランダムで一枚表示し、いきなりタイトルを見せるのではなく、問いかけを置くようにしました。

「この画像は何を伝えているのか？」

「どんな場面を想像しますか？」

そうすることで、絵画を鑑賞する際のように、感じ取ったり考えを巡らせてもらえるかもしれない。

その後のセクションでは、画像を余白を多めにとって並べました。

個展を巡回するかのような配置です。

背景：Points of Youとアート思考

この発想が出てきたのは、私がPoints of Youのファシリテーション資格を持っているからだと思います。

Points of Youは、写真を使った対話のツールです。

カードを引いて、「この写真から何を感じるか？」と問いかけることで、内省や対話が深まります。

アート思考についても勉強したことがあったので、「画像を見て、問いかける」という体験設計が自然に浮かびました。

たまたま思いついたわけではなく、これまでの学びが身体化していたんだと思います。

設計判断の背景にあるもの

2つの機能追加を振り返ると、共通しているのは「思想を守りながら、技術を選ぶ」という姿勢です。

どちらも、「やりたいこと」が先にあって、それを実現するために技術を選んでいます。

技術から入るのではなく、思想から入る。

技術は手段だと考えています。

大事なのは、何を守り、何を伝えたいか。

そこがブレなければ、実装は自然とついてくるように思います。

ここから先は限定公開の内容です。

開発の深い部分について踏み込んだ内容を書いていきます。

なぜこの機能を作ったのかについてのもっと背後にあるものを説明しています。