上記のような記事を書いたので、最近使い始めたnoteについても考えてみました。

noteでテキスト部分のUIとして用意されているのは現在下記の5種類

〇画像
〇タイトル（h3ひとつ）
〇リンク
〇引用
〇中央ぞろえ（※タグとしては例外）

ページとしての構造

普通にノートを投稿するとして、ページのタグ付けはタイトルなど重要部分を上から抜き出していくとこうなるようです。

〇h2（note左上のロゴ）
〇h1（ノート：記事のタイトル）
〇h3（ノート内タイトル）
●p（ノート内テキスト）
●img（pタグ内にタグ内包）
●中央揃え（pタグにtext-align:centerインライン書き）
●a（pタグ内にタグ内包）
〇h4（ノート下部「こちらもおすすめ」）
〇h3（「こちらもおすすめ」下記事タイトル）

h2→h1→h3→h4→h3と飛んだりおすすめの下の記事タイトルの見出しの強さが上がってしまっているため、見出しの文書構造としてはちょっと乱れているかな、という印象。

分析

見出しの文書構造としては乱れているのは先に指摘しましたが、なぜ乱しているのか、など考えてみました。

■note左上ロゴ（h2）の次にあるのにノートタイトル(h1)である理由
おそらくノートのタイトルが最も大事だと考えた可能性が高いです。

■ノートタイトル（h1）の次に来るノート内タイトルがh3である理由
これは単純に、h2はnote左上ロゴで使用してしまっているからではないでしょうか。

■imgタグがpタグに内包されている理由
他の方のnote記事を見ていると、文章中にイメージ画像を入れたり、中にはテキストを入れた画像を入れて強調したり……ということで、文の一部として使われる可能性を考慮しているのかなと思いました。

■こちらもおすすめ（h4）の下におすすめ記事タイトル(h3)が来ている理由
「こちらもおすすめ」よりおすすめしたい記事タイトルの方が重要だと考えたからかなと。

■テキスト部分のUIが、他のテキストサービスと比較してシンプルである理由
下手にタグを打てるようにしたり、UIを増やし過ぎるより、文法エラーを起こさせないことや、シンプルにストレスなく投稿ができることを優先したのでしょうか。

結論

タグだけ見ていると見出しの順序やタグの使い方がちょっとおかしいかなと思いましたが、ひとつひとつ理由を推測していくとなるほど下記のような設計思想なのかなと感じました。

〇ユーザーがなるべくシンプルにストレスなく記事を書ける
〇重要なところにはなるべく強いタイトルタグを与えて強調する

そういう考え方ならこうなるのかも。

UIトレースならぬHTMLトレースというか考察というか、やってみるとなかなか面白いです。

それから思ったのですが、UIがシンプルな分、メルマガ的な罫線の書き方や装飾の仕方がいくつかのノートで見られました。

■□━━━━━━━━━━━━━□■
タイトルタイトルタイトルタイトル　　　　　　　　　
■□━━━━━━━━━━━━━□■
（こんな感じのです）

また、画像で罫線や飾りを作ったりなどもありました。

みんな工夫していて面白い。