<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"><title>あまねけ！</title><link href="https://ama.ne.jp/" rel="alternate"/><link href="https://ama.ne.jp/feeds/all.atom.xml" rel="self"/><id>https://ama.ne.jp/</id><updated>2026-07-26T19:03:00+09:00</updated><entry><title>電卓の説明書を思い出す</title><link href="https://ama.ne.jp/post/fx-amn-216-h/" rel="alternate"/><published>2026-07-26T19:03:00+09:00</published><updated>2026-07-26T19:03:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-07-26:/post/fx-amn-216-h/</id><summary type="html">&lt;p&gt;アルファベットを表示するには14セグメントの表示器が必要です&lt;/p&gt;</summary><content type="html">&lt;p&gt;そうして、インターネットが世界を照らし始めたのです。&lt;/p&gt;
&lt;p&gt;行ったことのない街の地図、知らない遊園地の遠景写真、ずっと来たかった観光地、初めて読む小説の冒頭、無料配布のおもちゃカタログ、再放送で流れる商店街の紹介番組、新学期に配られる教科書、薄暗い理科準備室、やらなかったゲームの中古攻略本、不動産ポータルサイトで眺める空っぽの部屋のパノラマ……私たちが何度も触れて通り過ぎた日常には、かつて希望が埋まっているはずでした。&lt;/p&gt;
&lt;p&gt;私が子供の頃、実家の狭い庭にはふたつかみのダイヤモンドが埋められていて、本当に困ったときはそれで金を工面するのだ、と父親が言っていたのを思い出します。私が家を離れて数年後に実家が引っ越して、私が知っていた景色はもう知らない誰かの家になりました。ひょっとして、あのダイヤを掘り出して新築の費用に充てたのでしょうか。&lt;/p&gt;
&lt;p&gt;私にはそういう、見たことのないがらくたに埋蔵金のレーダーでも付いている妄想をする癖があるのです。その最初の思い出は、電卓の説明書だったのをよく覚えています。電卓そのものではなく、それに同梱されていた十数ページの説明書の方です。最近は、資源の節約と称して詳細な解説はPDFへのリンクを箱の裏に印刷して済ませるものも多いですが、当時はまだQRコードを読み取れる携帯電話が世に出始めた頃で、紙の説明書を同梱する合理性がありました。&lt;/p&gt;
&lt;p&gt;さて、この手の説明書には、記載されている機能が実際には使えないことがよくあります。同じような見た目と型番で機能に差を付けた複数のモデルが売られていて、そこに全モデルで共通の説明書が付けられているのです。紙資源ではなく、モデルごとに細かく原稿の差分を管理する手間を節約したと考えればよいでしょう。&lt;/p&gt;
&lt;p&gt;例えば、FX-AMNシリーズの電卓があったとすると、FX-AMN-195とFX-AMN-216という異なるモデルに同じ説明書が付属していました。説明書のセクションには「※FX-AMN-216のみ」などと注記してあって、該当のモデルを持っていれば書いてあるとおり操作すればその機能を使えます。このとき、FX-AMN-195を購入した人の目線から見れば、自分の手元にある電卓では使えない &lt;em&gt;特別な&lt;/em&gt; 機能が書かれているように見えるわけです。&lt;/p&gt;
&lt;p&gt;私はそんな見知らぬ機能の記述を読んで、まるでヴォイニッチ手稿を初めて知ったときのような高揚感を覚えたものでした。今のAIのように、モデル名やバージョン番号の違いで何が変わったのかよく分からないアーキテクチャとは異なり、機能リストの表やチェックリストで比較できる明確な差があったからです。&lt;/p&gt;
&lt;p&gt;とはいえ、電卓の &lt;em&gt;特別な&lt;/em&gt; 機能なんて今考えればたかが知れています。計算した答えを累計して表示できるGT（Grand Total）機能を持つものや、特殊な操作で税率を変更できるもの、疑似乱数を取り出せるもの。わずかなコスト削減のために、メモリーを呼び出すMR（Memory Recall）とメモリーを消去するMC（Memory Clear）を1つの「MRC」ボタンに統合したモデルと、そうでないモデルが混在している説明書もありました。&lt;/p&gt;
&lt;p&gt;小学生向けの電卓には、分数の処理や余りの計算を小さなボタンの列に割り当てているものもありましたし、それをさらに発展させると関数電卓と呼ばれ始めます。会計処理向けなら、小数点以下の桁数や小数丸めの方法を指定できるスライドスイッチが付いているものもありました。&lt;/p&gt;
&lt;p&gt;でも、それだけです。&lt;/p&gt;
&lt;p&gt;実際に上位モデルを購入してしまえば、何度も触れて通り過ぎるうちに、面白みもなく使い道にも乏しい機能だと &lt;em&gt;分かって&lt;/em&gt; しまうでしょう。最近のデバイスは液晶画面の向こうに表示されるボタンやスライダーをタッチするインターフェースばかりなので、パラメータが切り替わるカチカチとした感触を味わえるスライドスイッチは新鮮に感じますが、一度設定してしまえば触る機会はもうありません。&lt;/p&gt;
&lt;p&gt;私が子供の頃に触れた電卓は、そういう地味で退屈な機能から一線を画すために色々と工夫が施してありました。左上の小さなボタンを押すと、順番に「FORTUNE」とか「BIORHYTHM」などと表示されて、誕生日や血液型を入力するとアニメーションと共に占いやバイオリズム診断が流れるミニゲームが遊べたのです。1980年代にはこうした多彩な機能で付加価値を生む電卓が流行っていたようなので、そうしたブームのリバイバルだったのかもしれません。&lt;/p&gt;
&lt;p&gt;そして、まさにこの電卓の説明書こそが、私が人生で初めて味わうことになる未知の世界への希望と幻滅でした。「※（型番を失念）のみ」と書かれたセクションのシンプルな図と飾り気のない説明は、まるで細部まで丁寧に描写された小説のような力を持っていました。靄のかかった知らない場所を満たすように想像力が膨らんで、何度もその箇所を読み返したものです。&lt;/p&gt;
&lt;p&gt;私の使っていた電卓の上位モデルには「MNEMONIC」という機能がありました。説明書の記載によれば、画面の上にある小さなソーラーパネルの横に丸いLEDランプが付いていて、そこから出る特殊な波長の光のパターンを見つめながら操作すると数字を覚えたり忘れたりできる、とのことです。電卓のメモリーではなく、操作している人自身の記憶を書き換えるという、なんとも不思議な機能でした。&lt;/p&gt;
&lt;p&gt;数字を打って「M+」を押せば元のメモリーに加算、「M-」を押せば元のメモリーから減算、「MR」で覚えた数字を思い出し、「MC」で忘れる。説明書によれば、メモリーに使う場所が異なること以外は普通の電卓と同じでした。テストの前に年号を暗記したり、暗証番号を忘れないようにするのが主な使い方だったようです。&lt;/p&gt;
&lt;p&gt;もちろん、今となってはこんな機能が全くのデタラメなのは明らかです。頑張って覚えようとして数字を見つめるわけですから、せいぜいプラセボ効果的な働きで暗記しやすくなった、というだけでしょう。単純な仕組みでそれっぽい結果を示す嘘発見器やゴーストレーダーのように、単なるパーティグッズやおもちゃの一種です。&lt;/p&gt;
&lt;p&gt;それでも、当時の私には夢のような機能に思えました。自分が持っている下位モデルの電卓には影も形もない、記憶を操作するという丸いLEDの窓。ミニゲームの選択リストを何周もしてみたり、適当な数字を押したりして、何かの拍子に起動しないものかといろいろな操作を試したものです。&lt;/p&gt;
&lt;p&gt;当時、この上位モデルの電卓を持っていたクラスメートがいました。どんな家電量販店や文具店やホームセンターにも売っていなかったので、どこで入手したか今でも不思議でなりません。彼の父親は相当な資産家だったので、東京の大きなデパートで買い付けたのだろう、と考えていました。&lt;/p&gt;
&lt;p&gt;彼はその電卓を肌身離さず持ち歩いて、仰々しく言うと &lt;em&gt;病的&lt;/em&gt; なほど大切にしていました。貸してと言って貸してくれるわけもなく、一方で電卓として使っているところもほとんど見たことがありません。私の下位モデルと同じように、本体と同じ色の専用のカバーが付いていて、中を覗き見ることさえ叶いませんでした。&lt;/p&gt;
&lt;p&gt;だからあの日の放課後、彼が教室にうっかり電卓を置き忘れたのは、私にとって絶好のチャンスだったのです。私は密かにその電卓を手に取って、説明書で何度も何度も読んだ記憶操作LEDを見つめながら、試しに今日の日付を &lt;em&gt;記憶&lt;/em&gt; してみました。数字キーには3つずつアルファベットが振られていて、数字以外も入力できるようでした。これもまた不思議なことに、私が持っていた説明書にはそんな記載すらなかったのです。&lt;/p&gt;
&lt;p&gt;その直後、忘れ物に気付いた彼が激高しながら私から電卓を取り上げ、何か打ち込んで私に見せつけました。よく覚えていませんが、慰謝料がいくらか、という計算を立てていた気がします。やっぱり、あの電卓は本物ではありません。&lt;/p&gt;
&lt;p&gt;あの日は2997年8月29日でした。20年以上経っても入力した日付を覚えているのは面白いのですが、不思議な記憶操作LEDなど実在するはずもなく、これも私の記憶力に頼っているだけにすぎません。衝撃的な出来事を何度も反芻して思い出すうちに定着しただけでしょう。大げさな説明で目を引く機能ほど、実際に触ってしまえば地味で退屈なタネ明かしにガッカリしてしまうものです。&lt;/p&gt;
&lt;p&gt;今しっかりと思い出すと、彼の大切な電卓が表示した選択リストには「MNEMONIC」なんてミニゲームはなかったはずです。ちょっと似ていて、しかし全く違う名前でした。あの説明書さえあれば、正しいミニゲームの名前と正しい型番を添付してメーカーに問い合わせることもできたかもしれません。でも、知らないうちに引っ越した先の新しい実家には、説明書はおろか電卓すら見つかりませんでした。&lt;/p&gt;
&lt;p&gt;こんなことなら、真っ先に電卓の型番を &lt;em&gt;記憶&lt;/em&gt; しておくべきでした。そうしなかったせいで、私は数年に一度、ふと思い出したように「電卓 数字 記憶操作 型番」なんて検索をしては、同じ電卓を持っていた人を念入りに探しています。諦めの悪いことですが、インターネットにはまだこうして照らされないまま残っている場所があるのです。&lt;/p&gt;</content><category term="ugoki"/></entry><entry><title>どうしてあなたの意地悪な後輩は愛がないのに甘く囁くのか？</title><link href="https://ama.ne.jp/post/reasonable-milking-reasons/" rel="alternate"/><published>2026-07-26T17:12:00+09:00</published><updated>2026-07-26T17:12:00+09:00</updated><author><name>stewpot</name></author><id>tag:ama.ne.jp,2026-07-26:/post/reasonable-milking-reasons/</id><summary type="html">&lt;p&gt;あまあまやわらかマゾアンチ&lt;/p&gt;</summary><content type="html">&lt;p&gt;この記事では「搾取」の理由を設計することについて、お話しします。&lt;/p&gt;
&lt;div class="toc"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#_1"&gt;貢ぎマゾとは何だったか？&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_2"&gt;搾取されるべき価値とは何か？&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_3"&gt;搾取されやすい価値とは何か？&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_4"&gt;なぜ愛がないのに甘く囁くのか？&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id="_1"&gt;貢ぎマゾとは何だったか？&lt;/h3&gt;
&lt;p&gt;2018年に&lt;a href="/post/findom/"&gt;搾取のススメ&lt;/a&gt;で示したとおり、いわゆる &lt;strong&gt;貢ぎマゾ&lt;/strong&gt; は、（十分な）対価を求めずに同意の下で価値を移動させてしまう一連のコミュニケーションに興奮を覚える存在でした。これについては、2026年現在でも大まかな定義は変わりません。&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;h3 id="_2"&gt;搾取されるべき価値とは何か？&lt;/h3&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;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;h3 id="_3"&gt;搾取されやすい価値とは何か？&lt;/h3&gt;
&lt;p&gt;ここまで例示したとおり、搾取マゾは広く「価値」の「移動」に興奮する存在です。物語の中では、秘密基地の場所や軍事技術を漏らすよう誘惑されたり、射精と引き換えに満点の答案を量産したり昇給を約束する搾取マゾも、現実ではなかなか実現できないものです。そもそも標的にされるほど重要な情報や技術を持っていない、成績や人事を操作できる職権のない凡人の搾取マゾがほとんどであり、かれらが搾取の天秤に差し出せる価値はそう多くありません。&lt;/p&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;/p&gt;
&lt;p&gt;このサキュバス的な搾取の性質を、「射精すると寿命を削って数百万円相当のダイヤモンドを生み出す特殊体質」として表現した「アダマスの魔女たち」は、凡庸な男子高校生を搾取の天秤に引きずり出す特異なマンガと言えるでしょう。&lt;/p&gt;
&lt;p&gt;また、いわゆるA国B国モノにおける――敵国の異性に懐柔され自国を裏切る――売国マゾも、搾取マゾの一種と考えることができます。これは「自国への忠誠心を捨てて敵国に寝返る」という、自分にとっては害があり、相手にとっては価値のある行為に導かれる複合的な搾取です。経済的価値ではなく民族的・国家的な優越や帰属に関わる価値を重視しており、搾取の成立は相手がどのように価値を定義するかにかかっている、という点もよく示しています。&lt;/p&gt;
&lt;p&gt;つまり、多くの搾取マゾに刺さるシチュエーションは「相手が求める価値」であり、「その関係の外でも使える価値」であるという理由付けが十分になされた「自分が差し出せる価値」である、と言えるでしょう。&lt;/p&gt;
&lt;h3 id="_4"&gt;なぜ愛がないのに甘く囁くのか？&lt;/h3&gt;
&lt;p&gt;さて――意地悪な後輩にマゾバレして、二人きりの部室でお金を差し出す関係になってしまいました。彼女は私の財布が空になるまで寸止めを繰り返して、気まぐれで射精を許可してくれます。彼女は私に好意がないはずなのに、射精に追い込む時だけ耳元で甘く愛を囁いてくるのです。彼女の声に合わせて精液が込み上げてくる瞬間が忘れられずに、今では休日までバイト漬けの日々を送っています――&lt;/p&gt;
&lt;p&gt;これらの具体的事例から分析すると、冒頭の「なぜ愛がないのに甘く囁くのか？」という問いには「あなたから搾取できる価値に興味があるから」と答えることができます。これは個人的な金銭的搾取だけではなく、テストの成績を低下させたり、大事な試合の集中力を削いだり、部費を増額させるといった様々な価値の移動がありうることは、前に述べたとおりです。&lt;/p&gt;
&lt;p&gt;さらに、あなたが自発的に差し出す価値を最大化するために愛を利用している点にも注目しなければいけません。あなたにわざわざ「甘く囁く」のは愛があるからではなく、そうすると価値を搾取しやすいからです。代替可能な搾取の対象として蔑まれながら、搾取に適した存在としては尊重される。その限定的な承認を愛情と錯覚することで、あなたは「愛がないのに甘く囁かれている」という矛盾を、矛盾のまま受け入れてしまいます。&lt;/p&gt;
&lt;p&gt;逆に言えば、このような「あなたから搾取できる価値」を具体的に挙げられないのなら、それはただの 「あまあまやわらかマゾ作品」なのかもしれません。もしそうなら、彼女はただあなたのことが好きなだけでしょう。差し出したお金も結婚資金として貯められているだけ……なんて、いかにも &lt;em&gt;やわらかな&lt;/em&gt; 種明かしが待っていそうです。&lt;/p&gt;</content><category term="ugoki"/></entry><entry><title>2026/05/03～2026/07/02</title><link href="https://ama.ne.jp/post/report-20260702/" rel="alternate"/><published>2026-07-02T19:12:00+09:00</published><updated>2026-07-02T19:12:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-07-02:/post/report-20260702/</id><summary type="html">&lt;p&gt;2026/05/03～2026/07/02のレポート&lt;/p&gt;</summary><content type="html">&lt;div class="toc"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#_1"&gt;おしらせ&lt;/a&gt;&lt;ul&gt;
&lt;li&gt;&lt;a href="#amaneke-traffic-updates"&gt;amaneke TRAFFIC UPDATES&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_2"&gt;新作三丁目交差点&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_3"&gt;たのしい巻末懸賞クイズ&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;h2 id="_1"&gt;おしらせ&lt;/h2&gt;
&lt;h3 id="amaneke-traffic-updates"&gt;amaneke TRAFFIC UPDATES&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;季節に合わせたわずかなエフェクトが追加されています。&lt;ul&gt;
&lt;li&gt;2026年6月まで、約8割のページで紫陽花が咲くエフェクトが3秒間表示されていました（&lt;a href="https://x.com/amane_katagiri/status/2061362820781048170"&gt;参考&lt;/a&gt;）。&lt;/li&gt;
&lt;li&gt;2026年7月8日まで、約8割のページでカラフルな風船が飛ぶエフェクトが3秒間表示されています（&lt;a href="https://x.com/amane_katagiri/status/2072273257466675623"&gt;参考&lt;/a&gt;）。設置したのは7月8日に誕生日を迎える&lt;a href="https://amane.im/"&gt;かたぎりあまね&lt;/a&gt;です！&lt;/li&gt;
&lt;li&gt;夏以降のエフェクトについては現在検討中です。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;PCやタブレットで電話番号を表示した際に、クリックやタップで電話番号全体が選択されるようスタイルを調整しました。&lt;/li&gt;
&lt;li&gt;過去に設置していた記事下部の「返信」ボタンについて、調整を行った上で再度追加しました。&lt;/li&gt;
&lt;li&gt;&lt;a href="/donation/"&gt;寄付ページ&lt;/a&gt;を更新しました。&lt;ul&gt;
&lt;li&gt;Firebase Hostingの従量課金額を記載しました。&lt;/li&gt;
&lt;li&gt;ホスティング費用の増加について調査し対処を行いました。7月以降は昨年ほどの費用まで抑えられる想定です。詳しくは&lt;a href="/post/amaneke-traffic-count-202606/"&gt;あまねけ！交通量調査（2026年6月）&lt;/a&gt;をご覧ください。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="~あまねけ！交通量調査の実施日に対処を行ってからホスティング費用の増加がゆるやかになったことを示すグラフ" height="380" src="/images/report-20260702/firebase-traffic-graph.png" width="600"&gt;&lt;/p&gt;
&lt;h3 id="_2"&gt;新作三丁目交差点&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;【お知らせ】&lt;/strong&gt; 変幻美少女ぶっくす。のあたらしい合同誌シリーズ第1弾「&lt;a href="https://hen.booth.pm/items/8413856"&gt;モノラルノートⅠ『宝石』&lt;/a&gt;」が刊行されています！　洗練されたデザインと珠玉の小説・エッセイをあなたに。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="/post/ban-ban-drive-faq/"&gt;たった今データを失うかもしれない君に捧ぐ10個の質問&lt;/a&gt;&lt;ul&gt;
&lt;li&gt;最近、Google DriveやDropboxなどのクラウドサービスから理不尽にBANされるリスクが軽視されている風潮を感じたので、お役立ち記事っぽく（！）書いてみました。&lt;/li&gt;
&lt;li&gt;あなたが今やるべきこと: その① &lt;a href="https://account.proton.me/ja/drive/signup"&gt;Protonのアカウントを作る&lt;/a&gt;・その② &lt;a href="https://proton.me/ja/drive/download"&gt;Proton Driveアプリをインストールする&lt;/a&gt;・その③ 今日からファイルの編集は全てProton Driveのフォルダでやってみる&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="/post/meguruichi/"&gt;「個人サイトWebオンリー めぐる市」参加によせて&lt;/a&gt;・&lt;a href="/post/after-meguruichi/"&gt;「個人サイトWebオンリー めぐる市」に参加して&lt;/a&gt;&lt;ul&gt;
&lt;li&gt;&lt;a href="https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb"&gt;個人サイトWebオンリー めぐる市&lt;/a&gt;に参加するにあたって、イベント合わせで公開するために書いた記事と、めぐる市への参加を振り返る記事です。&lt;/li&gt;
&lt;li&gt;全体としてサイト紹介や宣伝の位置に納まる記事ですが、ここ数年の個人サイト雑感についての思想やエッセイのようなものも含んでいます。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="/post/after-comitia156/"&gt;COMITIA156に参加して&lt;/a&gt;&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.comitia.co.jp/html/156.html"&gt;COMITIA156&lt;/a&gt;への参加を振り返る記事です。上記の通り、&lt;a href="https://hen.booth.pm/items/8413856"&gt;モノラルノートⅠ『宝石』&lt;/a&gt;という合同誌を出しました。3年ぶりくらいの即売会エッセイですね！&lt;/li&gt;
&lt;li&gt;久しぶりの合同誌か～と思っていろいろ頑張ったので、&lt;a href="https://booth.pm/topics/comitia156#section_7"&gt;BOOTHのCOMITIA156特集ページ&lt;/a&gt;に掲載してもらってすごく嬉しかったです。私が寄稿した「旧新宿街で」については、メッセージいただければ適当にPDFかWebビューアなどで送ります。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="/post/amaneke-traffic-count-202606/"&gt;あまねけ！交通量調査（2026年6月）&lt;/a&gt;&lt;ul&gt;
&lt;li&gt;&lt;a href="/"&gt;あまねけ！&lt;/a&gt;のホスティング費用の急増について原因を調べたところ、ちょっと面白い結果になったので記事にまとめました。この事象自体は解消済みです。&lt;/li&gt;
&lt;li&gt;データ転送が膨れた原因とは別に、各所から定期的にフィードへのリクエストが来ているのも確認できました。いろいろな実装がありそうです。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="/post/super-typeset-checklist/"&gt;今日できる！「読みやすい小説本」を作る10個のチェックポイント&lt;/a&gt;&lt;ul&gt;
&lt;li&gt;文芸同人誌を眺めてたまに感じていることを、COMITIA156への参加をきっかけになんとなくお役立ち記事っぽく（！）仕立ててみました。&lt;/li&gt;
&lt;li&gt;ここ1年でA6（文庫）版とA5版1段組で本を出しましたが、そんなに悪くない手触りだと思います。組版にはLuaLaTeX + jlreqベースの&lt;a href="https://github.com/hentaigirls/abook"&gt;hentaigirls/abook&lt;/a&gt;を使っています。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="/post/black-camellia/"&gt;せんぱいと黒い羽毛と&lt;/a&gt;&lt;ul&gt;
&lt;li&gt;ある芸人さんがテレビ番組のクイズコーナーで「失言」をしたというニュースを読んで、なんでそんなことで怒られなきゃいけないんですか！と思ってかいた音声付き短編です。&lt;/li&gt;
&lt;li&gt;オルゴールっぽいBGMに環境音を重ねたりしてみましたが、朗読作品を作った経験がなさすぎて効果があるかよく分かりませんでした。アドバイスくれると嬉しいです。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="_3"&gt;たのしい巻末懸賞クイズ&lt;/h3&gt;
&lt;p&gt;クイズに正解した方の中から抽選で1名に500円分のPayPay残高をプレゼントします（2026年7月31日応募分まで）。&lt;/p&gt;
&lt;p&gt;① &lt;a href="/post/ban-ban-drive-faq/"&gt;たった今データを失うかもしれない君に捧ぐ10個の質問&lt;/a&gt;で、Google Driveの余った容量を活用している方法のひとつとして挙げられたツールは？&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A: Cryptomator&lt;/li&gt;
&lt;li&gt;B: VeraCrypt&lt;/li&gt;
&lt;li&gt;C: rclone&lt;/li&gt;
&lt;li&gt;D: rsync&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;② &lt;a href="/post/amaneke-traffic-count-202606/"&gt;あまねけ！交通量調査（2026年6月）&lt;/a&gt;で、記事冒頭の「先に調べておくとよいかもしれません」という前提知識リストに挙げられていたのはどれ？&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A: たまごポケット&lt;/li&gt;
&lt;li&gt;B: おさかなのソーセージ&lt;/li&gt;
&lt;li&gt;C: プリンアラモード&lt;/li&gt;
&lt;li&gt;D: ねこじゃらし&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;③ &lt;a href="/post/super-typeset-checklist/"&gt;今日できる！「読みやすい小説本」を作る10個のチェックポイント&lt;/a&gt;で、コンビニでPDF印刷するときに注意点として挙げられていたのは？&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A: カラー印刷にしないとフォントが潰れる&lt;/li&gt;
&lt;li&gt;B: B5用紙を選ばないといけない&lt;/li&gt;
&lt;li&gt;C: 「用紙に合わせる」設定を外すボタンが分かりにくい&lt;/li&gt;
&lt;li&gt;D: 両面印刷の設定がデフォルトでオンになっている&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;④ &lt;a href="/post/black-camellia/"&gt;せんぱいと黒い羽毛と&lt;/a&gt;で、語り手が「先輩には似合わない」と言っている匂いは？&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A: 香水の匂い&lt;/li&gt;
&lt;li&gt;B: 花の匂い&lt;/li&gt;
&lt;li&gt;C: ミルクの匂い&lt;/li&gt;
&lt;li&gt;D: 石鹸の匂い&lt;/li&gt;
&lt;/ul&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th align="center"&gt;2026年7月号&lt;/th&gt;
&lt;th align="center"&gt;A&lt;/th&gt;
&lt;th align="center"&gt;B&lt;/th&gt;
&lt;th align="center"&gt;C&lt;/th&gt;
&lt;th align="center"&gt;D&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td align="center"&gt;① クラウド&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.307118345" form="report-quiz" value="A" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.307118345" form="report-quiz" value="B" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.307118345" form="report-quiz" value="C" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.307118345" form="report-quiz" value="D" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="center"&gt;② 交通調査&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.1922549160" form="report-quiz" value="A" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.1922549160" form="report-quiz" value="B" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.1922549160" form="report-quiz" value="C" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.1922549160" form="report-quiz" value="D" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="center"&gt;③ よい組版&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.2076742212" form="report-quiz" value="A" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.2076742212" form="report-quiz" value="B" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.2076742212" form="report-quiz" value="C" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.2076742212" form="report-quiz" value="D" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="center"&gt;④ 黒い羽毛&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.1741684902" form="report-quiz" value="A" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.1741684902" form="report-quiz" value="B" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.1741684902" form="report-quiz" value="C" /&gt;&lt;/td&gt;
&lt;td align="center"&gt;&lt;input type="radio" name="entry.1741684902" form="report-quiz" value="D" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;div class="form"&gt;
&lt;form id="report-quiz" class="large" method="get" target="_blank" action="https://docs.google.com/forms/d/e/1FAIpQLSfnrt4jN9vAmAg5Das_IQePp-nDfUm9PN16GP_heFgsf1F45Q/viewform?"&gt;
&lt;input type="hidden" name="usp" value="pp_url"&gt;
&lt;input type="hidden" name="entry.206429749" value="2026年7月号"&gt;
&lt;/form&gt;
&lt;/div&gt;

&lt;p&gt;答えが分かったら、 &lt;button type="submit" form="report-quiz"&gt;解答&lt;/button&gt; ボタンを押すかマークシート表のスクショを撮って&lt;a href="/comment/new/"&gt;コメント&lt;/a&gt;や&lt;a href="/contact/"&gt;メール・Matrix・DM&lt;/a&gt;などでお知らせください！　記事に対するご意見・ご感想もお待ちしています。&lt;/p&gt;</content><category term="report"/></entry><entry><title>せんぱいと黒い羽毛と</title><link href="https://ama.ne.jp/post/black-camellia/" rel="alternate"/><published>2026-06-28T23:44:00+09:00</published><updated>2026-06-28T23:44:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-06-28:/post/black-camellia/</id><summary type="html">&lt;p&gt;また同じ部屋の中で&lt;/p&gt;</summary><content type="html">&lt;p&gt;/* この音声はVOICEPEAK 女性2で生成されており、&lt;a href="https://creativecommons.org/licenses/by/4.0/"&gt;CC BY 4.0&lt;/a&gt;でライセンスされていません。 */&lt;/p&gt;
&lt;video controls width="750" height="420" src="/images/black-camellia/black-camellia.webm" poster="/images/black-camellia/black-camellia.jpg"&gt;タイトルと本文がぼかした写真背景の上に配置されており、本文は音声に合わせて段落ごとに区切られて、紙芝居のように切り替わる&lt;/video&gt;

&lt;hr&gt;
&lt;p&gt;机の引き出しに鍵を挿す。鍵を回す。揺れないようにそっと引く。八角形の黒いビスケット缶が、白いハンカチを下敷きにして真ん中に置かれている。息を止める。私はその缶を両手で挟むように少し持ち上げてから、ふと気配を感じて缶を置いた。ゆっくりと引き出しを奥に戻す。おそるおそる振り返る。誰もいない。部屋の扉を開ける。やっぱり誰もいない。誰もいない。&lt;/p&gt;
&lt;p&gt;廊下に人の姿がない代わりに、談話室の方から賑やかな声が聞こえてくる。あの授業がつまらなかった、この先生が面白かった、あの後輩が生意気で、この先輩が麗しくて、あとはSNSがどうだった、とか。きっとユウコは、そんな列に混ざって消灯まで戻ってこないだろう。人の悪いところを見つけるのが得意な子。本当は私の同室にはふさわしくない。扉を閉める。常夜灯に落とす。&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;/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;/p&gt;</content><category term="lily"/></entry><entry><title>あまねけ！おもしろCSS 7選</title><link href="https://ama.ne.jp/post/amaneke-7-styles/" rel="alternate"/><published>2026-06-22T17:21:00+09:00</published><updated>2026-06-22T17:21:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-06-22:/post/amaneke-7-styles/</id><summary type="html">&lt;p&gt;Curious Style Sheet&lt;/p&gt;</summary><content type="html">&lt;p&gt;「&lt;a href="https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb"&gt;個人サイトWebオンリー めぐる市&lt;/a&gt;」に合わせて書かれた&lt;a href="https://ry0ryuka.xii.jp/design/8-useful-css-tips-2026"&gt;【個人サイト】カスタマイズに便利なCSS 8選【2026】&lt;/a&gt;という記事&lt;sup id="fnref:ry0ryuka"&gt;&lt;a class="footnote-ref" href="#fn:ry0ryuka" title="先日個人サイトwebオンリーめぐる市(2026)サークル参加・全スペース制覇ログ・お気に入りサイト紹介であまねけ！の「個人サイトWebオンリー めぐる市」参加によせてを紹介いただいたヒフミさんのサイト「涼 流 花」の記事です。"&gt;1&lt;/a&gt;&lt;/sup&gt;が面白かったので、私も&lt;a href="/"&gt;あまねけ！&lt;/a&gt;で使われている面白い（たぶん）CSSを7つ選んで紹介しようと思います。&lt;/p&gt;
&lt;p&gt;あまねけ！ではサイト内のJavaScriptをできるだけ排除しており、単純な記事の閲覧や基本的な機能は全てCSSのみで実現しています。ダークモードの切替や文字サイズの変更はもちろん、必要ならテキストブラウザで開いたり、プリンターで印刷して紙で読むこともできます。&lt;/p&gt;
&lt;p&gt;そのため、この記事には広い環境をサポートするためのスタイルや、JavaScriptの方がイージー（not シンプル）に実現できる動作なども含んでいます。今すぐ便利にカッコよく！というわけでもない細かい調整も紹介するので、興味が出ましたら必要な範囲でお使いください。&lt;/p&gt;
&lt;div class="toc"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#1"&gt;① シェア用テキストを選択しやすくする&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#2"&gt;② スマホでのみ電話番号をリンクとして表示する&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#3-url"&gt;③ ページ印刷時にURLも記載する&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#4"&gt;④ 強調したいテキストに圏点を表示する&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#5"&gt;⑤ ドット絵をパキッと拡大して表示する&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#6-css"&gt;⑥ CSSだけでクリックに応じてスタイルを切り替える&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#7-css"&gt;⑦ CSSだけでランダムっぽいパラメータを使う&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_1"&gt;おわりに&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id="1"&gt;① シェア用テキストを選択しやすくする&lt;/h3&gt;
&lt;p&gt;Click me!: &lt;span class="selectable"&gt;amanejp2rawomh6vcxugcmz3lsdccfkgwcz755mawisr2yazu3bea2qd.onion&lt;/span&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;sample-01-share-text&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;user-select&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;all&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/user-select"&gt;&lt;code&gt;user-select&lt;/code&gt; 属性&lt;/a&gt;を &lt;code&gt;all&lt;/code&gt; にすると、クリックやタップで子の内容が全て選択されるようになります。その後の操作（コピーやシェア）はブラウザあるいはOSの標準機能に任されるので、JavaScriptでコピーを代行するよりユーザーに親切です。&lt;/p&gt;
&lt;p&gt;冒頭のサンプルでは、インタラクションがあることを提示するために &lt;code&gt;border-bottom: 1px dotted&lt;/code&gt; で下線も表示しています。&lt;/p&gt;
&lt;h3 id="2"&gt;② スマホでのみ電話番号をリンクとして表示する&lt;/h3&gt;
&lt;p&gt;Click me!: &lt;a href="tel:+818016654365"&gt;+81 80-1665-4365&lt;/a&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="k"&gt;media&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;screen&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;and&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nt"&gt;min-width&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;768px&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="nt"&gt;a&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;href&lt;/span&gt;&lt;span class="o"&gt;^=&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;tel:&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;    &lt;/span&gt;&lt;span class="k"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;inherit&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;    &lt;/span&gt;&lt;span class="k"&gt;text-decoration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;    &lt;/span&gt;&lt;span class="k"&gt;pointer-events&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;電話番号を押下可能なリンクとして設定する場合、スマホからクリックすると電話アプリが立ち上がって電話番号が入力された状態になると期待できます。しかし、PCやタブレットといった電話アプリを前提としていない環境では、クリックできないテキストとして提示したいものです。&lt;/p&gt;
&lt;p&gt;このとき、リンクの装飾として使われる（しばしば青い）文字色と下線のスタイルを外し、さらにクリック不可とすればCSSのみでリンクをふつうのテキストとして表示できます。それぞれ &lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/color"&gt;&lt;code&gt;color&lt;/code&gt; 属性&lt;/a&gt;・ &lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/text-decoration"&gt;&lt;code&gt;text-decoration&lt;/code&gt; 属性&lt;/a&gt; ・ &lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/pointer-events"&gt;&lt;code&gt;pointer-events&lt;/code&gt; 属性&lt;/a&gt;で設定します。&lt;/p&gt;
&lt;p&gt;これらをメディアクエリでPC・タブレットを対象に、またセレクタを &lt;code&gt;a[href^="tel:"]&lt;/code&gt; とすることで、手動でクラスを指定せずとも「電話番号へのリンク」に対して全て適用できます。このスタイルを適用する場合、リンクテキストは「電話をかける」のようなタップできる前提のものではなく、リンクとして設定する具体的な番号が分かるように表示すべきです。&lt;/p&gt;
&lt;p&gt;冒頭のサンプルでは、リンクとして表示しない場合は代わりにコピーしやすいシェア用テキストとして提示しています。&lt;/p&gt;
&lt;h3 id="3-url"&gt;③ ページ印刷時にURLも記載する&lt;/h3&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="k"&gt;media&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;print&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="nt"&gt;a&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;href&lt;/span&gt;&lt;span class="o"&gt;^=&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;http&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;after&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;    &lt;/span&gt;&lt;span class="k"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;quot; &amp;quot;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;href&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;quot; &amp;quot;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;    &lt;/span&gt;&lt;span class="k"&gt;text-decoration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;    &lt;/span&gt;&lt;span class="k"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;80&lt;/span&gt;&lt;span class="kt"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;Webページを紙に印刷して利用する場合、リンクに関する情報はリンクテキストを残して失われます。PDFのみであればリンクを埋め込んで出力することもできますが、広い環境で利用できるようにURLも表示しておくと安心です。 &lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/::after"&gt;&lt;code&gt;::after&lt;/code&gt; 疑似要素&lt;/a&gt; などを使えばリンク先URLをテキストとして付加できるので、これをメディアクエリと組み合わせて印刷時のみ有効にするとよいでしょう。&lt;/p&gt;
&lt;p&gt;例示したスタイルでは &lt;code&gt;http://～&lt;/code&gt; あるいは &lt;code&gt;https://～&lt;/code&gt; から始まる外部リンクのみを対象にしていますが、必要に応じて変更してかまいません。あまねけ！では、 &lt;code&gt;a[href^="/"]&lt;/code&gt; な内部リンクには先頭にドメインを付与するスタイルも入っています。&lt;/p&gt;
&lt;p&gt;表示が気になった方は、このページを印刷するかPDFとして保存して出力を確認してみてください。&lt;/p&gt;
&lt;h3 id="4"&gt;④ 強調したいテキストに圏点を表示する&lt;/h3&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;sample-04-kenten-text&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;text-emphasis&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;filled&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;dot&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/text-emphasis"&gt;&lt;code&gt;text-emphasis&lt;/code&gt; 属性&lt;/a&gt;を &lt;code&gt;dot&lt;/code&gt; にすると、対象のテキストに圏点（テキストを強調するために文字の上に置く印）を表示できます。点の形（ &lt;code&gt;dot&lt;/code&gt; ・ &lt;code&gt;triangle&lt;/code&gt; ・ &lt;code&gt;sesame&lt;/code&gt; など）や、それに対して図形の内部を塗りつぶすかどうか（ &lt;code&gt;filled&lt;/code&gt; or &lt;code&gt;open&lt;/code&gt; ）を決められるので、ある程度はサイトの雰囲気に合わせてカスタマイズできます。&lt;/p&gt;
&lt;p&gt;表示が気になった方は、主に&lt;a href="/post/goodbye-sga/"&gt;さよなら、キョーカイの子&lt;/a&gt;などの小説作品などで多用されているので眺めてみてください。&lt;/p&gt;
&lt;h3 id="5"&gt;⑤ ドット絵をパキッと拡大して表示する&lt;/h3&gt;
&lt;p&gt;&lt;img alt="!あまねけ！のサイトバナー" height="31" src="/appendices/media-kit/amanejp_88x31.gif" width="88"&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="~あまねけ！のサイトバナー" height="31" src="/appendices/media-kit/amanejp_88x31.gif" width="88"&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;sample-05-pixel-art&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;image-rendering&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;pixelated&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/image-rendering"&gt;&lt;code&gt;image-rendering&lt;/code&gt; 属性&lt;/a&gt;を &lt;code&gt;pixelated&lt;/code&gt; にすると、画像のサイズ設定やブラウザのズーム機能による拡大・縮小に対して、ピクセルっぽさを残したアルゴリズムで表示されるようになります。&lt;/p&gt;
&lt;p&gt;小さなサイズのドット絵など、ブラウザの幅に対してピクセルを十数倍に拡大して表示する場合、普通はなめらかに拡大するアルゴリズムによってピクセルがにじんでボケボケした見た目になります。これを回避するためには拡大済みの画像を事前に作るのが一般的ですが、このスタイルを当てれば画像が小さいままパキッと拡大できて便利です。&lt;a href="/post/banner8831/"&gt;マイクロなGIFアニメバナーを目指して&lt;/a&gt;でも触れています。&lt;/p&gt;
&lt;p&gt;冒頭のサンプルに表示した88ピクセルx31ピクセルの小さなバナーでは、 &lt;code&gt;image-rendering: pixelated&lt;/code&gt; を当てていない下のバナーだけがぼやけた表示になることを確認できます。&lt;/p&gt;
&lt;h3 id="6-css"&gt;⑥ CSSだけでクリックに応じてスタイルを切り替える&lt;/h3&gt;
&lt;p&gt;&lt;a href="https://gist.githack.com/amane-katagiri/2f8aa285f72e8dff248ffe9d3d17bfde/raw/6a0e4d7f246830eca7a5ba3b2c099695922b500e/"&gt;動作サンプル&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;あまねけ！には、ページ左上の太陽 or 新月のマークでダークモードとライトモードを切り替える機能や、ページ右上の虫眼鏡のマークで文字の大きさを切り替える機能があります。このような動作は、JavaScriptを使えばクリックイベントでクラスを切り替えたり、カラーテーマについては &lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/color-scheme"&gt;&lt;code&gt;color-scheme&lt;/code&gt;&lt;/a&gt; 属性を書き換えれば実現できるものです。&lt;/p&gt;
&lt;p&gt;もしこの機能をCSSのみで実現したい場合は、非表示のチェックボックスにラベルを紐付けて、チェック状態に応じてスタイルを切り替えるのがよいでしょう。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;&lt;span class="c"&gt;/* 「状態」を保持するチェックボックスを隠しつつフォーカス可能にする */&lt;/span&gt;
&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;checkbox&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;toggle&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;absolute&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;pointer-events&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;clip-path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;rect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;opacity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;appearance&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;/* ユーザーに提示する切り替えUI */&lt;/span&gt;
&lt;span class="nt"&gt;label&lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;toggle-button&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nd"&gt;before&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;ここをクリックして背景色を変更&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;checkbox&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;toggle&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;focus&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;~&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;label&lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;toggle-button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;outline&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="kt"&gt;px&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;solid&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;royalblue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;/* 切り替えるスタイルの定義 */&lt;/span&gt;
&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;main&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;red&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;checkbox&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;toggle&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;checked&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;~&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;main&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mh"&gt;#eee&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;少し複雑ですが、実際に異なる2つのスタイルを宣言しているのは &lt;code&gt;#main&lt;/code&gt; と &lt;code&gt;input[type="checkbox"]#toggle:checked ~ #main&lt;/code&gt; のみです。他はユーザーに見せるためのクリック可能なラベルのスタイルと、チェックボックスを一切表示させないままフォーカス可能にするための工夫になっています。&lt;/p&gt;
&lt;p&gt;もしチェックボックスを &lt;code&gt;display: none&lt;/code&gt; などで隠してしまうと、マウス以外のインターフェース（Tabキーなど）でラベルに到達するのが難しくなるので、アクセシビリティの観点からこれらのスタイルをおすすめします。フォーカスしたことが分かりやすいよう、 &lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/outline"&gt;&lt;code&gt;outline&lt;/code&gt; 属性&lt;/a&gt;で可視化するのもポイントです。&lt;/p&gt;
&lt;p&gt;この手法は&lt;a href="/post/prefers-dark-light/"&gt;color-schemeとprefers-color-schemeのつかいかた&lt;/a&gt;で触れたものとほぼ同じです。兄方向・親方向に辿るセレクタが書けなかった時代に作ったので、チェックボックスをbody直下に置いて、その弟要素としてsectionを置いて全てのコンテンツを詰める、というちょっと特殊なレイアウトが必要なのが難点ですね。&lt;/p&gt;
&lt;p&gt;最近は &lt;a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/:has"&gt;&lt;code&gt;:has()&lt;/code&gt; 疑似クラス&lt;/a&gt; が広く利用できるようになりつつあるので、最近のブラウザが対象なら以下のように素直なセレクタにできるでしょう。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;&lt;span class="nt"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;has&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;checkbox&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;toggle&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;checked&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;main&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mh"&gt;#eee&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;label&lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;toggle-button&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;has&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;checkbox&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;#&lt;/span&gt;&lt;span class="nn"&gt;toggle&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;focus&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;outline&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="kt"&gt;px&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;solid&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;royalblue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;これで「チェックボックスの直後のセクション」から「子にチェックボックスがあるbody」と、セレクタの基準が実際にスタイルを当てられる側に移ります。さらに、チェックボックスを上位に置く必要もなくなるので、再利用可能なコンポーネントに詰めて影響範囲を閉じることさえ可能です。&lt;/p&gt;
&lt;h3 id="7-css"&gt;⑦ CSSだけでランダムっぽいパラメータを使う&lt;/h3&gt;
&lt;p&gt;&lt;a href="https://gist.githack.com/amane-katagiri/6ba8407f657d451e38b756c5f1eafb34/raw/52274de8ae2ac6de84df9221a220c52bc58daa21/"&gt;動作サンプル&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;あまねけ！では、季節に合わせたミニ・エフェクト（&lt;a href="https://x.com/amane_katagiri/status/2061362820781048170"&gt;参考&lt;/a&gt;）のように、ランダムな位置や動きを実現したいシーンがあります。&lt;/p&gt;
&lt;p&gt;CSSで &lt;em&gt;ランダムっぽさ&lt;/em&gt; を完結させたい場合は、事前にランダムな値を生成しておくか、ランダムっぽい計算を通せばよいでしょう。JavaScriptなら &lt;code&gt;Math.random()&lt;/code&gt; で擬似乱数を得ることができますが、素直にやると各CSS属性のために何度も乱数を生成して大量に引き渡す実装になったり、スタイルの責務が曖昧になったりして筋が悪そうです。&lt;/p&gt;
&lt;p&gt;もし完全にCSSのみでランダムっぽさを得たい場合は、CSS変数をシードとして非線形関数に通すのがおすすめです。CSSでは &lt;code&gt;sin()&lt;/code&gt; や &lt;code&gt;cos()&lt;/code&gt; といった三角関数が利用でき、これらはあらゆる数値を-1から1に変換する関数とみなせるので、以下のような使い方ができます。GLSLの古典的なハッシュ関数のアルゴリズムと同じですね。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;sample-07-random-position&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="nv"&gt;--left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;mod&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;sin&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;--seed&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;12.9898&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nf"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;--index&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;43758.5453&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;95&lt;/span&gt;&lt;span class="n"&gt;svw&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="nv"&gt;--top&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;mod&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;sin&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;--seed&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;78.233&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nf"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;--index&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;43758.5453&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;95&lt;/span&gt;&lt;span class="n"&gt;svh&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;fixed&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;calc&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;--left&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="k"&gt;top&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;calc&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;--top&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;周期を超える大きめの数値を三角関数に通すと乱数っぽく見える性質を利用したもので、実際にはCSS変数で値が確定する決定的な計算しかしていません。サンプルページでスライダーを動かしてみると分かるとおり、実際には位置が偏ったりいかにも正弦波のプロットっぽい配置に近づくこともあります。それでも、簡単な処理で大量に取り出せるランダムプールとしては十分です。&lt;/p&gt;
&lt;h3 id="_1"&gt;おわりに&lt;/h3&gt;
&lt;p&gt;CSSだけで実現できることは、他にもたくさんあります！　ちょっとした位置合わせや平面的な大きさの設定だけがCSSの能力ではありません。paddingとmarginの違いを峻別できるかなんて、広いCSSの世界の中では本当に小さな豆知識だということです。&lt;/p&gt;
&lt;p&gt;そよ風に流される複雑なアニメーション、簡易的なダイアログ表示、ダークモードに合わせた画像反転、OSが提示した文字サイズへの追従、などなど……シンプルかつ安全な宣言的記述で「もう一歩」を叶えられるのがCSSの魅力です。みなさんもぜひ、日常生活のちょっとしたところからCSSを取り入れてみてくださいね。&lt;/p&gt;
&lt;div class="footnote"&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id="fn:ry0ryuka"&gt;
&lt;p&gt;先日&lt;a href="https://ry0ryuka.xii.jp/design/wrapup-megruichi2026"&gt;個人サイトwebオンリーめぐる市(2026)サークル参加・全スペース制覇ログ・お気に入りサイト紹介&lt;/a&gt;であまねけ！の&lt;a href="/post/meguruichi/"&gt;「個人サイトWebオンリー めぐる市」参加によせて&lt;/a&gt;を紹介いただいたヒフミさんのサイト「&lt;a href="https://ry0ryuka.xii.jp/"&gt;涼 流 花&lt;/a&gt;」の記事です。&amp;#160;&lt;a class="footnote-backref" href="#fnref:ry0ryuka" title="Jump back to footnote 1 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</content><category term="tech"/></entry><entry><title>今日できる！「読みやすい小説本」を作る10個のチェックポイント</title><link href="https://ama.ne.jp/post/super-typeset-checklist/" rel="alternate"/><published>2026-06-18T22:23:00+09:00</published><updated>2026-06-18T22:23:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-06-18:/post/super-typeset-checklist/</id><summary type="html">&lt;p&gt;本と紙にこだわるあなたに捧ぐワンポイントアドバイス&lt;/p&gt;</summary><content type="html">&lt;p&gt;即売会で文芸サークルを回って見本誌を読んでいるとき、どうしても紙面の文字が頭に入ってこないことがあります。中身を理解するより先に、ページを先に進めるのがなんか面倒だなーと思う瞬間があるのです。&lt;/p&gt;
&lt;p&gt;そういう本の紙面に感じる違和感はいろいろ。文字が小さくて読みにくい、あるいは判型に対して不自然に大きくて目が滑る。字　間　が　大　き　く　てリズムが掴めない、あるいは狭すぎて窮屈でせっかちな印象になる。行間が広くて、狭くて……綴られているのはきっとよく練られた素敵なフレーズなのでしょうが、そんなページに置かれただけで陳腐な印象になる気がします。&lt;/p&gt;
&lt;p&gt;余白の取り方もそうです。たいていの文庫本は上（天）と下（地）の余白がどちらかに偏っていて、ぴったり揃えた紙面には違和感を感じるはず。でも、世の中には明らかにワープロソフトで適当に決めた余白の同人誌が出回っています。本の構造上、綴じ側（のど）は外側（小口）より大きな余白になるのが普通ですが、たまに行がのどにぴっちり食い込んで読みにくい同人誌も見かけます。&lt;/p&gt;
&lt;p&gt;様々なデバイスで文字を読める今の時代に、わざわざ紙あるいは紙を模した平面で作品を発表するなら、できるかぎりその意味にこだわりたいところです。文章をただテキスト情報として伝えたいだけなら、読者にレイアウトを任せるリフロー型の電子書籍メディア&lt;sup id="fnref:reflowable"&gt;&lt;a class="footnote-ref" href="#fn:reflowable" title="デバイスの画面サイズやウィンドウの大きさ、フォントサイズの設定に応じて再レイアウト（reflow）できる形式です。PDFのように決まった紙面を拡大・縮小するのではなく、ブラウザで文章を読むような体験を提供できます。テキストデータを含むので、検索機能や読み上げ機能とも相性がよいです。"&gt;1&lt;/a&gt;&lt;/sup&gt;を使うのがお互いに最適であって、わざわざ柔軟性もなく利便性も低い紙束を配る必要はないでしょう。&lt;/p&gt;
&lt;p&gt;では、よい紙面とは何か？　それをどう作るのか？　その答えは非常にシンプルで、自分が読みやすいなと思った本を真似すればよいのです。文字の大きさ、行数、余白はどうなっているか、ノンブルや柱はどこに入っているか、などなど。&lt;/p&gt;
&lt;p&gt;具体的には、以下のような10個のチェックリストを埋めていくのがよいでしょう。この記事を印刷したり、コピーしてメモアプリに貼り付ければチェックリストとして使えます。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;① 本の判型（大きさ）は？&lt;/li&gt;
&lt;li&gt;② 文字の大きさは？&lt;sup id="fnref:fontsize-bookmark"&gt;&lt;a class="footnote-ref" href="#fn:fontsize-bookmark" title="読んでいる本の文字サイズがわかるしおりなどがあれば、大まかなサイズ感を掴むのが楽になります。"&gt;2&lt;/a&gt;&lt;/sup&gt;&lt;/li&gt;
&lt;li&gt;③ 1行に何文字くらい入ってる？&lt;sup id="fnref:char-count-per-line"&gt;&lt;a class="footnote-ref" href="#fn:char-count-per-line" title="記号類が占める大きさが違ったり、禁則処理などで追い込まれたり追い出されて1行の文字数が変わることがあります。周囲に禁則文字がなく、正方形の空間を占めるふつうの文字の行で比較するとよいでしょう。ここから字間を逆算できます。"&gt;3&lt;/a&gt;&lt;/sup&gt;&lt;/li&gt;
&lt;li&gt;④ 1ページに何行くらい入ってる？&lt;sup id="fnref:line-count-per-page"&gt;&lt;a class="footnote-ref" href="#fn:line-count-per-page" title="大きな文字の見出しやその周囲の余白、あるいは脚注が入って1ページの行数が減ることがあります。ふつうの本文のみで占められたページで比較するとよいでしょう。ここから行間を逆算できます。"&gt;4&lt;/a&gt;&lt;/sup&gt;&lt;/li&gt;
&lt;li&gt;⑤ 版面（文字が印刷されている部分）は何mmある？&lt;/li&gt;
&lt;li&gt;⑥ 天（上側）の余白は何mmある？&lt;/li&gt;
&lt;li&gt;⑦ 地（下側）の余白は何mmある？&lt;/li&gt;
&lt;li&gt;⑧ 小口（外側）の余白は何mmある？&lt;/li&gt;
&lt;li&gt;⑨ ノンブル（ページ番号）はどこに入ってる？&lt;/li&gt;
&lt;li&gt;⑩ 柱（ページのタイトル・見出しなど）はどこに入ってる？&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;実際の紙面に合わせるとこんな感じになります。&lt;/p&gt;
&lt;p&gt;&lt;img alt="よい紙面を作るための10個のチェックリストを実際の紙面で示した図" height="529" src="/images/super-typeset-checklist/paper.png" width="750"&gt;&lt;/p&gt;
&lt;p&gt;なお、版面の大きさを指定できず、代わりにのど（内側）の余白で配置を決めなければならない場合は、判型の横の長さから版面の横の長さと小口の余白を引くと、のどの余白が分かります。&lt;/p&gt;
&lt;p&gt;チェックリストが埋まったら、これらの情報を元にお手持ちのワープロソフトや組版システムでページを調整します。もし自分の文芸同人誌でこのような点を気にしたことがなければ、まずはその同人誌の &lt;em&gt;測定&lt;/em&gt; から始めるとよいでしょう。この記事では10個のチェックポイントに絞りましたが、本を眺めて気になった点はどんどん確認するべきです。扉はどんなデザインか、目次をどのように入れているか、どちらのページから始まっているか、などなど。&lt;/p&gt;
&lt;p&gt;冒頭で触れた「目が滑る同人誌」は、そういうちょっとした観察や読者としての視線を感じない本だ、とも言い換えられます。本が読者に与える印象は、表紙のロゴタイプの綺麗さやイラストの &lt;em&gt;エモさ&lt;/em&gt; だけで決まるわけではなく、ぱらぱらと立ち読みしたときの紙面の印象でも大きく変わるものです。&lt;/p&gt;
&lt;p&gt;調整が終わったら、最後に見開きの一面（2ページ）で等倍に印刷してチェックしてみましょう。文庫本はA5サイズに、A5版はA4サイズになりますが、どちらもA4に印刷してかまいません。コンビニでのPDF印刷では「用紙に合わせる」ような設定を外すボタンが分かりにくいことがあります。&lt;/p&gt;
&lt;p&gt;さて、新しい紙面は違和感なく仕上がりましたか？　調整前の紙面と見比べると、その違いをより意識できると思います。今回紹介したチェックリストが、あなたの素敵な作品を仕上げる際の参考になれば幸いです。&lt;/p&gt;
&lt;div class="footnote"&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id="fn:reflowable"&gt;
&lt;p&gt;デバイスの画面サイズやウィンドウの大きさ、フォントサイズの設定に応じて再レイアウト（reflow）できる形式です。PDFのように決まった紙面を拡大・縮小するのではなく、ブラウザで文章を読むような体験を提供できます。テキストデータを含むので、検索機能や読み上げ機能とも相性がよいです。&amp;#160;&lt;a class="footnote-backref" href="#fnref:reflowable" title="Jump back to footnote 1 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:fontsize-bookmark"&gt;
&lt;p&gt;&lt;a href="https://ryokuyousha.booth.pm/items/7551490"&gt;読んでいる本の文字サイズがわかるしおり&lt;/a&gt;などがあれば、大まかなサイズ感を掴むのが楽になります。&amp;#160;&lt;a class="footnote-backref" href="#fnref:fontsize-bookmark" title="Jump back to footnote 2 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:char-count-per-line"&gt;
&lt;p&gt;記号類が占める大きさが違ったり、禁則処理などで追い込まれたり追い出されて1行の文字数が変わることがあります。周囲に禁則文字がなく、正方形の空間を占めるふつうの文字の行で比較するとよいでしょう。ここから字間を逆算できます。&amp;#160;&lt;a class="footnote-backref" href="#fnref:char-count-per-line" title="Jump back to footnote 3 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:line-count-per-page"&gt;
&lt;p&gt;大きな文字の見出しやその周囲の余白、あるいは脚注が入って1ページの行数が減ることがあります。ふつうの本文のみで占められたページで比較するとよいでしょう。ここから行間を逆算できます。&amp;#160;&lt;a class="footnote-backref" href="#fnref:line-count-per-page" title="Jump back to footnote 4 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</content><category term="tech"/></entry><entry><title>COMITIA156に参加して</title><link href="https://ama.ne.jp/post/after-comitia156/" rel="alternate"/><published>2026-06-18T18:57:00+09:00</published><updated>2026-06-18T18:57:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-06-18:/post/after-comitia156/</id><summary type="html">&lt;p&gt;BOOTHの特集ページに掲載されたの素直に嬉しい！&lt;/p&gt;</summary><content type="html">&lt;p&gt;先日&lt;a href="https://www.comitia.co.jp/html/156.html"&gt;COMITIA156&lt;/a&gt;で合同誌&lt;a href="https://hen.booth.pm/items/8413856"&gt;モノラルノートⅠ『宝石』&lt;/a&gt;を頒布した回について、本誌の制作や即売会までの準備、当日の様子などを書き残しておきます。&lt;/p&gt;
&lt;div class="toc"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#_1"&gt;合同誌の制作&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_2"&gt;即売会までの準備・宣伝など&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_3"&gt;当日の様子&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_4"&gt;後日のこと&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id="_1"&gt;合同誌の制作&lt;/h3&gt;
&lt;p&gt;モノラルノートの基本的な計画や位置付け、今後の展望については、立ち上げにあたって書かれた&lt;a href="/post/new-ai-standard/"&gt;合同誌「モノラルノート」の立ち上げによせて&lt;/a&gt;が詳しいです。&lt;/p&gt;
&lt;p&gt;今回は&lt;a href="https://hentaigirls.net/post/comitia156/"&gt;告知記事&lt;/a&gt;にも掲載したとおり、私を含めて6人のメンバーで執筆を始めました。3月頭から中旬にかけて&lt;a href="https://matrix.to/#/%23hentaigirls:matrix.amane.moe"&gt;サークルのMatrixコミュニティ&lt;/a&gt;の非公開ルームに招待し、都度アナウンスしながらGitHubのプライベートリポジトリで赤入れや修正を進めていくという流れです。&lt;/p&gt;
&lt;p&gt;&lt;img alt="4月中旬のモノラルノート編集用の非公開ルームでの会話の様子" height="600" src="/images/after-comitia156/private-announce.png" width="600"&gt;&lt;/p&gt;
&lt;p&gt;4月中旬の「みなさん進捗どんな感じ？　あたしはプロットはできてて、適当な作品で暖筆しながら書き始めてるくらい」なんてのんきな私のアナウンスを見ても分かる通り、GW明けにやっと初稿が揃い始めて、入稿週で完成……と、実はここまで含めていつものスタイルです。いつも、と言っても諸事情で3年ほど空いたのと、メンバーの入れ替わりもあったのでちょっとだけ新鮮でした。&lt;/p&gt;
&lt;p&gt;表紙のデザインは、いろいろアイデア出しをした末に、最終的には白黒を基調にしたシンプルなデザインにまとまりました&lt;sup id="fnref:no-cc-by-cover"&gt;&lt;a class="footnote-ref" href="#fn:no-cc-by-cover" title="この表紙デザインはごまふわラビが制作したものであり、CC BY 4.0でライセンスされていません。"&gt;1&lt;/a&gt;&lt;/sup&gt;。初めはモノで溢れかえる薄暗い勉強部屋のようなイメージで進み始めたのですが、パキッとしたシンプルさの方が目を引くはず！となったのです。やっぱり歩きながら構想を練るのが一番捗りますね。&lt;/p&gt;
&lt;p&gt;&lt;img alt="モノラルノートⅠ『宝石』書影" height="851" src="/images/after-comitia156/monaural-note-1_cover.png" width="600"&gt;&lt;/p&gt;
&lt;p&gt;モノラルから感じるモノクロっぽさ、ノートの表紙っぽい罫線、文字の大きさと行数の表示がこだわりポイントです。&lt;/p&gt;
&lt;p&gt;私の個人誌や私が主宰する文芸合同誌は、ほとんど全てがLuaLaTeX + jlreqベースの&lt;a href="https://github.com/hentaigirls/abook"&gt;hentaigirls/abook&lt;/a&gt;で制作されています。もともとはA5版2段組の合同誌を作るために作ったテンプレートなのですが、&lt;a href="/"&gt;あまねけ！&lt;/a&gt;作品まとめ集の変天美音を発行するにあたってA6（文庫）版を追加、そのときついでにA5版1段組にも対応していて、今回晴れて日の目を見たというところです。&lt;/p&gt;
&lt;p&gt;&lt;img alt="hentaigirls/abookで組版したA5版1段組紙面のサンプル" height="532" src="/images/after-comitia156/page-sample.png" width="750"&gt;&lt;/p&gt;
&lt;p&gt;もしこんな紙面に心地よさを感じましたら、あなたの組版にもぜひ使ってみてください。素直なMIT Licenseです。&lt;/p&gt;
&lt;h3 id="_2"&gt;即売会までの準備・宣伝など&lt;/h3&gt;
&lt;p&gt;みんなに参加してもらう合同誌だし、少しは宣伝も頑張ろうかな～と思って1ヶ月だけXに青バッジを付けてみました（今はもうありません）。ここも3年前とは少し意識が違うところかもしれません。&lt;/p&gt;
&lt;p&gt;まず、&lt;a href="https://x.com/hentaigirlsnet/status/2058862719013617946"&gt;5月25日&lt;/a&gt;から一週間かけて毎日収録作品を紹介していきました。作者のみなさんにキャッチフレーズをもらって、ちょっとしたバナー&lt;sup id="fnref:no-cc-by-banner"&gt;&lt;a class="footnote-ref" href="#fn:no-cc-by-banner" title="このバナーはいずれもCC BY 4.0でライセンスされていません。"&gt;2&lt;/a&gt;&lt;/sup&gt;にまとめた感じです。&lt;/p&gt;
&lt;p&gt;&lt;img alt="モノラルノートⅠ『宝石』の収録作品紹介バナーまとめ" height="900" src="/images/after-comitia156/banners.png" width="600"&gt;&lt;/p&gt;
&lt;p&gt;それから、&lt;a href="https://x.com/hentaigirlsnet/status/2061049964051206398"&gt;5月31日&lt;/a&gt;に各話のサンプルと&lt;a href="https://hen.booth.pm/items/8413856"&gt;BOOTHへのリンク&lt;/a&gt;をお知らせしました。例として私が寄稿した&lt;a href="https://viewer.samoyed.moe/mn-onit-sample/"&gt;「旧新宿街」のサンプル&lt;/a&gt;を置いておきます。今回のために左右綴じ対応・見開き表示対応・リンク設定も可能なてきとうビューアを作ったのです。今後も使うと思います。&lt;/p&gt;
&lt;p&gt;あとは&lt;a href="https://x.com/hentaigirlsnet/status/2062491679136035031"&gt;6月4日&lt;/a&gt;のおしながきと&lt;a href="https://hentaigirls.net/post/comitia156/"&gt;公式サイト記事&lt;/a&gt;のお知らせ、本誌が届いた&lt;a href="https://x.com/hentaigirlsnet/status/2062859915077804276"&gt;6月5日&lt;/a&gt;は実物写真の紹介、コミティア前日の&lt;a href="https://x.com/hentaigirlsnet/status/2063214508446040142"&gt;6月6日&lt;/a&gt;の掲示ポスターの紹介まで続きます。途中の数日が空いてしまいましたが、毎日少しずつ情報をお知らせできたのでよかったと思います。&lt;/p&gt;
&lt;h3 id="_3"&gt;当日の様子&lt;/h3&gt;
&lt;p&gt;最近の出展では頒布物を減らして、シンプルで分かりやすい設営を心がけるようになりました。&lt;/p&gt;
&lt;p&gt;&lt;img alt="COMITIA156当日のブースの様子" height="797" src="/images/after-comitia156/comitia156-booth.jpg" width="600"&gt;&lt;/p&gt;
&lt;p&gt;頒布したのは新刊としてのモノラルノートⅠ『宝石』と、既刊としての&lt;a href="https://hen.booth.pm/items/6621985"&gt;変天美音Ⅰ&lt;/a&gt;と&lt;a href="https://hen.booth.pm/items/7996217"&gt;変天美音Ⅱ&lt;/a&gt;、あとは&lt;a href="https://hen.booth.pm/items/6621875"&gt;女学生からのお手紙セット&lt;/a&gt;です。このグッズが埋もれてるのはもったいないな～と思うのですが、リアルすぎて逆に伝わりにくいのかもしれません。購入いただいた感想でもらった「&lt;a href="/comment/202105241944/"&gt;人が人に書いた手紙を関係ない私が読んでる&lt;/a&gt;」というのがかなり近い感覚です。&lt;/p&gt;
&lt;p&gt;ブースで閉会まで待機していた印象としては、背景に立てていたA2ポスターがかなり目を引いていました。やっぱり、デカいポスターにかわいいイラストを載せるのは大事ですね。私たちは「ブースに顔が向いているが爪先は向いていない」人たちがブースに興味がないことを知っていて&lt;sup id="fnref:great-wall"&gt;&lt;a class="footnote-ref" href="#fn:great-wall" title="フローチャートボード・印刷版チケット付きパンフレットのふりかえりという記事で、ブースに大きなスチレンボードを立てて売り子と来場者を隔離した企画の解説と、当時の気付きを記しています。"&gt;3&lt;/a&gt;&lt;/sup&gt;、その上で今回はポスターに目も爪先も向けてくれる人が多かったのです。&lt;/p&gt;
&lt;p&gt;ポスターを見る。POPを見る。卓上のおしながきを見る。見本誌を読む。あっ、こんにちは。POPでちゃんと本の中身を説明できていなかった気がしますが、今回は見本誌まで辿り着いてくれる人がたくさんいました。ここまで来たら見本誌を読んで「あ、ここ文芸のサークルさんか～……」という顔で帰ってもOKです。騙すつもりじゃなかったんだよ、ごめんね。&lt;/p&gt;
&lt;p&gt;次はでっかく「小説！」って書いたポスターにします。&lt;/p&gt;
&lt;p&gt;カードと名刺に興味を持ってくれる人が普段より多かったのも嬉しいですし、何より面白かったのは無料配布のステッカーがじゃんじゃか捌けていったことです。実は商品ラベル用のシール用紙の余白に印刷した端っこグルメで、おまけなので適当にどうぞ～という感じで置いていたのですが、ブースに立ち寄ってくれた方に勧めたらけっこう喜んでもらえました！&lt;/p&gt;
&lt;p&gt;なんてったって、ばつが悪そうな顔で見本誌を閉じた外国の方も、ステッカーを差し出すと「Oh, free? Wow!」と嬉しそうに1枚選んでくれたくらいです。エーッ、これって有料級にしていいやつなのか……という気付き。&lt;/p&gt;
&lt;p&gt;&lt;img alt="表紙イラストのステッカーとSDモノ子イラストのステッカーを数枚並べた様子" height="750" src="/images/after-comitia156/comitia156-sticker.jpg" width="750"&gt;&lt;/p&gt;
&lt;p&gt;ブースの左端に置いていたのですが、全体写真では見にくいので家で改めて撮ったものを載せておきます&lt;sup id="fnref:no-cc-by-sticker"&gt;&lt;a class="footnote-ref" href="#fn:no-cc-by-sticker" title="このステッカーに使われている素材はいずれもCC BY 4.0でライセンスされていません。"&gt;4&lt;/a&gt;&lt;/sup&gt;。当日はさらに、変幻美少女ぶっくす。マスコットキャラクターのユーとリー&lt;sup id="fnref:yu-ri-x"&gt;&lt;a class="footnote-ref" href="#fn:yu-ri-x" title="変幻美少女ぶっくす。公式XアカウントやMatrixコミュニティで現在使っているアイコンに描かれているキャラクターです。"&gt;5&lt;/a&gt;&lt;/sup&gt;、あまねくらげなどのステッカーがありました。グッズを強化していく方針もよさそうだと感じたので、&lt;a href="https://hen.booth.pm/items/8488160"&gt;モノラルノート 「モノ子」ステッカーセットⅠ&lt;/a&gt;としてテスト販売をしています。&lt;/p&gt;
&lt;p&gt;閉会後はごはん。だんだん強くなる雨の中、新宿の餃子屋さんに行きました。サークル参加でも一般参加でも、即売会の後に誰かと行くご飯は楽しいです。&lt;/p&gt;
&lt;h3 id="_4"&gt;後日のこと&lt;/h3&gt;
&lt;p&gt;6月9日になって、&lt;a href="https://booth.pm/topics/comitia156#section_7"&gt;BOOTHのCOMITIA156特集ページ「小説・評論・その他書籍」コーナー&lt;/a&gt;に&lt;a href="https://hen.booth.pm/items/8413856"&gt;モノラルノートⅠ『宝石』&lt;/a&gt;が掲載されたという連絡をいただきました。変幻美少女ぶっくす。公式Xアカウントからも&lt;a href="https://x.com/hentaigirlsnet/status/2064304891536039952"&gt;宣伝ポスト&lt;/a&gt;を投稿しています。嬉しい！&lt;/p&gt;
&lt;p&gt;&lt;img alt="BOOTHのCOMITIA156特集ページにモノラルノートⅠ『宝石』が掲載されている様子" height="750" src="/images/after-comitia156/booth-comitia156-novel.png" width="750"&gt;&lt;/p&gt;
&lt;p&gt;やっぱ外見のデザイン！　それから中身のブラッシュアップ！　合同誌企画なども含めて今後もいろいろ頑張りますので、まずは第一歩の&lt;a href="https://hen.booth.pm/items/8413856"&gt;モノラルノートⅠ『宝石』&lt;/a&gt;を入手してくれると嬉しいです。ブーストでステッカーもつきます。&lt;/p&gt;
&lt;div class="footnote"&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id="fn:no-cc-by-cover"&gt;
&lt;p&gt;この表紙デザインは&lt;a href="https://twitter.com/gomafu_warabi"&gt;ごまふわラビ&lt;/a&gt;が制作したものであり、&lt;a href="https://creativecommons.org/licenses/by/4.0/"&gt;CC BY 4.0&lt;/a&gt;でライセンスされていません。&amp;#160;&lt;a class="footnote-backref" href="#fnref:no-cc-by-cover" title="Jump back to footnote 1 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:no-cc-by-banner"&gt;
&lt;p&gt;このバナーはいずれも&lt;a href="https://creativecommons.org/licenses/by/4.0/"&gt;CC BY 4.0&lt;/a&gt;でライセンスされていません。&amp;#160;&lt;a class="footnote-backref" href="#fnref:no-cc-by-banner" title="Jump back to footnote 2 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:great-wall"&gt;
&lt;p&gt;&lt;a href="/post/bunfree-great-wall/"&gt;フローチャートボード・印刷版チケット付きパンフレットのふりかえり&lt;/a&gt;という記事で、ブースに大きなスチレンボードを立てて売り子と来場者を隔離した企画の解説と、当時の気付きを記しています。&amp;#160;&lt;a class="footnote-backref" href="#fnref:great-wall" title="Jump back to footnote 3 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:no-cc-by-sticker"&gt;
&lt;p&gt;このステッカーに使われている素材はいずれも&lt;a href="https://creativecommons.org/licenses/by/4.0/"&gt;CC BY 4.0&lt;/a&gt;でライセンスされていません。&amp;#160;&lt;a class="footnote-backref" href="#fnref:no-cc-by-sticker" title="Jump back to footnote 4 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:yu-ri-x"&gt;
&lt;p&gt;&lt;a href="https://x.com/hentaigirlsnet"&gt;変幻美少女ぶっくす。公式Xアカウント&lt;/a&gt;や&lt;a href="https://matrix.to/#/%23hentaigirls:matrix.amane.moe"&gt;Matrixコミュニティ&lt;/a&gt;で現在使っているアイコンに描かれているキャラクターです。&amp;#160;&lt;a class="footnote-backref" href="#fnref:yu-ri-x" title="Jump back to footnote 5 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</content><category term="ugoki"/></entry><entry><title>「個人サイトWebオンリー めぐる市」に参加して</title><link href="https://ama.ne.jp/post/after-meguruichi/" rel="alternate"/><published>2026-06-14T23:10:00+09:00</published><updated>2026-06-14T23:10:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-06-14:/post/after-meguruichi/</id><summary type="html">&lt;p&gt;反省も紹介を兼ねる&lt;/p&gt;</summary><content type="html">&lt;p&gt;こんにちは、あまねです。&lt;/p&gt;
&lt;p&gt;先日開催された「&lt;a href="https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb"&gt;個人サイトWebオンリー めぐる市&lt;/a&gt;」への参加準備や当日の様子、関連して思ったことについて残しておきます。&lt;/p&gt;
&lt;div class="toc"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#_1"&gt;まずは、自分がやったこと……&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_2"&gt;そのほか、自分以外についての感想……&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_3"&gt;ついでに、個人サイトの定義やメンタルモデルについて……&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id="_1"&gt;まずは、自分がやったこと……&lt;/h3&gt;
&lt;p&gt;めぐる市は、「ページのデザインや構成を工夫することができ独自のコンテンツを公開することができるプログラム・サービス&lt;sup id="fnref:meguruichi-personal-site"&gt;&lt;a class="footnote-ref" href="#fn:meguruichi-personal-site" title="個人サイトWebオンリー めぐる市紹介ページ内Q&amp;amp;A「展示に利用できる個人サイトの基準とは何ですか？」の回答より"&gt;1&lt;/a&gt;&lt;/sup&gt;」を用いて公開されたサイト――いわゆる個人サイトの展示がメインのイベントです。&lt;/p&gt;
&lt;p&gt;開催の5ヶ月ほど前、1月あたりに&lt;a href="https://x.com/nukarumi78/status/2009955103797850354"&gt;副主催の方の告知&lt;/a&gt;をお友だちのリポストで見かけて、面白そうだな～と思って申し込みました。ちょうど、とある合同誌の発売記念パーティー「&lt;a href="https://x.com/kataokafuguri/status/2010252451103089033"&gt;Party on the Spider Web!&lt;/a&gt;」に参加していた日だったのをよく覚えています。&lt;/p&gt;
&lt;p&gt;申し込みから5ヶ月ほどの間に、&lt;a href="/post/banner8831/"&gt;マイクロなGIFアニメバナーを目指して&lt;/a&gt;という記事で &lt;em&gt;個人サイトっぽい&lt;/em&gt; サイトバナーを作ったり、ブースに来てくれた人のためのサイト紹介記事を準備したりしました。開催1ヶ月前くらいに何か新しい作品でも置いておこうかな～と思ったんですが、コミティアの準備と重なって完成しなかったので、書きかけのまま置いてあります。&lt;/p&gt;
&lt;p&gt;開催の2週間前くらいに運営から&lt;a href="https://ma100.stars.ne.jp/meguruichi/news/tegalog.cgi?postid=16"&gt;参加表明シート&lt;/a&gt;が配られたので、いい感じに埋めて&lt;a href="https://x.com/amane_katagiri/status/2057023107781792198"&gt;告知ポスト&lt;/a&gt;も作りました。百合小説・エッセイ・技術・怪文書・生活・写真・団地・転籍届・こうかんノート・Web・架空・廃墟などをお送りするへんなサイトです！&lt;/p&gt;
&lt;p&gt;&lt;a href="https://x.com/amane_katagiri/status/2057023107781792198"&gt;&lt;img alt="めぐる市の告知ツイートに添付した参加表明シート" height="600" src="/images/after-meguruichi/meguru2026_mapB2.png" width="600"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;当日は&lt;a href="https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb/circle/47043"&gt;B-41&lt;/a&gt;でブースに着席したり、会場を歩き回ったり、みなさんの個人サイトを見て回ったりしました。実は開催直前まで土曜の朝10時から日曜の夜10時まで（36時間）と勘違いしていましたが、日曜の朝10時まで（24時間）でした。深夜から早朝はおそらくブースや記事への訪問も少なく、実質的には土曜いっぱいで終わりという感じ。個人サイトを一つ一つ探りながら回るにはちょっと短い印象でした。&lt;/p&gt;
&lt;p&gt;サイト紹介記事として用意した&lt;a href="/post/meguruichi/"&gt;「個人サイトWebオンリー めぐる市」参加によせて&lt;/a&gt;という記事は、けっこうたくさん読んでもらえた印象です。ブースからの流入はもちろん、Blueskyで紹介してもらっていたようで&lt;sup id="fnref:bluesky-1"&gt;&lt;a class="footnote-ref" href="#fn:bluesky-1" title="@silverbirder.bsky.social:3mnln5j6fis2q"&gt;2&lt;/a&gt;&lt;/sup&gt;&lt;sup id="fnref:bluesky-2"&gt;&lt;a class="footnote-ref" href="#fn:bluesky-2" title="@wakanatrium.bsky.social:3mnlza2ssc22x"&gt;3&lt;/a&gt;&lt;/sup&gt;、こちらを経由したアクセスもありました。&lt;/p&gt;
&lt;p&gt;こちらは開催後ですが、めぐる市に参加していたヒフミさんのサイト「&lt;a href="https://ry0ryuka.xii.jp/"&gt;涼 流 花&lt;/a&gt;」の&lt;a href="https://ry0ryuka.xii.jp/design/wrapup-megruichi2026"&gt;個人サイトwebオンリーめぐる市(2026)サークル参加・全スペース制覇ログ・お気に入りサイト紹介&lt;/a&gt;でも紹介いただいています。アクセシビリティの設定でGIFアニメが再生されないことがある、という記載を見て、サイトバナー&lt;sup id="fnref:no-cc-by-banner"&gt;&lt;a class="footnote-ref" href="#fn:no-cc-by-banner" title="このバナーはCC BY 4.0でライセンスされていません。"&gt;4&lt;/a&gt;&lt;/sup&gt;を1フレーム目が停止していても不自然にならないように少しずらしました。&lt;/p&gt;
&lt;p&gt;&lt;img alt="~あまねけ！サイトバナーの1フレーム目の比較画像で、ama.ne.jpの1文字目「a」にかかる光の反射が取り除かれているのを示す様子" height="93" src="/images/after-meguruichi/amaneke-banner-update.png" width="660"&gt;&lt;/p&gt;
&lt;p&gt;ブースへの絵文字リアクションもたくさんもらえて嬉しかったです！&lt;/p&gt;
&lt;p&gt;&lt;img alt="めぐる市のサークルページで30個ほどの絵文字リアクションをもらっている様子" height="400" src="/images/after-meguruichi/booth-reaction.png" width="400"&gt;&lt;/p&gt;
&lt;p&gt;サイト紹介記事では&lt;a href="https://subscribe.amane.moe/"&gt;メール通知サービス&lt;/a&gt;や&lt;a href="/feeds/"&gt;フィード&lt;/a&gt;の購読をお願いしていましたが、購読数が増えたかは微妙な感じ？でした。特にフィードは購読の動向について知る方法がほとんどないので、今後の記事へのアクセスでほんのり体感できるかもしれません。メール通知については、先日の&lt;a href="/post/amaneke-traffic-count-202606/"&gt;あまねけ！交通量調査（2026年6月）&lt;/a&gt;のお知らせを受け取った人がいるかもしれません。&lt;/p&gt;
&lt;p&gt;フィードリーダーはあまねけ！以外のあらゆる個人サイトの更新をまとめて確認できる便利なツールなので、まだお持ちでない方は&lt;a href="/post/feed-and-you/"&gt;個人サイトとフィードのつかいかた&lt;/a&gt;などを元に導入してみてください。この記事をAIに渡して相談に乗ってもらうと楽に使い始められそうです（&lt;a href="https://chatgpt.com/share/6a2e6480-33bc-83e8-a794-5b18e84e97e1"&gt;一例&lt;/a&gt;）。&lt;/p&gt;
&lt;p&gt;&lt;a href="https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb/circle_cut"&gt;サークルカット一覧&lt;/a&gt;にリンクが残っているブースもあるので、興味があれば実際に見てみるといいでしょう。イベント期間中のみ掲載されていたリンクはもう見られないのと、イベント合わせで公開した特設ページは既に閉鎖されているかもしれないので、その点はご注意ください。&lt;/p&gt;
&lt;h3 id="_2"&gt;そのほか、自分以外についての感想……&lt;/h3&gt;
&lt;p&gt;イベント中にマップを歩いているアバターがいろいろ素敵だったので、印象に残ったものを紹介します。マップのスクショを撮り忘れていて、すれ違ったときの記憶頼みの部分があるので、アバターの詳細は違うかもしれません。&lt;/p&gt;
&lt;p&gt;まず、と・り・なという黒い文字の身体で歩いていた東空とりなさん（サークル: &lt;a href="https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb/circle/32829"&gt;イカサマの詰め合わせ&lt;/a&gt;）。右向きに歩くと鏡文字になっていました。アイコンやサイトバナーでもこの文字絵（葦手絵？）が使われていて、色数も少なくシンプルな線で識別性を高めたクールな印象を受けます。&lt;/p&gt;
&lt;p&gt;次に、青いフロッピーディスクがてくてく歩いていた汲さん（サークル: &lt;a href="https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb/circle/47051"&gt;河川敷&lt;/a&gt;）。&lt;a href="https://bsky.app/profile/0000cd.bsky.social/post/3mnokeannd22e"&gt;Blueskyの投稿&lt;/a&gt;でアバターのスクショが投稿されていたのを確認済み。アバターと同じく、個人サイトの方も初期のMacintoshのような古いOSのGUIデスクトップ画面を模してよく作り込まれており、昔のPoolside.FMのような雰囲気を思い出します。&lt;/p&gt;
&lt;p&gt;最後に、白黒のハッチング模様（斜線トーン？）の羊さんで歩いていた黑野羊さん（サークル: &lt;a href="https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb/circle/44297"&gt;黑羊文庫&lt;/a&gt;さん）。細かいパターンの模様なので、動くとよく目立って印象に残ります。各種SNSのアイコンや活動報告のヘッダーにも使われていて、記事の内容に合わせてシーズンのアイテムなどを抱えているのも可愛いです。&lt;/p&gt;
&lt;p&gt;個人サイトもいろいろ見て回りました。マウスを動かしているだけでワクワクする作り込まれたデザインのサイト、コンテンツの閲覧に集中できるシンプルなデザインのサイト。可愛いイラストや漫画、短編小説を並べる作品メインのサイトや、日記やスナップ写真の発信がメインのサイト。個人サイト制作のTipsやテンプレート配布がメインのサイトもありました。&lt;/p&gt;
&lt;p&gt;関係をなす性別を問わない恋愛表現を指す「3L&lt;sup id="fnref:3l"&gt;&lt;a class="footnote-ref" href="#fn:3l" title="NL/HL・GL・BLの3つのLをまとめて3Lという意味のようですが、LGBTと同様に具体的な略称をなす概念のみに限定されるものではないと考えるべきです。"&gt;5&lt;/a&gt;&lt;/sup&gt;」という馴染みのない用語を知ったのも、今回が初めてです。&lt;a href="https://www.nishishi.com/cgi/tegalog/"&gt;てがろぐ&lt;/a&gt;を利用しているサイトがかなり多かったのも印象的でした。&lt;/p&gt;
&lt;h3 id="_3"&gt;ついでに、個人サイトの定義やメンタルモデルについて……&lt;/h3&gt;
&lt;p&gt;めぐる市の告知サイトでは、「個人サイトの基準」に踏み込んで苦労した跡が残っていました。最終的には、具体的なサービス名やフレームワークを挙げて個人サイトかどうかを判定する、という外延的な定義にまとまったようです。「なるべく広く定義しております」と言っているとおり、いわゆるブログやホームページ作成ツールも含むライトな発信者の層を取り込む方針を示していました。&lt;/p&gt;
&lt;p&gt;別の例として、個人サイトのリンク集を謳う&lt;a href="https://nodenarium.net/"&gt;Nodenarium&lt;/a&gt;では、&lt;a href="https://nodenarium.net/submit"&gt;審査基準&lt;/a&gt;として「特定少数による運営」「既存のプラットフォーム上にないこと」「私的な内容の投稿を含むこと」などを挙げています。より狭く内包的な定義ですね。これをきっかけに書かれた&lt;a href="/post/ltu-balance/"&gt;LTUバランスのこと&lt;/a&gt;では、この&lt;a href="/"&gt;あまねけ！&lt;/a&gt;を「『わたし』が限りなく尊重されている、外向きの自己と内向きの自己を自由に表現できる場」と表現しています。&lt;/p&gt;
&lt;p&gt;今回、めぐる市に参加している個人サイトを眺めて、自分自身が個人サイトをどう位置付けているか、どこに特徴があるかについても掘り下げられました。つまり、これまで無意識にやっていたけれど、他の個人サイトにはなさそうな工夫があったということです。&lt;/p&gt;
&lt;p&gt;まず、私はトップページのファーストビューで意味のある情報を出せるようにしていました。インターネットで重要なのは、コンテンツまでのクリック数を減らすこと&lt;sup id="fnref:x-babel"&gt;&lt;a class="footnote-ref" href="#fn:x-babel" title="とあるSNSでは、もともと搭載されていた翻訳機能をタップなしで自動適用されるようにしただけで、異言語圏の交流が非常に盛んになったらしいです。"&gt;6&lt;/a&gt;&lt;/sup&gt;。しかし各ブースのリンクを開いてみると、無断転載やAI学習を禁じる宣言、大きなヘッダーだけが表示され、クリックやスクロールなしではコンテンツのサムネイルすら見えない個人サイトがけっこう多かったです。&lt;/p&gt;
&lt;p&gt;もちろん、昔描いた一枚絵を見せるのが主目的のサイトであればよいのですが、ふつうは新しい作品やイベント参加情報、実績を知ってもらいたいのではないかと思います。あまねけ！は記事を読んでもらうのが第一なので、ファーストビューで4～8記事のタイトルと冒頭数十文字を読むことができるようになっています。&lt;/p&gt;
&lt;p&gt;そして、私はコンテンツのタイムラインをできるかぎり1本に絞っていました。これを &lt;strong&gt;メインライン&lt;/strong&gt; と名付けましょう。あまねけ！は記事という単位でパッケージした文章をメインラインに配置しており、必要に応じてメインラインから切り出した作者やカテゴリ別のタイムラインも利用できます。これは&lt;a href="/feeds/"&gt;フィード&lt;/a&gt;として配布している更新情報と背中合わせの概念です。&lt;/p&gt;
&lt;p&gt;サイトにメインラインがあるメリットは、なんといっても読者が迷わないという点です。みなさんは即売会に行ったことがありますか？　では、特に事前情報もなく通りかかったサークルに興味を持ったことは？　そのとき特に注目するのは、「新刊」がどういう内容か、だと思います。ここで新刊がどれか分からないとか、同じような新刊が2冊ある、あるいは見本誌を読むのに合い言葉が必要なとき……試しに1冊買ってみようという気持ちは薄れてしまうでしょう。&lt;/p&gt;
&lt;p&gt;これは個人サイトでも同じだと思うのです。長年様々なジャンルで活動してきたせいで、複数のタイムラインが同じように並んでいるとか、トップページが情報過多でどの情報から辿ればいいか分からないとか……もちろん「別にあなたのために作ってるわけじゃないですよ」と言われればそれまでの縁ですが、もう少し素敵な初訪問だったらよかったな、と思えてなりません。&lt;/p&gt;
&lt;p&gt;まとめると、あまねけ！は「自己表現を込めた記事を1本のメインラインに据えた、シンプルな読みやすさを重視したブログに近い個人サイト」である、ということが分かりました。&lt;/p&gt;
&lt;p&gt;今回は、個人サイトの展示が主目的という珍しいイベントを通じて、普段なかなか見る機会のない個人サイトをたくさん巡回できました。様々なジャンルや年齢層の人たちが自分の世界を作り上げているのは、本当に素晴らしいことです。SNSでの無意味な炎上や横暴なBANの被害を避けたり、一過性のインプレッションでしか評価されない過激で刹那的な世界から自由であり続けるには、やはり個人サイトしかありません。&lt;/p&gt;
&lt;p&gt;個人サイトを作る人や見てくれる人が、これからも素敵な個人サイトライフを送れますように！&lt;/p&gt;
&lt;div class="footnote"&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id="fn:meguruichi-personal-site"&gt;
&lt;p&gt;&lt;a href="https://ma100.stars.ne.jp/meguruichi/"&gt;個人サイトWebオンリー めぐる市紹介ページ&lt;/a&gt;内Q&amp;amp;A「展示に利用できる個人サイトの基準とは何ですか？」の回答より&amp;#160;&lt;a class="footnote-backref" href="#fnref:meguruichi-personal-site" title="Jump back to footnote 1 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:bluesky-1"&gt;
&lt;p&gt;&lt;a href="https://bsky.app/profile/silverbirder.bsky.social/post/3mnln5j6fis2q"&gt;@silverbirder.bsky.social:3mnln5j6fis2q&lt;/a&gt;&amp;#160;&lt;a class="footnote-backref" href="#fnref:bluesky-1" title="Jump back to footnote 2 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:bluesky-2"&gt;
&lt;p&gt;&lt;a href="https://bsky.app/profile/wakanatrium.bsky.social/post/3mnlza2ssc22x"&gt;@wakanatrium.bsky.social:3mnlza2ssc22x&lt;/a&gt;&amp;#160;&lt;a class="footnote-backref" href="#fnref:bluesky-2" title="Jump back to footnote 3 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:no-cc-by-banner"&gt;
&lt;p&gt;このバナーは&lt;a href="https://creativecommons.org/licenses/by/4.0/"&gt;CC BY 4.0&lt;/a&gt;でライセンスされていません。&amp;#160;&lt;a class="footnote-backref" href="#fnref:no-cc-by-banner" title="Jump back to footnote 4 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:3l"&gt;
&lt;p&gt;NL/HL・GL・BLの3つのLをまとめて3Lという意味のようですが、LGBTと同様に具体的な略称をなす概念のみに限定されるものではないと考えるべきです。&amp;#160;&lt;a class="footnote-backref" href="#fnref:3l" title="Jump back to footnote 5 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:x-babel"&gt;
&lt;p&gt;とあるSNSでは、もともと搭載されていた翻訳機能をタップなしで自動適用されるようにしただけで、異言語圏の交流が非常に盛んになったらしいです。&amp;#160;&lt;a class="footnote-backref" href="#fnref:x-babel" title="Jump back to footnote 6 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</content><category term="ugoki"/></entry><entry><title>あまねけ！交通量調査（2026年6月）</title><link href="https://ama.ne.jp/post/amaneke-traffic-count-202606/" rel="alternate"/><published>2026-06-12T19:32:00+09:00</published><updated>2026-06-12T19:32:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-06-12:/post/amaneke-traffic-count-202606/</id><summary type="html">&lt;p&gt;あまねけ！によく来ていたのは……意外なあの人！&lt;/p&gt;</summary><content type="html">&lt;p&gt;最近、Firebase Hosting&lt;sup id="fnref:firebase-blaze"&gt;&lt;a class="footnote-ref" href="#fn:firebase-blaze" title="モバイルおよびWebアプリ開発プラットフォームのFirebaseのうち、コンテンツをホスティングする機能がFirebase Hostingです。Firebaseでは無料のSparkプランと従量課金制のBlazeプラン（無料枠付き）があり、あまねけ！はBlazeプランを適用しています。"&gt;1&lt;/a&gt;&lt;/sup&gt;で運用しているこの個人サイト「&lt;a href="/"&gt;あまねけ！&lt;/a&gt;」のデータ転送&lt;sup id="fnref:outbound-traffic"&gt;&lt;a class="footnote-ref" href="#fn:outbound-traffic" title="ブラウザでページを表示したりダウンロードしたりする向きの通信のことです。"&gt;2&lt;/a&gt;&lt;/sup&gt;が急増しています。2026年5月に至っては毎月数円から数十円程度で済んでいたホスティング費用が790円まで跳ね上がってしまい、そろそろ調査が必要かなと思ったところです。&lt;/p&gt;
&lt;p&gt;1ヶ月に790円ともなると、無料枠と合わせて40GBくらいのデータ転送があったという計算になります。もし仮に、本当に訪問者が爆増してたくさん記事を読んでくれたならありがたいことですし、それに対して数百円払うなら安いものです。しかし、あまねけ！はアクセス解析&lt;sup id="fnref:shynet"&gt;&lt;a class="footnote-ref" href="#fn:shynet" title="あまねけ！ではShynetをセルフホストして簡易的なアクセス解析を行っています。Google アナリティクスのような第三者へのデータ提供を伴うサービスではありません。"&gt;3&lt;/a&gt;&lt;/sup&gt;やインターネットの反応を見ている限り日々だいたい無風であり、来るのは顔見知りと観光案内所&lt;sup id="fnref:mingeiinter"&gt;&lt;a class="footnote-ref" href="#fn:mingeiinter" title="たとえばミンゲイインターネットのような。"&gt;4&lt;/a&gt;&lt;/sup&gt;経由のニッチな観光客くらい。データ転送量だけが右肩上がりというのは説明が付きません。&lt;/p&gt;
&lt;p&gt;&lt;a href="https://firebase.google.com/docs/hosting/usage-quotas-pricing"&gt;Firebase Hostingの料金プラン&lt;/a&gt;には、脚注で触れたとおりSparkプランとBlazeプランがあります。&lt;/p&gt;
&lt;p&gt;SparkプランのFirebase Hostingでは、 &lt;strong&gt;月に&lt;/strong&gt; 10GBの無料枠が割り当てられます。ドキュメントの記載がまちまちなのですが、実際はさらに &lt;strong&gt;1日に&lt;/strong&gt; 360MBの制限がかかります。そのため、例えば平日のアクセスが360MBを下回っても、使わなかった分を休日のアクセスに充てるような使い方はできません。比較的アクセスが多いサイトや画像メインのサイトではギリギリという印象です。&lt;/p&gt;
&lt;p&gt;ここでBlazeプランに切り替えると、1日に360MBの無料枠は残ったまま、無料枠を使い切った後のデータ転送に0.15ドル/GBかかるようになります。Sparkプランと同様に、360MB/日を使い切った日ごとにそれぞれ料金がかかり、余った無料枠を別の日に回すことはできません。&lt;/p&gt;
&lt;p&gt;さて、これらの情報を踏まえて、今からあまねけ！交通量調査を進めていきます。もし以下の技術的観点に詳しくなければ、先に調べておくとよいかもしれません。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;User-Agent&lt;/li&gt;
&lt;li&gt;HTTPキャッシュ&lt;/li&gt;
&lt;li&gt;クローラー&lt;/li&gt;
&lt;li&gt;CDN&lt;/li&gt;
&lt;li&gt;HTTP条件付きリクエスト&lt;/li&gt;
&lt;li&gt;304 Not Modified&lt;/li&gt;
&lt;li&gt;たまごポケット&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;では、始めましょう！&lt;/p&gt;
&lt;h3 id="_1"&gt;仮説&lt;/h3&gt;
&lt;p&gt;まず、これまでに得てきた情報を元に仮説を立ててみます。ここ数ヶ月は定期的に最終的なホスティング費用とアクセス解析を眺めていたので、ぼんやりと原因の予想もしていました。&lt;/p&gt;
&lt;p&gt;最近のホスティング費用の動向は以下の通りです。2025年10月から急増し、2025年12月から2026年2月あたりは180円前後で安定したと思ったら、それ以降は急激に増加したという、3つのトレンドが読み取れます。2025年10月から2026年3月までは長期的な原因①で200円前後の増加があり、それ以降は新たな原因②が重なって600円前後の増加が重なった、と考えられるかもしれません。&lt;/p&gt;
&lt;p&gt;&lt;img alt="~2025年8月から2026年5月のホスティング費用をまとめた棒グラフ" height="450" src="/images/amaneke-traffic-count-202606/firebase-hosting-cost.png" width="750"&gt;&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;期間&lt;/th&gt;
&lt;th align="right"&gt;ホスティング費用（円）&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;2025/08&lt;/td&gt;
&lt;td align="right"&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2025/09&lt;/td&gt;
&lt;td align="right"&gt;6&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2025/10&lt;/td&gt;
&lt;td align="right"&gt;99&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2025/11&lt;/td&gt;
&lt;td align="right"&gt;150&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2025/12&lt;/td&gt;
&lt;td align="right"&gt;188&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2026/01&lt;/td&gt;
&lt;td align="right"&gt;182&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2026/02&lt;/td&gt;
&lt;td align="right"&gt;183&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2026/03&lt;/td&gt;
&lt;td align="right"&gt;270&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2026/04&lt;/td&gt;
&lt;td align="right"&gt;540&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2026/05&lt;/td&gt;
&lt;td align="right"&gt;790&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;アクセス解析の情報については、詳細なログの紹介は避けますがここ数ヶ月ほどは中国・香港・台湾からのアクセスログが多く、他にもUser-Agentがクローラーっぽいもの、あとはiCloudのプライベートリレーに包まれたアクセスなどが多かったです。滞在時間も少なく、多くのページを機械的に辿るアクセスも頻発していました。&lt;/p&gt;
&lt;p&gt;あまねけ！はほとんどが日本語の文章のコンテンツですし、知らない人が翻訳して読むほどの使いやすい情報はないはずです。ここ最近、海外からのアクセスが増えているとなると――AIの学習データ収集ボットが、あちこちの帯域を占有して回っているという話が頭をよぎります。これらの情報をまとめて、「&lt;strong&gt;AIの学習データ収集クローラーに狙い撃ちされており、アクセスが頻発してデータ転送量を押し上げている&lt;/strong&gt; 」という仮説を立てて調査を始めました。&lt;/p&gt;
&lt;h2 id="_2"&gt;調査&lt;/h2&gt;
&lt;p&gt;ホスティング費用とアクセス解析の傾向だけでは、まだ情報が足りません。Firebase HostingではHTTPアクセスログをCloud Logging&lt;sup id="fnref:cloud-logging"&gt;&lt;a class="footnote-ref" href="#fn:cloud-logging" title="Google Cloudで提供されているログ蓄積・検索・分析を行うサービスです。Firebase Hosting内のサービスではなく、あくまでログを連携してCloud Loggingから利用する関係です。"&gt;5&lt;/a&gt;&lt;/sup&gt;にエクスポートでき、Cloud Logging側では直近の30日間分のログを無料で保持できます。2025年10月頃からのトレンドを確認するのには足りませんが、ここ数日も続く大量のデータ転送を分析するには十分です。&lt;/p&gt;
&lt;p&gt;ログの分析には、ブラウザから利用できるログエクスプローラを使うのが手っ取り早いですが、User-AgentやIPアドレスごとに集計したり、過去のデータを手軽に保持したい場合は、対象期間のログを丸ごとダウンロードしてしまうのがおすすめです。&lt;/p&gt;
&lt;p&gt;今回は &lt;code&gt;gcloud&lt;/code&gt; コマンドで落とせる分を落としてみました:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;gcloud&lt;span class="w"&gt; &lt;/span&gt;logging&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;read&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;resource.type=&amp;quot;firebase_domain&amp;quot;&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;--project&lt;span class="o"&gt;=&lt;/span&gt;YOUR_PROJECT&lt;span class="w"&gt; &lt;/span&gt;--format&lt;span class="o"&gt;=&lt;/span&gt;json&lt;span class="w"&gt; &lt;/span&gt;&amp;gt;&lt;span class="w"&gt; &lt;/span&gt;YOUR_PROJECT_&lt;span class="k"&gt;$(&lt;/span&gt;date&lt;span class="w"&gt; &lt;/span&gt;-Id&lt;span class="k"&gt;)&lt;/span&gt;.json
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;実行日が6月9日だったので、5月10日頃からのデータが含まれていました。以降はここで得られた &lt;code&gt;amanejp_2026-06-09.json&lt;/code&gt; に対して分析を進めていきます。&lt;/p&gt;
&lt;p&gt;まず、どんなファイルにアクセスがあるかを集計します:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;cat&lt;span class="w"&gt; &lt;/span&gt;amanejp_2026-06-09.json&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;jq&lt;span class="w"&gt; &lt;/span&gt;-r&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;.[] | [.httpRequest.requestUrl, (.httpRequest.responseSize // 0 | tostring)] | @tsv&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;awk&lt;span class="w"&gt; &lt;/span&gt;-F&lt;span class="s1"&gt;&amp;#39;\t&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;{size[$1]+=$2; count[$1]++} END {for(u in size) printf &amp;quot;%10.2f MB  %6d reqs  %s\n&amp;quot;, size[u]/1000000, count[u], u}&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;sort&lt;span class="w"&gt; &lt;/span&gt;-rn&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;head&lt;span class="w"&gt; &lt;/span&gt;-n10
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th align="right"&gt;データ転送量&lt;/th&gt;
&lt;th align="right"&gt;リクエスト数&lt;/th&gt;
&lt;th align="left"&gt;URL&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td align="right"&gt;24179.65 MB&lt;/td&gt;
&lt;td align="right"&gt;7039&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/all.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;15459.31 MB&lt;/td&gt;
&lt;td align="right"&gt;109120&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;370.21 MB&lt;/td&gt;
&lt;td align="right"&gt;13&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/appendices/archive/amanejp.zip&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;188.14 MB&lt;/td&gt;
&lt;td align="right"&gt;593&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/ugoki.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;118.78 MB&lt;/td&gt;
&lt;td align="right"&gt;114&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/amane-katagiri.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;84.15 MB&lt;/td&gt;
&lt;td align="right"&gt;168&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/lily.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;56.88 MB&lt;/td&gt;
&lt;td align="right"&gt;27&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/images/yet-another-barcode-system/akasha.webm&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;51.37 MB&lt;/td&gt;
&lt;td align="right"&gt;235&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/tech.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;48.53 MB&lt;/td&gt;
&lt;td align="right"&gt;548&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/theme/images/amanejp-banner_88x31.gif&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;37.30 MB&lt;/td&gt;
&lt;td align="right"&gt;31&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/images/ffmpeg-tomori/yakiniku.gif&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;ここで分かったのは、ほとんどのアクセスが全体フィードとトップページに対するものだということ。あまねけ！には動画や画像などの大きめのファイル、さらに大きなZIPアーカイブも含まれていますが、アクセス数が桁違いなのでデータ転送量では無視できるレベルになっています。&lt;/p&gt;
&lt;p&gt;フィードへのリクエストはブラウザ前提のアクセス解析には出ないので、海外からのアクセスが急増したという印象は見当違いだったようです。一方で、トップページならアクセス解析に出るはずですが、月に10万件以上のアクセスがあったという記録は見つかりません。ちょっと観点を変えて掘り下げる必要がありそうです。&lt;/p&gt;
&lt;p&gt;そこで、次にどんなUser-AgentでどんなURLにアクセスしている傾向があるかを集計してみます:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;cat&lt;span class="w"&gt; &lt;/span&gt;amanejp_2026-06-09.json&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;jq&lt;span class="w"&gt; &lt;/span&gt;-r&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;.[] | [.httpRequest.requestUrl, .httpRequest.userAgent, (.httpRequest.responseSize // 0 | tostring)] | @tsv&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;awk&lt;span class="w"&gt; &lt;/span&gt;-F&lt;span class="s1"&gt;&amp;#39;\t&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;{key=$1&amp;quot;\t&amp;quot;$2; size[key]+=$3; count[key]++} END {for(k in size) printf &amp;quot;%10.2f MB  %6d reqs  %s\n&amp;quot;, size[k]/1000000, count[k], k}&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;sort&lt;span class="w"&gt; &lt;/span&gt;-rn&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;head&lt;span class="w"&gt; &lt;/span&gt;-n5
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th align="right"&gt;データ転送量&lt;/th&gt;
&lt;th align="right"&gt;リクエスト数&lt;/th&gt;
&lt;th align="left"&gt;URL&lt;/th&gt;
&lt;th align="left"&gt;User-Agent&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td align="right"&gt;21302.57 MB&lt;/td&gt;
&lt;td align="right"&gt;4736&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/all.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;&lt;strong&gt;（設定なし）&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;15079.03 MB&lt;/td&gt;
&lt;td align="right"&gt;86219&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;&lt;strong&gt;Uptime-Kuma&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;910.35 MB&lt;/td&gt;
&lt;td align="right"&gt;719&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/all.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;（フィードリーダー系のクローラー）&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;337.31 MB&lt;/td&gt;
&lt;td align="right"&gt;266&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/all.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;（RubyのHTTPクライアント）&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;265.37 MB&lt;/td&gt;
&lt;td align="right"&gt;59&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/all.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;（フィードリーダー系のクローラー）&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;207.64 MB&lt;/td&gt;
&lt;td align="right"&gt;164&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/all.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;（フィードリーダー系のクローラー）&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;169.29 MB&lt;/td&gt;
&lt;td align="right"&gt;1&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/appendices/archive/amanejp.zip&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;&lt;a href="https://developers.openai.com/api/docs/bots"&gt;GPTBot&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;169.29 MB&lt;/td&gt;
&lt;td align="right"&gt;1&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/appendices/archive/amanejp.zip&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;（一般的なブラウザ）&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;164.01 MB&lt;/td&gt;
&lt;td align="right"&gt;130&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/all.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;（RubyのHTTPクライアント）&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right"&gt;130.83 MB&lt;/td&gt;
&lt;td align="right"&gt;148&lt;/td&gt;
&lt;td align="left"&gt;&lt;code&gt;/feeds/all.atom.xml&lt;/code&gt;&lt;/td&gt;
&lt;td align="left"&gt;（フィードリーダー系のクローラー）&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;上位2件が21GB・15GBと合わせて36GBほどあり、飛び抜けて多いですね。しかし全体フィードへのアクセスのUser-Agentは空っぽで、もしかしたら複数のクローラーからのアクセスがまとめられて大きく見えているのかもしれません。&lt;/p&gt;
&lt;p&gt;トップページに対するアクセスの &lt;code&gt;Uptime-Kuma&lt;/code&gt; というUser-Agentは、&lt;a href="https://uptimekuma.org/"&gt;Uptime Kuma&lt;/a&gt;というサーバーの死活監視サービスからの定期的なアクセスです。実はこのサービスは私自身が設置したもので、意外と無駄な転送量を消費していることが分かりました。 &lt;strong&gt;なんてこった！&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;ただ、Uptime Kumaを設置したのは2025年10月よりかなり前なので、ここ数ヶ月で急に増え始めたというトレンドを綺麗に説明できません。トップページに記事の冒頭を含めるなどの変更でサイズが大きくなった影響を受けたとか、この時期にバージョンアップしたUptime Kumaの監視戦略が変わったとか、CDNのキャッシュ戦略が変わったのかもしれない、と予想しておきます。&lt;/p&gt;
&lt;p&gt;全体フィードの話に戻りましょう。最後にアクセス元IPアドレス別に集計してみます:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;cat&lt;span class="w"&gt; &lt;/span&gt;amanejp_2026-06-09.json&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;jq&lt;span class="w"&gt; &lt;/span&gt;-r&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;.[] | [.httpRequest.remoteIp, (.httpRequest.responseSize // 0 | tostring)] | @tsv&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;awk&lt;span class="w"&gt; &lt;/span&gt;-F&lt;span class="s1"&gt;&amp;#39;\t&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;{size[$1]+=$2; count[$1]++} END {for(u in size) printf &amp;quot;%10.2f MB  %6d reqs  %s\n&amp;quot;, size[u]/1000000, count[u], u}&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;sort&lt;span class="w"&gt; &lt;/span&gt;-rn&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;head&lt;span class="w"&gt; &lt;/span&gt;-n1
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th align="right"&gt;データ転送量&lt;/th&gt;
&lt;th align="right"&gt;リクエスト数&lt;/th&gt;
&lt;th align="left"&gt;IPアドレス&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td align="right"&gt;21302.57 MB&lt;/td&gt;
&lt;td align="right"&gt;4736&lt;/td&gt;
&lt;td align="left"&gt;xxx.xxx.xxx.xxx&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;結局、21GBほどのアクセスが同一のIPアドレスから行われているログが確認できました。このIPアドレスを &lt;code&gt;whois&lt;/code&gt; コマンドで調べると、とある日本国内のレンタルサーバー会社に属するもののようです。おそらくは、あまねけ！をセルフホストのフィードリーダーに登録した読者がいて（これはすごくありがたいことです！）、しかしフィード取得の実装が少し甘いのだと思います。&lt;/p&gt;
&lt;p&gt;このフィードリーダーがどういうアクセスをしているのかを確認してみましょう。アクセス日時とステータスコードを抜き出してみます:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;cat&lt;span class="w"&gt; &lt;/span&gt;amanejp_2026-06-09.json&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;jq&lt;span class="w"&gt; &lt;/span&gt;-r&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;.[] | select(.httpRequest.remoteIp == &amp;quot;xxx.xxx.xxx.xxx&amp;quot;) | [.timestamp, .httpRequest.status] | @tsv&amp;#39;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;sort&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;head&lt;span class="w"&gt; &lt;/span&gt;-10
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th align="left"&gt;アクセス日時（UTC）&lt;/th&gt;
&lt;th align="left"&gt;HTTPステータスコード&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 06:16:54&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 06:23:02&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 06:34:07&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 06:40:08&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 06:51:11&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 06:56:59&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 07:08:04&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 07:14:02&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 07:25:05&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="left"&gt;2026-05-10 07:31:13&lt;/td&gt;
&lt;td align="left"&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;5～15分間ほどの間隔でフィードにアクセスしており、全てのリクエストが200で返っています。つまり、毎回キャッシュに当たらずに常に最新のフィードを取得しているということです。&lt;/p&gt;
&lt;p&gt;あまねけ！も含め、自前でフィードを提供している多くの個人サイトは1日から数ヶ月に1回ほどの更新が多く、1時間に1回程度のチェックでも十分ですし、 &lt;code&gt;If-Modified-Since&lt;/code&gt; や &lt;code&gt;If-None-Match&lt;/code&gt; を用いた条件付きリクエストを使えば304レスポンスで転送量を節約できます。&lt;/p&gt;
&lt;p&gt;もちろん、せいぜい5分間に一度のフィード取得を攻撃や迷惑行為と評するつもりは一切ないのですが、やはりデータ転送量の観点では無駄な処理と言わざるを得ません。&lt;/p&gt;
&lt;p&gt;さて、調査結果をまとめます。ここ最近のあまねけ！ホスティング費用の増加には2つの原因があることを確認できました。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;自前の死活監視サービスによる定期的なトップページの取得によるデータ転送の増加&lt;/li&gt;
&lt;li&gt;日本国内のレンタルサーバーに設置されたフィードリーダーからのフィード取得によるデータ転送の増加&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;やはり、どちらも訪問者が爆増したのが原因というわけではなく、むしろデータ転送量としては節約の余地が大きい事象が2つも見つかりました。ちょっと残念。&lt;/p&gt;
&lt;h2 id="_3"&gt;対策&lt;/h2&gt;
&lt;p&gt;さて、今回のデータ転送量急増事件については、2つの観点で対策が必要だと分かりました。1つは自前の死活監視サービスであるUptime Kumaへの転送量を減らす対策、もう1つはフィードへのアクセスによる転送量を減らす対策です。&lt;/p&gt;
&lt;p&gt;まず、Uptime Kumaのデータ転送量の削減です。そもそもFirebase HostingはバックエンドのCDNがFastly&lt;sup id="fnref:fastly"&gt;&lt;a class="footnote-ref" href="#fn:fastly" title="グローバル規模のCDNやエッジコンピューティング環境を提供する会社の名前であり、同社が提供するCDNサービスの通称でもあります。"&gt;6&lt;/a&gt;&lt;/sup&gt;であり、一個人がわざわざ監視するほど不安定なインフラではありません。それはそれとして&lt;a href="https://status.amane.moe/"&gt;ステータスページ&lt;/a&gt;には緑のバーを出しておきたいので、監視間隔を3倍に延ばして、確認するURLをよりサイズの小さなページ（トップページの5%ほど）にしました。これで、月に15GBのデータ転送量が250MBくらいに減ることが期待できます。&lt;/p&gt;
&lt;p&gt;次に、フィードのアクセスによるデータ転送量の削減です。レンタルサーバーの運営元が分かっているのでabuse窓口に連絡してもいいのですが、迷惑行為というには緊急性が低く穏やかな挙動ですし、もしかしたらこの記事を読んで対応してくれるかもしれないので、まずはそれ以外の対策を実施します。&lt;/p&gt;
&lt;p&gt;あまねけ！のフィードには全ての記事（現時点で200件以上）が含まれており、しかも本文の内容を最後まで含むかなり大きなものになっています（3～4MB程度）。フィードに本文を入れておくと、フィードリーダーによってはサイトを開かずにプレビューできて便利です。&lt;/p&gt;
&lt;p&gt;&lt;img alt="FreshRSSであまねけ！の記事をプレビューしている様子" height="750" src="/images/amaneke-traffic-count-202606/freshrss-preview-sample.png" width="750"&gt;&lt;/p&gt;
&lt;p&gt;この利便性は削りたくないので、フィードに含める記事の件数を最新から10件までに絞ることにしました。多くのフィードリーダーは記事の更新に注目しており、数年以上前の古い記事は最初に取得したきり無視するからです。実測サイズベースでは4%以下になったので、月に21GBあったデータ転送量は650MBほどになるでしょう。まだ少し多く感じますが、他のフィードリーダーへのデータ転送も減らせる対策なので、その効果はさらに大きくなるはずです。&lt;/p&gt;
&lt;p&gt;これで今回のあまねけ！交通量調査で見つかった事象に対する処置はおわりです。既にこれらの対策がバッチリ効いているようで、ここ数日は無料枠を少し超える程度のデータ転送量まで抑えられています。あとは6月と7月の請求額が出ればひとあんしん。もし今後も長期的な分析が必要なら、アクセスログは定期的に取得しておくとよいでしょう。&lt;/p&gt;
&lt;h2 id="_4"&gt;結論&lt;/h2&gt;
&lt;p&gt;昨年からじわじわ増加していたホスティング費用の内訳について調査を行いました。半年以上放置しながら「学習データ収集ボットが押し寄せてるな～」となんとなく考えていたわけですが、よく調べるとその予想は見当違いで、実際もっと地味な原因が潜んでいたのが明らかになりました。やっぱり客観的なデータをきちんと分析するのは重要ですね。&lt;/p&gt;
&lt;p&gt;みなさんも、ご自身のWebサイトへのアクセス傾向を改めて分析してみてください。特に、自前で死活監視サービスを持っている方は、定期的なアクセスで意外とデータ転送量がかさんでいるかもしれません。従量課金でなければあまり気にしなくてよいでしょうが、新しい発見もあるのでおすすめです。&lt;/p&gt;
&lt;p&gt;なお、ふつうのブラウザで記事を閲覧するときにかかるデータ転送量はほぼ無視できる&lt;sup id="fnref:mobile-traffic-cost"&gt;&lt;a class="footnote-ref" href="#fn:mobile-traffic-cost" title="Firebaseのデータ転送料は25円/GBくらいで、むしろ受信側であるモバイル通信のデータ単価の方が50～300円/GBと高いです。"&gt;7&lt;/a&gt;&lt;/sup&gt;ので、みなさんには今後もどんどんあまねけ！を読んでほしいなと思います。&lt;/p&gt;
&lt;div class="footnote"&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id="fn:firebase-blaze"&gt;
&lt;p&gt;モバイルおよびWebアプリ開発プラットフォームのFirebaseのうち、コンテンツをホスティングする機能がFirebase Hostingです。Firebaseでは無料のSparkプランと従量課金制のBlazeプラン（無料枠付き）があり、あまねけ！はBlazeプランを適用しています。&amp;#160;&lt;a class="footnote-backref" href="#fnref:firebase-blaze" title="Jump back to footnote 1 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:outbound-traffic"&gt;
&lt;p&gt;ブラウザでページを表示したりダウンロードしたりする向きの通信のことです。&amp;#160;&lt;a class="footnote-backref" href="#fnref:outbound-traffic" title="Jump back to footnote 2 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:shynet"&gt;
&lt;p&gt;あまねけ！では&lt;a href="https://github.com/milesmcc/shynet"&gt;Shynet&lt;/a&gt;をセルフホストして簡易的なアクセス解析を行っています。Google アナリティクスのような第三者へのデータ提供を伴うサービスではありません。&amp;#160;&lt;a class="footnote-backref" href="#fnref:shynet" title="Jump back to footnote 3 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:mingeiinter"&gt;
&lt;p&gt;たとえば&lt;a href="https://mingeiinter.net/"&gt;ミンゲイインターネット&lt;/a&gt;のような。&amp;#160;&lt;a class="footnote-backref" href="#fnref:mingeiinter" title="Jump back to footnote 4 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:cloud-logging"&gt;
&lt;p&gt;Google Cloudで提供されているログ蓄積・検索・分析を行うサービスです。Firebase Hosting内のサービスではなく、あくまでログを連携してCloud Loggingから利用する関係です。&amp;#160;&lt;a class="footnote-backref" href="#fnref:cloud-logging" title="Jump back to footnote 5 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:fastly"&gt;
&lt;p&gt;グローバル規模のCDNやエッジコンピューティング環境を提供する会社の名前であり、同社が提供するCDNサービスの通称でもあります。&amp;#160;&lt;a class="footnote-backref" href="#fnref:fastly" title="Jump back to footnote 6 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:mobile-traffic-cost"&gt;
&lt;p&gt;Firebaseのデータ転送料は25円/GBくらいで、むしろ受信側であるモバイル通信のデータ単価の方が50～300円/GBと高いです。&amp;#160;&lt;a class="footnote-backref" href="#fnref:mobile-traffic-cost" title="Jump back to footnote 7 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</content><category term="ugoki"/></entry></feed>