📝Qiitaで技術記事を書く時のTips

はじめに

（前置き長いので飛ばしたい方は本題に飛んでください！）

どうも！RUNTEQ68期のほーぷと申します！
RUNTEQ Advent Calender 2025のシリーズ２で12/3を担当させていただきました！
初めての投稿だったので緊張しました、、、。
少しでも誰かの役に立てたら幸いです✨

さて、
勢いって怖いですねぇ、、、。
12/3の記事を書き終わった後にふとRUNTEQのAdvカレンダーのイベントページ見てみたら

わい「あっれぇ？なんかシリーズ１に空いてる日あるなぁ？？
　　　これは天啓か？？神の思し召しか何かかなぁ？」

気づいたらこの記事を書き始めてました！
思いの外、記事を書くのが楽しかったというか
気づきもあったのでできる時にやってしまおうと。

勢いって大事w
そしてアウトプットも大事、ということで早速シリーズ１の12/6分執筆させていただきました！

本題　技術記事のtipsまとめ

さて何を書こうか？

と思った時に、
はじめて書いた記事で戸惑ったことがいくつかあり、、、

• URLを貼り付けたらそのまま文字列になってしもた💦
• 文字が太くなったり、その大きさも微妙に違ったり😗

色々と煩わしく感じたので

わい「せっかくだからQiitaで記事書くときの便利機能をまとめてしまおう！
　　　忘れっぽいし、自分で記事にまとめとくと見返すのに便利だし！」

と思い本記事にまとめることにしました。
意外と１つの機能単発の紹介記事が多く、網羅的にまとまった投稿が少なく意外でした。
（自分の調べ方が悪だけか？？w）

Markdown記法を活用しよう！

Markdown記法。
プログラミングの勉強を始めRUNTEQに入学して初めて出会いました。
どうやらアメリカのジョン・グルーバーさんが2004年に開発されたフォーマットだとか。
デジタル文章を作るときに使うHTML（HyperText Markup Language）などのマークアップ言語を、簡略化できるようにプログラムされた記法のこと。

以下に使用例を列挙します！

> で引用ブロックが作れる

> こんな感じ！

こんな感じ！

#（ハッシュ / シャープマーク）で見出しを調整できる

# 見出し１(H1)  
## 見出し２(H2)
### 見出し３(H3)
#### 見出し４(H4)
##### 見出し５(H5)
###### 見出し６(H6)
####### 見出し７(H7)

見出し１(H1)

見出し２(H2)

見出し３(H3)

見出し４(H4)

見出し５(H5)

見出し６(H6)

####### 見出し７(H7)

AIに聞いたらQiita用の早見表作ってくれました！H6まで目次機能（TOC）が使えるようです。

H1とH2の違いがいまいちわかりませんが、、、どなたかわかりますか？？

:::note で注記ブロックが作れる

:::note
本記事の説明は **macOS** を利用した例です。  
環境が異なる読者の方は、適宜読み替えてご参照ください。
:::

本記事の説明は macOS を利用した例です。
環境が異なる読者の方は、適宜読み替えてご参照ください。

* (アスタリスク) や _ (アンダースコア)で強調

Markdownの早見表

書き方	表示	用途
*text*	text	斜体
_text_	text	斜体（アンダースコア版）
**text**	text	太字（strong）
__text__	text	太字（アンダースコア版）
***text***	text	太字＋斜体
~~text~~	text	取り消し線

**強調**したい文言には積極的に使いたいですね！

強調したい文言には積極的に使いたいですね！

目次機能 (TOC: Table of Contents)を活用しよう！

先ほど紹介した＃を使った見出しですが、
Qiitaはそれらを読み取ってTOCを自動で作成してくれます！
よくパソコンの右側に見る、見出しクリックするとその部分まで飛んでくれるアレです。

読者目線で考えた際に、
どんな内容の記事か一目見てわかるように意識できると良きとおもわれます。

リンクカードを活用しよう！

リンクカードってなんぞ？
👇いわゆるこういうやつです👇

https://help.qiita.com/ja/articles/qiita-article-guideline
👆URLむき出しだとなんだか詐欺サイトに飛ばされそうで怪しく感じたり、
見栄えもちょっと悪いですよね😅
せっかく記事を書くのであれば少しでも見やすいものにしたい、、、

こういう機能を知っているのとそうでないのとで、
記事そのもののクオリティや読者のモチベーションにも差が出る気がします🔥

やり方はめちゃ簡単！

(空欄)
https://(該当のURLを貼り付けましょう！)
(空欄)

これだけでQiita側が自動でリンクカードを作成してくれます！
念の為、プレビュー画面で反映されているか投稿前に確認しましょう！

キャッシュの問題や
OGP（Open Graph Protocol）を読んでカードを作る仕組みが破綻、
またはそもそもリンクがhtpps://でなくhtpp://だったりすると
リンクカードが作成されない場合があります。ご注意ください。

.
.
.
お気づきの方もいるかもしれませんが
実は先ほどの「👇いわゆる・・・」のリンクカードは
なんでかプレビューで崩れてしまったため「なんちゃってリンクカード」にしてます。

[![Image from Gyazo](https://i.gyazo.com/da8a8feeb90fe1b88c6968ad10c48e69.png)](https://help.qiita.com/ja/articles/qiita-article-guideline)

こんな感じ💦
どうしてもリンクカードにしたいのにうまくいかない、、、
そんなと時はのこようにゴリ押しでいきましょう🔥

[![画像](画像URL)](リンクURL)

リンクカードに限らず画像にリンクを紐づけられるので便利ですね！

編集画面（エディタとプレビュー）を活用しよう！

Qiitaで初めて記事を書いて感動したのは
「エディタ」と「プレビュー」を画面２分割で同時に編集できるところ！

Githubでpr書くとき等にエディタとプレビューの切り替えたぶをカチカチ押すんですが、
これを何回も押して　エディタ⇔プレビュー　の行き来が本当にストレスでw
めっちゃ助かったので自分はこの２分割画面での記事作成を推してます！
（ちなみに　⇔　は「すうがく」で変換すると候補の下の方に出てきます！）

おわりに

ある程度、使いそうな機能は網羅できなかな？？
ちょっと途中から楽しくなってボリューミーになってしまいました💦
「こんな便利機能もあるよ〜♪」といったご意見やアドバイスあればお気軽にコメントいただけますと幸いです！
参考記事のリンクも貼ってますのでご活用ください！
（沢山あって見にくいかも、、、反省。）
皆さんの執筆活動の一助になれば幸いです！

ではまた👋
ほーぷでした⚽️

記事の下書きテンプレ

## はじめに

## 本題　〇〇

## 大見出し_01
### 中見出し_01

## 大見出し_02
### 中見出し_02

## おわりに

#### 🔗参考記事

---

🔗参考記事 (👇なんでかリンクカード崩れちゃってます😢)

⚪︎Markdown記法 チートシート
→ 最終更新日 2026年01月22日で見やすくなってました！もうこの記事の意味ないかも😂

⚪︎Qiitaで埋め込み可能なコンテンツ一覧

⚪︎良い記事を書くためのガイドライン

⚪︎CommonMark Spec
→Markdownとは？について英語でずら〜っと書いてあります。

⚪︎Markdown入門ガイド：これだけは知っておきたい基本と便利な技

⚪︎Markdown記法一覧

⚪︎今日からできる！見やすい記事の書き方

⚪︎Qiitaで画像を表示してリンクさせるやつ（リンクカード）の書き方

⚪︎記事内にQiita リンクカードが多い場合に、カードが表示されないことがある

⚪︎QiitaのMarkdownパーサー変更にともなう「リンク」「オートリンク」「Qiita リンクカード」の記載方法について