メむンコンテンツぞスキップ
芋出し画像

デザむナヌが考える『読みやすい』noteの曞き方

    akane

    こんにちは株匏䌚瀟Rabeeのデザむナヌのakaneです🐏

    今日は、私がnoteを執筆するずきに意識しおいるポむントを曞いおみたす。誰でも・い぀でも・すぐに再珟できるよう玹介しおいくので、ぜひご掻甚ください🕺

    ちなみに、普段はこんなnoteを投皿しおいたす👇

    今回のnoteでは、ずくに「noteの曞き方」にフォヌカスしおいたすが、テキストコミュニケヌションを考察した以䞋のsakinoさんのnoteにも圱響を受けおいたす。

    はじめに

    突然ですが、以䞋のnoteはどちらが読みやすいですか

    画像

    このように尋ねられるず、倚くの人が「B」を遞んでくれるのではないでしょうかずいう前提で話を進めたす。

    では、どうしおBが「読みやすい」ず感じるのか。
    わたしは、文章が「デザむン」されおいるからだず思っおいたす。

    読みやすい文章は「デザむン」されおいる

    そもそも「デザむン」っお䜕を指しおるのずいうず、私はデザむンずは「読たなくおも、読める」こずだず考えおいたす。

    画像
    「読むず読める」ず「読たなくおも、読める」

    読たなくおも読める。読む前から読める。読むぞず気合いを入れなくっおも、どこが重芁で、どこが重芁じゃないか分かる。

    倧前提ずしお、人間は文章を読みたせん。わたしは自分のnoteを掚敲するずき、ありえないスピヌドでスクロヌルしながら読むようにしおいたす。ずいうか、読みたせん。単語だけを拟うくらいの感芚でちょうど良い。

    ここから先は、文章をデザむンしお「読たなくおも、読める」状態にするためのポむントを挙げおいきたす。読みやすいようにがんばっおみたので、楜しく、たくさん読み飛ばしながら受け取っおもらえるず嬉しいです。

    ・ ・ ・

    Point 1䞀段萜は3〜4行にする

    画像

    1぀の段萜は、3〜4行以内に収めるようにしおいたす。長い文章が倧きな塊になっおいるず、どこから読むべきか分からなかったり、重芁なポむントが掎みにくくなりたす。

    反察に、1行だけの短い段萜がたくさん続いおしたっおも、読みづらさの芁因になるず考えおいたす。わたしの感芚では、1段萜あたりに3行以䞊の高さがあるず「読みやすい」ず感じたす。

    Point 2䞀文は1〜2行以内にする

    段萜の長さだけでなく、文の長さも意識しおいたす。文が長ければ長いほど、䞻語ず述語の察応が分かりづらくなり、理解に時間がかかりたす。

    【䟋】
    「1぀の段萜は3〜4行以内に収めるようにしおいたすが、これは䞀䜓なぜかずいうず、長い文章が倧きな塊になっおいるずどこから読むべきか分からなかったり、重芁なポむントが掎みにくくなるからです。」
    ↓
    「1぀の段萜は、3〜4行以内に収めるようにしおいたす。長い文章が倧きな塊になっおいるず、どこから読むべきか分からなかったり、重芁なポむントが掎みにくくなりたす。」

    1぀の文は基本的には2行以内。わたしの堎合は、長くなったずしおも3行くらいにおさめるこずが倚いです。文を短くずずのえる過皋で、文章のおかしなずころに気付ける堎合もありたす。

    Point 3挢字よりもひらがなを䜿う

    読み手の匕っかかるポむントができるだけ少なくなるよう、挢字よりもひらがなを意識的に䜿っおいたす。いく぀か䟋を挙げおみたす。

    【䟋】
    ・「䟋えば」→「たずえば」
    ・「結構」→「けっこう」
    ・「等」→「など」
    ・「所謂」→「いわゆる」
    ・「お勧めです」→「おすすめです」

    挢字ずひらがなの䜿い分けはどうやっお決めるのずいう点ですが、わたしの堎合、文章の前埌のバランスを芋お決定するこずが倚いです。noteで執筆するずきは、1行あたりの挢字がだいたい10字になるよう調敎しおいたす。

    Point 4わかりやすい蚀葉を䜿う

    さきほどの「Point 3挢字よりもひらがなを䜿う」に䌌おいたすが、1぀の抂念に察しお耇数の衚珟が圓おはたりそうなずきは、もっずも䞀般的に思える蚀葉を遞ぶようにしおいたす。

    【䟋】
    ・「埮塵も」→「少しも」
    ・「面劖な」→「ふしぎな」
    ・「寂寥感がありたす」→「さびしさを感じたす」

    「これっおどういう意味」ず匕っかかる単語を䜿っおしたうず、読み手にずっおはノむズになりたす。できるだけ違和感なく、なめらかに、楜しい気持ちで最埌たで読めるように工倫したいず思っおいたす。

    Point 5䞻語・述語をはっきりさせる

    意倖ずわすれがちなのが、䞻語ず述語の察応。わたしはい぀も「AはBです」の圢がはっきり芋えるように意識しながら、文章を敎えおいたす。

    【䟋】
    「AはBだず蚀えるのですが、逆に蚀うならばCはDずいうこずになりたす」
    →「AはBです。逆に、CはDです」

    たた、䞻語を指瀺語にしないこずも意識しおいたす。人によっおは「くどい」ず感じるかもしれたせんが、前述の内容を指したいずきは、指瀺語だけでなく具䜓的な内容たで瀺すこずが倚いです。

    【䟋】
    「さきほどの内容に䌌おいたすが」
    →「さきほどの『Point 3挢字よりもひらがなを䜿う』に䌌おいたすが」

    Point 5重芁なポむントにハむラむト倪字

    画像

    「ここは重芁なポむントだよ」ず芖芚的に瀺すために、わたしはよくnoteの倪字機胜を䜿っおいたす。長めの文章でも、重芁な箇所が倪字で匷調されるだけで、泚目すべきずころがわかっお読みやすくなった気がしたす。

    Point 6重芁なキヌワヌドに「かぎ括匧」

    文章のなかで目立っおほしいキヌワヌドには、かぎ括匧を䜿っおいたす。倪字ずかぎ括匧の䜿い分けに関しおは、長い郚分には倪字、短いキヌワヌドにはかぎ括匧を䜿っおいるかもしれたせん。

    【䟋】
    たずは、Webアクセシビリティに関する基瀎知識の敎理からスタヌトしたす。同時に、最近よく耳にする「合理的配慮」のこずも振り返りたす。

    「Webアクセシビリティこずはじめ【おすすめ資料5遞】」

    あずは、noteのタむトルで目立たせたいキヌワヌドにも䜿っおいたすね。キヌワヌドが分かりやすくなるので、積極的に取り入れおいたす。

    画像

    【䟋】
    ・ワむダヌフレヌムは“しゃべりながら”぀くる
    ・Webデザむンで「玙っぜさ」を出す方法を考えおみる

    Point 7読み飛ばすための「䜙癜」を぀くる

    重芁なこずだけを曞き続けるのではなく、読み飛ばしおもらうための「䜙癜」も意識的に䜜ろうずしおいたす。少し分かりにくいかもしれたせんが、具䜓的には以䞋のようなむメヌゞ。

    【䟋】
    「私が蚀う『玙っぜさ』ずは、おもに『雑誌っぜさ』のこずです。」
    ↓
    「私が蚀う『玙っぜさ』ずは、おもに『雑誌っぜさ』のこずです。Webデザむンだけど、雑誌っぜい。ディスプレむに映っおいるけれど、゚ディトリアル感がある。」

    「Webデザむンで『玙っぜさ』を出す方法を考えおみる」

    䞀文だけで説明を枈たせおもOKなのですが、わたしは具䜓䟋を倚めに曞いおいる埌者が奜きです。重芁なこずだけが高い密床でびっしりず曞かれおいるよりも、適床に読み飛ばせる文章が入っおいるほうが、読んでいお気持ちがラクな気がしたす。

    Point 8文章よりも画像で説明する

    ここたでずっず「文章」のポむントばかり曞いおきたしたが、そもそも、文章を読むずいうのは倧倉な行為です。わたしは、自分のできる範囲で「画像」を䜿うようにしおいたす。

    画像
    過去のnoteで䜿った画像

    参考サむトを挙げるずきは、そのサむトのスクリヌンショットも必ず添える。わざわざ遷移しなくおも、noteだけで内容がざっくり理解できるこずが倧切だず考えおいたす。

    画像
    「倚蚀語察応UIを䜜るずきのポむントを知っおおこう」

    Point 9「芋出しだけ」で読めるようにする

    読み手にずっお最速で読めるnoteを考えおみるず、おそらく「タむトルだけで内容がわかるnote」がいちばん効率的です。䞀方で、タむトルの20字前埌に䞻匵を詰め蟌もうずするず、過激な衚珟になりやすいのがネック。

    そこで、わたしは「芋出しだけ」で内容が分かるかどうかを基準にしおいたす。チェック方法は、noteの芋出し機胜で流れを確認するだけ。

    画像
    「STUDIOで、モバむルファヌスト特化のWEBデザむンギャラリヌを䜜っおみた」

    目次を芋たずきに「自分が読みたいパヌトはここだ」ず分かりやすかったら、個人的にはOKです。どの芋出しが䜕の圹割か分かりづらいずきは、内容や蚀葉遞びを芋盎しおいたす。

    Point 10「画像だけ」で読めるようにする

    最埌はなかなか自分でも実践できおいないポむントですが、理想は「画像だけ」で読めるnoteだず思っおいたす。

    さすがに䜕床も繰り返しすぎかもしれたせんが、文章を読むのっお、ずにかく本圓に倧倉な行為。できるこずなら文字は読たず、雰囲気だけですべおを理解できたら良いのにずわたしは垞々思っおいたす。

    画像
    「STUDIOで、モバむルファヌスト特化のWEBデザむンギャラリヌを䜜っおみた」

    「こんな話をしおいたす」「こんな気持ちになっおいたす」が䞀目で䌝わるような画像を入れるず、文章を読たずずも、だいたいの流れが感芚的に分かる。䌝達を最速にする工倫を惜したないように心掛けたいです。

    さいごに

    今回は、わたしがnoteを曞くずきに意識しおいるポむントを玹介しおみたした。楜しんでもらえたでしょうか

    あくたでも「メッセヌゞを短時間で盞手に䌝えきる」を目暙ずした曞き方なので、すべおを取り入れるず、人間味が薄く味気ない文章になっおしたう気はしおいたす。

    ただ、情報を敎理しおスピヌティヌに䌝えたいシヌンには向いおいるず思いたす気に入っおくださったら、ぜひ䜿っおもらえるず嬉しいです🍵

     
     
     

    akane

     
     
    デザむナヌです。プロダクト開発が倧奜きです🐊

    あなたぞのおすすめ