noteの記事で吹き出し的にコメントを表現する方法をさぐってみた。
Google経由でこの記事をご覧いただく方が多いようですので、最新版のnoteのカイゼン、「noteで会話形式のインタビュー記事が書きやすくなりました」を載せておきます。参考になると思いますので、ぜひご覧ください！
以下は、過去の試行錯誤の記録です。
noteを書いていると、文中にコメントを載せたいときがあります。
ここがコメントだよーとわかりやすくするためには、なんらか本文とコメント部分の差をつける工夫をする必要があります。
そんなとき、引用の機能をつかっている方も多いです。
引用を使うとこんな感じ↓
◯◯さんのおすすめコメント
これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。
これはダミーです。これはダミーです。
引用の機能を使うと、文字の背景にうっすらとグレーの色が入り、見た目の区切りがつきわかりやすくなるのですが、引用の本来の使い方とは異なります。引用機能では「blockquote」のHTMLタグを使うので、Googleに読み込まれなかったりもします。
詳しくは下記にて
https://www.help-note.com/hc/ja/articles/360008882834
そこで、引用以外の方法で、本文とコメントの区切りをわかりやすくする方法をさぐってみました。
（PCとスマホのブラウザを見比べていただけると、見え方の違いがわかりやすいです。）
区切り線を使ってみると…
noteの新エディタの機能なので、崩れの心配はないし、簡単に設定ができて筋は良さそうです。
個人的には、この使い方をするには、ちょっと区切り線が長すぎて本文との繋がりがなくなってしまうかも？と感じる部分もあり。
◯◯さんのおすすめコメント
これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。
これはダミーです。これはダミーです。
記号や罫線で工夫してみると…
往年のメルマガちっくな方法でやってみます。
パターン1：全体を罫線で囲んでみます。
スペースを駆使して見た目の調整をがんばっても、読者が見る環境によって簡単に崩れてしまいます。特にスマホで見た時に改行されてひどい状態になります。やめたほうがよさそうです。
┌───────────────────────────┐
│ ◯◯さんのおすすめコメント │
│ これはダミーです。これはダミーです。これはダミーです。 │
│ これはダミーです。これはダミーです。これはダミーです。 │
│ これはダミーです。これはダミーです。 │
└───────────────────────────┘
パターン2：上下だけ罫線で飾ってみます。
スマホを考えた文字数調整ができればよさそうです。
下の段はスペースをいれるのではなく、noteの右寄せにする機能を使っています。
┌───────────────
◯◯さんのおすすめコメント
これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。
これはダミーです。これはダミーです。
───────────────┘
パターン3：記号で飾ってみます
パターン3-1：冒頭に「▼」をつけてみました
これはシンプルでいいけど、本文がびっしり長いと区切りがわかりづらい可能性も。★や■に代用も。
▼◯◯さんのおすすめコメント
これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。
これはダミーです。これはダミーです。
パターン3-2：見出しを「【】」で囲ってみました
これも3-1同様に、シンプルでいいけど、本文がびっしりあると区切りがわかりづらい可能性も。
【◯◯さんのおすすめコメント】
これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。
これはダミーです。これはダミーです。
パターン3-3：センター合わせ＋上下に記号を並べてみました
スマホを考えた文字数調整ができればよさそうです。スマホで見ると、PCのブラウザでみるような間抜けさが軽減、割としっくりきます。
▼ ▽ ▼ ▽ ▼ ▽ ▼ ▽ ▼ ▽ ▼ ▽
◯◯さんのおすすめコメント
これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。
これはダミーです。これはダミーです。
▲ △ ▲ △ ▲ △ ▲ △ ▲ △ ▲ △
画像を使ってみると…
noteのエディタでは画像を囲むように薄っすらとグレーの罫線が入るため、それをしょうがないとするか、なんとかデザインでカバーする必要があります。
画像を使うと、スマホでみた時に結構しっくりきます。下記の「画像を使ってうまく表現しているnoteのケース」を見ても、グレーの罫線はあるものの、PCよりもスマホで見た時にうまくはまっていて、文章の区切りがわかりやすくとても見やすいと感じました。
さっそく画像を作ってみます。
パターン1 グレーの囲みをOKとするパターン
これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。
これはダミーです。これはダミーです。
パターン2 グレーの囲みと同じ色で背景をつけてみました
これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。
これはダミーです。これはダミーです。
パターン3 区切り線を画像でつくってみました。
画像をアップロードした後に、サイズを縮小しています。
◯◯さんのおすすめコメント
これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。
これはダミーです。これはダミーです。
デザインセンスがないので、どれもいまいち感が否めません。。。（凹
デザイナーさんにお願いすることで発展の余地があるかもしれません。
画像を使ってうまく表現しているnote
グレーの罫線はあるものの、うまく工夫されています。
スマホでみた時に、とても読みやすかったです。参考にされてみてください。