Markdown AIを触ってみた！

# Markdown AIを触ってみよう。

## 👋 はじめに
みなさんこんにちは！
Best Interesting use賞を目指して作りました。
Markdownについて学び、メインは「思い出ノート」の作り方を
最初から順番に説明します。
たくさんのいいね待ってます。

## そもそもマークダウンってなんだろう？
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/6a992d8d-d139-94e3-b131-46dcd14903f4.png" width="300">

### マークダウンが生まれた理由

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/34fcf685-bf5f-f835-5e15-ca9d8137cbc9.png" width="300">

2004年に、ジョン・グルーバーという人が考えました。
パソコンで文章を書くとき、「見やすく」て「かんたん」な方法が欲しかったからです。

## マークダウンのすごいところ

マークダウンは、特別な記号を使って文章をキレイに整えることができます。

## 例えば：

### 見出しを作る
```
# 大きな見出し
## 中くらいの見出し
### 小さな見出し
```

### 文字を強調する
```
*大切な言葉* → 斜めの文字になる
**とても大切な言葉** → 太い文字になる
```

### リストを作る
```
- りんご
- バナナ
- みかん
```

### 番号付きリストを作る
```
1. 一番目
2. 二番目
3. 三番目
```



## マークダウンを使うと：
- かんたんに文章が書ける
- きれいに整えられる
- 読みやすくなる
- 書いた文章は他のアプリでも同じように見える
- プログラマーさんも愛用している
- 一度覚えると一生使える便利な技術！

## 使えるアプリ・サイト

### 📱 スマートフォン

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/eb5bd2b3-7fbd-1a3e-5ac3-54d4847ce8f0.png" width="100">

- **Notion**
  - 無料で使える
  - メモ、日記、宿題管理に最適
  - チームでも使える
  - カレンダーやToDoリストも作れる
  - https://www.notion.com/ja

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/4665628e-f112-7d5f-0c63-a573dfb29edb.png" width="100">

- **Discord**
  - ゲームやチャットで大人気
  - 文字を装飾して目立たせられる
  - みんなと情報共有が簡単
  - https://discord.com/

### 💻 パソコン

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/06311795-4098-f041-8efe-07356c66ba49.png" width="100">

- **GitHub**
  - プログラマーの聖地
  - 世界中の人が使っている
  - プロジェクトの説明書作りに使用
  - https://github.co.jp/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/43730147-9261-8d57-757e-ce14b58005aa.png" width="200">


- **Qiita**
  - 日本の技術者に大人気
  - プログラミングの勉強ノートが書ける
  - みんなの記事から学べる
  - https://qiita.com/

### 🎓 初心者におすすめ
- **StackEdit**
  - ブラウザですぐ使える
  - 書いた結果がリアルタイムで見られる
  - 無料で簡単に練習できる
  - 保存も共有もカンタン
  - https://stackedit.io/

## こんな人にぴったり！
- ノートをキレイに整理したい人
- プログラミングに興味がある人
- 文章を書くことが好きな人
- メモを取るのが好きな人
- 勉強を効率的にしたい人

## Markdownのまとめ
Markdownは簡単なのに、できることがたくさん！
一度覚えると、ノート取りや文章作りが楽しくなります。
ぜひチャレンジしてみてください！
###  次はMarkdownAIです。


## 🎯 準備するもの
- ✅ パソコンかタブレット（スマートフォンでもOK！）
- ✅ Googleアカウント（なければ大人の人と作ろう）
- ✅ やる気（これは後からついてくるよ😊）

## 📱 アカウントを作ろう！（5分）

### Step 1: Markdown AIにアクセス
1. インターネットで https://mdown.ai/ を開く
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/08ac3dea-77b3-c410-e23f-aecf2199d910.jpeg" width="500">

2. 右上の「Sign Up」か「新規登録」ボタンを押す

### Step 2: ログインする
1. 「Googleでログイン」を選ぶ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/54919ea9-5b91-6aca-e47f-b32799075452.jpeg" width="500">

2. Googleアカウントを選択（大人の人と一緒に）

### Step 3: 新しいノートを作る
1. 左側の「＋」ボタンを押す
2. 「新しいプロジェクト」を選ぶ
3. 名前を付ける（例：「わたしの思い出ノート」）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/7359edc4-8b1d-2ad8-5d6e-d733cc112d97.jpeg" width="500">

## 🎨 ノートを書いてみよう！（10分）

### Step 4: 基本の文章を書く
```markdown
# ✨ [名前]の思い出ノート

## 自己紹介
こんにちは！[名前]です。
[学年]の[好きなこと]が大好きな人です。

## 好きなもの
- 🎮 ゲーム：[好きなゲーム]
- 📚 本：[好きな本]
- 🎵 音楽：[好きな音楽]
```

### Step 5: 写真を追加する
1. 「Insert」ボタンを押す
2. 「Image」を選ぶ
3. 写真をアップロード
   ```markdown
   ![楽しい写真](/api/placeholder/400/300)
   ```

   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/6c75afd4-c21a-e5af-d036-06f768b51bc6.jpeg" width="500">



### Step 6: AIさんに手伝ってもらう
1. 「AI」ボタンを押す
2. 「文章を考えて」とお願いする
   ```markdown
   :ai-helper{
     request: "楽しかった思い出を文章にして"
   }
   ```

      <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/57910ec5-551f-acd0-3bdc-801f31383dbd.jpeg" width="500">



## 💫 デザインを整えよう（5分）

### Step 7: 色やデザインを選ぶ
```markdown
:style-helper{
  theme: "カラフル",
  layout: "見やすく"
}
```

### Step 8: 絵文字を追加
好きな絵文字を文章に入れよう！
- 🌟 星
- 🎨 パレット
- 📸 カメラ
- 🎵 音符

## 🌐 みんなに見せよう！（3分）

### Step 9: 公開する
1. 上の「SAVE」ボタンを押す
2. 「View」ボタンを押す
3. 「URL」→「publish」の順に押す
4. URLをコピーして共有！

      <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/81233756-d386-a20a-5edb-e46f61880774.jpeg" width="500">



## ⚠️ 困ったときは？

### よくある問題と解決方法
1. 画面が表示されないとき
   - ページを再読み込みする
   - 別のブラウザで試す

2. 保存できないとき
   - 「SAVE」ボタンを押す
   - 内容をコピーしておく

3. 写真が追加できないとき
   - 画像のサイズを確認
   - 別の写真を試す

## 💡 楽しい使い方アイデア

### 日記を書く
```markdown
# 📖 今日の日記
## [日付]
今日は[出来事]がありました。
とても[感想]でした！
```

### アルバムを作る
```markdown
# 📸 思い出アルバム
## 楽しかった場所
![場所の写真](/api/placeholder/400/300)
ここで[思い出]がありました。
```

## 🎯 次のステップ

1. **もっとデコレーション**
   - 新しい絵文字を探す
   - 色々な見出しを試す
   - 写真をたくさん入れる

2. **友だちと共有**
   - URLを教え合う
   - コメントを書き合う
   - 一緒に思い出を作る

## 📝 まとめ

これで君だけの素敵な思い出ノートの完成！
どんどん新しいページを作って、楽しい思い出をたくさん記録してねください。

私が他に作ったみたもの記事もみてください。
https://qiita.com/jin112343/items/a34f1d5524fe9abe4f1a
- [カラーチェンジャー](https://mdown.ai/content/b82bca15-b6b9-44fd-a740-31389fb07751)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/dfb1dcf6-ac76-8238-d709-12054f280f76.jpeg" width="300">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/4e01af81-ad9b-4f12-acca-9ee450a4650c.jpeg" width="300">

- [エラーボタン](https://mdown.ai/content/0af91858-1d81-4f28-8ca1-1451146f5f55)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/8e4a26d8-987f-b482-1be7-0dcdf56d8143.jpeg" width="300">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/7fe96823-a3c5-76ce-90b5-4332cc805b4f.jpeg" width="300">


### 参考になるサイト
- Markdown AI公式ガイド
- セットアップ詳細：[セットアップ参考記事](https://qiita.com/mdown_ai_jpn/items/d3e281565c876a0bd64f)
- 困ったときの相談所：[ヘルプセンター](https://mdown.ai/help)
---


画像はフリー素材及びQiitaメディアキットを使っております。
https://help.qiita.com/ja/articles/others-brand-guideline