<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"><title>あまねけ！ - Amane Katagiri</title><link href="https://ama.ne.jp/" rel="alternate"/><link href="https://ama.ne.jp/feeds/amane-katagiri.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>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><entry><title>「個人サイトWebオンリー めぐる市」参加によせて</title><link href="https://ama.ne.jp/post/meguruichi/" rel="alternate"/><published>2026-06-06T09:00:00+09:00</published><updated>2026-06-06T09:00:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-06-06:/post/meguruichi/</id><summary type="html">&lt;p&gt;告知は紹介を兼ねる&lt;/p&gt;</summary><content type="html">&lt;p&gt;こんにちは、あまねです。&lt;/p&gt;
&lt;p&gt;2026年6月6日〜2026年6月7日開催「&lt;a href="https://picrea.jp/event/a306c73ff0f8e27bfdee1cd291159a49a8f21c31c4c832236d04b1cca8e48cfb"&gt;個人サイトWebオンリー めぐる市&lt;/a&gt;」の「サイト紹介」ボタンからいらっしゃったみなさん、こんにちは。そうでない方や、あるいは開催終了後のみなさんも、こんにちは。お目にかかれて嬉しいです！ &lt;img alt=":gift_heart:" class="emoji" height="16" src="/emojis/1f49d.png" width="16"&gt;&lt;/p&gt;
&lt;p&gt;本記事では、個人サイトWebオンリー めぐる市を通じてこの個人サイト「&lt;a href="/"&gt;あまねけ！&lt;/a&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;/p&gt;
&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;li&gt;&lt;a href="#_5"&gt;技術スタックのこと&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_6"&gt;ドメインのこと&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_7"&gt;自由と安全のこと&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#humanstxt"&gt;humans.txtのこと&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_8"&gt;おわりに&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;h2 id="_1"&gt;わたしのこと&lt;/h2&gt;
&lt;p&gt;&lt;img alt="~サイト管理人 片桐天音のアイコン" height="256" src="/appendices/media-kit/amane_256x256.png" width="256"&gt;&lt;/p&gt;
&lt;p&gt;私は片桐 天音（かたぎり あまね / Amane Katagiri）です。普段はエンジニアとしてパソコンカタカタ全般をやりつつ、趣味でこの&lt;a href="/"&gt;あまねけ！&lt;/a&gt;の盆栽をしています。アイコンがとてもかわいいです&lt;sup id="fnref:no-cc-by-amane"&gt;&lt;a class="footnote-ref" href="#fn:no-cc-by-amane" title="このアイコンはたなか麦先生作であり、原画およびその派生物はCC BY 4.0でライセンスされていません。"&gt;1&lt;/a&gt;&lt;/sup&gt;。&lt;/p&gt;
&lt;p&gt;あまねけ！の主な投稿者であり、小説や技術記事、エッセイ・評論などの記事を公開しています。また、サイトコンテンツ全体の統括やインフラの構成、ドメインの維持管理も担当しています。インターネットにおける発信は、迱里ヶ崎――という架空の場所――にある海辺の文化交流センター「迱里ポートテラス」のテナントの一角で行われています。&lt;/p&gt;
&lt;p&gt;趣味というほどのものではありませんが、個人的な生活の一部として &lt;em&gt;かわいい&lt;/em&gt; ものを集めています。団地や廃墟、古い看板、コンテキストを失った文字情報などの虚無や &lt;em&gt;かわいい&lt;/em&gt; ものの写真を撮ったり、キラキラした素材を集めたりしています。あとここ数年はピンバッジが好きでよくかばんに付けています。&lt;/p&gt;
&lt;p&gt;今この記事を書いているデスクには、&lt;a href="https://x.com/amane_katagiri/status/1916445627384488048"&gt;チェコボタン&lt;/a&gt;、&lt;a href="https://x.com/amane_katagiri/status/1916444831020404753"&gt;香水瓶&lt;/a&gt;、&lt;a href="https://x.com/amane_katagiri/status/1867898593434374256"&gt;オパールが埋め込まれた鴨の彫刻&lt;/a&gt;、&lt;a href="https://x.com/amane_katagiri/status/1868486666257879273"&gt;カナリーイエローのYAG&lt;/a&gt;……などが丁寧に並べられているみたいです。イメージが湧かなければ、カメラを携えたおしゃれなカラスのおうちを想像してみてください。&lt;/p&gt;
&lt;p&gt;また、同人誌の発行や即売会へのサークル参加のために、&lt;a href="https://hentaigirls.net/"&gt;変幻美少女ぶっくす。&lt;/a&gt;というサークルを運営しています。2016年前後からこれまで、個人誌や合同誌などを合わせて15冊くらい発行しています。無料で読めるものもあるので、興味があれば表紙だけでも眺めてみてください: &lt;a href="https://books.hentaigirls.net/"&gt;変幻美少女ぶっくす。 #Books&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;もっと興味があれば、BOOTHも眺めてみてくださいね！: &lt;a href="https://hen.booth.pm/"&gt;変幻美少女ぶっくす。BOOTH支店&lt;/a&gt;&lt;/p&gt;
&lt;h2 id="_2"&gt;あまねけ！のこと&lt;/h2&gt;
&lt;p&gt;あまねけ！は、今のところ主に文章を綴った記事を公開する個人サイトです。サイト構成やデザインについて語るべき思想や技術的事項はいくつかありますが、これらは読まなくてもよいトリビアなので、後半で改めて記載します。&lt;/p&gt;
&lt;p&gt;記事のジャンルとしては以下のようなものがあります。ある程度記事の内容と対応するカテゴリも用意していますが、複数の要素を含む記事が多く絶対的なものではありません。特に、&lt;a href="/category/ugoki/"&gt;ugoki&lt;/a&gt;というカテゴリにはほぼ全てのことが詰まっています。&lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt;小説・壊れた架空の文章&lt;/dt&gt;
&lt;dd&gt;百合&lt;sup id="fnref:lilyasis"&gt;&lt;a class="footnote-ref" href="#fn:lilyasis" title="ここでは既存の強力な異性愛規範や周辺規範を要求しない（non-heteronormative）全ての人間関係を指しています。"&gt;2&lt;/a&gt;&lt;/sup&gt;やその他のことをテーマにした小説、虚実を問わない様々な事象が現実であるかのような表現、その他意図を持たない文章があります。&lt;/dd&gt;
&lt;dt&gt;エッセイ・思想&lt;/dt&gt;
&lt;dd&gt;生活で感じたことの分析についての文章、現実で体験した事象に虚実を織り交ぜた記録、執筆時点における思想や論理の主張などがあります。&lt;/dd&gt;
&lt;dt&gt;日記・取材記録&lt;/dt&gt;
&lt;dd&gt;ごく個人的な事象について虚実を織り交ぜてまとめた文章、イベント参加や旅行の記録、サイト運営や制作物についての自分語りなどがあります。&lt;/dd&gt;
&lt;dt&gt;技術記事&lt;/dt&gt;
&lt;dd&gt;ニッチなTipsや小さなバグを発見した記録、役立つとは限らない技術的テーマを掘り下げた読み物などがあります。技術記事には作り込まれた嘘は含まれません。&lt;/dd&gt;
&lt;/dl&gt;
&lt;p&gt;実際にどのようなコンテンツがあるか、お品書きに載せた記事を例にしてさらに紹介します。興味のあるものを選んで読んだり、いったん全部読んでみたり、紹介文で読んだ気になったりしてください。あまねけ！はいつでもあなたを待っています。&lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt;&lt;a href="/post/shoot-from-the-moon/"&gt;月から降ったクリスマス&lt;/a&gt;&lt;/dt&gt;
&lt;dd&gt;&lt;a href="https://adventar.org/calendars/11741"&gt;百合SS Advent Calendar 2025&lt;/a&gt;に投稿した短編です。脳波で会話できる技術の開発が進む近未来に、幼馴染の少女2人が月と地球を巻き込んで大暴れする様子を楽しく描きました。冒頭の犬の好みを尋ね合う会話が、もっとタイムラグのある星間通話のようなイメージで書き始めたのですが、膨らませてみると方向性がだいぶ変わってしまいました。&lt;/dd&gt;
&lt;dt&gt;&lt;a href="/post/secret-fridge/"&gt;冷凍庫のひみつ&lt;/a&gt;&lt;/dt&gt;
&lt;dd&gt;こちらも百合SS Advent Calendar 2025に投稿した掌編です。何でも冷凍庫に突っ込んで保存する &lt;em&gt;おばあちゃん&lt;/em&gt; みたいな女子大生のアイデアと、「海ぶどうは冷気が苦手なので冷蔵保存や冷凍保存に向かない」というのを知ってどこかで使いたかったので、これらの要素をねじって合わせた素直な作品として仕上げました。&lt;a href="https://hen.booth.pm/items/7996217"&gt;変天美音Ⅱ&lt;/a&gt;に続編があります。&lt;/dd&gt;
&lt;dt&gt;&lt;a href="/post/cobalt-salt-occult/"&gt;コバルトブルーと塩の道&lt;/a&gt;&lt;/dt&gt;
&lt;dd&gt;2023年に書いた短編です。サークルの先輩と2人で、とある不思議な風習のために熱気にまみれながら海水を煮詰めて塩を作るという、何だかへんなお話です。製塩技術とか炎色反応とか山塩とか、リアルな要素が混ぜ込まれています。夏と冬のシーンを交互に行き来するので、今回改めて読み返すと風邪を引きそうなお話だと思いました。こちらも&lt;a href="https://hen.booth.pm/items/7996217"&gt;変天美音Ⅱ&lt;/a&gt;に続編があります。&lt;/dd&gt;
&lt;dt&gt;&lt;a href="/post/deeyohime/"&gt;輝くイカスミと「でェョ姫」について&lt;/a&gt;&lt;/dt&gt;
&lt;dd&gt;2025年にMinecraftで見つけた面白いバグについて、実験を交えて考察した読み物に近い技術記事です。文字コードのバイト表現などを振り回して、不可解な挙動を説明可能になるまで掘り下げています。読むとちょっと「へ～」とは思うけれど、明日の仕事ですぐに役立つわけではない――あまねけ！にはそういう記事がまだまだあります。&lt;/dd&gt;
&lt;dt&gt;&lt;a href="/post/bluebell-platina/"&gt;イングリッシュ・ブルーベルの香りによせて&lt;/a&gt;&lt;/dt&gt;
&lt;dd&gt;2024年に書かれました。お香に関する日常の過ごし方と、架空かもしれない昔話が徐々に混ざり合って煙に巻かれるエッセイです。ところどころ実体験も入っているので、全部嘘だよとも言い切れないし、どこまでが本当のことか私にも分かりません。あまねけ！を埋め尽くす虚実を問わない書きっぷりを味わえるよい記事だと思います。&lt;/dd&gt;
&lt;/dl&gt;
&lt;p&gt;あまねけ！には、これ以外の記事もたくさんあります！　どの記事から読むべきか迷ったら、&lt;a href="/search/"&gt;サイト内検索&lt;/a&gt;で好きな言葉を入力してみてください。なんとなく雰囲気の合う記事が見つかるかもしれません。&lt;/p&gt;
&lt;h2 id="_3"&gt;バナーのこと&lt;/h2&gt;
&lt;p&gt;めぐる市の開催に合わせて &lt;em&gt;個人サイトっぽい&lt;/em&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;3&lt;/a&gt;&lt;/sup&gt;を作りました。幅88ピクセル・高さ31ピクセルの「マイクロバナー」と呼ばれるサイズです。詳しい経緯やバナーについてのTipsが気になる方は、&lt;a href="/post/banner8831/"&gt;マイクロなGIFアニメバナーを目指して&lt;/a&gt;を読んでみてください。こういうごく小さな画像の表現が刺さる人には、&lt;a href="https://cyber.dabamos.de/88x31/"&gt;The 88x31 GIF Collection&lt;/a&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;p&gt;一方で、めぐる市の公式が配布しているバナー&lt;sup id="fnref2:no-cc-by-banner"&gt;&lt;a class="footnote-ref" href="#fn:no-cc-by-banner" title="このバナーはCC BY 4.0でライセンスされていません。"&gt;3&lt;/a&gt;&lt;/sup&gt;は幅200ピクセル・高さ40ピクセルです。この横長のサイトバナーは日本の個人サイト文化を中心に爆発的に広まったと言われていて、マイクロバナーなどの広告業界を起源とするサイズとは歴史が異なります。個人サイトが集まるイベントのバナーには、まさにぴったりのサイズですね。&lt;/p&gt;
&lt;p&gt;&lt;img alt="!個人サイトWebオンリー めぐる市のサイトバナー" height="40" src="/images/meguruichi/meguruichi-banner.jpg" width="200"&gt;&lt;/p&gt;
&lt;p&gt;みなさんの個人サイトはどんなサイトバナーですか？　あまねけ！下部の「バナーぼしゅうちゅう」の部分に、あなたのかわいいサイトバナーを相互リンクで置かせてほしいです！　興味のある方は、お気軽に&lt;a href="/comment/new/"&gt;コメント&lt;/a&gt;からお知らせください。&lt;/p&gt;
&lt;h2 id="_4"&gt;フィードのこと&lt;/h2&gt;
&lt;p&gt;あまねけ！では、いくつかの粒度で&lt;a href="/feeds/"&gt;フィード&lt;/a&gt;を提供しています。フィードというのは、機械（おそらくフィードリーダー）が読むのに適したコンテンツ情報のリストであり、サイトのレイアウトやデザインの変更の影響を受けません。人間（やAI）がサイトを閲覧して、自身の記憶と照らし合わせて更新情報がないか確かめるという複雑な行動を、シンプルで低コストかつ決定的に繰り返すために作られた昔ながらの仕組みです。&lt;/p&gt;
&lt;p&gt;おそらくこの記事のURLをフィードリーダーに渡すと、記事全体のフィードかugokiカテゴリのフィードが選べるでしょう。それ以外にも、定期的な更新情報のみを対象にしたフィードや、&lt;a href="/comment/"&gt;おたより&lt;/a&gt;ページのフィードもあります。サイトによっては特定の検索結果をそのままフィードで提供するものもありますが、あまねけ！は静的サイトのためこの機能はありません。&lt;/p&gt;
&lt;p&gt;個人サイトにおいて、フィードは能動的に更新を通知できるほぼ唯一の手段です。個人サイトは、SNSやブログサービス、その他ユーザー生成コンテンツのプラットフォームのように、フォローやチャンネル登録を通じて更新を通知できる手段がありません。&lt;/p&gt;
&lt;p&gt;その他、フィードに関する技術的情報やTipsなどが気になる方がいれば、過去の記事ですが&lt;a href="/post/feed-and-you/"&gt;個人サイトとフィードのつかいかた&lt;/a&gt;で読むことができます。&lt;/p&gt;
&lt;h2 id="_5"&gt;技術スタックのこと&lt;/h2&gt;
&lt;p&gt;あまねけ！は、ほとんどのコンテンツが再パッケージ可能な静的サイトで提供されています。ここでいう「静的」とは、事前に生成したHTML・CSS・JavaScriptなどのリソースをそのままブラウザに配信できるようになっている、という意味です。あまねけ！では単なる静的サイトというだけではなく、JavaScriptをできるだけ排除して、ダークモード切替&lt;sup id="fnref:darkmode"&gt;&lt;a class="footnote-ref" href="#fn:darkmode" title="ページ左上の太陽 or 新月のマークをクリックすると、ダークモードとライトモードを切り替えられます。"&gt;4&lt;/a&gt;&lt;/sup&gt;・文字サイズ変更&lt;sup id="fnref:zoom"&gt;&lt;a class="footnote-ref" href="#fn:zoom" title="ページ右上の虫眼鏡のマークをクリックすると文字の大きさを切り替えられます。"&gt;5&lt;/a&gt;&lt;/sup&gt;・縦書き表示&lt;sup id="fnref:taten"&gt;&lt;a class="footnote-ref" href="#fn:taten" title="一部の小説記事（例: 月から降ったクリスマス）で記事を縦書き表示で読めます。"&gt;6&lt;/a&gt;&lt;/sup&gt;・季節に合わせたアニメーション&lt;sup id="fnref:season-anime"&gt;&lt;a class="footnote-ref" href="#fn:season-anime" title="ページを表示したタイミングで雪、桜、あじさいなどのアニメーションが2～3秒間出て消えます。クリックやスクロールを邪魔しません。"&gt;8&lt;/a&gt;&lt;/sup&gt;・広告表示&lt;sup id="fnref:ad-marquee"&gt;&lt;a class="footnote-ref" href="#fn:ad-marquee" title="ページ上部にオリジナルの広告風テキストが横スクロールで流れます。"&gt;7&lt;/a&gt;&lt;/sup&gt;などのパーツを全てCSSで実現しています。&lt;/p&gt;
&lt;p&gt;静的サイトの利点はその極端なシンプルさにあります。通常、動的なサイトはユーザーを識別したり、データベースを読み書きしたり、リクエストを元にリソースを組み立てる必要があり、どうしても複雑な構成になりがちです。しかし、静的サイトは決まったファイルを配信する単純なサーバーのみあればよく、仮にバズってアクセスが殺到してもサーバーを増やすだけで対応できます。&lt;/p&gt;
&lt;p&gt;また、静的サイトはCDN（Contents Delivery Network）と呼ばれる巨大なネットワークで高速にリソースを配信するシステムとも相性がよいです。CDNを通じて配信するなら、自分でサーバーの数を決めたり、複雑な設定を書いてサーバー数やスペックを調整する必要もなくなります。あまねけ！も、今のところ&lt;a href="https://firebase.google.com/docs/hosting"&gt;Firebase Hosting&lt;/a&gt;というGoogleのホスティングサービスで配信されています。&lt;/p&gt;
&lt;p&gt;メモ帳でファイルにHTMLを打ち込んでFTPでアップロードする &lt;em&gt;昔ながらの個人サイト&lt;/em&gt; は、最も基本的な静的サイトと言えるでしょう。しかし、これらの手法では、ある程度の規模を超えると一貫性の維持やメンテナンスが難しくなります。継続的に静的サイトを更新していく場合、静的サイトジェネレーターと呼ばれるツールを使うのが一般的です。&lt;/p&gt;
&lt;p&gt;静的サイトジェネレーターの仕事は次の3つです。人間が書いたMarkdownなどの軽量なソースを読み取ること、それらをHTMLに変換して「テーマ」と呼ばれるテンプレートに埋め込むこと、生成したリソースを適切な階層にまとめて出力すること。処理自体は単純でツールの差が出にくいので、テーマの豊富さやカスタマイズ性で選ぶといいかもしれません。あまねけ！では&lt;a href="https://getpelican.com/"&gt;Pelican&lt;/a&gt;というPython製のツールを使っています。&lt;/p&gt;
&lt;p&gt;まとめると、あまねけ！は人間がMarkdownで記事を書き、Pelicanという静的サイトジェネレーターでオリジナルのテンプレートに基づいて静的サイトを生成し、それらのHTML・CSS・JavaScriptをまとめてFirebase Hostingで提供しています。さらに、静的サイトの利点を活かしてミラーサイトやアーカイブを提供していますが、これについては後述します。&lt;/p&gt;
&lt;h2 id="_6"&gt;ドメインのこと&lt;/h2&gt;
&lt;p&gt;あまねけ！は、今のところ &lt;code&gt;ama.ne.jp&lt;/code&gt; というドメインで公開されています。中高生の頃はFC2WEBで短編小説や日記を公開していて、その後2014年頃から &lt;code&gt;ktgr.xyz&lt;/code&gt; &lt;sup id="fnref:ktgrxyz"&gt;&lt;a class="footnote-ref" href="#fn:ktgrxyz" title="katagiriの子音を取ってktgr。当時お名前.comでxyzドメインが初年度99円くらいで投げ売りされていたので選んだ気がします。サイトタイトルは忘れました。"&gt;9&lt;/a&gt;&lt;/sup&gt;や &lt;code&gt;forestgirls.com&lt;/code&gt; &lt;sup id="fnref:forestgirlscom"&gt;&lt;a class="footnote-ref" href="#fn:forestgirlscom" title="ktgr.xyz を数ヶ月ほど使った後に切り替えたドメイン。当時、茨城県の森を切り開いた大学に通っていたので「森林管理局」という名前の個人サイトにしていた記憶があります。"&gt;10&lt;/a&gt;&lt;/sup&gt;という独自ドメイン（！）を使い始め、これが2015年にあまねけ！ &lt;code&gt;ama.ne.jp&lt;/code&gt; として生まれ変わりました。そこから10年以上かけて少しずつコンテンツを更新し続けています。&lt;/p&gt;
&lt;p&gt;かつて個人サイトといえばジオシティーズ、FC2、infoseek、忍者ツールズなどのレンタルホームページサービスを使うのが一般的でした。もう少し遡ると、プロバイダ契約のおまけとして付いてきたホームページスペースや、大学のWebサーバーではユーザー名にチルダ &lt;code&gt;~&lt;/code&gt; の付いたURLもよく使われていたものです。&lt;/p&gt;
&lt;p&gt;こうしたホームページスペースのURLは、かつて &lt;code&gt;https://example.com/~username/hoge/fuga.html&lt;/code&gt; や &lt;code&gt;https://example.com/1234/hoge/fuga.html&lt;/code&gt; のようなユーザー名やIDをパスに入れる方式でしたが、最近では多くのサービスが &lt;code&gt;https://username.example.com/&lt;/code&gt; のようにサブドメインで切り分ける方式に移りました。FC2ホームページや忍者ホームページはもちろん、静的サイトジェネレーターと相性のよいGitHub Pagesも同様のスタイルです。&lt;/p&gt;
&lt;p&gt;自分が取得したドメインで個人サイトを公開するのは、さらにその一歩先を行く最新スタイルです。X（旧Twitter）などのSNSで強権的なBANが横行するこの現代で、仮に特定のホームページスペースからBANされたとしても、同じドメインのまま別のサーバーから個人サイトを配信し続けられるというのは、自分でドメインを持っている人だけの特権です。あまねけ！は複数の&lt;a href="/link/#_1"&gt;ミラーサイト&lt;/a&gt;を用意しており、必要に応じて &lt;code&gt;ama.ne.jp&lt;/code&gt; の新たな配信サーバーに切り替えられるように準備しています。&lt;/p&gt;
&lt;p&gt;ちょっとしたドメインを一個持っておくと、インターネットでは何かと便利です。個人サイトの公開はもちろん、最近はAIで小さなサービスを作ったり公開するのも簡単になったので、誰にも気兼ねなく切り分けられるドメインを持っておくのは令和の &lt;em&gt;当たり前&lt;/em&gt; になりつつあります（ほんと？）。&lt;/p&gt;
&lt;p&gt;安いドメインなら年間2000円くらいで更新できるので、よかったら取得してみてください。&lt;code&gt;.moe&lt;/code&gt; ならかわいくて3000円/年ってところです。&lt;a href="https://jprs.jp/registration/list/pickup_list.php"&gt;日本のレジストラ&lt;/a&gt;で安いところを選べばよいですが、お名前.comは営業メールがうるさくって辟易した記憶しかありません。個人的にはゴンベエドメインがおすすめです。&lt;/p&gt;
&lt;p&gt;&lt;img alt="~ピクリエのマップに配置されているあまねけ！のブースにama.ne.jpと大きく書かれた垂れ幕がかかっている画像" height="429" src="/images/meguruichi/picrea-amanejp.png" width="429"&gt;&lt;/p&gt;
&lt;p&gt;ドメインを持っておけば、個人サイトの宣伝もかんたん！&lt;/p&gt;
&lt;h2 id="_7"&gt;自由と安全のこと&lt;/h2&gt;
&lt;p&gt;あまねけ！は、シンプルで読みやすいサイト構成を意識しており、謎解きのような階層や知識を問うクイズ、パスワードで保護されたページはありません。大きなヘッダーや関連記事を表示するサイドバー、スクロールに付いて回る広告なども一切ありません。コンテンツの読みやすさを第一に、不意に変化しない予測可能なレイアウトを心がけています。&lt;/p&gt;
&lt;p&gt;あまねけ！が目指しているのは、自由で開かれた安全なウェブサイトです。自由である、というのは主に次の3つの点を指しています。&lt;/p&gt;
&lt;p&gt;まず、あまねけ！で公開している記事の多くは&lt;a href="https://creativecommons.org/licenses/by/4.0/deed.ja"&gt;CC BY 4.0&lt;/a&gt;でライセンスされています。これは、著者名さえ示せば、記事を翻訳したり朗読したり、それらを営利目的で販売することさえ許諾する広範で自由なライセンスです。他人の著作物を明示的な許諾なく利用した上に、自らの著作物には強力な制限をかける二次創作文化とは真逆の、広範な自由を明示的に認める取り組みとも言い換えられます。&lt;/p&gt;
&lt;p&gt;次に、あまねけ！では記事を読む対象を一切制限しません。年齢制限、検索避け、複雑なリンク階層、合い言葉といった、特定のページへのアクセスを制限する設定は自由なインターネットの実現に反しています。昔ながらの個人サイト文化ではそのような制限を設けることが半ば常識であり、またそうした謎解きじみた &lt;em&gt;しきたり&lt;/em&gt; を楽しむ傾向もありましたが、もはやその慣習は失われつつあります。&lt;/p&gt;
&lt;p&gt;最後に、あまねけ！は様々な環境での閲覧に耐えうるよう設計されています。ふつうのGUIブラウザで読むのはもちろん、ユーザーの特性や環境に合わせてダークモードや異なる文字サイズを簡単に利用できます。印刷用のレイアウトも整備してあるので、目が疲れるディスプレイで読む必要もありません。テキストブラウザやスクリーンリーダーとも相性がよいです。さらに、オフラインでも読めるように&lt;a href="/link/#_2"&gt;アーカイブ&lt;/a&gt;でZIPファイル、あまねけ！閲覧専用のWebサーバーも配布しています。&lt;/p&gt;
&lt;p&gt;つまり、いつでも・どこでも・誰でも読めて、しかもどのように使ってもよいサイトがあまねけ！ということです。&lt;/p&gt;
&lt;p&gt;安全という面では、主にセキュリティへの対応と、プライバシーへの対応があります。&lt;/p&gt;
&lt;p&gt;あまねけ！は、Firebase Hostingのヘッダー設定を通じて基本的なセキュリティヘッダーを付与しており、意図しないスクリプトの実行や不用意なHTTPアクセスを許しません。不必要なJavaScriptの排除もセキュリティ対策の一環です。&lt;/p&gt;
&lt;p&gt;また、あまねけ！にはサードパーティーツールによるアクセス解析や、サイト訪問者を追跡する広告スクリプトも一切埋め込まれていません。あまねけ！から外部リンクに移動した履歴も通知しません。私自身がアクセス状況を解析したり、記事の末尾にある「読んだ」ボタンによる明示的な通知を除けば、他の誰かにあなたの行動履歴が知られることはありません。&lt;/p&gt;
&lt;p&gt;さらに、アクセス元さえ秘匿して完全に匿名で閲覧したい人のために、あまねけ！はOnionサービス&lt;sup id="fnref:onion-service"&gt;&lt;a class="footnote-ref" href="#fn:onion-service" title="匿名性の高いTorネットワークからのみアクセスできるウェブサイトを公開できるサービスです。ディープウェブとかダークウェブと呼ばれることもあります。"&gt;11&lt;/a&gt;&lt;/sup&gt;としても公開されています&lt;sup id="fnref:tor"&gt;&lt;a class="footnote-ref" href="#fn:tor" title="amanejp2rawomh6vcxugcmz3lsdccfkgwcz755mawisr2yazu3bea2qd.onion です。先頭が amanejp になるようにmkp224oで生成しました。"&gt;12&lt;/a&gt;&lt;/sup&gt;。Torブラウザでアクセスしていれば、Onionサービス版が利用できると通知されるはずです。&lt;/p&gt;
&lt;p&gt;あまねけ！自体の特徴からは離れますが、私自身はE2EEやTorなどの通信の秘匿・匿名化技術に強く賛同しています。実際にMatrixのホームサーバーであるSynapseを運用しており、自由で安全な通信を実現するためのネットワークに貢献しています。もしMatrixを使ったことがなければ、&lt;a href="https://zenn.dev/amane/books/matrix-beginner"&gt;今日からMatrixを使い始める人へ&lt;/a&gt;を読んで参加してみてください。Discordの検閲に危機感を覚えている人には特におすすめです。&lt;/p&gt;
&lt;h2 id="humanstxt"&gt;humans.txtのこと&lt;/h2&gt;
&lt;p&gt;かつて、個人サイトでは帯域の節約や検索避けのために &lt;code&gt;robots.txt&lt;/code&gt; を置くのが一般的でした。あらゆるクローラーを &lt;code&gt;Disallow&lt;/code&gt; する &lt;em&gt;おまじない&lt;/em&gt; は誰もが一度は書いたことがあると思います。あまねけ！でも &lt;code&gt;robots.txt&lt;/code&gt; を置いていますが、こちらはどちらかといえば404ページ&lt;sup id="fnref:404page"&gt;&lt;a class="footnote-ref" href="#fn:404page" title="ホスティングサービスによっては、リクエストされたURLにあたるファイルがないときに特定のファイルを404ページとして表示できます。Firebase Hostingでは 404.html です。"&gt;13&lt;/a&gt;&lt;/sup&gt;をコンテンツとしてクロールしないことを要請し、またサイトマップのURLを渡す友好的な制御です。&lt;/p&gt;
&lt;p&gt;このクローラー（ロボット）を制御する &lt;code&gt;robots.txt&lt;/code&gt; のパロディとして、サイトの製作者に関する情報を人間向けに示す &lt;a href="https://humanstxt.org/"&gt;&lt;code&gt;humans.txt&lt;/code&gt;&lt;/a&gt;という規格が提案されています。規格というほど厳密なものではなく、 &lt;code&gt;/humans.txt&lt;/code&gt; に自己紹介を記したテキストファイルを（UTF-8で）置こう、という程度のシンプルなものです。&lt;/p&gt;
&lt;p&gt;&lt;a href="/humans.txt"&gt;あまねけ！の &lt;code&gt;humans.txt&lt;/code&gt;&lt;/a&gt;には、 &lt;code&gt;aAmMnNeEkKjJpP078&lt;/code&gt; &lt;sup id="fnref:humansaa"&gt;&lt;a class="footnote-ref" href="#fn:humansaa" title="amaneke・amanejp・0708（誕生日！）とその大文字のセットです。"&gt;14&lt;/a&gt;&lt;/sup&gt;と記号を使った大きくてかわいいAAと連絡先を記載しています。面白いな、と思ったらあなたの個人サイトでもぜひやってみてください！&lt;/p&gt;
&lt;p&gt;&lt;img alt="あまねけ！のhumans.txtのうち、アイコンをAA化した部分のスクリーンショット" height="390" src="/images/meguruichi/humans-txt.png" width="390"&gt;&lt;/p&gt;
&lt;h2 id="_8"&gt;おわりに&lt;/h2&gt;
&lt;p&gt;ここまで読んでくれてありがとうございます。なんだかとっても長くなってしまいました。&lt;/p&gt;
&lt;p&gt;あまねけ！は、めぐる市の会期が終わっても、あじさいの季節が終わっても、Xが終わっても、YouTubeが終わっても、インターネットが終わってもきっとここにあります！　私のことを忘れそうなら、&lt;a href="https://subscribe.amane.moe/"&gt;新着記事のメール通知サービス&lt;/a&gt;に登録するか、&lt;a href="/feeds/"&gt;フィード&lt;/a&gt;を購読してほしいです。次回の記事ができたら、私から会いに行きますね。&lt;/p&gt;
&lt;p&gt;もしよければ「読んだ」ボタンを押して応援してください。またお目にかかれますように！ &lt;img alt=":gift_heart:" class="emoji" height="16" src="/emojis/1f49d.png" width="16"&gt;&lt;/p&gt;
&lt;div class="footnote"&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id="fn:no-cc-by-amane"&gt;
&lt;p&gt;このアイコンは&lt;a href="https://twitter.com/oplant"&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-amane" 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:lilyasis"&gt;
&lt;p&gt;ここでは既存の強力な異性愛規範や周辺規範を要求しない（non-heteronormative）全ての人間関係を指しています。&amp;#160;&lt;a class="footnote-backref" href="#fnref:lilyasis" 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: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 3 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;a class="footnote-backref" href="#fnref2:no-cc-by-banner" 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:darkmode"&gt;
&lt;p&gt;ページ左上の太陽 or 新月のマークをクリックすると、ダークモードとライトモードを切り替えられます。&amp;#160;&lt;a class="footnote-backref" href="#fnref:darkmode" 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:zoom"&gt;
&lt;p&gt;ページ右上の虫眼鏡のマークをクリックすると文字の大きさを切り替えられます。&amp;#160;&lt;a class="footnote-backref" href="#fnref:zoom" 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:taten"&gt;
&lt;p&gt;一部の小説記事（例: &lt;a href="/post/shoot-from-the-moon/"&gt;月から降ったクリスマス&lt;/a&gt;）で記事を縦書き表示で読めます。&amp;#160;&lt;a class="footnote-backref" href="#fnref:taten" 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:ad-marquee"&gt;
&lt;p&gt;ページ上部にオリジナルの広告風テキストが横スクロールで流れます。&amp;#160;&lt;a class="footnote-backref" href="#fnref:ad-marquee" title="Jump back to footnote 7 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:season-anime"&gt;
&lt;p&gt;ページを表示したタイミングで雪、桜、あじさいなどのアニメーションが2～3秒間出て消えます。クリックやスクロールを邪魔しません。&amp;#160;&lt;a class="footnote-backref" href="#fnref:season-anime" title="Jump back to footnote 8 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:ktgrxyz"&gt;
&lt;p&gt;katagiriの子音を取ってktgr。当時お名前.comでxyzドメインが初年度99円くらいで投げ売りされていたので選んだ気がします。サイトタイトルは忘れました。&amp;#160;&lt;a class="footnote-backref" href="#fnref:ktgrxyz" title="Jump back to footnote 9 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:forestgirlscom"&gt;
&lt;p&gt;&lt;code&gt;ktgr.xyz&lt;/code&gt; を数ヶ月ほど使った後に切り替えたドメイン。当時、茨城県の森を切り開いた大学に通っていたので「森林管理局」という名前の個人サイトにしていた記憶があります。&amp;#160;&lt;a class="footnote-backref" href="#fnref:forestgirlscom" title="Jump back to footnote 10 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:onion-service"&gt;
&lt;p&gt;匿名性の高いTorネットワークからのみアクセスできるウェブサイトを公開できるサービスです。ディープウェブとかダークウェブと呼ばれることもあります。&amp;#160;&lt;a class="footnote-backref" href="#fnref:onion-service" title="Jump back to footnote 11 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:tor"&gt;
&lt;p&gt;&lt;span class="selectable"&gt;amanejp2rawomh6vcxugcmz3lsdccfkgwcz755mawisr2yazu3bea2qd.onion&lt;/span&gt; です。先頭が &lt;code&gt;amanejp&lt;/code&gt; になるように&lt;a href="https://github.com/cathugger/mkp224o"&gt;mkp224o&lt;/a&gt;で生成しました。&amp;#160;&lt;a class="footnote-backref" href="#fnref:tor" title="Jump back to footnote 12 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:404page"&gt;
&lt;p&gt;ホスティングサービスによっては、リクエストされたURLにあたるファイルがないときに特定のファイルを404ページとして表示できます。Firebase Hostingでは &lt;code&gt;404.html&lt;/code&gt; です。&amp;#160;&lt;a class="footnote-backref" href="#fnref:404page" title="Jump back to footnote 13 in the text"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:humansaa"&gt;
&lt;p&gt;amaneke・amanejp・0708（誕生日！）とその大文字のセットです。&amp;#160;&lt;a class="footnote-backref" href="#fnref:humansaa" title="Jump back to footnote 14 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>たった今データを失うかもしれない君に捧ぐ10個の質問</title><link href="https://ama.ne.jp/post/ban-ban-drive-faq/" rel="alternate"/><published>2026-05-22T15:18:00+09:00</published><updated>2026-05-22T15:18:00+09:00</updated><author><name>Amane Katagiri</name></author><id>tag:ama.ne.jp,2026-05-22:/post/ban-ban-drive-faq/</id><summary type="html">&lt;p&gt;明日クラウドストレージサービスにBANされるかもしれないあなたの10の質問に答えます&lt;/p&gt;</summary><content type="html">&lt;p&gt;最近、Google DriveやDropboxといった大手のクラウドストレージサービスから突然BANされたとか、異議申し立てが全く認められずデータを喪失するといった事故がしばしば注意喚起としてSNSで拡散されることが増えました。しかし、多くの人はこうした事故を知りつつ &lt;strong&gt;専制的なクラウドストレージサービス&lt;/strong&gt; を漫然と使い続け、横暴なBANを待つ列に並んで暇を潰しているのが現状です。&lt;/p&gt;
&lt;p&gt;本記事ではこうした専制的なクラウドストレージサービスの具体的なリスクを理解し、安全にデータを保管するにはまずは何をすべきなのか、10個の質問を通して示します。&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="#ban"&gt;BANされるかもしれないデータは暗号化すれば大丈夫だよね？&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"&gt;クラウドストレージの移行って面倒じゃない？&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_7"&gt;プライバシー重視って言ってるけど完全に信頼していいの？&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_8"&gt;そう言ってるあんたはどんなクラウドストレージサービスを使ってるわけ？&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#_9"&gt;で、私は結局今からどうすればいいんだっけ？&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;h2 id="_1"&gt;私は普通のデータしか置いてないから大丈夫だよね？&lt;/h2&gt;
&lt;p&gt;おそらく、いいえ。&lt;/p&gt;
&lt;p&gt;あなたがアップロードしたデータが &lt;em&gt;普通&lt;/em&gt; かどうかは、あなたではなく（もちろん私でもなく）クラウドストレージサービスの運営事業者が &lt;strong&gt;勝手に&lt;/strong&gt; （！）決めることです。&lt;/p&gt;
&lt;p&gt;明日からいきなり「56そう」とか「安楽死」という歌詞が含まれた楽曲や、肌色が50%以上を占める画像を所持しているアカウントを発見しだいBANします！なんてことになっても、あなたは大丈夫と言い切れますか？　もっともっと恣意的に、運営事業者を批判するこうした文書が全面的に禁止されるかもしれません。&lt;/p&gt;
&lt;p&gt;しかも現代では、さらに込み入った検閲基準を備えたAIが24時間365日ストレージを監視して回っています。人手不足も疲れも知らない検閲チームって、なんだかすごく不気味ですよね。あなたも今日まで偶然BANされなかったというだけで、明日にはこうした不気味なAIがジロジロと &lt;em&gt;普通&lt;/em&gt; のデータを覗き見てくるかもしれませんよ。&lt;/p&gt;
&lt;h2 id="_2"&gt;いま使ってるクラウドストレージは一切使うなってこと？&lt;/h2&gt;
&lt;p&gt;できるだけ、はい。&lt;/p&gt;
&lt;p&gt;大手のクラウドストレージサービスには便利な共有機能や同期機能が用意されていますが、これらの多くは無条件にプライバシーを犠牲にせずとも十分に実現できます。効率の良い配信や利便性向上のためにデータを読むだけならまだしも、それを一方的なBANに使うなら話は別です。&lt;/p&gt;
&lt;p&gt;かれらは便利でクールに見える機能でユーザーの目を引き、プライバシー侵害を正当化しようとしているだけです。&lt;/p&gt;
&lt;p&gt;ただし、これらのクラウドストレージサービスから今すぐ撤退する必要はありません。これらを「勝手に消えるかもしれない」「一時的な利用のための」「覗き見られても平気なデータを置く」信頼できないサービスとして使い続けられます。つまり、どういうリスクと引き換えなのかをよく意識して使えば、もしもの時に被る実害を減らせるということです。&lt;/p&gt;
&lt;h2 id="_3"&gt;リスクを意識してクラウドストレージを使う、って具体的にはどういうこと？&lt;/h2&gt;
&lt;p&gt;鋭い質問ですね！&lt;/p&gt;
&lt;p&gt;たとえば、クラウドストレージサービスにアップロードするデータは必ずローカルにも保存しておく、というルールを守っていれば突然BANに遭っても手元にはデータが残ります。クラウドストレージはあくまでバックアップで、原本は常に手元で保管するということです。これは、Google Driveの同期設定では「ミラーリング」と呼ばれているものです。&lt;/p&gt;
&lt;p&gt;一方の「ストリーミング」は、ローカルストレージの節約という名目で手元にはファイルのリストだけを持っています。必要に応じてデータをダウンロードして閲覧・編集するという設定なので、BANされた時点で他のデータも巻き込んで一切アクセスできなくなってしまいます。&lt;/p&gt;
&lt;p&gt;また、BANによる爆発半径を抑制するために複数のアカウントを持っておくのも有効なアイデアです。特にGoogle DriveはGoogle アカウントを介してメールや連絡先、Google Playなどと同一のアイデンティティとして取り扱われるので、BANによる被害が非常に大きくなりがちです。&lt;/p&gt;
&lt;p&gt;そのため、Google Drive専用のアカウントに分けるのは基本的ながら効果の高い対策になります。&lt;/p&gt;
&lt;p&gt;いずれの場合でも、運営事業者があなたのデータを検閲したり、サービス向上目的と称して営利活動のエサにする可能性は避けられません。これも勘案すべきリスクです。&lt;/p&gt;
&lt;h2 id="ban"&gt;BANされるかもしれないデータは暗号化すれば大丈夫だよね？&lt;/h2&gt;
&lt;p&gt;おそらく、はい。&lt;/p&gt;
&lt;p&gt;&lt;a href="https://cryptomator.org/"&gt;Cryptomator&lt;/a&gt;や&lt;a href="https://veracrypt.jp/"&gt;VeraCrypt&lt;/a&gt;で暗号化したアーカイブをクラウドストレージサービスにバックアップすれば、原理的に（これは運営事業者がどう頑張っても、という意味です）検閲されたり無断利用されることはありません。運営事業者からはどう頑張ってもランダムなバイナリにしか見えないからです。つまり「覗き見られても平気な」データを置いてリスクを回避する手法です。&lt;/p&gt;
&lt;p&gt;ただし、これらの暗号化アーカイブはフォルダ階層を特別な形式で1つのファイルにまとめているため、普通のフォルダより使い勝手が悪く独特な挙動を示したり、クラウドストレージサービスによっては上手く同期できない場合があります。また、サービス固有の便利な機能は一切使えないと考えた方がいいでしょう。&lt;/p&gt;
&lt;p&gt;そうなってくると、いよいよどうしてそんな信頼できないサービスにデータを預けているのかよく分かりません。もし &lt;strong&gt;プライバシー重視のクラウドストレージサービス&lt;/strong&gt; に移行したなら、難しい暗号化レイヤーを自前で用意する必要はなくなりますよ。&lt;/p&gt;
&lt;h2 id="_4"&gt;プライバシー重視のクラウドストレージってなんなの？&lt;/h2&gt;
&lt;p&gt;それ、本質的な問いです！&lt;/p&gt;
&lt;p&gt;この記事では主に、運営事業者がユーザーから預かったデータを原理的に覗き見できない仕組みを採用しているサービスを &lt;strong&gt;プライバシー重視&lt;/strong&gt; と称しています。&lt;/p&gt;
&lt;p&gt;原理的に覗き見できない、というのは運営事業者がどう頑張ってもファイルを読めない、という意味です。逆に言えば、Google DriveやDropboxのようなサービスは、権限制御や内部統制といった &lt;em&gt;契約&lt;/em&gt; でデータへのアクセスを制限しています。そうしたサービスは国家権力の要請でファイルを引き渡したり、強制的なスキャンで一方的なBANを行使できる権力を握っています。&lt;/p&gt;
&lt;p&gt;プライバシー重視のクラウドストレージサービスでは、ユーザーがアップロードしたデータは必ず暗号化された状態で保存されている上に、その復号鍵を運営事業者では保持せずにユーザーだけが利用できるようになっています。&lt;/p&gt;
&lt;p&gt;これを実現する代表的な方法が &lt;strong&gt;E2EE&lt;/strong&gt; （エンドツーエンド暗号化/クライアントサイド暗号化）であり、BANされるかもしれないデータどころか全てのデータを自動的に暗号化した上でアップロードする仕組みを初めから持っています。私たちはこの仕組みに乗っかるだけでよく、わざわざ独自の暗号化アーカイブを苦心して運用する必要はありません。&lt;/p&gt;
&lt;p&gt;なお、Google DriveやDropboxも保存先のストレージは暗号化されているはずですが、適切な監査を経た（と主張する）手続きで復号鍵を取り出してファイルを取得できるという点で、プライバシー重視とはいえません。&lt;/p&gt;
&lt;h2 id="_5"&gt;でも、プライバシー重視のクラウドストレージって高いでしょ？&lt;/h2&gt;
&lt;p&gt;わずかに、はい。&lt;/p&gt;
&lt;p&gt;ただし、費用と容量の比で見て何倍もかかることはありません。たとえば、Google OneのBasicプランを使っている人がProton DriveのDrive Plusプランに移行するなら、 &lt;strong&gt;240円/100GB/月&lt;/strong&gt; から &lt;strong&gt;500円/200GB/月&lt;/strong&gt; になります。容量が2倍になって価格は2倍とちょっと、そこにプライバシー重視のおまけつきです。むしろお得じゃありません？&lt;/p&gt;
&lt;p&gt;特に、いまGoogle Oneを使っていて100GBで足りなくなった人がアップグレードした場合、次のプランはGoogle AI Plusと称して勝手にAI機能を盛った &lt;strong&gt;1000円/200GB/月&lt;/strong&gt; のものになるので、Proton Driveへの移行の方が費用面でも大きなメリットがあります。&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;サービス&lt;/th&gt;
&lt;th&gt;無料枠&lt;/th&gt;
&lt;th&gt;最小の有料プラン&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=":smiling_imp:" class="emoji" height="16" src="/emojis/1f608.png" width="16"&gt; &lt;a href="https://one.google.com/about/plans"&gt;Google One&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;15GB&lt;/td&gt;
&lt;td&gt;240円/100GB/月&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=":smiling_imp:" class="emoji" height="16" src="/emojis/1f608.png" width="16"&gt; &lt;a href="https://www.dropbox.com/ja/plans"&gt;Dropbox&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;2GB&lt;/td&gt;
&lt;td&gt;1200円/2TB/月&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=":smiling_imp:" class="emoji" height="16" src="/emojis/1f608.png" width="16"&gt; &lt;a href="https://www.microsoft.com/ja-jp/microsoft-365"&gt;OneDrive&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;5GB&lt;/td&gt;
&lt;td&gt;200円/100GB/月&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=":thumbsup:" class="emoji" height="16" src="/emojis/1f44d.png" width="16"&gt; &lt;a href="https://proton.me/drive/pricing"&gt;Proton Drive&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;5GB&lt;/td&gt;
&lt;td&gt;500円/200GB/月&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=":thumbsup:" class="emoji" height="16" src="/emojis/1f44d.png" width="16"&gt; &lt;a href="https://www.sync.com/pricing/"&gt;Sync.com&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;5GB&lt;/td&gt;
&lt;td&gt;560円/150GB/月&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=":thumbsup:" class="emoji" height="16" src="/emojis/1f44d.png" width="16"&gt; &lt;a href="https://mega.io/pricing"&gt;MEGA&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;10GB&lt;/td&gt;
&lt;td&gt;620円/200GB/月&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;もしGoogle DriveやOneDriveを無料枠で使っているなら、MEGAはかなり大きめの無料枠があるので、すぐに移行できるはずです。無料枠から無料枠に移すだけでおまけに安心まで付いてくるなら、試してみる価値があると思いませんか？&lt;/p&gt;
&lt;h2 id="_6"&gt;クラウドストレージの移行って面倒じゃない？&lt;/h2&gt;
&lt;p&gt;ある程度、はい。&lt;/p&gt;
&lt;p&gt;でも、現実の引っ越しのように数時間や数日で全てのデータを移す必要はないので、少しずつ進めてみましょう。パソコンのデータ移行とだいたい同じです。&lt;/p&gt;
&lt;p&gt;初めに、無料枠で済む範囲の作業を新しいクラウドストレージサービスで行うようにします。新しいファイルはProton Driveに保存する、Google Driveにあるファイルを編集するときはProton Driveに移してから開く、といった感じです。ここで新しいサービスの使い勝手を確かめながら、少しずつGoogle Driveの使用容量を減らしていきます。&lt;/p&gt;
&lt;p&gt;この移行期間中に、Proton Driveを使う上で甘受できない不便さを感じるかもしれません。その場合は別のクラウドストレージサービスを使ってみたり、いったんリスクを受け入れてGoogle Driveに戻る、という選択もありえます。リスクは比較の上に成り立つ定量的なものであり、ゼロリスクを目指すのもリスクを全て無視するのも愚かさで言えば全く同じです。&lt;/p&gt;
&lt;p&gt;そして、新しいクラウドストレージサービスの使い勝手に問題がなさそうなら、1ヶ月くらい利用期間が被るように新しいサービスのプランを契約します。この間に少しずつ移行を進めて、元のサービス側は無料枠に収まる程度までファイルを減らしていけば、移行はほぼ完了です。元のサービスのプランは忘れずに解約して、しばらく併用するなり気長に移行したりするといいでしょう。&lt;/p&gt;
&lt;p&gt;面倒なこともまずは初めの一歩からです。まずは前問のテーブルから &lt;img alt=":thumbsup:" class="emoji" height="16" src="/emojis/1f44d.png" width="16"&gt; の付いたクラウドストレージサービスを選んで、アカウントを登録してください。登録にお金は一切かかりません！　迷ったら&lt;a href="https://account.proton.me/ja/drive/signup"&gt;Proton Drive&lt;/a&gt;がおすすめです。&lt;/p&gt;
&lt;h2 id="_7"&gt;プライバシー重視って言ってるけど完全に信頼していいの？&lt;/h2&gt;
&lt;p&gt;ほとんど、いいえ。&lt;/p&gt;
&lt;p&gt;専制的なクラウドストレージサービスが &lt;em&gt;かなり&lt;/em&gt; 信頼できないのと同じように、プライバシー重視のクラウドストレージサービスも &lt;em&gt;ある程度&lt;/em&gt; は信頼できません。原理的に覗き見できても契約や運用で不当な検閲を防ぐことはできますし、逆にE2EEを謳っていてもバグや利便性向上のための処理でデータが漏れる経路があるかもしれません。&lt;/p&gt;
&lt;p&gt;ただし、これはどういうリスクがあるかを考慮すべきという意味であって、より信頼に足らないサービスを使い続ける理由にはなりません。リスクを知って受け入れた上で、やはり私はプライバシー重視のクラウドストレージサービスを使うべきだと思います。&lt;/p&gt;
&lt;p&gt;このような外部リスクの勘案を諦めて運営事業者を全く信頼せず、クラウドストレージサービスを一切使わない原理主義的な人も多くいます。こうした人たちは自宅でNASを構築してデータを保管したり、さらにその運用を勧めて回ったりしていますが、実際はデータ喪失のリスクを負っていることを意識しなければいけません。&lt;/p&gt;
&lt;p&gt;まともなNASの運用には、ストレージの故障に備えて冗長なファイルシステムやバックアップの仕組みを構築するのは当然として、災害・盗難に備えた保存メディアや保管場所の分散が求められます（3-2-1ルールと呼ばれるものです）。&lt;/p&gt;
&lt;p&gt;これらの専門的な知識を備えたミスのないオペレーションを目指すのは趣味としては面白いかもしれませんが、Google DriveからいきなりNASへの移行を勧めるのはなかなか酷なことです。一般的なユーザーであれば、適切にデータを管理できる事業者を選んで &lt;em&gt;ある程度&lt;/em&gt; 信頼した方が安心です。&lt;/p&gt;
&lt;h2 id="_8"&gt;そう言ってるあんたはどんなクラウドストレージサービスを使ってるわけ？&lt;/h2&gt;
&lt;p&gt;興味が出てきたみたいですね！&lt;/p&gt;
&lt;p&gt;私は主に&lt;a href="https://www.sync.com/pricing/"&gt;Sync.com&lt;/a&gt;のPro Solo (2TB)プランを使っています。ここに自宅に構築したNextcloudを併用して、E2EEになじまないアプリなどのストレージを用意している感じです。一応&lt;a href="https://proton.me/ja/pricing"&gt;Proton&lt;/a&gt;のUnlimitedプランなのでProton Driveも使えるんですが、こっちはメールサービスがメインなのでほとんど使っていません。&lt;/p&gt;
&lt;p&gt;独自ドメインでメールアドレスを使うために、Protonにメールを移行する前はGoogle Workspace（登録した頃はG Suiteでしたね）を契約していて、今もなんやかんやメール以外のサービスを使っています。Google Driveの容量が余っているのでrcloneの暗号化バックアップ先にしたり、Geminiで適当に遊んだりするのにも便利です。&lt;/p&gt;
&lt;p&gt;企業向け契約のプランならBANされにくいという噂もありますが、割高な上に完全な無検閲無法地帯として開放されているわけではないと思うので（特にCSAMやマルウェアにあたるコンテンツの検閲は厳しいはず）、変な回り道をせずにまともなクラウドストレージサービスを使ってください。&lt;/p&gt;
&lt;h2 id="_9"&gt;で、私は結局今からどうすればいいんだっけ？&lt;/h2&gt;
&lt;p&gt;やった！&lt;/p&gt;
&lt;p&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;img alt=":ok:" class="emoji" height="16" src="/emojis/1f197.png" width="16"&gt; です！&lt;/p&gt;
&lt;p&gt;Protonなら&lt;a href="https://pr.tn/ref/HRH4RWE3"&gt;紹介リンク&lt;/a&gt;もあるから、よければ使ってね～。&lt;/p&gt;</content><category term="tech"/></entry></feed>