187本の記事から、すみれさんだけのnote案内サイトを作りました。

今回は、すみれさんのnoteを案内するサイトマップを作りました。

187本の記事をテーマごとに整理して、初めて訪れた人も、以前からの読者さんも、興味のある記事を見つけやすくしたサイトです。

ただ記事を並べるだけではなく、すみれさんの世界観に合わせて、デザインやちょっとした演出も加えています。

まずは、こちら。

すみれさんのnote案内はこちら

すみれのnote案内 気になるテーマから、すみれの記事に出会える案内サイト。 sumire-note-guide.ushiro339.workers.dev

実務でこういうサイト作りをするのは、わたしにとって結構久しぶりなのです。

今回はChatGPTのWorkを使って、記事を読み込んで整理するところから始めて、見た目を作って、並べて、また直して。

やってみると「あ、ここ気になるな」が次々出てくるｗ
その辺も含めて、どう考えながら作ったかをちょっと書いてみます。

きっかけは、さくらの日常マップでした

そもそも今回のお話は、以前作った「さくらマップ」をすみれさんが見てくださったところから始まりました。

さくらさんがこれまで書いてきた記事を整理して、興味のあるテーマから読み進められるようにしたサイトです。

それを見たすみれさんから、「私のも作ってほしい」とご依頼をいただきました。

いや、嬉しかったです😭

自分が面白いと思って作ったものを見て、別の誰かが「自分にも欲しい」と思ってくれる。

作ったものが、次の仕事を連れてきてくれたわけです。
ただ、同じものを作ればいいというわけでもない。

さくらさんにはさくらさんの世界があるし、すみれさんにはすみれさんの世界がある。

だから今回は、すみれさんの記事や雰囲気を見ながら、また一から考えることにしました。

元々、すみれさんの世界があった

今回、作りやすかったのは、すみれさんのnoteが元々かなり整理されていたこと。

マガジンもテーマごとに分かれているし、記事に使われている画像にも統一感がある。そしてなにより文章がとても綺麗。

紫の色味とか、花のモチーフとか。並べてみると、もう「すみれさんの感じ」がある。なので、その雰囲気を活かしながら、サイトとしてどう見せるかを考えていきました。

もちろん、その前に記事の読み込みから。

どんなことを書いているのか。
どんなテーマがあるのか。
記事同士がどうつながっているのか。

女風の利用体験から、自分の身体や気持ち、人との距離感、日常やnoteでの交流まで。読んでいくと、入口にできそうな切り口がいくつもある。

それを整理して、気になったところから記事に進めるようにしています。
すみれさんが積み重ねてきた記事と素材が、今回のサイトの土台になりました。

初めて見る人のつもりで眺める

作りながら考えていたのは、初めて来た人にどう見えるか。

自分は記事を読んでいるし、作っているから、どこに何があるか分かる。
でも、初めて来る人はそうじゃない。

どんな人のサイトなのか。
何が読めるのか。まず、どこを見たらいいのか。

冒頭で1秒でその辺が伝わるようにしたい。

最初は、全体の色合いはまとまっているけど、すみれさん像が少し分かりづらい感じがありました。

そこで人物のイラストを入れて、最初に雰囲気が伝わるように調整。
その下には「まずは、この記事から。」という入口を作りました。

ここも、最初は3記事という話だったんだけど。

初めての人に最初に届けたいものって、3本もいるかな？
この先にもテーマ別の記事があるし、結構重複するよね。

そんな話をして、ここは1本に絞りました。

置いたのは「はじめて女性風俗を利用した日のこと（2019年）」。
そこに、すみれさん本人からの一言も添えています。

この一言があると、なぜここにこの記事があるのかが伝わる。
その先は、自分の興味に合わせてテーマやマガジンから選べる。

何を載せるかも大事だけど、何を最初に見せて、何を後に回すか。
久しぶりに作って、そこはやっぱり大事だなと思いました。

サムネの統一感って大事

あと、今回かなり感じたのがこれ。

サムネの統一感。

noteで記事を一つずつ見ているときと、サイト上で何枚も並べたときでは、見え方がかなり違う。

一枚ずつはいい画像でも、色も絵柄も全部違ったら、並べたときに結構ガチャガチャしちゃう。

すみれさんの画像は、色味やモチーフに共通するものがあったので、サイトに持ってきてもまとまりやすかった。

普段から使っている画像って、こういうところにも効いてくるんだなと。
ただ、統一されていればそれで完成でもなくて。

同じ色味が続くと、今度はちょっと単調に見える罠がある。

実際、作っている途中でも「まとまってるけど、少し寂しくない？」となりました。そこでボタンや小さな飾りに淡いピンクを足したり、画像の大きさや配置を変えたり。

冒頭に横長の絵があって、その下にも大きな横長の絵が続くと、ちょっとのっぺり見える。そういうところも、置いてみてから調整しました。

最後のほうは、こちらでもイメージ画像を作って追加しています。
元々の素材を活かしつつ、足りないところを補っていく感じですね。

ちなみに、トップには白い蝶が一匹飛んでます。
これは見てほしい。可愛いのでｗ

このサイトだけのものも欲しかった

形ができてきた最後のほうで、もうひとつ思ったことがありました。

ここだけのものも欲しいなと。

記事を探しやすくするのは、もちろん大事。
でも、マガジンはnoteにもあるし、記事を読む場所もnote。

せっかく別にサイトを作るなら、ここに来たら知れるすみれさんがあってもいいんじゃないか。

それで「すみれの裏話」という場所を作りました。
すみれさんから届いたのは、最近ハマっている韓国のお菓子「ヤッカ」の話。

こういうのでいいんだよねｗ

どんなものが好きなのか。最近、何にハマっているのか。
記事を読んでいるときとはまた違うところで、その人がちょっと見える。

文章を置いてみたら、お菓子の画像も欲しくなったので、小皿にヤッカを並べて、お茶を添えたイラストも作りました。

サイトの最後に、ひと息つける場所ができた感じです。

こういう小さな話が入ると、すみれさんの場所として、もう少し親しみを感じてもらえるんじゃないかなと思っています。

作って、見て、また直す

今回、ChatGPTのWorkに作業を手伝ってもらいながら進めたけど、出てきたものを見て決めることは結構ありました。

「ここ、ちょっと寂しいな」「これ、同じような内容が重なってない？」「最初に3本もいる？」「ここは画像があったほうがよくない？」

そうやって見ていくと、少しずつ形が変わってくる。
すみれさんからコメントや裏話が届いて、また印象が変わる。

作る前に全部決められるわけでもないし、実際に置いてみて気づくこともある。

久しぶりだったけど、そういう調整はやっぱり面白かったです。

そして改めて思ったのは、同じようなサイトを何個も作るより、その人に合った見せ方を考える方が、わたしは好きなんだなということ。

今回のすみれさんなら、すみれ色と花の雰囲気。別の人なら、きっと全然違うものになると思います。

自分のnoteにも、入口があったら

記事が増えてくると、「どこから読んでもらおうか」ってなることがあると思う。

新しい記事を読んでもらえるのはうれしいけど、前に書いた記事にも、読んでほしいものはあるだろうし。

せっかく書いた記事が、新着一覧の奥に埋もれてしまうのも、ちょっともったいない。

今回のサイトは、すみれさんが積み重ねてきた記事に、いくつか入口を作ってみたものです。

初めての方も、すでにすみれさんを知っている方も。気になったテーマから、のぞいてみてもらえたら嬉しいです。

すみれさんのnote案内を見てみる

すみれのnote案内 気になるテーマから、すみれの記事に出会える案内サイト。 sumire-note-guide.ushiro339.workers.dev

でも個人的にはこれが一番スキ。サイトには乗っけてないけどｗ

それでは、自分のnoteにもこんな案内サイトがあったらいいな、と思った方はお気軽に声をかけてください。ということで。

【期間限定】note案内サイトの制作を募集します

今回のすみれさんマップをきっかけに、note案内サイトの制作を少しずつサービス化してみることにしました。

まだ試験運用の段階なので、今回は初期モニター価格で募集します。

制作料金：9,800円（税込）募集人数：先着3名様
※動画制作で忙しいので3名にしました…

記事の整理、テーマ別の案内、サイトのデザインから公開まで対応します。

決まったテンプレートに記事を流し込むのではなく、その方の記事や雰囲気に合わせて、一つずつ考えながら作ります。

ただし、記事数やご希望の内容によっては、別途ご相談させてください。

「自分のnoteも、ちょっと整理してみたいな」という方は、お気軽にnoteのコメントかDMでお声がけくださーい😊

まずはご相談だけでも大丈夫です。
どんなサイトになるか、わたし自身も楽しみですｗ
ではでは