markdown AI で子ども向けのクリエイティブツールを公開

# はじめに
本記事では [markdown AI](https://mdown.ai/content?id=335b81b2-bcb0-4dbb-83d0-531aa132181f) で公開した**子ども向けのクリエイティブツール**を紹介します。また、これらのツールの使用例を示します。

公開したツールは以下のリンクから利用できます。

https://mdown.ai/content/d231fe57-fcb1-4b89-be2f-71238a870636



:::note
**markdown AI とは？**
Markdown 記法を用いて、簡単に Web ページの作成、公開を行うことができる Web サービスです。
:::

markdown AI は以下のリンクから **Google アカウント**[^1]のみで**無料**で利用できます。

https://mdown.ai/ 

markdown AI の使用方法は Qiita にも多くの記事があるため割愛させていただきます。

markdown AI では HTML や JavaScript[^2] を直接書き込むことができるため、**自由度が高い** Web ページを作成することが可能です。その利点を活かし、子ども向けのツールを作成しました。

[^1]: 日本では、Google アカウントを作成するのは 13 歳以上である必要があります。

[^2]: 現在、markdown AI ではプレビュー時に `<script>` タグ内のコードの動作を確認することはできません。ただし、公開後は問題なく動作します。


# ツールを作成した動機

markdown AI は 特別な知識を必要とせず、**Markdown 記法**と**シンプルな操作**で、子どもでも簡単に Web ページを作成、シェアすることができます。

ただ、**子ども**（小学生を想定）と**文章の作成**は正直なところ**相性が悪い**と思います。特に長い文章の作成は苦手としている子どもたちは多い印象です。


そこで、文章を書く**きっかけ**になるようなツールを作成しました。子どもたちが楽しみながら文章を作成し、友だちや家族にシェアする楽しさを感じてもらえることを意識して作成しています。



# ツールの紹介
## ドット絵で島を作成
ドット絵で自分の島を作成できるツールです。以下のようなドット絵を作成できます。

![千葉県とその周辺](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/60c5a829-451e-5422-991c-61330e7e9be3.png)

このツールは、子どもたちが**自分の島**をドット絵で作成し、その島の**設定やストーリー**とともに markdown AI で公開することを想定しています。

**視覚的な要素**を取り入れることで、想像力をかきたて、楽しく文章を書けるように工夫しています。

### 使用例
```markdown
# 🦀 島にようこそ

![crab island img](https://example.com/island.png)

この島に宝を隠したよ！！

|  💰  |   💎  |  🏆  |  💍  |
|:----:|:----:|:---:|:----:|
|  た  |  ①  |  ①  |  は  |
|  ②  |  ②  |  う   |  み  |
|  の  |  な  |  ③  |   ③  |

下のヒントをもとに解読しよう！

- ① 「辛い」の漢字は何と読むかな？
- ② 砂漠でほしくなるものは？
- ③ 島の名前は？

答え: みずうみのなか
```


## YouTube の埋め込み
YouTube の URL を入力すると、

![YouTube URL の入力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/98da1c10-e8ac-0150-1c7d-b274eaab1ed2.png)

markdown AI で表示できる形式（`iframe`）に変換するツールです。

![iframe の出力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/5c6010eb-ca57-5367-e433-87f7b59171fd.png)

YouTube 動画を紹介する記事を markdown AI で作成する際に役に立ちます。子どもたちにとって、書籍の感想よりも動画の感想の方が書きやすいかもしれません。

また、小学生でも YouTube に動画投稿をしている子もいるので、自分の動画をまとめた記事などを公開する際にも役立ちます。

### 使用例
```markdown
# お気に入りの YouTube 動画

<iframe
    id='inline-frame'
    width='560'
    height='315'
    title='YouTube video Player'
    allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
    frameBorder='0'
    src='https://www.youtube-nocookie.com/embed/jNQXAC9IVRw?rel=0'
    allowFullScreen
></iframe>

- **タイトル:** ダンス・ミュージック・フェスティバル
- **チャンネル:** MusicFestivals Channel
- **投稿日:** 2020 年 7 月 15 日
- **再生回数:** 1,234,567 回
- **説明:** 
    - ワールドクラスの DJ による最高のパフォーマンスが楽しめるダンス・ミュージックのお祭だよ。
    - わくわくする音楽がお気に入りだよ。
```


## スパイの指令書を作成
このツールは、スパイの指令書を生成するツールです。スパイの指令書はアニメや映画などでよく出てくるので子ども達にも馴染み深いものだと思います。スパイというテーマで、物語やキャラクターを考えるきっかけとなることを想定しています。

![スクリーンショット 2024-07-11 16.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/851958f3-8a99-d717-1432-c50a18095563.png)

### 使用例
```markdown
# 夏の虫捕獲大作戦 🐞

![mission img](https://example.com/mission.png)

## ミッション: 夏休みの冒険

### 目標
- 夏の虫たちを捕まえて、友達に紹介しよう！

### 任務
1. 日中の探検で見つけた虫を記録しよう。
2. 見つけた虫の名前と特徴を覚えて、友達に自慢しよう！

### 必需品
- 探検用帽子 🎩
- 虫かご 🦋
```

## 怪盗風の予告状を作成
スパイの指令書と同じく、予告状はアニメや映画などでよく出てきます。

怪盗というテーマで、物語やキャラクターを考えるきっかけとなることを想定しています。

![スクリーンショット 2024-07-11 16.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/98f8446e-7e1e-2610-7a46-b00c850aca60.png)

### 使用例
```markdown
# 予告状: 怪盗 X の挑戦状

![Phantom thief img](https://example.com/phantom_thief.png)

私、怪盗Xがやってきたよ！今度のターゲットは、みんなの宝物だよ！

- **標的:** みんなのおやつコレクション
- **日時:** 今週の土曜日、夕方の 3 時
- **場所:** みんなのお気に入りの秘密基地

私のミッションは、おいしいおやつを盗むこと！どんなに警戒していても逃れられないよ！

さあ、準備はいいかな？みんな、挑戦を受け入れる準備はできてるかな？
夕方の 3 時までおやつをかくしてね！

私、怪盗 X がみんなのおやつをうばっていく！
```

# おわりに

文章を書く**きっかけ**になることを意識し、ツールを作成しました。

空想の島やスパイの指令書のようなアニメに出てくるテーマでの文章作成を通じて、子どもたちが楽しく文章を書くことを学び、友だちや家族にシェアする楽しさを感じてもらえることを願っています。