noteはすごいぞ

今日は、記事を書くときにいつもお世話になっているnoteについて、私の愛をぶつけて生きたいと思います。一応、Web制作に携わったこともある視点から細かく分析していきます！

デザインがすごい

まず、デザインが素晴らしいです。
「いや、noteのデザインって別にシンプルで簡単そうじゃん。。」
と思ったそこのあなた！
実はシンプルなデザインこそもっとも難しいのです。
装飾を削ぎ落とせば削ぎ落とすほど、細部の微妙なニュアンスの違いが際立ってきて、デザインに技術が必要になるのです。
よく「細部に神は宿る」といいますが、これがまさにそれです。

具体的に見ていきましょう。
例えば文字の色。
問題、noteの記事の文字は何色でしょう？
「いやどうみたって黒でしょ笑」
と思ったそこのあなた！
残念。正解は「限りなく黒に近いグレー」なんです。
証拠をお見せします。
ColorPickEyeDropperというツールで解析してみた結果です。

タイトル文字の色は#000000(完全な黒)ではなく、#222222(限りなく黒に近いグレー)でした！
いや別に一緒でしょと思うかもしれませんが、こういう細部がめちゃくちゃ大事なんです。
これが仮に完全な黒であった場合、背景色とのコントラストがきつすぎてチカチカした印象になります。目にやさしくありません。
そう言われてみれば、改めてnoteを見るとなんだか目にやさしい文字だな。そう思えてきませんか？(私だけ？)
ちなみにこの「文字色を完全な黒ではなく、限りなく黒に近いグレーにする」というテクニックは、プレゼン資料やスライドの作成などにも応用可能で、グッと印象が良くなるのでおすすめですよ。

それから、文字色だけではありません。
noteの行間は日本語に最適化されています。
どういうことかというと、ポイントは日本語には漢字があるってことです。
漢字は、アルファベットに比べて字画が多く、文字が複雑です。
だから、日本語の文章を英語の文章と同じ行間で表示してしまうと、かなり詰まった印象、ギッシリしていて読みづらいような印象になってしまいます。
その点、noteは一文と一文の間に適度な間隔があり、間延びせず、かといってぎゅうぎゅうにならず、非常に絶妙な塩梅となっています。

多様性への配慮がすごい

Webサイトは、Webを読む人だけのものではありません。、
例えば目に障害がある方は、一般の方のようにWebを読むことはできません。
そこでどうするのかというと、読み上げソフトというものを使って、Webに書いてあるものを音声に換え、耳から聞くことで情報を得るのです。
つまり、Webを「聞く人」も一定数いるのです。

しかしこの読み上げソフトなんですが、Webサイトが読み上げソフトにとって読み取りやすいに作っていなければ、正しく音声に換えることができません。
このように目に障害のある方や、多様性に配慮してWebを作ることを「Webアクセシビリティ」と呼びます。

人類史にとってWebはまだ生まれたばかりの赤ん坊です。だから、悲しいことに、Webアクセシビリティは十分に浸透しているとは言い難い現状にあります。ほとんどのWebサイトは配慮が足りず、ソフトが読上げた音声は、目に障害のある方にとって「なんのこっちゃわからん」音声になってしまっているのが実情なのです。

そこで、気になるのは、noteはどうなっているのかということですね。
LightHouseというソフトを使って、解析してみましょう。

なんとWebアクセシビリティのスコアは９５点。
これはおそろしく高いスコアです…!（私でなきゃ見逃しちゃうね👩🏻‍🎤）
どのくらい高いかというと、大学受験に例えるなら東大とか京大くらいのレベルです。

ちなみにWebアクセシビリティですが、実はSEO、つまり検索結果の順位にも影響が出る可能性があります。例えば、GoogleはWebアクセシビリティへの配慮を欠いたサイトに対して、検索結果の上位に表示しないというペナルティを課すことを検討しているそうです。

SSRがすごい

最後に上げるのが、SSRがすごいってことです。
「SSR」とは「スーパースペシャルレア」のこと…、ではなく笑、サーバーサイドレンダリング(Server Side Rendering)の略です。
正直、私のもなんのこっちゃさっぱりわかりません😅

調べたところによると、noteのような高機能のWebサイトを作るには、通常、次のような仕組みを用いるそうです。
それは、Webサイトの設計図を渡して、ユーザーがアクセスしたときにChromeやSafariなどのブラウザに画面を組み立ててもらうという手法です。
しかし、この手法には問題があって、それは設計図だけだと検索エンジンはWebサイトに書いてある内容を素早く理解できないということです。
その結果、素晴らしいWebサイトでも検索エンジンの上位に表示されるまでかなりの日数を要してしまう…そんな問題が起こるのです！

ちょっと難しい話になってしまいましたね。
ポイントは、noteは検索エンジンにフレンドリーだということです。
noteが実現させているのは、検索エンジンにWebサイトの設計図ではなく、組みたて済みのWebサイトそのものを渡すことで早く内容を理解してもらうということなんです。
めっちゃ高度！
早い場合には、noteの記事は投稿した次の日にでも検索結果の上位に表示されていることがあります。これこそがSSRという仕組みの成せる業なのです。 noteやるじゃないか👍

ということで、今回はnoteのすごさについて語っていきました。今後もさらなるnoteの成長と躍進に期待したいですね。(個人的には、特に、ダッシュボードでもっと詳細に記事の反応を分析できるようにしてほしいです。どこまでスクロールされたか、など。あと、ベータ版の投稿画面はものすごく使いやすいぞ、noteさん！)

ブログをやっている方は、自分のブログと合わせてnoteにも記事を投稿しておくとアクセス数が増えるかも。ということで最後に、(強引な流れですが😂)、私のブログへのリンクを張って終わりにしたいと思います。
最後までお読みいただきありがとうございました！

minify