マークダウンでストア画像作成【vscode-reveal】

# はじめに

コードは勢いで書けるけど、デザイン・プロモーション画像は面倒な方（私です）

**マークダウン**のスライド作成ツール「**vscode-reveal**」を使ってみませんか？
一貫性のあるデザインで、画像を作成できます。

今回は、過去に公開したChrome拡張機能のストアページを更新していきます。

### ◇ Before After

| Before | After |
|:-:|:-:|
| ![スクリーンショット 2024-12-11 7.04.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/0c76dc0a-a5e2-d554-8fd4-e83bbbe0e0e6.jpeg)  | ![スクリーンショット 2024-12-11 21.01.18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/6e5a3b1e-1d24-bcc4-a53c-f31c4a5495a7.jpeg)  |
| ![スクリーンショット 2024-12-11 7.03.16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/c15de21d-d705-cdb6-af14-4d244d7b9b37.jpeg)  |  ![スクリーンショット 2024-12-11 21.01.55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/54ac3409-0365-409f-be22-2a51450d5afd.jpeg) |



### ◆ ツール「vscode-reveal」について

導入方法・基本操作：[これからのプレゼン資料は reveal.js を使おう](https://qiita.com/Targityen/items/40ae4795e2cb77c1adc6)


使用例：[The HTML presentation framework | reveal.js](https://revealjs.com/)

実践的な手法：[マークダウンで簡単スライド作成【vscode-reveal】](https://qiita.com/kohki_takatama/items/3f14fd55d85ead59183e)

# ストア画像作成

1. vscode-revealで画像を作成する ← 記事で触れる内容
1. スクリーンショットを撮る

### ◇ テーマ選び
今回は`beige`を使用します。
```md
---
theme: 'beige'
---
```
<img src="https://revealjs.com/images/docs/themes/beige.png" width="500px">

### ◆ アプリのスクリーンショット（アプリ説明）
今回のアプリは画面に相当するものがないので、使用方法をスクリーンショットとします。

今回作成したのは以下の画像です。

| 英語 | 日本語 |
|:-:|:-:|
| ![スクリーンショット 2024-12-11 6.30.41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/85a87dca-6420-93b7-dc8a-705c1f070422.jpeg)  | ![スクリーンショット 2024-12-11 6.30.36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/2ff6b4fb-3f8a-205f-b383-888420d92fb3.jpeg)  |

```md
<style type="text/css">
  .reveal h1,
  .reveal h2,
  .reveal h3,
  .reveal h4,
  .reveal h5,
  .reveal h6 {
    text-transform: none;
  }
  li {
    list-style: none;
  }
</style>

<!-- 使い方 -->

### Add Keyboard Shortcuts

- **Alt + →**: Switch to the next tab

- **Alt + ←**: Switch to the previous window

- **Alt + ↓**: Move the current tab to a new window

- **Alt + ↑**: Move the current tab to another window

**For Mac users**: Use **Option** instead of **Alt**.

---

### キーボードショートカット

- **Alt + →**: タブのフォーカスを切り替えます

- **Alt + ←**: ウィンドウのフォーカスを切り替えます

- **Alt + ↓**: タブを新しいウィンドウに移動します

- **Alt + ↑**: タブを別ウィンドウに移動します

**Mac ユーザー**: **Option** が **Alt** を代替します
```

### ◇ プロモーションタイル（小）
プロモーションタイル（小）は、検索結果などリスト表示時に使用します。

![スクリーンショット 2024-12-11 20.58.49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/32cbbcfb-e6ca-ea27-0b87-f3eb1322da07.jpeg)

今回作成したのは以下の画像です。

![スクリーンショット 2024-12-11 6.41.41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/f889cbea-7cb9-d721-fc40-8610cde274d9.jpeg)
```md
---
<!-- プロモーション タイル 小 -->

![](icon/icon128.png)

Window Switcher
```

### ◆ マーキープロモーションタイル
マーキープロモーションタイルは、ストアトップページ紹介に選ばれた際使用されます。
使用されることはないとは思いますが、作成してみました。

＜マーキープロモーションタイルについて＞

https://developer.chrome.com/docs/webstore/best-listing#promotional_images_promo_tiles_and_marquee_image:~:text=Marquee%20image%3A%201400x560,extension%20and%20brand




<!--
TODO: プロモーションタイルの画像
-->

今回作成したのは以下の画像です。

![スクリーンショット 2024-12-11 6.53.18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/2ab02c0b-50b0-aa0e-a4aa-9f3ef088ce57.jpeg)
```md
---
<!-- マーキー プロモーション タイル -->

## ![](icon/icon128.png) Window Switcher {style="display: flex; align-items: center; gap: 40px"}
```

`display: flex`：横並び
`align-items: center`：縦の中央寄せ
`gap: 40px`：画像ー文字間


:::note
### コード全体はこちら
<details><summary>折りたたみ</summary>


```md
---
theme: 'beige'
---

<style type="text/css">
  .reveal h1,
  .reveal h2,
  .reveal h3,
  .reveal h4,
  .reveal h5,
  .reveal h6 {
    text-transform: none;
  }
  li {
    list-style: none;
  }
</style>

<!-- 使い方 -->

### Add Keyboard Shortcuts

- **Alt + →**: Switch to the next tab

- **Alt + ←**: Switch to the previous window

- **Alt + ↓**: Move the current tab to a new window

- **Alt + ↑**: Move the current tab to another window

**For Mac users**: Use **Option** instead of **Alt**.

---

### キーボードショートカット

- **Alt + →**: タブのフォーカスを切り替えます

- **Alt + ←**: ウィンドウのフォーカスを切り替えます

- **Alt + ↓**: タブを新しいウィンドウに移動します

- **Alt + ↑**: タブを別ウィンドウに移動します

**Mac ユーザー**: **Option** が **Alt** を代替します

---

<!-- プロモーション タイル 小 -->



![](icon/icon128.png)

Window Switcher

---

<!-- マーキー プロモーション タイル -->

## ![](icon/icon128.png) Window Switcher {style="display: flex; justify-content: center; align-items: center; gap: 40px"}
```
</details>
:::

# 完成！

<!--
TODO: 完成画像
-->

以上、簡素ではありますが、vscode-revealを使ったストア画像作成方法でした。

Chrome拡張機能もご覧いただけると嬉しいです。


### ◇ ストアページはこちら

https://chromewebstore.google.com/detail/window-switcher/dncjkgegmdaengbamdminemkgadjaddl