Qiitaの記事を素敵にするテクニック

![qiita_tech.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/fd2df7cb-6914-c91a-f6c9-4323ef548898.png)

# はじめに

こんにちは、Watanabe Jin (@Sicut_study)です。

以前私が実際に使っている「アウトプットフレームワーク」についての記事を出したところ多くの反響をいただきました。

https://qiita.com/Sicut_study/items/9b20ac5ded003cb6d55a

今回はこの応用的編として、ある程度記事を書くことに慣れた人が<font color="red">**多くの人にみてもらえるような記事を書くためのテクニック**</font>について紹介していきます。

# バナーを作る

記事を表示したときにその記事をイメージするバナーを載せるようにしています。
いわばQiitaのサムネイルのようなものだと思っています。

これがあるだけで、記事のクオリティをあげることにつながり多くの方が読んでくれるようになります。またバナーがあることで「@Sicut_studyの記事だ」と認識してくれるようにもなります。

![YAKINIKU RETRO.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/cd063716-590b-4547-1fb8-5b0448794375.png)
![Weather.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e2aed340-b9a6-0173-41a9-7b11d29d8106.png)

# gifを活用する

個人開発を紹介するときなどはGifを活用することでわかりやすくなります

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Peek 2024-02-18 06-38.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/56e3183a-1ba0-c4c8-9e2e-3a4fb8ab919e.gif)
<font color="gray">例えばこんな感じ</font>

# 大切なところは太文字と色文字を使う

これはかなり大事なテクニックです。
あなたはYoutubeをみるときに<font color="blue">**倍速再生**</font>してみたことはありませんか?

なぜ人は倍速再生でみてしまうのでしょうか？あなたが初めてYoutubeをみたときは倍速再生してみていたでしょうか？
そしてこれにつながるのがなぜ世の中ではTikTokなどの**ショート動画**が流行っているのでしょうか？

<font color="red">実は、記事に太文字、色文字を使うのは同じ理由なんです</font>

！？！！？となった方が多いかと思いますので解説します。

<font color="blue">**現代はスマートフォンの普及に伴って、多くの情報が日々発信されています**</font>

そこで多くの人は<font color="red">**情報を効率よく手に入れるために、倍速にしたり、短い動画で知識を得たりするようになったのです**</font>

>現代人が1日に触れる情報量は江戸時代の一年分、平安時代の一生分と言われている

つまり、記事を読むときにも多くの人が**流し読み**しているわけです。
では、流し読みをするときに読む文章はどこになるのでしょうか？

まさに、<font color="red">**太文字、色文字の文章**</font>なのです。

そこで私は記事の内容を太文字と色文字だけを読んでも伝わるように意識して記事を作成しています。

ところどころに画像を挿入するのも見た目にわかりやすくなるのでおすすめです。

# 画像を使うときは中央にする

画像はレスポンシブに対応するために中央に配置するようにしています。
中央配置の方法はいくつかあるのですが、私は以下の方法を使うようにしています。

https://qiita.com/shoku-pan/questions/bbac7f40da6e7352b166

```
|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Qiita](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")|
<font color="gray">ここに注釈(alt)をいれる</font>
```

これを実際に表示すると以下のようになります

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Qiita](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")|
<font color="gray">ここに注釈(alt)をいれる</font>

画像を中央にして注釈までいれられるのでとても便利です。
注釈には参考先のリンクなどを入れることも多いです。

# 文字を大きくするためのシャープ(#)の使い方

シャープ(#)を使うとQiitaでは`h1`や`h2`と同じ扱いで利用することができます。
しかし、この方法で見出しを作ると見出し表示に使われます

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/db8a9447-3f7b-0ce7-f751-688318031e80.png)

ここで注意したいのが文字を大きくするのにシャープを使わないことです。
Qiitaではおそらく文字サイズをHTMLで大きくする方法が現在ないので、今後対応してほしいなと思ってます。

ちなみにh4からは使っても表示されないので問題ないです。

# 画像を使うときのSEO対策

なるべくSEOを高めるためにバナーのファイル名は適切なものに変更するようにしています。実際にWebサイトを作るならとても大切なSEO対策なのでやっていますが、効果はあるかは微妙なところです。

例えば犬のバナー画像ならdoc_banner.pngにするなど

# 青文字を使わない

最近Qiitaにはダークモードが使えるようになりました。ダークモードを使うと青文字は見えづらくなってしまうため極力使わない方が良いのかもしれません

(今回はわざと使ってみたのでダークモードで読んでみてください)

# タイトルは適切か？

問題解決型の記事を投稿するときに注意したいのが、あなたが最初に検索したワードでその記事はヒットするのか？という視点です。

多くの人が記事を書くときにタイトルをつけるときその内容を知っていることを前提としたタイトルをつけてしまいます。

もしあなたが何か誰かに質問していたり、検索していたりするならその内容を要約したタイトルをつけることが大切です。

同じ問題にぶつかったり人がすぐに見つけられる記事にしましょう

# おわりに

お気づきでしたか？
実はこの記事にもすべてのテクニックが利用されています。

ある程度慣れてきたら人に気づきをあたえるために記事を書くことを目指してぜひアウトプットを楽しんでみて下さい


ここまで読んでいただけた方は**いいね**と**ストック**よろしくお願いします。
@Sicut_study を**フォロー**いただけるととてもうれしく思います。

今週もプログラミング頑張りましょう！

![jisou-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/217ea52d-8130-3266-0619-990fa968408a.png)

# おすすめ記事

https://qiita.com/Sicut_study/items/dd3283a0350e2faf0b86

https://qiita.com/Sicut_study/items/6ad45d416e1e86722603

https://qiita.com/Sicut_study/items/34decfb23fd4b78afcd6

https://qiita.com/Sicut_study/items/eb56eb8976d14bfa62c1

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！

https://projisou.jp

# About Me

Webエンジニア転身して1年間本気で勉強
転職ドラフトで高額オファーを複数獲得
そこでの経験からアウトプットやマインドセットの発信に強みがある
エンジニアをやりながら、起業に挑戦中
アイデア作りやパブリックスピーキングを得意としてる

■ Twitter
https://twitter.com/Sicut_study
■ Instagram
https://www.instagram.com/himariajin
■ Youtube
https://www.youtube.com/channel/UCBFrGAJhPuuaoLwUIHBILsA
■ TikTok
https://www.tiktok.com/@sicut_study
■ プログラミングコーチングJISOU
https://projisou.jp
■ 体験で学ぶ！JISOU
https://experience-learn.connpass.com/
■ 登壇依頼などご依頼はこちらから
himaria.jin.watanabe@gmail.com

# 参考

https://qiita.com/shoku-pan/questions/bbac7f40da6e7352b166