Zenn
📝

Zennで記事を投稿する方法と書き方について

2024/05/06に公開
Zenn
Markdown
ブログ書き方
tech

はじめに

こんにちは！
今回はタイトルにもあるように、Zennで記事を投稿する方法について解説します！
また、本記事はZennのアカウントの作成方法に関しては説明していませんので、アカウント未作成の方は、こちらの記事を参考に作成してみてください！

対象読者

  • Zennで初めて記事を書く方
  • 記事を書く際のフォーマットを知りたい方
  • 記事の投稿方法について知りたい方

記事を読むメリット

  • 記事をゼロから公開する手順を知れる
  • 記事を書く際のフォーマットの一例を知れる

結論

Zennで記事を公開する手順は主に以下の3ステップで、とても簡単です！

  1. 記事を書く
  2. 簡単な公開設定を行う
  3. 記事のステータスを「公開する」に変更

ぜひこの記事を参考に初めての記事を公開してみましょう！

1.フォーマットの重要性について

ブログで重要なことは、

  1. 必要とされる内容を
  2. わかりやすい構成で
  3. 継続的に投稿すること

だと考えています。
上記1~3が満たされていることで、少しずつ知名度が上がり、検索結果としても徐々に上位に上がってくる仕組みになっています。
継続する為には、記事を書くコストを極力省きながらも、高いクオリティを維持し続けて、結果に結びつけることで、モチベーションを維持することが重要だと思っています。
その為にフォーマットは効力を発揮します。ある程度型を決めていることで、そこに内容を当てはめるだけで可読性の高い内容が担保でき、さらに毎回ゼロから記事を書かなくてよくなります。

2.フォーマットの例

以下のフォーマットは、我々make itのメンバーが記事を書く際に定めているフォーマットです。
あくまで一例であり、これがフォーマットとして正解という訳ではありません。
他にも様々な記事を参考に、ご自身オリジナルの可読性の高いフォーマットを作り上げてみてください！

1.はじめに

挨拶文と共に、どんな内容の記事なのか簡潔に説明しましょう。
なぜその内容の記事を書こうと思ったかなど理由を記載したり、内容によって必要であればキッカケを添えると、読者も同じ境遇であれば親近感が湧きやすくなります。
また、前提知識が必要となる場合はその旨や関連記事を載せておくと親切な記事になります。

2.対象読者

記事の対象読者を記載しましょう。
記事の内容が初心者向けなのか上級者向けなのか等、どんな立場の方に向けているのかを記載する事で、その後の期待値のズレを防ぐ事ができます。

3.記事を読むメリット

読者がこの記事を読むことで得られる知見やメリットについて記載しましょう。
これを記載することで、この記事を読み終えた際にどうなっているかがイメージでき、読者の離脱率を下げる事ができます。

4.結論

この記事で最終的に伝えたい一番重要な部分を結論として記載しましょう。
結論だけを知りたい読者にとっては、本文から結論部分を探すより、冒頭に記載している事でユーザビリティの向上に繋げる意図があります。
また、結論を知った上でそこに至る経緯を知りたい読者にとっては結論がすでにインプットされている為、そこに繋がる経路も自然と繋がりやすくなり、結果的に読みやすい記事だと認識してもらうことができます。

5.本文

記事の最も中心となる部分です。
本文を書く際には、冒頭で書いた「2.対象読者」「3.記事を読むメリット」「4.結論」やタイトルとブレが生じないように気をつけましょう。
細かい書き方については、3.記事の基本的な記法で解説します。

6.まとめ

まとめで重要なことは、認知バイアスの一つである「ピーク・エンドの法則」を意識すると効果的です。
「ピーク・エンドの法則」とは、とある一連のユーザー体験の中で、最後の印象によって全体的な評価を下し、それが思い出として記憶されるというもので、私自身は「終わりよければ全て良し」に少し近いかなと思っています。
言い換えれば、記事の全体的な印象を良くするためにも、この記事を読んで良かったなと最後に改めて思っていただける様なコメントを意識しましょう、ということです。
まとめに書く内容として、例えば最後まで記事を読んでくださった読者に感謝を伝えたり、読者のネクストアクションを書いて知見習得後の今後のステップへアシストするようなコメントがあってもいいと思います。

3.記事の基本的な記法

Markdownってなに？

markdown（拡張子：.md）とは、テキストを構造的に記述できる「マークアップ言語」の一つで、特定の記号を使って、記述していくことで、タイトルや項目などが簡単に装飾されて自動的に表示されます。
同じマークアップ言語にはHTMLやXMLも存在しますが、これらはタグを用いて文字サイズや配置を自分で指定していく必要がありますが、markdownはそういったことをいい感じに自動的にやってくれるため、素早く文章を入力していくことができます。

タイトルの書き方

markdownでタイトルを表示する際には、テキストの前に「#」を付けます。
また、「#」の数によって、h1から段階的にタイトルサイズをコントロールできます。

# h1サイズ　#を1つ付けた場合の見た目
## h2サイズ　#を2つ付けた場合の見た目
### h3サイズ　#を3つ付けた場合の見た目
#### h4サイズ　#を4つ付けた場合の見た目

上記のように記述することで、実際には以下の画像のように表示されます。

  • 【記事のタイトル】
    記事を書く際のタイトルには基本的に#を1つ使用しましょう。
    ただしZennで記事を書く際にはタイトルの入力欄があり、自動的に#を1つのサイズで表示してくれるため、気にしなくて大丈夫です。
    ちなみに以下画像の赤枠がタイトルです。
  • 【本文内の大項目】
    本文の中で項目を分ける際に使用する大項目についてです。
    本文内で大項目で区切る際は、#を2つ使用しましょう。
    これは、Zennのmarkdown記法一覧（Zennが公式で発表している）にもアクセシビリティの観点から記載があります。
  • 【本文内の中項目】
    続いて、大項目の中で項目を分けたい場合に使用する中項目についてです。
    中項目には#を３つ使用しましょう。

以下画像は本文内の大項目（赤枠）、中項目（青枠）と、目次（緑枠）の見た目です。
※ Zennではタイトルを自動で認識して目次（緑枠）をページの右側にいい感じに表示してくれます。

  • 【本文内で項目を追加する際に注意するポイント】
    様々なサイズの項目を追加しすぎないことが重要です。
    markdownは自動でサイズ調整され便利なので、つい使い過ぎてしまって文章自体の関係性がわかりにくくならないように気を付けましょう。
    目安としては、大項目の中の中項目までは許容するが、さらにネスト（文章の入れ子構造）が必要な場合は別の大項目として分けることを検討しましょう。

主なmarkdown記法

  • 【リスト】
    要素を複数リストアップしたい際に使用します。
    また要素に順番が関係ない場合に使用し、要素同士に順番の関係性がある場合は、次の【番号付きリスト】を使用しましょう。
    書き方と、見た目は以下の通りです。
- 要素１
    - 要素1の子要素1
    - 要素1の子要素2
- 要素2
    - 要素2の子要素1
    - 要素2の子要素2
- 要素3
- 要素4

  • 【番号付きリスト】
    上記【リスト】の番号が付いたバージョンです。要素同士の順番が存在する場合に使用しましょう。
    書き方と、見た目は以下の通りです。
1. 要素１
    1. 要素1の子要素1
    2. 素1の子要素2
2. 要素2
    - 要素2の子要素1(ただのリストと組み合わせ可能)
    - 要素2の子要素2(ただのリストと組み合わせ可能)
3. 要素3
4. 要素4

  • 【テキストリンクの埋め込み方法】
    markdownでは、以下の方法でテキストリンクを埋め込むことができます。
    多様してしまうと他人の知識に頼った記事になってしまう為、注意が必要ですが、参考リンクとして記載する等効果的に使用できると、ユーザーが一連の流れで知識を習得しやすい記事になります。
    書き方と、見た目は以下の通りです。
[表示したいテキスト](リンクのURL)

表示したいテキスト

他人の記事のリンク等を自分の記事に埋め込むことは、違法ではありません。
しかし、リンクをはられた側が明らかに被害を被るような場合は違法となることがあるので、気をつけましょう。

  • 【画像の貼り方】
    以下画像の通り、右側の赤枠の写真アイコンをクリックすることで、ローカル環境の画像を記事に埋め込むことができます。

    また、画像サイズを指定したい場合は、以下の通り画像のURLの後ろに「=画像サイズ」を指定することでpx単位で画像サイズを変更できます。
![](https://画像のURL　=100x)
  • 【コード記載方法】
    コードの説明をする際には、以下の通りシンタクスハイライトも表示され、コーディングエディタの様な見た目でコードを埋め込むことができます。
    「```」の後に言語を指定する必要がありますが、対応言語はこちらを参照してください。
    書き方と見た目は以下の通りです。
　```dart
　void sample(){
　    // 関数の中身を記載
　} 
　```

void sample(){
    // 関数の中身を記載
}
  • 【テーブルの記載方法】
    markdownでは、表形式も簡単に表示することができます。
    使用場面としては、複数パターンが存在する場合や比較対象が存在する場合に、表形式にすることで見やすくなります。
    書き方と見た目は以下の通りです。
| ヘッダー | ヘッダー | ヘッダー |
| ---- | ---- | ---- |
| 値 | 値 | 値 |
| 値 | 値 | 値 |
ヘッダー ヘッダー ヘッダー
値 値 値
値 値 値

4.記事の公開手順

最後に、記事の公開方法について解説します。
公開方法は非常に簡単です！

  1. ①の公開設定ボタンを押して、公開設定の領域を表示する
  2. ②の領域で、公開設定の項目を入力する
  3. ③の「公開する」トグルをONにする
  4. ④の「公開する」ボタンをクリックする（※ 3.でトグルをONにするとボタンが自動で切り替わります）

「公開する」ボタンをクリックすると、記事は公開されます！
以上で記事を投稿することができました！
お疲れ様でした🙌

まとめ

今回も最後まで読んで頂きありがとうございました！
この記事を読むことで、初めての記事を公開したい方の力になれていれば幸いです。
また、今後継続的に記事を投稿して行くためにも、記事のフォーマットを参考に、ぜひご自身のフォーマットを作成してみて下さい！

投稿者：上原

Discussion