ブログ／個人Webサイトで気に入っているマイクロ機能

• ブログのユーザー体験を向上させるマイクロ機能の紹介

サイドノート

• 本文を邪魔せずに追加情報を提供する機能
• 読者が追加の詳細や出典を簡単に確認できるようにする
• Gwernのサイドノートの使い方が特に印象的。彼の文章ではサイドノートが非常に多用されており、主な内容の流れを妨げることなく追加情報を提供している。
• サイドノートを使うと、注釈をページ下部までスクロールしなくても簡単に参照できる。
• Tufte CSSに触発されたさまざまなアプローチを見ることができる。

目次

• 目次は文章の主要なトピックを一目で把握できるようにし、見たい部分へ簡単に移動できるようにする。
• 静的サイトジェネレーター（例: Hugo）は目次を自動生成できる。
• Lars Hupel’s サイトはシリーズ内の目次を提供し、ナビゲーションを容易にしている。

ボーナス: ページの進行状況表示

• ページの進行状況バーは、読者がページのどこにいるかを視覚的に示す。
• Quanta Magazineでこのような機能を見ることができる。
• CSS Tricksのチュートリアルで実装方法を学べる。

リンクしやすい見出し

• HTML要素のIDを使って、ページ内の特定セクションにリンクできる。
• 普段はユーザーに見えないため、各要素をリンク化して簡単に参照できるようにする。
• Hugo ドキュメントでこの機能を見ることができる。

シリーズ記事のグループ化

• 複数のテーマについて長く書きたいときは、シリーズに分けて公開すると読者により伝わりやすくなる。
• 自動で「次へ」「前へ」ボタンを追加したり、ナビゲーションハブを生成したりできる。
• Chapel 言語ブログでこのような機能を見ることができる。

対話形式の記事

• 対話形式の記事は、読者の立場から質問を投げかけ、経験の浅い視点での懸念を表現することで、文章をより面白く理解しやすいものにする。
• Xe Iaso’s サイトとFaster than Limeでは、対話形式の記事がよく使われている。

コードブロックの出典表示

• コードを書く際、コードブロックにファイル名と行番号を表示することで、読者がより理解しやすくなる。
• 例: Crafting Interpreters

ボーナス: クリック可能なリンクを含むコードブロック

• Agdaプログラミング言語はHTMLコードブロックを生成し、各記号を定義元へリンクする。
• Programming Languages Foundations in Agdaでこのような機能を見ることができる。

外部リンクの表示

• 外部ドメインへ移動するリンクを小さなアイコンで示す。
• James’ Coffee Blog ☕でこのような機能を見ることができる。

ボーナス: 異なるリンク先に対する異なるマーカー

• Gwern’s Webサイトは、リンク先に応じてアイコンを変えている。
• 例: Wikipediaへのリンクには「W」、Haskell.orgへのリンクにはラムダ記号が表示される。

ボーナス: リンクプレビュー

• リンクにマウスオーバーしたときにページプレビューを表示し、クリック前に内容を確認できるようにする。
• Gwern’s Webサイトでこのような機能を見ることができる。

RSSフィード

• RSSは、サイトが更新情報を配信できるようにするフィード標準である。
• 読者はサイトを直接訪れなくても更新を受け取れる。

他サイトへのリンク

• 他のブログやサイトの記事へのリンクを含めて、関連コンテンツを紹介する。
• Drew DeVault’s ブログでこのような機能を見ることができる。

結論

• こうしたマイクロ機能は、サイトをより便利で魅力的なものにできる
• 自分のサイトにこうした機能を組み込むのは良いアイデアだと考えている

[tsboard]

ちょうど自分のブログを作っていたところだったので、こんな有益なニュースはありがたいです（笑）

[GN⁺]

Hacker Newsの意見

• いくつかの提案は良いが、進行バー（progress bar）は気が散りすぎるうえ不要。すでにスクロールバーがあるので、追加のスクロールバーは必要ない。
• リンクの装飾は不要。ブラウザがすでにリンク位置を十分に示している。プレビューのポップアップも不要な邪魔要素だ。
• ブログに全投稿の単一ページインデックスを実装するとよい。タイトルを一覧で見渡せて、検索もしやすい。
• ブログについての話題がHacker Newsに載ってうれしい。自分が開発中のブログサービスはミニマリズムに重点を置いている。ASCIIアートがAndroidで正しく表示されない問題を解決したい。
• 複数の「マイクロ機能」が気に入っている。JavaScriptを要求しない機能を好む。ブログにさまざまなマイクロ機能を実装している。
• 投稿には完全な日付を含めるほうがよいと思う。技術コンテンツでは、いつ書かれたのかを知ることが重要だ。
• ダイアログ形式の説明は好きではない。別の段落として説明したほうがよい。
• リンクプレビュー機能には賛成しない。プライバシーの問題があるため、リンクをクリックする前にURLを確認したい。
• RSSは「マイクロ」機能ではなく、基本機能であるべきだ。
• Gwernのウェブサイトは機能を詰め込みすぎていて、ブラウザが遅くなる。特にモバイルでは問題が深刻だ。
• 目次機能はウェブブラウザ側で実装されるべきだ。ページ進行、リンク可能な見出し、リンクプレビューなどもブラウザで処理すべきだ。文書の作者がフォントや色を指定する必要はない。