【初学者・テンプレート付】Webアプリが映えるキレイなREADMEの書き方

# はじめに

思わず使いたくなるWebアプリには、もれなくキレイな**README**が書かれています。
そこで今回は、Webアプリが映えるキレイな**README**の書き方についてまとめます。

こちらが**テンプレート**なので良ければ使ってみてください。

https://branch-spy-2d4.notion.site/README-80b060bc871f403c9e3f8a9b4c899c1c?pvs=4




# 目次

| 章 |    タイトル    |    備考    　|
|---:|-------------|------------|
| 1  |[ヘッダー画像について](#ヘッダー画像について)|         |
| 2  |[サービス概要](#サービス概要)　||
| 3  |[サービスを作成した背景](#サービスを作成した背景)　||
| 4  |[使い方](#使い方)　||
| 5  |[メイン機能](#メイン機能)　||
| 6  |[使用技術](#使用技術)　||
| 7  |[インフラ構成](#インフラ構成)　||
| 8  |[ER図](#ER図)　||
| 9  |[工夫点](#工夫点)　||
| 10  |[今後の展望・追加機能について](#今後の展望・追加機能について)　||

# 前提

`scaffold`を用いた`Rails`アプリを基に`README`を作っていきます。
この時点で最高にかっこいいですね。

[![Image from Gyazo](https://i.gyazo.com/ae7eb05cb1a15775274a74624c8dd3cb.gif)](https://gyazo.com/ae7eb05cb1a15775274a74624c8dd3cb)

# ヘッダー画像について
まずは`Canva`を作ってカッコいいヘッダーを作りましょう。
サイズは**1200*630**がオススメです。

![見出しを追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/4fe8e636-53a1-39b9-3e89-4a61c275623a.png)

https://www.canva.com/
# サービス概要
### サービス名
The Posts
本当はここに**サービスURL**を入れます。
### 概要
思い入れ0投稿アプリ

# サービスを作成した背景
サービスを作成した経緯を書くと、`Why You`の部分が解消され、興味を持ってもらえるきっかけになります。

例: 記事を書くために作りました、特に思い入れはありません。
# 使い方
使い方を簡単に書いておくと、読み手がストレスなく**どんなアプリなのか**がわかってもらえます。
**GIF**を使って概要を視覚化しましょう。

**シェア**部分の**マークダウンのGIF**でURLをコピーできるので、テンプレートの部分を張り替えてもらえれば、簡単にできます。


![スクリーンショット 2023-10-25 10.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/1d267ae0-7ca1-7fb3-5be5-e36dc9389e68.png)

例: `scaffold`を使って簡単に投稿ができるアプリです。デプロイしていないので皆さんは使えません。

[![Image from Gyazo](https://i.gyazo.com/ae7eb05cb1a15775274a74624c8dd3cb.gif)](https://gyazo.com/ae7eb05cb1a15775274a74624c8dd3cb)



# メイン機能

キレイに**README**を書いている人は、もれなく**テーブル**と**GIF**を活用して、機能の説明をしています。これだけでかなり**差別化**できます。
`Gyazo`を使って、**GIF**を撮影しましょう。

さきほどと同じく、**シェア**部分の**マークダウンのGIF**でURLをコピーできるので、テンプレートの部分を張り替えてもらえれば、簡単にできます。


![スクリーンショット 2023-10-25 10.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/1d267ae0-7ca1-7fb3-5be5-e36dc9389e68.png)


https://gyazo.com/

| 投稿機能| 削除機能 |
| ------ | ------ |
| [![Image from Gyazo](https://i.gyazo.com/ae7eb05cb1a15775274a74624c8dd3cb.gif)](https://gyazo.com/ae7eb05cb1a15775274a74624c8dd3cb) |[![Image from Gyazo](https://i.gyazo.com/831c0a348dc52d80d757c37979e7b76c.gif)](https://gyazo.com/831c0a348dc52d80d757c37979e7b76c) |
| 投稿できます！すごい！| 削除もできます！すごすぎる！|

# 使用技術
使用技術についてまとめましょう。**リスト**形式もありますが、個人的には**テーブル**でまとめる方がスッキリしていて好みです。

| カテゴリ       | 技術                                                                        |
| :------------- | :-------------------------------------------------------------------------- |
| フロントエンド | CSS                          |
| バックエンド   | Ruby 3.2.2 Rails 7.0.8                       |
| データベース   |  SQLite                                                              |
| 認証           |                                                               |
| 環境構築       |                                                     |
| CI/CD          |                                                              |
| インフラ       |                                                           |
| API            |                                                              |
| その他         |  |

# 選定理由
選定理由について書きましょう。こだわりが出る部分なので、厚みを持たせて書くと良さそうです。

例: `実装スピード`を考慮しました。こだわりがないので、`scaffold`を用いて、**3分**で完成させました。

# インフラ構成
今回はそんなものはありません。他の有識者の記事を参考にしましょう。


https://qiita.com/yusuke_blog1026/items/c68c45790a977cbd0715#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83


ツールとして、`Draw.io`、`Figma`あたりがよく使われている印象です。

https://qiita.com/ryamate/items/3779418172c4f5a83212

https://app.diagrams.net/

https://www.figma.com/




# ER図
テーブルが一個しかないので、全く映えないので書けません。こちらも他の有識者の記事を参考にしましょう。


https://qiita.com/mitsu30/items/9d30da75941e328b541f#er%E5%9B%B3

ツールとして、`Draw.io`、`PlanetUML`、`dbdiagram`あたりが良さそうです。

https://qiita.com/ryamate/items/3779418172c4f5a83212

https://dbdiagram.io/

# 画面遷移図
ここも載せられるならやっておいた方がいいです。
`Figma`を使って書くのが主流です。

https://www.figma.com/

https://wentz-design.com/post/figma-connect-with-arrows/





# 工夫点
工夫点を書きましょう。ここもこだわりを出しやすいので、厚みをもたせましょう。

###  1.工夫
**h1**に`The`を追記することによってイケてるアプリにしました。
```ruby: 変更前
<p style="color: green"><%= notice %></p>

<h1>Posts</h1>

<div id="posts">
  <% @posts.each do |post| %>
    <%= render post %>
    <p>
      <%= link_to "Show this post", post %>
    </p>
  <% end %>
</div>

<%= link_to "New post", new_post_path %>

```

```ruby: 変更後
<p style="color: green"><%= notice %></p>

<h1>The Posts</h1>

<div id="posts">
  <% @posts.each do |post| %>
    <%= render post %>
    <p>
      <%= link_to "Show this post", post %>
    </p>
  <% end %>
</div>

<%= link_to "New post", new_post_path %>

```

# 今後の展望・追加機能について
今後について書くことで、よりユーザの興味関心を持ってもらいやすくなります。
例: 現状、`The Posts`なので、`The Perfect Posts`にすることで**UI/UX**を向上させたいです。

# おわりに
**README**を充実させて、映えるアプリを作っていきましょう！
最後まで読んでいただきありがとうございました！

https://branch-spy-2d4.notion.site/README-80b060bc871f403c9e3f8a9b4c899c1c?pvs=4