<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>テキスト on ものくろデイズ（旧青春モノクローム）</title><link>https://rainy.black/news/</link><description>Recent content in テキスト on ものくろデイズ（旧青春モノクローム）</description><generator>Hugo</generator><language>ja</language><lastBuildDate>Tue, 19 May 2026 10:09:52 +0900</lastBuildDate><atom:link href="https://rainy.black/news/index.xml" rel="self" type="application/rss+xml"/><item><title>新しいサイトの使い方</title><link>https://rainy.black/news/site-renewal2/</link><pubDate>Tue, 19 May 2026 10:09:52 +0900</pubDate><guid>https://rainy.black/news/site-renewal2/</guid><description>&lt;div class="renewal-lead"&gt;
 新しい rainy.black の見方を、よく使う場所ごとにまとめました。旧サイトから変わったところも、先にざっくり書いておきます。
&lt;/div&gt;

&lt;h2 id="旧サイトからの変更点"&gt;旧サイトからの変更点&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;押せる場所を限定して、だらだら読めることに特化。&lt;/li&gt;
&lt;li&gt;漫画とポエムが混じり合っていたので、今後の展開を考え、ポエムはテキスト＆独り言、漫画は漫画だけに。&lt;/li&gt;
&lt;li&gt;メニューやリンクはクリック/タップして表示されるメニューに集約。&lt;/li&gt;
&lt;li&gt;検索にAIを組み込んでふわっとした検索でも何かしら結果がでるように改良（ベータ版）。&lt;/li&gt;
&lt;li&gt;「読みました」ボタンの名前にはこだわりがあったけど、今回ついでにブックマーク機能も実装したので「しおりをはさむ」ボタンに。&lt;/li&gt;
&lt;li&gt;とにかくぽちぽち手でhtml打ってた頃に近づけた。サイトの動作は軽くなった。しかし更新は大変になった。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="新しいサイトの使い方"&gt;新しいサイトの使い方&lt;/h2&gt;
&lt;h3 id="pc版メニュー"&gt;PC版メニュー&lt;/h3&gt;
&lt;div class="renewal-guide-card"&gt;
 &lt;div class="renewal-guide-media"&gt;
 &lt;img src="https://rainy.black/news/site-renewal2/guide-sidebar-closed.png" alt="閉じた状態の左メニュー"&gt;
 &lt;/div&gt;
 &lt;div class="renewal-guide-body"&gt;
 
 &lt;p class="renewal-guide-label"&gt;閉じた状態&lt;/p&gt;
 
 &lt;p&gt;ふだんは細い左メニューが出ています。&lt;/p&gt;
&lt;p&gt;中央の &lt;code&gt;MENU&lt;/code&gt; を押すと、メニューを開けます。閉じたままでも、ホームや検索などの基本ページにはジャンプできます。ロゴをクリックするとトップページに戻ります。&lt;/p&gt;

 &lt;/div&gt;
&lt;/div&gt;

&lt;div class="renewal-guide-card"&gt;
 &lt;div class="renewal-guide-media"&gt;
 &lt;img src="https://rainy.black/news/site-renewal2/guide-sidebar-open.png" alt="開いた状態の左メニュー"&gt;
 &lt;/div&gt;
 &lt;div class="renewal-guide-body"&gt;
 
 &lt;p class="renewal-guide-label"&gt;開いた状態&lt;/p&gt;
 
 &lt;p&gt;開くと、左側にロゴと主要メニュー、右側にオーバーレイメニューが出ます。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;main&lt;/code&gt; でトップ、&lt;code&gt;検索&lt;/code&gt; で探す、&lt;code&gt;ブックマーク&lt;/code&gt; でしおり一覧、&lt;code&gt;お問い合わせ&lt;/code&gt; で連絡先へ移動できます。PC版では右はしに「独り言」が最新3件分表示されます。&lt;/p&gt;

 &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id="スマホタブレット"&gt;スマホ/タブレット&lt;/h3&gt;
&lt;div class="renewal-guide-card"&gt;
 &lt;div class="renewal-guide-media"&gt;
 &lt;img src="https://rainy.black/news/site-renewal2/guide-mobile-menu.png" alt="スマホ表示のオーバーレイメニュー"&gt;
 &lt;/div&gt;
 &lt;div class="renewal-guide-body"&gt;
 
 &lt;p class="renewal-guide-label"&gt;スマホで使う場所&lt;/p&gt;
 
 &lt;p&gt;スマホでは、右上の &lt;code&gt;menu&lt;/code&gt; から開くオーバーレイメニューが入口です。&lt;/p&gt;
&lt;p&gt;「検索」がサイトマップをかねているため、すべてのページへのリンクが掲載されています。&lt;/p&gt;

 &lt;/div&gt;
&lt;/div&gt;

&lt;h2 id="漫画一覧まわりの使い方"&gt;漫画一覧まわりの使い方&lt;/h2&gt;
&lt;h3 id="ページ内リンクと現在位置について"&gt;ページ内リンクと現在位置について&lt;/h3&gt;
&lt;div class="renewal-guide-card"&gt;
 &lt;div class="renewal-guide-media"&gt;
 &lt;img src="https://rainy.black/news/site-renewal2/SC001_5.jpg" alt="現在のページ数とサムネイル一覧"&gt;
 &lt;/div&gt;
 &lt;div class="renewal-guide-body"&gt;
 
 &lt;p class="renewal-guide-label"&gt;現在位置&lt;/p&gt;
 
 &lt;p&gt;【PC版】右側の赤いパネルでは、いま何ページ目を見ているかが分かります。
【モバイル】右下の赤い「main」タブをタップするとポップアップします。&lt;/p&gt;
&lt;p&gt;大きい数字が現在のページ、下の &lt;code&gt;1769頁&lt;/code&gt; のような表記が総ページ数です。さらに下の小さいサムネイルから、そのページ内の投稿位置もざっくり追えます。&lt;/p&gt;

 &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id="ページスライダー"&gt;ページスライダー&lt;/h3&gt;
&lt;div class="renewal-guide-card"&gt;
 &lt;div class="renewal-guide-media"&gt;
 &lt;img src="https://rainy.black/news/site-renewal2/SC001_6.jpg" alt="ページスライダーと前後移動ボタン"&gt;
 &lt;/div&gt;
 &lt;div class="renewal-guide-body"&gt;
 
 &lt;p class="renewal-guide-label"&gt;ページ移動&lt;/p&gt;
 
 ドラッグでも操作できます。ざっと先の方へ飛びたい時は、ここを動かすのがいちばん早いです。
とにかく膨大な量があるので、もっと簡単に遡れるようにと実装しました。
適当にスライドして適当に読むのがおすすめです。
 &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id="しおりをはさむ--ブックマーク旧読みましたボタン"&gt;しおりをはさむ + ブックマーク（旧読みましたボタン）&lt;/h3&gt;
&lt;div class="renewal-guide-card"&gt;
 &lt;div class="renewal-guide-media"&gt;
 &lt;img src="https://rainy.black/news/site-renewal2/SC001_7.jpg" alt="しおりをはさむボタン"&gt;
 &lt;/div&gt;
 &lt;div class="renewal-guide-body"&gt;
 
 &lt;p class="renewal-guide-label"&gt;しおりをはさむ&lt;/p&gt;
 
 &lt;p&gt;ページ下の &lt;code&gt;しおりをはさむ&lt;/code&gt; を押すと、そのページをブックマークできます。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;※ただし、セキュリティのため、お使いの端末限定です。
「スマホでブックマークしたものをPCで見る」などの同期はできません。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;あとで読み返したいページや、覚えておきたいしおりとして使えます。ブックマーク一覧はメニュー内の &lt;code&gt;ブックマーク&lt;/code&gt; から見られます。&lt;/p&gt;
&lt;p&gt;一度押すとオレンジ色の「ブックマークしました」になりますが、何度でも押せます。&lt;/p&gt;

 &lt;/div&gt;
&lt;/div&gt;

&lt;div class="renewal-guide-card"&gt;
 &lt;div class="renewal-guide-media"&gt;
 &lt;img src="https://rainy.black/news/site-renewal2/SC001.jpg" alt="ブックマーク後のメッセージ入力フォーム"&gt;
 &lt;/div&gt;
 &lt;div class="renewal-guide-body"&gt;
 
 &lt;p class="renewal-guide-label"&gt;メッセージも送れます&lt;/p&gt;
 
 &lt;p&gt;しおりをはさんだ後は、そのままメッセージも送れます。&lt;/p&gt;
&lt;p&gt;お気に入り度、名前、定型文、自由メッセージを入れられます。匿名でも送れます。&lt;/p&gt;

 &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id="独り言"&gt;独り言&lt;/h3&gt;
&lt;div class="renewal-guide-card"&gt;
 &lt;div class="renewal-guide-media"&gt;
 &lt;img src="https://rainy.black/news/site-renewal2/SC001_8.jpg" alt="独り言とオーバーレイメニュー"&gt;
 &lt;/div&gt;
 &lt;div class="renewal-guide-body"&gt;
 
 &lt;p class="renewal-guide-label"&gt;返信を書く場所&lt;/p&gt;
 
 &lt;p&gt;&lt;code&gt;独り言&lt;/code&gt; は短いテキスト置き場です。&lt;/p&gt;
&lt;p&gt;しおりをはさむ時にもらったメッセージへの返信を書いたり、その時々のひとことを書いたりします。オーバーレイメニューや一覧ページから読めます。&lt;/p&gt;

 &lt;/div&gt;
&lt;/div&gt;</description></item><item><title>サイトリニューアル前夜</title><link>https://rainy.black/news/site-renewal/</link><pubDate>Thu, 07 May 2026 12:00:00 +0900</pubDate><guid>https://rainy.black/news/site-renewal/</guid><description>&lt;h2 id="経緯"&gt;経緯&lt;/h2&gt;
&lt;p&gt;現在のサイトは10年以上に渡ってwordpressというブログシステムで管理・運営してきました。しかし登場から20年以上が経ち、ありとあらゆる機能を詰め込んで、複雑怪奇なシステムになってしまい、セキュリティ的にも管理的にも段々おっくうになってきた。&lt;/p&gt;
&lt;p&gt;wordpressで一番ネックになるのが表示速度です。10ページくらいのブログなら問題ないですが、数万枚の画像と1万件の漫画を抱えていると、どうしても限界がくる。DBのどこかで何かが起これば一発で終わるという恐怖もある。自動バックアップもサーバを圧迫する。&lt;/p&gt;
&lt;p&gt;一度昔のサイトに戻ってhtmlと画像、というシンプルな構成に戻したくなりました。
便利さを捨てて、もう一度サイト作りを楽しくしようと。&lt;/p&gt;
&lt;p&gt;ただ1万件の記事を手でコピペしていては何年かかっても作れませんので、ここは静的htmlのhugoとAIのちからを借りて、わたくしはデザインに集中することとなりました。&lt;/p&gt;
&lt;h2 id="デザイン"&gt;デザイン&lt;/h2&gt;
&lt;p&gt;wordpressの今のサイトレイアウトは、「初めてきた人が探しやすいように」という目的でした。なので流れるように読んでいけるブログ形式を捨て、個別にサムネイルで管理する方法に切り替えたのです。&lt;/p&gt;
&lt;p&gt;また、マンガサイトは文字がないのでどうしても検索エンジンに対して弱い。2023年頃から出始めたばかりのAIを使って、解説文を生成する試みを始めました。
初期のAIは画像認識力が弱く、更に日本独自の文化である縦書き文字、漫画の読み方はとことん苦手で、めっちゃくちゃな解説が今でも挿入されています。&lt;/p&gt;
&lt;p&gt;海外の人向けに翻訳できるようにと思ってやってみたものの、内容がめちゃくちゃなのでほぼスパム解説にしかなりませんでした。去年あたりから試行錯誤の結果、ようやくまあまあ妥当な解説を吐き出せるようになりました。えらいことお金かかったわい。&lt;/p&gt;
&lt;p&gt;が、google等からのアクセスは一切伸びませんでした。&lt;/p&gt;
&lt;h2 id="失敗"&gt;失敗&lt;/h2&gt;
&lt;p&gt;そもそもの目的である、検索エンジンから新規ユーザを獲得しようと考えたこと自体が失敗でした。
よくよく考えたら&lt;/p&gt;
&lt;p&gt;・&lt;strong&gt;失恋しました&lt;/strong&gt;→検索する→失礼を癒す方法を探す&lt;/p&gt;
&lt;p&gt;であって恋愛や失恋をキーワードに含めたところで、漫画を読んでくれる人が増えるはずもなかった。
なんでこんなことに気づかなかったかというと、
大手の漫画サイト（ピッコマとか）を参考にしてしまったからです。&lt;/p&gt;
&lt;p&gt;今回は「&lt;strong&gt;検索エンジンから新規ユーザを増やす&lt;/strong&gt;」というそもそも間違ってた前提を破棄し、「&lt;strong&gt;知ってる人に口コミで広めてもらうためのただ読めるだけの軽いサイト&lt;/strong&gt;」にシフトしました。&lt;/p&gt;
&lt;h2 id="しかし"&gt;しかし&lt;/h2&gt;
&lt;p&gt;基本、サイトのレイアウトは大きく変更しないのが鉄則です。
今まで見ていた人がどこに何があるかわかんなくなるからね。&lt;/p&gt;
&lt;p&gt;しかし根本が間違っていた（今の形にした時に結構「前のがいい」というメッセージもあったんですが、あえて無視しました）ので、中途半端に混ぜるよりも全て作りなおす方を選択しました。&lt;/p&gt;
&lt;p&gt;わたくしのサイトはあくまで個人サイトですから、業務で使う技術の実験場でもあります。
どうしても仕事では使えないものを投入しがちでもある。
基本、作ってる側にはユーザ目線というのはわからないものです。
だから文句言ってもらうと大変助かります。&lt;/p&gt;
&lt;p&gt;それを反映するか否かはもちろんわたくしの考え次第ではありますが。&lt;/p&gt;
&lt;p&gt;今回は&lt;/p&gt;
&lt;pre tabindex="0"&gt;&lt;code&gt;トップページ＝ひたすら漫画を遡っていける＝1万ページある本みたいなもの
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;という位置づけでそれ以外のものは全部隠れている仕様になっています。
余計なものは見えないようにするという設計です。
また家内ちゃんは別サイトにかわいらしいデザインで分離する予定です。&lt;/p&gt;
&lt;p&gt;うらぶれた気分で一人喫茶店にいる時、ちょっとのぞいたりめくったりするサイトにしようと思いました。&lt;/p&gt;
&lt;p&gt;わたくしはどうしても饒舌で説明を入れたがるので、それを隠した形になります。
おそらく個人サイトならではの「人がいる感」や「管理人との交流感」はなくなりますが、
それはコンセプトが別なのであべひろしのサイトみたいなのは別館として作成予定です。&lt;/p&gt;
&lt;p&gt;さあ、まだできてところがたくさんあります。
ここまで移植するのに1か月かかりました。
新しいことをやると楽しいんですが時間だけがものすごい速さで過ぎ去ります。&lt;/p&gt;
&lt;p&gt;メッセージにも一切返事できてなくて申し訳ありません。
でもすごく充実しています。&lt;/p&gt;
&lt;p&gt;「&lt;strong&gt;青春モノクローム&lt;/strong&gt;」というタイトルにもこだわりはあったんですが、
なんかアイドルの曲に同じタイトルがあるのと、
ちょっと「青春」が微妙だな（口頭で紹介しずらくないですか？）と思って、
「&lt;strong&gt;ものくろデイズ&lt;/strong&gt;」に改名しました。&lt;/p&gt;
&lt;p&gt;こういうのはAIを使うとバカみたいなものしか提案してこないので、
あれこれ悩むのもまた楽しい。&lt;/p&gt;
&lt;p&gt;もし何かあれば「しおりをはさむ」ボタンで送ってください。




 
 
 
 
 
 
 
 
 
 
 
 
 
 
 &lt;a href="https://rainy.black/news/site-renewal/SC001.jpg" class="pswp-link" data-pswp-src="https://rainy.black/news/site-renewal/SC001.jpg" data-pswp-width="423" data-pswp-height="125" data-pswp-caption="サイトリニューアル前夜"&gt;
 &lt;img src="https://rainy.black/news/site-renewal/SC001.jpg" alt="" loading="lazy" width="423" height="125"&gt;
 &lt;/a&gt;
 
 

&lt;/p&gt;
&lt;p&gt;「読みました」ボタンと同じです。
ただ、このボタンにはブックマーク機能と評価機能をつけておいたので、
&lt;a href="https://rainy.black/bookmarks/"&gt;ブックマークページ&lt;/a&gt;で履歴がわりにできます。&lt;/p&gt;</description></item></channel></rss>