
fwywd チームでは新ブログを Tailwind UI の Syntax を使用して実装予定です。

[Syntax - Tailwind CSS Documentation Template](https://tailwindui.com/templates/syntax)

記事の表示と記事作成画面のプレビューを揃えたい & 後々の Syntax 導入をスムーズにしたい目的で Tailwind UI の Syntax ベースの Markdown Viewer を実装しました！

## markdoc のライブラリをインストール

```bash
yarn add @markdoc/markdoc @markdoc/next.js -D
```

## next.config.js を書き換える

括弧の位置を間違えやすいので注意が必要です。

```jsx
// next.config.js

const withMarkdoc = require('@markdoc/next.js');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    deviceSizes: [340, 640, 768, 1024, 1280, 1440, 1980],
    domains: [],
  },
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md'],
};

module.exports = withMarkdoc()(nextConfig);
```

## Prose.tsx

Markdoc で変換したデータを children で渡し画面表示するコンポーネントです。

Tailwind CSS の prose というクラスによって余白や文字間を調節しています。

下準備として、clsx, @tailwindcss/typography をインストールします。

```bash
yarn add clsx -D

yarn add @tailwindcss/typography -D
```

tailwind.config.js に plugins を追記します。

```jsx
plugins: [require('@tailwindcss/typography')],
```

Prose.tsx の内容は以下です。

```tsx
// Prose.tsx

import clsx from 'clsx';
import { ReactNode } from 'react';

interface ProseProps {
  children: ReactNode;
  className?: string;
}

export const Prose: React.FC<ProseProps> = ({ className, ...props }) => (
  <div
    className={clsx(
      className,
      'dark:text-gray-400 prose prose-gray max-w-none dark:prose-invert',
      // headings
      'prose-headings:font-display prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]',
      // lead
      'prose-lead:text-gray-700 dark:prose-lead:text-gray-700',
      // links
      'prose-a:font-semibold dark:prose-a:text-primary-500',
      // link underline
      'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.primary.200))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.gray.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.primary.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]',
      // pre
      'prose-pre:rounded-xl prose-pre:bg-gray-900 prose-pre:shadow-lg dark:prose-pre:bg-gray-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-gray-700/10',
      // hr
      'dark:prose-hr:border-gray-800',
    )}
    {...props}
  />
);
```

Markdoc でデータを変換して Prose.tsx に渡すコンポーネントを作成します。

```tsx
// Markdown.tsx

export const Markdown = () => {
  const doc = `
  # heading 1
  
  ## heading 2

  1. ol
  1. ol

  - ul
  - ul
`;

  const ast = Markdoc.parse(doc);
  const content = Markdoc.transform(ast);
  const children = Markdoc.renderers.react(content, React);

  return (
    <Prose className={`${style.md} h-[600px] w-full overflow-auto border border-primary-800 p-2`}>
      {children}
    </Prose>
  );
};
```

余白や文字間は Tailwind CSS の prose でいい感じになっているのでテキストの大きさや色などの装飾を CSS モジュールで適用します。

マークダウン表示できます。

![1.png](/img/pages/tech/markdown-viewer-by-markdoc/1.png)

## Fence.tsx

マークダウンの表示はできましたがコードのハイライトはされない状態です。

Markdoc の Syntax highlighting を参考にして Tailwind UI の Syntax ベースでコードのハイライトを実装します。

[Common examples](https://markdoc.io/docs/examples#syntax-highlighting)

少し複雑でした。大まかな流れとしたら、

1. code をハイライトする `Fence.tsx` を作成する
2. code を取り出してハイライト適用するための config ファイル `node.ts` を作成する
3. Markdoc でデータ変換する関数に `node.ts` から config を渡す

といった流れです。

### code をハイライトする Fence.tsx の作成

コードをハイライトするための prism-react-renderer をインストールします。

```bash
yarn add prism-react-renderer -D
```

Tailwind UI からそのまま持ってきて型付けをしています。

`<Highlight>` に渡す code の children は String(children) としないと型のエラーが発生してしまうので注意です。

```tsx
// Fence.tsx

import { Fragment, ReactNode } from 'react';
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
import vsDark from 'prism-react-renderer/themes/vsDark';

interface FenceProps {
  children: ReactNode;
  language: Language;
}

export const Fence: React.FC<FenceProps> = ({ children, language }) => (
  <Highlight
    {...defaultProps}
    code={children === undefined ? '' : String(children).trimEnd()}
    language={language}
    theme={vsDark}
  >
    {({ className, style, tokens, getTokenProps }) => (
      <pre className={className} style={style}>
        <code>
          {tokens.map((line, lineIndex) => (
            <Fragment key={lineIndex}>
              {line
                .filter((token) => !token.empty)
                .map((token, tokenIndex) => (
                  <span key={tokenIndex} {...getTokenProps({ token })} />
                ))}
              {'\n'}
            </Fragment>
          ))}
        </code>
      </pre>
    )}
  </Highlight>
);
```

### ハイライトを適用させるための node.ts を作成

```tsx
// markdoc/node.ts

const node = {
  fence: {
    render: 'Fence',
    attributes: {
      language: {
        type: String,
      },
    },
  },
};

export default node;
```

### Markdoc でデータ変換する関数に config を渡す

```tsx
// Markdown.tsx

const ast = Markdoc.parse(doc);
const content = Markdoc.transform(ast, { nodes: node });
const children = Markdoc.renderers.react(content, React, {
  components: { Fence },
});
```

code がハイライトされます。

![2.png](/img/pages/tech/markdown-viewer-by-markdoc/2.png)

## まとめ

TypeScript の型付けと code のハイライト表示に苦戦しましたがなんとかなりました。

なにより Tailwind CSS の prose が便利でした！

少しマニアックなところですが参考になる方がいれば嬉しいです！


fwywd チームでは新ブログを Tailwind UI の Syntax を使用して実装予定です。記事の表示と記事作成画面のプレビューを揃えたい & 後々の Syntax 導入をスムーズにしたい目的で Tailwind UI の Syntax ベースで Markdown Viewer を実装しました！

【Azure App Service | Node.js】GitHub Actions を利用して継続デプロイしてみよう【 トラブルガイド付】

Markdoc （Tailwind UI の Syntax ベース）による Markdown Viewer の実装


Q. 「オンボーディングで最もしんどかった部分はどこでしたか？」

\ Azure App Service 一択ウ〜！/

Azure サービス群の中でも屈指の面倒臭さを誇る（当社比）Azure App Service でのデプロイ方法ガイド、始まり始まり。

本記事は[公式ドキュメント](https://docs.microsoft.com/ja-jp/learn/modules/javascript-deploy-expressjs-app-service/)を参考に作成しています。

## 使用技術

- Node.js
- Express.js
- Visual Studio Code
- [GitLens](https://gitlens.amod.io/)（Visual Studio Code の拡張機能）
- Azure App Service
- GitHub
- GitHub Actions

## この記事を読んでわかること

Azure App Service に GitHub Actions を使用してアプリケーションを継続的にデプロイするための具体的な手順。

つまり「**main ブランチへ push するたび自動的に Azure App Service へデプロイする**」ことができるようになります。

## この記事では説明しないこと

- サブスクリプション、リソースグループ、リソースなど Azure 特有の用語の数々。詳しく知りたい方は[こちら](https://docs.microsoft.com/ja-jp/learn/modules/javascript-deploy-expressjs-app-service/use-resource-group)をまず読んでみてください。
- Node.js や GitHub など使用技術に関する基礎知識

## 大まかな手順の流れ

1. デプロイしたいものを用意する
2. リソースグループを作成する
3. Azure App Service リソースを作成する
4. GitHub Actions が使えるよう準備する
5. CI/CD 経由でデプロイ

## 1. デプロイしたいものを用意

Node.js 製であればなんでも OK。基本の流れは同じです。

今回は Express.js でささっと用意しちゃいます。

[Azure が公式に用意しているサンプル](https://github.com/Azure-Samples/msdocs-javascript-nodejs-server)をクローン。

![1.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/1.png)

![2.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/2.png)

![3.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/3.png)

今回は「2-Deploy-app-to-azure」の中身だけ使用します。他は消しちゃって OK。

![4.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/4.png)

![4.5.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/4.5.png)

## 2. Azure Portal からリソースグループを作成

アカウント作成・サブスクリプションの設定についての説明・手順は省きます。

まだの方は Azure 公式サイトより無料アカウントを作成し Azure Portal へアクセス・ログインしてサブスクリプションの用意まで行ってください。

手順を詳しく知りたい人は[こちら](https://docs.microsoft.com/ja-jp/learn/modules/create-an-azure-account/)。

Azure Portal からリソースグループを作成していきます。

![5.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/5.png)

![6.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/6.png)

![7.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/7.png)

![8.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/8.png)

無事作成されれば成功。

## 3. Azure App Service リソースの作成

2で作成したリソースグループの中に Azure App Service リソースを作っていきます。

まずはプランの作成から。

![8.1.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/8.1.png)

![9.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/9.png)

Azure Service プランを選択し「作成」をクリック。

![11.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/11.png)

今回はさくっと試したいだけなので価格レベルを **Free F1** へ変更。**ここを変更しておかないと月額課金が発生するため注意！**

「確認および作成」→「作成」でリソース作成が完了します。作成まで少し時間がかかることもあるのでコーヒーでも啜りながら待ちましょう。

![12.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/12.png)

完了したら App Service で Web アプリのリソースを作っていきます。

![9.1.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/9.1.png)

![9.2.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/9.2.png)

![9.3.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/9.3.png)

「確認および作成」→「作成」で完了。こちらも時間がかかるためコーヒーをひと啜りしながら待ちましょう。完了後リソースに移動するとこんな感じ。

![9.4.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/9.4.png)

## 4. GitHub Actions の準備をしよう

まずは GitHub にレポジトリを作成しましょう。詳細な手順は省きます。GitHub アカウントを持っていない方は [GitHub 公式サイト](https://github.co.jp/)でアカウントを作成・ログインしてください。

レポジトリの作成が完了したらこんな感じのページが広がっているはず。URL をコピーしておきます。

![14.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/14.png)

1で開いていた Visual Studio Code へ戻ります。リモート先を自身で作成したレポジトリへ変更しちゃいましょう。

![16.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/16.png)

※ REMOTES なんて見当たらないよ！という人は拡張機能「GitLens」を導入してください。

![17.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/17.png)

name: origin

url: コピーした URL を貼り付け

完了したらさっそくコミット＆ブランチの発行を試してみてください。最新のものに反映されていれば成功。

![18.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/18.png)

ここからが本番。 GitHub Actions 経由でデプロイする準備を進めていきます。

3で作成した App Service へ移動し、GitHub Actions と連携させていきます。

![19.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/19.png)

![20.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/20.png)

保存するとあら便利、 GitHub 側で勝手に設定ファイルを生成してくれます。

![22.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/22.png)

## 5. CI/CD 経由でデプロイ

さっそく GitHub Actions 経由でデプロイしてみましょう。

やたら長ったらしい名前の `.github/workflows/main_fwywdazuredeployintro.yml`ファイルを `deploy.yml` へ名称変更しプッシュしてみます。

![25.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/25.png)

deploy.yml のデフォルト設定では「main ブランチに push した際にデプロイが走る」ようになっています。デプロイが終わったらさっそく確認しにいきましょう。

![23.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/23.png)

おや・・・ Azure App Service くんのようすが・・・？

![24.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/24.png)

**出たよ。親の顔より見た光景。**

アプリケーション起動時に出るエラー。Azure App Service 触ったことがある人は絶対に見たことあるやつです。私はもはや  :( を見ると首の後ろがキュッ・・・となります。

## :( Application Error に遭遇した時の対処法

基本は以下のステップで地道にエラーを潰していく形になります。

1. ログを確認する
2. 原因っぽい箇所を探して試行錯誤する

### 1. ログを確認する

Azure Portal で 該当する Azure App Service を開き「問題の診断と解決」を覗いてみましょう。下部にある「ウェブアプリダウン」をクリック。

![33.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/33.png)

現在7つの問題を抱えている模様。詳しく見ていきます。

![26.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/26.png)

### 2. 原因っぽい箇所を探して試行錯誤する

7つの問題のうち直接アプリケーションエラーを引き起こしていそうなものを探しましょう。

![27.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/27.png)

下から4つは「有料プランにアップグレードしてほしいな❤️と言っているだけ」「警告で起動失敗に関するものではなさそう」っぽいことが読み取れます。上の3つがアプリケーションエラーに関わっていそうです。さらに分析するとサーバーエラーは起動に失敗しているがために出ているものと予想されます。ここから「**コンテナクラッシュ・コンテナの問題を解決すれば起動できそう！**」と算段がつけられますね。

一番怪しげな「コンテナクラッシュ」から見ていくと・・・

![28.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/28.png)

原因がひとつ判明。**アプリをスタートさせるためのコマンドが設定されていない**ようです。さっそく設定しにいきましょう。左バーの設定内にある構成をクリックし全般設定を覗いてみます。

![29.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/29.png)

確かにスタートアップコマンドが空っぽになってますね。ではここに `npm start` ないし `yarn start` をいれよう！と通常はなるわけですが、**入れても動かないため注意**。直接 node コマンドを叩きます。`package.json` の start スクリプトを確認してみましょう。

![30.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/30.png)

`"start": "cross-env-shell DEBUG=express:* node index.js"`となってますね。`cross-env-shell DEBUG=express:*`はそれぞれ環境変数・デバッグに関するコマンドなので省略。`node index.js`だけ抜き出して入力・保存します。

![31.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/31.png)

「再起動しますか？」と聞かれるため了承して保存完了です。

ここで一度アプリを覗いてみましょう。

![32.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/32.png)

以前としてアプリケーションエラーは出たまま。まだ対処していないエラーが残っているからですね。もう一つの問題だった「コンテナの問題」を見てみます。

![34.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/34.png)

どうやらコンテナがタイムアウトしたせいで起動できていないみたい・・・というのが見て取れます。説明が若干分かり難いのですが、「アプリケーションの設定で`WEBSITES_CONTAINER_START_TIME_LIMIT`の設定時間を伸ばしてみてね」ということらしいです。さっそく変更しにいきます。

![35.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/35.png)

保存するとアプリケーションが再起動されます。これで正常に起動できるはずッ・・・

![36.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/36.png)

**で、できた〜〜〜！！！（クソデカボイス）**
おつかれさまでした・・・！

## トラブルガイド

最後に Next.js で作ったアプリケーションと NestJS で作った API をそれぞれデプロイした時に遭遇したエラーと対処法をご紹介。
同じ症状に苦しんでいるあなたに届きますように・・・！

### デプロイに時間がかかりすぎる

アプリケーションの容量が小さくない場合、デプロイまでに凄まじい時間がかかります。私の場合 Next.js で作った簡単な Todo アプリをデプロイするのに**50分**かかりました。50分待った挙句デプロイに失敗した日には泡吹いて倒れそうになります・・・（実体験）。

対処法として `deploy.yml` ファイルの中身をいじってアプリを zip 化→ GitHub Actions にアップロード→ zip を Azure App Service へアップロードするよう変更することが挙げられます。私はこれでデプロイ時間を**7分**まで短縮できました。恐るべきビフォーアフター！

参考に Next.js をデプロイした時のコードの中身を載せておきます。

```yaml
name: Build and deploy Node.js app to Azure Web App - fwywdTodoAppApi

on:
  push:
    branches:
      - main

  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    env:
      DATABASE_URL: ${{ secrets.DATABASE_URL }}
      DB_PASSWORD: ${{ secrets.DB_PASSWORD }}
      DB_USERNAME: ${{ secrets.DB_USERNAME }}

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'

      - name: yarn install, build, and test
        run: |
          yarn install
          yarn build
          yarn test-setup
          yarn test:unit 
          yarn test:integration

      - name: delete node_modules dir
        run: rm -rf node_modules

      - name: Zip all files for upload between jobs
        run: zip --symlinks -r next.zip ./*

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: next.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: yarn install production
        run: yarn install --production

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'fwywdtodoapp'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_630E8D07124C436791B1A377E09DC005}}
          package: next.zip

      - name: Delete zip file
        run: rm next.zip
```

### デプロイが途中で止まる

こちらもアプリケーションの容量がそこそこある時に発生。`node_modules` を `npm install` または `yarn install` する際ダウンロードに時間がかかりすぎてタイムアウトするパターンです。プロジェクトフォルダ直下に`.yarnrc` ファイルを作って以下を記述することにより回避可能。

```yaml
network-timeout 600000
```

### スタートアップコマンドに関するエラー

使用するフレームワークによってはデフォルトのスタートアップコマンドが効かないことがあります。私の場合は Azure App Service 内の構成→全般設定→スタートアップコマンドに以下を入力することで解決しました。参考にどうぞ。

Next.js の場合・・・`node_modules/next/dist/bin/next start`

NestJS の場合・・・`node dist/main`

### 何が原因でエラーが起きているのかわからないとき

「アプリケーションエラーが起きてる。問題の診断と解決を見たけどそれっぽいエラーが見つからない。なんでッ！？」

これもよく遭遇します。そんな時はログストリームをみるべし。

![38.png](/img/pages/tech/deployment-by-azure-app-service-for-nodejs/38.png)

アプリを再起動→ログストリーム（プレビュー）でリアルタイムにログ出力ができるためどこで失敗しているのかわかりやすくなります。

## 番外編： NestJS デプロイで詰まった時の解決策（体験談）

状況としては GitHub Actions で zip 形式でデプロイしただけの状態で Azure Portal で何も設定していない・・・という時間軸です。

経緯まで書くと大ボリュームになるので結論だけ置いときます。

1. `deploy.yml` の中身はこちら（デプロイ時間が短縮できます）。

```yaml
name: Build and deploy Node.js app to Azure Web App - fwywdAzureDeployNest

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip all files for upload between jobs
        run: zip --symlinks -r nest.zip ./*

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: nest.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'fwywdAzureDeployNest'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_2A62A5035C4241D78AC3A13D8D636DCA }}
          package: nest.zip

      - name: Delete zip file
        run: rm nest.zip
```

2. 「Azure App Service 内の構成→全般設定→スタートアップコマンド に `node dist/main` と入力する
3. 「Azure App Service 内の構成→ アプリケーションの設定→ 新しいアプリケーション設定」で「名前：WEBSITES_CONTAINER_START_TIME_LIMIT」「値：600」と設定
4. `package.json` の script 内にあるコマンド `“start:prod”` を以下に置き換える

```json
"start:prod": "yarn build && node dist/main",
```

5. main.ts のポート設定を変更する

```TypeScript
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const port = process.env.PORT || 3000;
  await app.listen(port);
}
bootstrap();
```

## この3つを抑えていれば Azure App Service も怖くない（多分）

- スタートアップコマンドが適切に設定されているか
- コンテナがタイムアウトしていないか
- その他、なんらかの理由でコンテナがクラッシュしていないか（ログストリームで確認可能）

特に上2つは Node.js でのデプロイだと再現性高く目にするエラー（当社比）なので真っ先に確認してみる価値アリ。
この記事で Azure App Service アレルギーに罹っている人が1人でも減りますように・・・！

Q. 「オンボーディングで最もしんどかった部分はどこでしたか？」答えは・・・\ Azure App Service 一択ウ〜！/ Azure サービス群の中でも屈指の面倒臭さを誇る（当社比）Azure App Service でのデプロイ方法ガイド、始まり始まり。

コードを書けるエンジニアが STUDIO をビジネス向けに使ってわかったメリットとデメリット


こんにちは！ fwywd 運営チームの高橋です！

私は前職、柔道整復師として働いていました。柔道整復師とはわかりやすく言うと「整骨院の先生」です。

大阪・東京あたりにお住まいの方は整骨院やマッサージ屋さんってたくさんあるなぁ。と感じたことがあるかもしれません。整骨院・鍼灸院・整体院・マッサージ院の件数は全国で 13 万件以上あり、その数コンビニの２倍以上です！顧客を激しく取り合っているような状況です。

もはや国家資格を持っていて施術ができるということは特別なことではなく、普通に働いている、経営しているだけでは将来不安な業界です。

そんな業界でプログラミングを習得し生き抜いてきた私が、**会社でもっと活躍したい**・**起業を成功させたい**という方に**プログラミング習得をオススメする理由**をご紹介します！

## 対象読者

- 働いている業界の将来に不安がある人
- 会社で成果を挙げて特別な存在になりたい人
- 起業して業務を効率よく進めたい人

## プログラミングを習得することで得られるメリット３選

### 売上を上げられる

ビジネスをする上で避けられない問題、それは**集客**です。どれだけいいサービスを提供していてもそれが必要な人に届けられなければ売上は上がりません。今の時代、 **Web での集客は必須**です。インターネットで調べて見つからないサービスは怪しいと言われるほどです。

プログラミングを習得することでホームページ・SNS や広告による集客ができ、売上を上げることができます。場合によってはプログラミングを習得していなくても Web での集客はできますが、習得しているとよりスムーズです。ホームページ制作や広告を外注するにしても知識があれば対等に議論ができるのでオススメです。

またサービス自体をプログラミングで作り売上を上げることも可能です。利用に料金が発生するアプリケーションや、ユーザーの利用は無料でスポンサーに広告掲載してもらうアプリケーションなどですね。

### コストを下げられる

集客ができるようになったら次にすること、それは**データの集計**です。データを集計・分析し現状を把握して次の展開を考えます。データの集計を例えば電卓などでしているとどうしても**人手や時間が必要**になります。

データの集計をプログラミングで効率化しその作業にかかる時間を短縮できれば、結果的に**人件費を下げることができます**。空いた人の手でより生産的な仕事をできれば**ビジネスが加速すること間違いなし**です！

### 論理的思考能力が身につく

プログラミングをしていると、「もし〇〇ならば △△」というような条件分岐をよく使います。この考え方は仕事をする上でもよくあることです。集計されたデータを元に仮説検証して「もし〇〇ならば △△」といったように仕事を進めることがよくあります。プログラミングを学習することで論理的思考能力が身につき、その時その時で**最適な手段をとりながら効率よく仕事を進める**ことができます。

## プログラミング学習、何から始めればいいの問題

プログラミングを学習したほうがいいんだね！で、何から始めればいいの？と思った方は、

[挫折よ、さらば。未経験からエンジニアになった私のプログラミング独学サイクル](https://fwywd.com/blog/2022072703)

を参考にしてみてください。目的が売上を上げることなのか？コストを下げることなのか？それによって学習内容が変わるので、ぜひ**ゴール地点を決めて学習**してみてください。

## この記事にたどり着いたあなたに fwywd はピッタリかもしれない

この記事を読んでいるということは、あなたは**会社でもっと活躍したい**・**起業して成果を挙げたい**と思っている方だと思います。

- **仕事を通して人生の価値を最大化したい**
- **望む世界を実現するために少しでも近道をしたい**
- **ビジネスを成功させて自由に生きるために挑戦したい**

そんな方に、 fwywd では**ビジネスの成功**に主軸を置き、技術（プログラミング力）・売る力（マーケティング力）・戦略（ファイナンス力）の習得をするためのコミュニティを運営しています。

あなたの希望を実現させるためのお手伝いができれば嬉しいです！

詳しくは以下からチェックしてみてください！

[挑戦しないことがリスクになる時代へ、学び方の革命を。fwywd（フュード）次期受講生募集中！](https://apply.fwywd.com/)


会社でもっと活躍したい・起業を成功させたいという方にプログラミング習得をオススメする理由をご紹介します！

ライター直伝！読みやすさに差をつける文章濃縮術

会社で活躍したい・起業を成功させたい人にプログラミング習得をオススメする理由



時間をかけて書いたのに・・・

「**君の文、なんか読み辛いね（ズバア）**」と言われた経験、ありませんか？

記事の書き方ガイド第3弾！いよいよ本命の「文章力」を高める秘訣を前職ライターの私古川が直伝しちゃいます！

【記事の書き方ガイドシリーズ】

第1弾：[もう悩まない！PV数がぐんぐん伸びるタイトルの付け方ガイド](https://fwywd.com/blog/2022051001)

第2弾：[適当につけてない？目を引く見出しで差をつけろ！記事の見出し整頓術3つのポイント](https://fwywd.com/blog/2022072702)

## 対象読者

記事や文章を書いた時に

- 「何が言いたいのがよくわからない」と言われて悲しくなったことがある
- 書いているうちに自分がこの文で何を言いたかったのかわからなくなってくる現象に悩まされている
- 自分の文章を「より読みやすく、分かりやすく」改善したいが方法がわからず困っている

人。

## 本文の役割

「より多くの人に読んでもらいたい」観点から記事内の重要な要素を3つ並べるとしたらどうなるか、皆さん考えたことはありますか？

[適当につけてない？目を引く見出しで差をつけろ！記事の見出し整頓術3つのポイント](https://fwywd.com/blog/2022072702)

で述べた通り私は「**タイトル>見出し>本文**」と思っています（詳しくは記事参照）。しかしながら当然「本文が担う役割」は非常に大きいです。タイトルと見出しが記事の初速をコントロールする担当であるとするなら、真に記事の価値を支えるのが本文と言ったところでしょうか。記事の内容はもちろんのこと、**文体が読み辛ければ読み手の離脱率は爆上がり**します。故に「読みやすく・分かりやすい・目が滑りにくい」文章を書けるようになることは記事を執筆していく上で非常に重要なわけです。

## 読み辛い文の特徴3選

この特徴にひとつでも当てはまる文がずらずらと並んでいると文章全体の品質がダダ下がりします。自分の文章の中でこれらを発見したら直ちに改善すべきです。

### 1. 文法が明らかにおかしい

私たちは人間なので書いているうちに誤字脱字が発生したり、ちょこっと助詞の使い方がおかしくなってしまったり・・・というハプニングは往々にして起こります。そういった「凡ミス」レベルの話でなくもっと大きい括りで「それはどう見ても変じゃない・・・？」と感じさせるような文法ミスがあった時、**書き手への信頼度は失墜**します。記事として致命傷となりかねないので最も気をつけたい部分です。

最近よく見かける間違いナンバーワン（個人調べ）を一例として挙げておきます。「〜ですが、〜ですが」など逆説の接続詞を連続で並べるケースです。

✖️「りんごはおいしいですが、みかんの方がもっと好きですが、酸っぱいです」

○「りんごはおいしいですが、みかんの方がもっと好きです。あの酸っぱさが好きなんです。」

NG 文で文の主旨が一気に迷子になったことに気づきましたか？「結局何が言いたいのか」非常に伝わり難くなります。やめましょう。

### 2. 読点「、」乱れ打ち

**0が理想、1個は OK、2個でギリギリ、3個以上でアウト**です。不要な読点は可読性を一気に引き下げます。たくさん読点を打ちたくなったときは1文の中に複数の主旨が混ざり込んでいないか確認してみましょう。1文1主旨が基本です。

0個：「このりんごおいしいですね。さすが青森県産です。また買いたいです。ごちそうさまでした。」

1個：「このりんごおいしいですね、さすが青森県産です。また買いたいです。ごちそうさまでした。」

2個（ギリギリ）：「このりんごおいしいですね、さすが青森県産、また買いたいです。ごちそうさまでした。」

3個（アウト）：「このりんごおいしいですね、さすが青森県産、また買いたいです、ごちそうさまでした。」

下に行けば行くほど一目瞭然の読み辛さになっていくことがわかるかと思います。0個 or 1個で常に留めておけるとベスト。

### 3. 1文の中に「言いたいこと」が複数混ざっている

1文が超長い人にありがち。大事なことなのでもう一度言います。**1文1主旨が基本**です。「2. 読点乱れ打ち」とも関連しています。読点を乱れ打ちしした長〜い1文は言いたいことが大量に混在する最強に読みづらい文となりやすいです。稀に1文を長く取っているにも関わらず主旨の一貫性をきれいに保って非常に読みやすい文章を書く人もいますが、これは相当なやり手ライターさんのみができる芸当です（弊社吉崎がこのタイプだな〜といつも尊敬しています）。初心者はやめときましょう。

### これだけは覚えて帰ってほしい10秒でわかる結論

- 文法正しく
- 1文1主旨
- 読点2個まで

## ライター直伝！読みやすい文章のヒケツ3選

「NG な部分はわかった。けれどもっと自分の文を読みやすく改善したいんだ！」というあなたに。

前職ライター  & 記事校正・今もこうして記事をつらつら書いている私が常に気を付けている秘蔵の言葉ダイエット法、教えちゃいます！

### 1. 基本は「徹底的に短く」

私、文章の理想系は「100%濃縮ジュース」だと思っています。1文をぎゅっと、ぎゅーーーーーっと濃縮して濃厚エキスにしたものを皆さんに飲んでいただくようなイメージ。

- なくても意味が伝わる単語
- 短く言い換えることができる単語

が存在しないか？常日頃から意識していくと徐々に身に付いてくるハズです。地道に取り組んでみてくださいね。

また手っ取り早く文を短くできる小技のひとつとして **「だ・である」調を採用する**のもオススメです。「です・ます」調に比べ自然と語数が少なくなるので労せずスッキリした文が書けます。採用 OK な環境であればぜひ試してみてください。ちなみに1記事の中で「だ・である」調と「です・ます」調をまぜまぜして使用するのは NG です。ご注意を。

### 2. リズム感を意識する

これはかなり感覚的なものも含まれているのですが、**「頭の中で歯切れ良く読める文章」を意識する**と文全体が垢抜けて見えるようになります。実際読んでいても「読みやすい・わかりやすい」と感じること間違いなし。私は以下の2点を特に気を付けています。

- 可能であれば「5・7・5」に
- 韻を踏んでいるかどうか

川柳やラップをイメージするとわかりやすいかもしれません。脳内でラッパーになって文章でラップバトルしてみましょう。「なんかリズムよく読めないな〜」と思ったら字を足し引きして整えてみてください。こちらも地道に行うことで頭ひとつ抜きん出た物書きになることができます。

### 3. 「それだけ読めば8割わかる」部分を強調する

記事を書いていると抜け落ちやすい悲しい事実。人はこちらが思っている以上に文章を読んでいないこともあるということ・・・。流し読みをされても記事の本質が伝わるよう、**「ここさえ読んでおけば意味は8割伝わる」部分を強調**しましょう。強調箇所が増えすぎると逆に可読性が下がってしまうため、見出しひとつにに1-2か所・多くても3か所ぐらいを目安にすると良いでしょう。

## 「いかがでしたでしょうか」禁止令

最後に個人的な意見100%で構成されている思いの丈を叫んで締めたいと思います。

**記事の終わりに「いかがでしたでしょうか」を付けるのを今すぐやめてくれ。**

一昔前に流行った暗黒の量産コピペまとめ記事が蔓延っていた時代を思い出すんですよ・・・（泣）文章術という観点から見ても、「いかがでしたでしょうか」が記事の本質を盛り上げる何かを担えているとは到底思えません。情報量0です。いち読者としては「いかがでしたでしょうか」より「あなたの今日の晩御飯は何か」が書いてあった方がよっぽど面白いな！と思います。今からお試しあれ！（圧）


時間をかけて書いたのに・・・「君の文、なんか読み辛いね（ズバア）」と言われた経験、ありませんか？記事の書き方ガイド第三弾！いよいよ本命の「文章力」を高める秘訣を前職ライターの私古川が直伝しちゃいます！

井の中の蛙が人の力を引き出す、群に対する教育の設計術 ~ 専門家が怖くて発言できない、こんな世の中に ~


## 大人になってから学ぶの辛くないですか？

子供のときより目的意思を持って学べる大人の学びは楽しいですよね。

でも、大人になってから学ぶことが億劫になったこともありました。  
その理由は**学びを共有する相手がいないこと**です。

もちろん今どきは SNS での繋がりで共有することもできますが、思わぬ落とし穴が...。  
気軽につぶやいたつもりが、専門家から**マサカリ**と呼ばれる技術的な指摘が飛んでくることがあります。

**ツヨツヨな人の意見だけが飛び交う上級社会と化した SNS**

子供のときほど無邪気に学べないこのご時世。  
専門家が怖くて発言できない、こんな世の中に。  
もっと大人が学びやすく、**人の力を引き出すことができる教育のあり方**があるのではないか。

今回は**教育系ベンチャー企業**であるキカガク代表の私（吉崎）が、この答えの１つとして考える「**群に対する教育**」を紹介します。  
なんと「**井の中の蛙**」がヒントなんです。

## 個に対する教育の加速

### オンライン動画でいつでもどこでも学べる時代へ

![01](/img/pages/blog/educational-design-for-groups/01.jpg)

私は 1991 年生まれ、現在 30 歳。  
私が中学生のときには塾に行くか、進研ゼミや Z 会の通信教育の教材を定期購入するかしないと学校以外の学びの環境はありませんでした。  
田舎でしたが親に送り迎えをしてもらい、クラスメイトの 9 割以上が塾に通っていた記憶があります。

それが７個下の弟の頃にはスタディサプリが登場し、スマホで動画を見ながら学ぶ時代に変わっていました。  
今では教育系 YouTuber の登場により、無料でも学べる環境が増えました。  
２次元だった教科書を時間軸も含めた３次元にするためには塾に通う必要がありましたが、それも動画教材の発展により家でも学べるようになりました。  
「**どこでも**」に変わった瞬間です。

そして、もう１つ変わったことが動画は「**いつでも**」視聴することができます。  
塾の授業では決まった時間に行かないと受けられなった**同期的**なスタイルから、**非同期**で授業が受けられるようになりました。

オンライン動画で学べる時代は「**いつでも、どこでも**」といった２つのパートで大きな変革をもたらします。

### 大人の教育も C2C でさらに加速

![02](/img/pages/blog/educational-design-for-groups/02.jpg)

学生に対する教育の話でしたが、もちろん社会人である**大人の学びにもオンライン動画は変革をもたらします**。  
しかも**大人の学びの方が相性が良いこと**もありました。

高校生までの教材は文部科学省が定める方針をベースにしているため、カスタマイズできる範囲が狭く、オリジナルの教材が作りやすいです。  
それに対して、大人の学びは社会で求められるありとあらゆるテーマが対象であり、企業とはいえ簡単にオリジナルの教材を作ることができませんでした。  
特に技術系などは日進月歩であり、コストを掛けて作ったコンテンツが翌年には使い物にならないこともあります。

ここに [**Udemy**](https://www.udemy.com/) を代表とした **Consumer to Consumer (C2C)** の教育サービスが登場します。  
個人でコンテンツを作るため、教材の質とのトレードオフはあるも、**多種多様なテーマの教材が提供可能**になりました。  
大人の学びに必要な需要を満たすことができ、私も多くの恩恵を受けました。

### 実はオンライン動画の終了率は低いという事実

![03](/img/pages/blog/educational-design-for-groups/03.jpg)

そんな「**いつでも、どこでも**」に加えて「**多種多様なテーマ**」という素晴らしい教育環境を提供しているオンライン教育にも**とんでもない落とし穴**があるのです。

それは**終了率が異常なくらい低いこと**。

以下の論文によると、ベンチマークとして大学の授業などを多く無料で提供している MOOCs (Massive Open Online Courses) の**平均終了率は 4~5%** なんです。  
海外の大学の最高峰の内容を最高峰の教授陣が手掛ける授業でも**ほとんどが視聴完了されない**のです。

▶ 参考文献：[組織を越えた Learning Analytics の可能性 − その批判的検討 − | 福井県立大学 山川修 氏 (2015)](https://www.jstage.jst.go.jp/article/konpyutariyoukyouiku/38/0/38_55/_pdf/-char/ja)

### 良い教育の構成要素は「教材」と「講師」の質だけ？

![04](/img/pages/blog/educational-design-for-groups/04.jpg)

**良い教育とは何か？** とよくある議題ですが、わかりやすい構成要素が「**教材**」と「**講師**」です。  
圧倒的にわかりやすい教材、そして圧倒的にわかりやすい解説をする講師。

恥ずかしながら、以前の私もこの２つを極めることが教育企業としての行く先だと思っていました。  
そういった意味では、これまでに累計 50,000 名を超えた方に受講していただいた AI の基礎を学べる [**[キカガク流] 人工知能・機械学習脱ブラックボックスコース**](https://www.kikagaku.ai/) は１つの完成形と言えるかも知れません。

ただし、このコースも**平均終了率は 約 10%** でした。  
先述した MOOCs の例よりは２倍程度の終了率となっていますが、それでも **90% の人は終了していません**。  
「**教材**」と「**講師**」が良い教育に対して寄与率の高い構成要素であれば、これを極めた結果としては **80~90%** の方が視聴完了するはずです。

つまり、**視聴完了してもらうためにはもっと他に寄与率の高い構成要素**があるのです。

> **補足 1**  
> 視聴完了だけを教育のゴールとして設計しているわけではなく、受講した人材の活躍を計測しています。多くのケースが視聴完了後から次のステップへ進むと想定されるため、活躍の前提として視聴完了を据えています。

> **補足 2**  
> ごく一部のオンライン配信でも学習が完了できる人には「教材」と「講師」の質が非常に重要と言えるため、弊社ではこれからもこの２点も追い求め続けます。これ以降は多くの人に目を向けるため、この視聴完了が高い人は議論の対象外とします。

### オンラインでもリアルタイムのライブオン研修がずっと人気な理由

![05](/img/pages/blog/educational-design-for-groups/05.jpg)

コロナ禍で教室に集まって学べる環境が提供できなくなりました。  
これにより、Zoom や Teams などのオンライン環境で講義を提供するように変わります。

オンラインであれば動画を撮影して、YouTube や Netflix のように**オンデマンド配信**で良いのでは？と仮説がありました。  
そこで、**リアルタイムで時間を拘束するライブオン研修**と、**いつでもどこでも受けられるオンデマンド配信の研修**の両方を提供してみます。  
もちろん値段はオンデマンド配信の方が安くライブオン研修の 1/2 ~ 1/3 程度です。

社会人向けの研修という前提ですが、どちらが人気だったかというと、圧倒的に**ライブオン研修**でした。  
**平均終了率は 95% 以上**と非常に高く、仕事の都合でどうしても抜けないといけない場合を除き、みなさんきっちりと終了されます。  
つまり、このライブオン研修にこそ、視聴完了してもらうために寄与率が高い構成要素が含まれているのです。

受講生へヒアリングを行い、なぜ視聴が完了できたのかを要素分解すると以下の３つがありました。

1. **時間の確保**（チームからの理解もある）
2. **仲間の存在**（モチベーションの維持）
3. **質疑応答**

3 番目の質疑応答に関しては、オンライン配信系のサービスでは Q&A を作って対応していることもあります。  
しかし、これがあっても終了率はそこまで高まっていないことを考えると寄与率はそこまで高くなさそうです。

つまり、**時間の確保**と**仲間**の２つが鍵であることが推測できます。  
しかも、同じ時間に学ぶという時間を確保すれば、必然的に同じタイミングで学ぶ仲間が生まれるので、これらは同時に満たすことができます。

ここから見えてきた教育に必要な構成要素として面白いのが、オンライン教育によって得られていた「**いつでも**」というパートを多くの人が本当は求めていなかったのです。

## 「個」から「群」に対する教育へ

### ずっと受けてきた学校の教育は群であった

![06](/img/pages/blog/educational-design-for-groups/06.jpg)

オンライン教育の加速は「**いつでもどこでも**」という視点以外に「**個人で学ぶ**」とも捉えることができます。

振り返ってみると、私達が学校や塾で受けてきた教育は常に集団、つまり「**群で学ぶ**」ように設計されていました。  
この学び方が平均終了率が高いという現代のオンライン教育の変遷から導かれたものではないと思いますが、原点回帰しています。  
ただし、昔と異なるのは「**どこでも**」という要素に関してはメリットが大きく、オンラインの恩恵は大きくあります。

大学も高いお金を払って一人暮らしをしなくても通えるようになりましたし、地方と都会の情報格差も減っています。  
また嬉しかった声としては、お子さんがいらっしゃる家庭でも自宅から受講できることで、学びに来てくれる方が多くなったことです。

これからの時代の教育は「**オンライン × 仲間**」といった**同期的な要素**も含んだものになると予想しています。

### 群に対する教育は経営目線の組織論がヒント

![07](/img/pages/blog/educational-design-for-groups/07.jpg)

「オンライン × 仲間」というと**オンラインサロン**がこの条件を満たしています。  
教育という文脈では語られることが少ないオンラインサロンですが、教育とマッチすると考えています。  
現在、私が主催している起業家コミュニティ [**fwywd（フュード）**](https://apply.fwywd.com) も**オンラインサロン**に近しいと言えます。

ただし、多くのオンラインサロンと異なる点もあります。  
私の知る限り多くのオンラインサロンは企画の発端であるリーダー格の人がいて、その人との繋がりを求める人が集まる**ぶら下がり型**です。  
**芸能人のファンクラブ**というとわかりやすいですね。

[**fwywd（フュード）**](https://apply.fwywd.com) では私との繋がりという面もありますが、それよりもコミュニティ間の会話を中心としています。  
これは私がこれまで作ってきた経営の経験に基づき**組織論**から設計しています。

### コミュニケーションには適切なサイズ設計が必要

![08](/img/pages/blog/educational-design-for-groups/08.jpg)

今の段階では以下のような構造を作っています。

1. チーム（5~8 人）→ 最も密に**同期**的にコミュニケーションを取る集団
2. バンド（30~40 人）→ **非同期**でコミュニケーションを取る集団（6 チーム程度のまとまり）
3. コミュニティ（全員）→ イベント等で出会う集団

人数が多くなってくると、バンドよりも大きな単位を随時作っていきます。  
この辺りはすでに**経営としての組織論**として適切なサイズ設計が議論されているため、先人の知恵をお借りするだけです。  
教育の問題は教育カテゴリーで議論したり調査しがちですが、結局は**組織が一番人を成長させており、経営の組織論で教育を見るべき**だと現在では私は考えています。

コミュニティとして全てをまとめないことには私の**失敗談**があります。

[**fwywd（フュード）**](https://apply.fwywd.com) の１期では合格した人から順次 Slack で作っていたコミュニティに参加してもらいました。  
最初は盛り上がったのですが、後から入ってくる人がコミュニティの適性の有無を問わず、ほとんど会話に参加できなかったのです。  
それも当然で、会話には**文脈** (**context**) の理解が不可欠であり、これがない状態だったと言えます。

どれだけ大きなコミュニティであったとしても、会話しているのはごく一部という経験がないでしょうか。  
これは後から参加した人の能力が低いのではありません。  
**会話に必要な構成要素を欠いている結果**なのです。

この失敗談から文脈を共有しやすいように、**目的を持った小さな単位のチームに分ける**こと。  
そして、**チームの始まりのタイミングを一斉にスタート（同期）すること**に決めました。

その結果、現在の [**fwywd（フュード）**](https://apply.fwywd.com) はコミュニケーションが以前よりも遥かに多くなりました。  
また、コミュニティオーナーの私一強のぶら下がり型からも徐々に解放されていき、望ましいコミュニティの形へ遷移しつつあります。

### 井の中の蛙が人の可能性を開花させる

![09](/img/pages/blog/educational-design-for-groups/09.jpg)

ここでようやく本題であった「**井の中の蛙**」です。

コミュニティ内のチームのサイズを小さく設計したデメリットは情報の正しさが確保しにくくなることです。  
答えを持たない素人同士の議論ではカオスになることがありますよね。

ここへの対策もあります。  
チームで解決できないことは１階層上のバンドに投げかけて解決していけるような流れがあります。  
また最終的には私が解決に手を貸すこともあります。

チーム内での議論がカオスになるデメリットもありますが、本当はメリットの方が大きいと思っています。  
**素人同士でも自信を持って議論することって大切じゃないですか**。  
**専門家に見張られていると、怖くて自分の意見って出せなくなりませんか？**

情報の成否は別としても自信を持って話ができることで主体性が高まり、情報を調べる感度が高まり、結果的に正しい情報にたどり着きやすくなると予想しています。  
これがまさに「**井の中の蛙**」です。  
最初から**海王類ばかりの大海原**に放たれると怖くて何もできなくないですか。  
それだったら、世間知らずかも知れないですが、まずは守られた井戸の中で成長できた方がよっぽど良いと思っています。  
成長したら次のもう少しだけ大きな井戸に入りかえることを繰り返せば良いじゃないですか。  
ルフィもそうやって七武海と戦えるレベルになっていき、今や四皇と戦うまでになりました。  
最初の島にいる敵から四皇のカイドウやビッグマムだったら、ワンピースはそうそうに終わっていたはずです。

**海王類ばかりの大海原**とワンピースの例えましたが、私達の学校教育もそうなっていました。  
私は超田舎の学校に入ったお陰で、成績優秀という位置づけをもらうことができ、だからこそ勉強が楽しかった記憶があります。  
まさに井の中の蛙で、高専に入ったら上には上がいて、京大に入ったらさらに上には上がいて...。  
それでも順番に上がっていけたから、なんとか今に繋がっています。

「**井の中の蛙**」って、実はどんなヒーローの物語にもあるのではないかと思います。

## 海王類ばかりの大海原よりも身の丈にあった井戸から

![10](/img/pages/blog/educational-design-for-groups/10.jpg)

Twitter で AI やソフトウェア・エンジニアリング、起業など専門分野について発言をするのは私でも恐怖でしかありません。  
こんな環境では**超一強**だけが育ち、それ以外の人は餌にすぎないとさえ感じます。

**ツヨツヨな人の意見だけが飛び交う上級社会と化した SNS**。  
まさに、海王類ばかりの大海原のようです。

いつの日か、こんな大海原でも暴れまわれる存在になるために、まずは**小さな井戸**から始めてみませんか。

詳しくは ↓↓ でお待ちしております。

▶ [**【次期受講生募集】起業家精神 × 学び方改革 = fwywd（フュード）| 挑戦しないことがリスクになる時代へ**](https://apply.fwywd.com/)

長文お読みいただき、誠にありがとうございました。

株式会社キカガク 代表取締役会長  
吉崎 亮介


子供のときより目的意思を持って学べる大人の学びは楽しいですよね。でも、大人になってから学ぶことが億劫になったこともありました。その理由は学びを共有する相手がいないことです。もちろん今どきは SNS での繋がりで共有することもできますが、思わぬ落とし穴が...。気軽につぶやいたつもりが、専門家からマサカリと呼ばれる技術的な指摘が飛んでくることがあります。ツヨツヨな人の意見だけが飛び交う上級社会と化した SNS。子供のときほど無邪気に学べないこのご時世。専門家が怖くて発言できない、こんな世の中に。もっと大人が学びやすく、人の力を引き出すことができる教育のあり方があるのではないか。今回は教育系ベンチャー企業であるキカガク代表の私（吉崎）が、この答えの１つとして考える「群に対する教育」を紹介します。なんと「井の中の蛙」がヒントなんです。

想像していたよりもはるか簡単に社長になった話


私、もう見飽きたんです・・・。「はじめに」「おわりに」が金太郎飴の如く並んでいる記事。

わかります、わかりますよ。記事の書き初めと書き終わりって、一番何書けばいいかわからなくなってしんどいんです。今こうやって偉そうに書いている私も昔は「はじめに」「おわりに」を使って量産記事をブリブリと世に出してしまっていましたとも。ぶっちゃけ人のこと言えないのです。

それでも、伝えたい。

**「見出しが魅力的でない記事は注文したチャーハンがご飯抜きだった時と同じくらいガッカリするんだ」ってこと。**

前職ライター・記事校正の私古川が送る記事の書き方ガイド第二弾、自身への戒めも込めてお送りいたします。

## 対象読者

下記に当てはまる人、必読！

- もっと PV 数をガンガン稼げるような記事をトバしていきたい
- さあ記事を書こう！と思って書き始めるものの見出しで手がスッ・・・と止まる
- 癖でついつい「はじめに」「おわりに」を使ってしまう

## この記事を読み終わった時、あなたは・・・

- タイトルだけでなく見出しも重要であることを理解し、
- 本文の内容に沿った適切な見出しを読者の興味を引く形でつけられるようになり、
- 「はじめに」「おわりに」を使わなくなること

が可能になっているハズです！

## 意外と知られていない「見出し」の重要性

記事を普段から書く人であれば「タイトル」「本文」がいかに大事であるか意識している人が多いのですが、「見出し」をしっかり意識して記事を書ける人は非常に、非常〜に少ないです。記事の書き方ガイド第一弾

[もう悩まない！PV数がぐんぐん伸びるタイトルの付け方ガイド | fwywd（フュード）powered by キカガク](https://fwywd.com/blog/2022051001)

でお伝えした通り、確かにタイトルは記事の生命線レベルで重要な位置付けを担っています。しかしながらタイトルを見て記事に飛んできた読者が次に目にするものは「序文」か「見出し」のどちらかとなることがほとんどです。普段から記事や本を読む習慣がついている人ほど見出しをさっと読んでどんなことが書いてあるのか？本文を読むに値するのか（＝自分の時間をこの記事のために使ってやってもいいのか）を値踏みしてから初めて本文を読み進める傾向にあります。新聞をイメージしてもらうとわかりやすいでしょう。よほど時間に余裕のある時でない限り、みなさん「読んでみたいな〜」と思った見出しの部分しか本文を読んでいないはずです。

つまり「より多くの人に読んでもらいたい」という観点から記事において重要な要素をランキングにすると・・・

**1位:：タイトル**

**2位：見出し**

**3位：本文**

となります。意外にも**見出し>本文**なのです。

### 盲点だからこそ差をつけやすい

記事をそこそこ書く人ですら意識されることが少ないにも関わらず重要な位置付けであるということは、**見出しを意識するだけで他の有象無象の記事よりも頭ひとつ抜きん出た記事が作れるようになる**ということです。タイトル・本文と比べ必要な文字数も少ないため改善コスパが非常に優秀。見出しでライバル記事と差をつけちゃいましょう！

## ここだけは気をつけたい。ガッカリ見出しの特徴

突き詰めると**1つだけ**です。 **本文に何が書いてあるのか全く伝わってこない見出しをつけちゃうこと**。「はじめに」「おわりに」が超典型例。「はじめに」「おわりに」という見出しを読んでも何が書いてあるのかさっぱり伝わってこないのです。代わりに「序文をキャッチーにまとめた見出し」「後書きで何を書いているのか伝わる見出し」をつけるだけで吸引力が100均の掃除機からダイ○ンへ進化します。

例えばこの記事、あえて序文の見出しをつけていません。ここに「はじめに」を添えた瞬間執筆者の私すら萎える吸引力ガタ落ち記事が爆誕します。代わりに「その見出し、あなたの記事を破壊してませんか？」とか「量産型見出しから卒業せよ」とか「ダサい見出し禁止令」とか付けるとどうでしょう。「はじめに」と比べて印象がガラッと変わるはずです。

## 今から試せる！見出し整頓術3選

### 1. 「何を書きたいのか？」まず整理

見出しをまず考えようとして手が止まる人におすすめ。自分が何を書きたいのかをつらつらとメモ形式で書いてしまいましょう。あるいは本文から先に書き始めてしまっても OK。書いてしまってから「ここで1番伝えたいことは何か」を考えて見出しにするだけで記事の印象はガラッと変わります。

例えばこんな文を作ったとします。どんな見出しがイイか、考えてみてください。記事の書き方ガイド第一弾より抜粋。

> タイトルは本・記事・映画・果ては Youtube のサムネイルなど媒体に関係なく成果物そのものの運命を左右する大きな力を持っています。 どれだけ質のいい中身を書いても「おっこれ気になるな〜」と読者に思ってもらえなければ素通りされてしまうからですね。 タイトルの付け方で総 PV 数は 2〜10 倍ぐらいは平気で変わってきます（肌感）。
タイトルだけで「続きが気になるぞ・・・！」と思わせることができたらあなたの勝ち。 読者の興味に火をつけましょう。同時に何についての記事なのか端的に表すことも忘れずに。
> 

[もう悩まない！PV数がぐんぐん伸びるタイトルの付け方ガイド | fwywd（フュード）powered by キカガク](https://fwywd.com/blog/2022051001)

私はこれに「タイトル＝記事の生命線と心得よ」とつけています。みなさんならどんな見出しをつけますか？

### 2. わかりやすさ最優先

見出しだけで「何について書かれているのか」パッと把握できるとパーフェクト。**見出しが本体、本文は補足**ぐらいの意識でつけるとより魅力的な見出しが作れるようになるハズ。短くまとめると読者の目にさっと入りやすくなるため、言葉のダイエットもできると◎。ちなみに私の見出しは往々にして長くなりがち・・・日々反省 & 改善中です。

### 3. 数字のフル活用

SEO の世界でもおなじみ「数字の活用」。よくタイトルでも使用されています。本記事でもまさに今使っています。なぜこれが好まれるかというと、**数字を入れるだけで「どんなことが」「どのくらい」書かれているか一瞬で判断できるようになる**からです。2の「わかりやすさ最優先」をスマートに達成できるわけですね。手軽に試せる上に効果大。「具体例」「特徴」「方法」など何かを列挙する際にぜひ試してみてください。

また数字を使った見出しをより美しく魅せるポイントのひとつに「**H3で使う**」があります。「H2」で「どんなものを列挙するつもりなのか」見せてから「H3 で列挙する」と目次の可読性が向上しさらに効果アップ。実際この記事も H2 は「今から試せる！見出し整頓術3選」、H3 で「3.数字のマジックをフル活用」としています。今すぐ試せる小技のひとつ、ぜひみなさんもお試しください！

## 少しの意識で効果大な「見出し改善術」、今から取り入れよう！

文量に対し知識・経験に大きく左右される「タイトル」や書き手の文章力がダイレクトに問われる「本文」と比べ、「見出し」は「本文で何を言いたいのか意識してみる」だけで劇的に改善できるコスパ最強パートです。吸引力に差がつく記事量産の手助けとなれますように！

私、もう見飽きたんです・・・。「はじめに」「おわりに」が金太郎飴の如く並んでいる記事。 わかります、わかりますよ。記事の書き初めと書き終わりって、一番何書けばいいかわからなくなってしんどいんです。今こうやって偉そうに書いている私も昔は「はじめに」「おわりに」を使って量産記事をブリブリと世に出してしまっていましたとも。ぶっちゃけ人のこと言えないのです。それでも、伝えたい。「見出しが魅力的でない記事は注文したチャーハンがご飯抜きだった時と同じくらいガッカリするんだ」ってこと。前職ライター・記事校正の私古川が送る記事の書き方ガイド第二弾、自身への戒めも込めてお送りいたします。

挫折よ、さらば。未経験からエンジニアになった私のプログラミング独学サイクル

起業家に必須のピッチ。投資家視点でわかった押さえるべき２つのポイント

適当につけてない？目を引く見出しで差をつけろ！記事の見出し整頓術3つのポイント


## はじめに

あなたは Google 広告を利用していますか？

告知したいことを検索した人に届けることができる「リスティング広告」など、とても有効な広告ツールだと思います。

しかし初心者の方だと難しいカタカナ言葉が多く、「どうすればいいのかわからない！」という方も多いのではないでしょうか。

私も、なんとか Google 広告を打つことはできたのですが、コンバージョンを設定する方法がわからず、かなりの時間 Google 広告 のコンバージョン設定に費やしました。

結論を言います。Thanks ページ を使うことでかなり簡単に設定することができました。

今回はこの方法を画像付きで解説していきます。

「Google 広告のコンバージョンの設定方法がわからない！」という方の参考になれば幸いです。

### 対象読者

- Google 広告のコンバージョンの設定方法がわからない
- Google アカウントを作成済み
- Google 広告を出稿済み

## 手順

### 1.Google Tag Manager の登録

今回は、Google Tag Manager（以後「GTM」と呼びます。） を使うので、 GTM の設定を行います。（今回、アカウント作成は省略します。）

「GTM」 と検索し、アカウントを作成します。

アカウント作成後、この画面が表示されたら、HTML にコードを埋め込みます。

![01](/img/pages/tech/google-ad/01.png)

React でページを作成された方は、こちらを使うと便利でした。

参考：[react-gtm-module](https://www.npmjs.com/package/react-gtm-module)

### 2. Thanks ページを作成

今回は私のランディングページでの例で紹介します。

資料請求のボタンを押し、回答が終わると Thanks ページに遷移し、
Thanks ページが表示されるとコンバージョンが発生すると設定します。

まずは Thanks ページを作成します。

そもそも Thanks ページとは、**資料請求などのコンバージョンとして計測したい行動をとった後に見せるページ**です。

例えばこんな感じ

![02](/img/pages/tech/google-ad/02.png)

**このページを通過したらコンバージョンとして計測するページ**のことです。

まずはこのページを作りましょう。

### 3. フォームを送信後 Thanks ページに遷移するように設定

次に、資料請求のフォームを回答後、先程作成した Thanks ページに遷移するように設定しましょう。

こちらの設定は HubSpot というサービスを使えば簡単にできます。

（今回は、HubuSpot の登録方法は省略します。）

フォームはここから作ることができます。

![03](/img/pages/tech/google-ad/03.png)

フォームの作成が終わったら、オプションからリダイレクトサイトの設定をします。

![04](/img/pages/tech/google-ad/04.png)

設定が完了したら、一度正常に動いているか確認しましょう。

### 4. Google 広告で設定

Thanks ページとフォームの設定が完了したら、Google 広告の設定をします。

Google 広告のページに移動します。

1. まずは、コンバージョンを新規作成します。

![05](/img/pages/tech/google-ad/05.png)

2. コンバージョンのページに移動したら、新しいコンバージョン アクションをクリックします。

![06](/img/pages/tech/google-ad/06.png)

3. ウェブサイトをクリックし、サイトの URL を入力します。
   入力が終わったら スキャン をクリックします。

![07](/img/pages/tech/google-ad/07.png)

4. 手動でコンバージョンアクションを選択し、このように入力します。

目標とアクションの最適化：ページビュー
値：すべてのコンバージョンに同一の価値を割り当てる
カウント：初回のみ

![08](/img/pages/tech/google-ad/08.png)

5. 保存して次へをクリックします。

6. この画面が表示されたら、 Google タグマネージャーを使用するを選択肢、こちらのコードをコピーします。

![09](/img/pages/tech/google-ad/09.png)

7. コピーをしたら、完了をクリックしましょう。

### 5. Google TagManager での設定

後すこしで完成です！頑張りましょう！

1. GTM のサイトに移動し、「新しいタグを追加」> **タグの設定の右上にある鉛筆マーク**をクリック > 「google 広告のコンバージョン トラッキング」を選択します。

![10](/img/pages/tech/google-ad/10.png)

2. 先ほどコピーした「コンバージョン ID」と「コンバージョン ラベル」をペーストします。

![11](/img/pages/tech/google-ad/11.png)

3. 次に、コンバージョンリンカーのタグを作成しましょう。
   **「コンバージョン リンカーのタグがコンテナにありません。」の右にある作成**をクリックし、
   名前を付けて保存します。

![12](/img/pages/tech/google-ad/12.png)

4. 次に、下にある**トリガーを設定**します。
   トリガーを新規作成し、以下のように設定します。（変更点）

![13](/img/pages/tech/google-ad/13.png)

5. **名前を付けてタグを保存**しましょう。

最後に動作確認をしましょう。

右上にある**プレビューをクリック**します。

このような画面が出たら、URL を入力します。

![14](/img/pages/tech/google-ad/14.png)

実際に Thanks ページまでの流れをやってみましょう。

「Tag Fired」のところにタグが読み込まれていれば成功です。

![15](/img/pages/tech/google-ad/15.png)

GTM のメイン画面に戻り、右上の公開を押しましょう。

![16](/img/pages/tech/google-ad/16.png)

わかりやすい名前を付けて、公開をクリックすると完成です。

お疲れさまでした！

![17](/img/pages/tech/google-ad/17.png)

## 最後に

今回は、Thanks ページを使った Google 広告のコンバージョンの設定方法を解説しました。

Thanks ページを使えば、比較的簡単にコンバージョンの設定ができます。

コンバージョントラッキング設定の参考になれば幸いです。


あなたは Google 広告を利用していますか？告知したいことを検索した人に届けることができる「リスティング広告」など、とても有効な広告ツールだと思います。しかし初心者の方だと難しいカタカナ言葉が多く、「どうすればいいのかわからない！」という方も多いのではないでしょうか。私も、なんとか Google 広告を打つことはできたのですが、コンバージョンを設定する方法がわからず、かなりの時間 Google 広告 のコンバージョン設定に費やしました。結論を言います。Thanks ページ を使うことでかなり簡単に設定することができました。今回はこの方法を画像付きで解説していきます。「Google 広告のコンバージョンの設定方法がわからない！」という方の参考になれば幸いです。

ソフトウェア設計のい・ろ・は

【画像で解説】Thanks ページを使った Google 広告のコンバージョントラッキング


## はじめに

「あなたが誰であって、どんな経験をしてきて、**あなただから言えることは何でしょうか？**」

この質問に読者の皆さんは明確に応えることができるでしょうか。

もちろん、１週間前の私もそうでした。しかし、今はここができると自信を持って言うことができます。

今回は**この成長を遂げられた理由や方法**について紹介します。

### fwywd チームでのインターンシップに参加

私は fwywd １期生として起業家を目指し、仕事を辞めてこの４月から淡路へ移住しました。約２ヶ月、全力で日々を過ごしていましたが、まだ自分自身に能力が明確に足りないと感じていました。

そんな時に、fwywd のオーナーである吉崎さんから **fwywd チームのメンバーとして働くことができるインターンの募集**がありました。すでに起業家として活躍している人の直属として修行することができれば、自分自身に足りない能力を見つけることができるだろうと期待して応募しました。そして、まだインターンが始まって、１週間ですが私が**劇的に成長した**のは事実です。その裏側には何があったと思われるでしょうか。

これから「**どのようなすごいノウハウを教えてもらえるのだろう？**」と気になっている方の期待には応えられないと思います。
もちろん、私が今まで知らなかったノウハウや知っていても正しく活かせていなかった知識などたくさん得たものはありますが、今回私が得た一番大きなものは**ノウハウではありません**でした。

それにもかかわらず、なぜ劇的に成長できたのか実際に体験したことを踏まえて見ていきましょう。

### この記事で伝えたいこと

結論を言うと、「**自分のポジションをとれていない言葉や意見に価値はない**」と言うことです。

オーナーの吉崎さんから「**誰にでも言えることをあなただけの言葉で**」とこれまで何度も教えていただいていたのに、私は fwywd インターンに参加するまで本当の意味を理解できていませんでした。

### 対象読者

- 自分の言葉で伝えることが苦手
- そのビジネスを「なぜあなたがやるのか？」に応えられない
- 周りと同じ意見しか出すことができない

と悩んでいる方

## LP 制作の過程を通して学んだのはノウハウではない

### インターンシップで取り組んでいる内容

まず、インターンでやったことを簡潔にまとめると

1. fwywd 2 期募集の説明を受け、ユーザー目線で fwywd がなぜこれから必要かを雑記の量重視で自分の言葉でまとめる
2. 企画草案の作成
3. ワイヤーフレームワークでの文言レベルに整理
4. ワイヤーフレームワークの作成
5. デザイン発注

たった、この**５つだけ**です。

この項目だけ見ていると、「**Landing Page (LP) 制作はやったこともあるから、特に得られるものは無いんじゃないか？**」と思うかもしれませんが全くそんなことはありません。

fwywd のオーナーである**あの吉崎さんが何の意図もなくこのテーマに取り組ませるはずがない**のです。

一見するとただの LP 制作のタスク、ですがその裏に**劇的に成長するための設計**が隠れているのです。

実際にインターンへ参加した私なりの視点で、そのポイントを紐解いていこうと思います！

### ユーザー目線とは？

はじめに行ったのは 2 期募集の説明や fwywd が生み出していきたい人材の話、そしてその想いを聞いて 「なぜ fwywd が必要なのか？」を**ユーザー目線**で**自分の言葉**でまとめることです。

まずは**もうこれ以上出てこない**というまで、いや、さらにそこからこれまで fwywd へ参加して感じてきた価値、なぜ必要なのかをひたすら書き出し「**発散**」します。（参考 : [収束と発散](https://fwywd.com/blog/entrepreneurial-ideas)）

レビューをもらい、量も申しぶんありませんでした。

この時点で私は、**ユーザー目線の意味**を正しく理解していないことに全く気づいていませんでした。

### 「0 点です」

そして発散した言葉を「**収束**」させ、より伝えたいことを明確にし企画草案へとまとめ受けたレビューは果たして...

「**悪くないですが良くもないですね、組織への貢献という面では全く価値を生み出していないでしょう。**」

まさに、あなたが 1 日かけて作ったものは「**0 点です**」と言われたような感覚でした。  
※ もちろん、吉崎さんからはその前後でしっかりとフォローの言葉や成果に対するレビューであり、個人に対する攻撃ではないことなど丁寧にフォローしていただいていました。

私がやったこととしては、ペルソナに対して考えを廻らせ、ゴールと現状のギャップを訴求軸に fwywd が生み出したい人材とその想い、そこに自分目線での意見も加えての作成。
ユーザーである自分の目線を加えているのだから、間違っていないのではと思っていました。

### 組織へ貢献するとは

確かに、初めの企画草案は**ユーザー目線**での意見や答えがあり、それは間違いではないです。

ですが組織が求めているのは、運営やオーナーが予想できる範囲外のユーザー目線や意見であり、

「**良い意味で組織と差分が大きい考え方や視点」**

これこそが、**無かったものを生み出し組織への貢献**となります。

まだスキルも経験も無い人間が提供できる価値として、この考え方や視点は自分の事業の営業をする際にも非常に有効なものです。

## 自分の言葉で伝えるには？

このように、私は一度大失敗をしてまた 0 から企画草案をつくり直すことにしました。

ただ、その大失敗のおかげで意識や視点が劇的に変わり「**自分のポジションだからこそ生み出せる文言や視点**」で物事を捉えることができるようになりました。

具体的に何をしたのかというと、

- 対象をもう一度自分の言葉で言い直してみるとどのような表現になるのか？
- 組織から見た捉え方との差分はどこにどの程度あるのか？
- これまでの人生も踏まえ渡邉智彦という人間からの目線でしか言えないことは何か？

この 3 点を発散で書き出した全ての言葉や考えに対して行いさらに深掘りです。

この工程を、繰り返すことで２回目のレビューでは最初と同じ fwywd のことを説明しているのに全く違った企画草案となり、「**あなただからこそ言える価値を生み出す**」ことが出来ました。

そして、自分の言葉で伝える力が劇的に向上し、組織へ貢献 0 だった状態から自分にしかない価値を生み出せる存在へと成長することが出来ました。

## 終わりに

今回は私がインターンに取り組んで学んだことをまとめましたが、結局、記事を読んだり知識を得ることも大切だけれど実際に参加して**当事者となって体験しなければ劇的に成長することはできない**とも強く感じました。

また、私なりの視点で見た**成長するための設計**は fwywd が日頃から大切にしている自力で取り組んでみて失敗しながら学んでいくことなのかと思いました。

それに加え、**方向性は示すけれども自分で考える余白をしっかりと残して発破をかけるという吉崎さんの絶妙なレビュー**があることかなと思います！

そして、**まもなく fwywd 第 2 期の募集が始まります**。

私が劇的な成長を遂げたように自分も成長したいと思う方はぜひ **fwywd 第 2 期への挑戦をお待ちしています！**

### 著者について

![watanabe](/img/authors/watanabe.jpg)

名前 : 渡邉智彦

前職 : ソムリエ＆フレンチ料理人

Twitter : [@nabeo654147](https://twitter.com/nabeo654147)


「あなたが誰であって、どんな経験をしてきて、あなただから言えることは何でしょうか？」この質問に読者の皆さんは明確に応えることができるでしょうか。もちろん、１週間前の私もそうでした。しかし、今はここができると自信を持って言うことができます。今回はこの成長を遂げられた理由や方法について紹介します。

仕事をしながら起業活動をすることのメリット・デメリット

ビジネスモデル探しに迷っている人が最初にすべきこと

あなただから言えることにこそ価値がある


## はじめに

### 野原ひろしの足は臭いけど偉大

みなさんはクレヨンしんちゃんに出てくる野原ひろしをご存知でしょうか。野原しんのすけの父親で営業マンとして一家を支えています。その野原ひろしですが、実は「足が臭い」ということで度々いじられています。そのひろしのエピソードで子供の頃に見て忘れられないものがあります。

いつものようにしんのすけが、父ひろしの足は臭いといじります。すると母親のみさえが以下のように言います。

「これはお父さんが毎日お客さんを訪問して汗をかいている証拠。ありがたいのよ。」

父親の偉大さや労働の大変さを伝える良い話ですよね。ただ、大人になってからこの話を振り返ると「リモートという手段があるからだんだんそういった足を使って顧客先を訪ねることはなくなるのかなぁ」とも思っていました。

しかし、今起業活動をしている視点から考えるとこれは完全に間違いでした。

**足を使って顧客先を訪問することは非常に価値のある行為で今後もなくなりません。**

以降では、上記のように私が確信した理由や、実際に顧客を訪問し感じたこと、これから顧客訪問に行く方へのちょっとしたアドバイスなどを記載していきます。

### 本記事の対象読者

対象読者は以下のとおりです。

- 起業の経験が浅い初心者起業家の方
- 自分のビジネスアイディアに需要があるか不安になっている方

### 前提

本題の前に前提と言葉の定義をはっきりさせておきます。

この記事で語る顧客訪問とはいわゆる「訪問販売」とは違い、商品を買ってもらうことが目的ではありません。需要の有無や業界の情報収集などをする「市場調査」が主目的です。

この市場調査はいつ誰が行うかというと新規サービス・ビジネスを立ち上げようとしているときに起業家の方が行うものです。

（本当はもっといろいろなタイミングがありますが、筆者の体験に基づいて記載できるのはここまでです。）

この前提で以降を読み進めて頂けると幸いです。

## なぜ足を使った市場調査が必要になるのか

### 当事者目線を持たないと共感は呼べない

最初になぜ足を使ったリサーチが必要になるのかを、自分の経験を踏まえてお話します。

私は、ある程度ビジネスアイディアが固まってきた段階でその内容を他の人に話してフィードバックをもらいました。

※ビジネスアイディアの作り方については[**「起業したいけどアイディアがないときどうするか」**](https://fwywd.com/blog/2022042803)の記事で詳細に記載しています。

有益なフィードバックをたくさん頂けたのですが、特に刺さったのは学生時代の友人から言われた「当事者としての目線が足りない」という意見でした。

正直に言うと、始めはいまいちピンと来ませんでした。しかし、振り返ってみると自分のプレゼンは耳当たりのよい言葉が並んでいるものの、自分の意見のみの主張でした。肝心の顧客側がどのように感じているのかという視点が不足していたのです。外から偉そうに「こんな問題があってこれをこんな感じで解決できます。これはビジネスになります。」と主張する自分よがりなメッセージだったと言えます。

「実際の顧客はそのサービスやプロダクトを本当に必要と感じているのか、もっと解決して欲しい課題はないのか」、といった要素が欠けていると顧客からの共感は呼べないと学びました。

関連する話として、fwywd オーナーの吉崎さんが配信する [**fwywd radio**](https://open.spotify.com/show/0rkAbkopOGEpMLJMME6nlQ?si=J9bAKxktRECj7rzrdIDo8Q&nd=1) でも、顧客と話をする中で道ができていく様子やその重要性が語られています。この話を聞いて自分の感じたことは間違っていなかったなと確信しました。

### 当事者目線を持つためのリサーチ

では当事者目線を持つためにはどうすればいいでしょうか。

一番良いのは自分が当事者そのものになることです。食事関連のビジネスなら自分が顧客となって食事をし、旅行関連のビジネスなら自分が旅行をするのが一番です。

一方でそれだけでは効率が悪かったり、完全に自分が当事者になれない領域のビジネスもあったりします。（学生向けのビジネスを考えている人が実際に時を遡り学生に戻ることは不可能です。）そこで重要なのが、顧客の意見を実際に聴くということです。

顧客の意見を聴く際に、リモートでの対応にするか、現地に行って直接お話をするか迷われることもあるはずです。この２つは使い分けが必要でしょう。

起業初期で顧客がいないときや、初対面の方が相手の場合は可能な限り実際に会って話をすることをおすすめします。実感として実際に現地に行くと、それだけで相手は「そこまでの労力をかけてくれるのであれば話を聞いてみようかな」という気持ちになってくれますし、話が広がりやすいです。

一方で、ある程度関係性ができている顧客が相手の場合はリモートでの対応もよいでしょう。

伝えたいのはどんなときも必ず対面で話をしようということではありません。顧客と直接話しする機会を作ると思いも依らぬメリットを享受する可能性があり、その事実を軽んじてはいけないということです。家で悶々と考えて行き詰まっている人は特に実際に顧客と対面で話をしてみることをおすすめします。息抜きでクレヨンしんちゃんを見る機会があればこの話を思い出してください。

以下では実際に顧客訪問することで感じたメリットを具体的に列挙します。

## 実際に顧客訪問をして感じた３つのメリット

### １．説得力が生まれる

一番大きいメリットは自分の言葉に説得力が生まれることです。

顧客から直接仕入れる情報の鮮度はとても高いですし、自分がしていた勘違いなども話をする中で矯正されていきます。結果として、より正確な表現や数字で自分のビジネスを語れるようになり、顧客の声を聞くことで自信を持って話すことができます。

もちろん、このメリットはリモートで対応したときでも言えるのですが、個人の感覚としては対面の方が広く深くいろいろな話をしてくれます。上述したように「ここまで来てくれたからには何か協力しよう」と思っていただけるのが人情ということですね。

### ２．ファンを作るきっかけになる

自分という存在をその業界に広めるきっかけを作れます。当たり前ですが直接会って話をした人というのは記憶に残りやすいです。自分の人間的魅力で相手を夢中にさせることができれば、その人がファンになってくれる可能性だってあります。そうなると数珠繋がりで他の人を紹介してもらうことができ自然と人脈が形成されていきます。

ビジネスを始めるにあたって影響力を持つことの重要さは fwywd のオーナーである吉崎さんがラジオや fwywd のコミュニティの中で何度も発信しています。

ではその影響力を持つためにはどうすべきか、という問に対しての解の１つが顧客と直接会うということだと私は考えています。

### ３．想像力やアイディアが磨かれる

顧客と話すうちに思いもよらぬヒントやアイディアが出てくることがあります。これは顧客訪問をすることで、その場所の雰囲気・匂い・音・相手の表情などを感じ取って自然と頭が働く結果だと考えています。話をする中でもっと直接的に「こういうサービスがあるとありがたい」と言及してくれる人もいるでしょう。

また、**顧客の解像度があがると自問自答のレベルも飛躍的に上がります。**

「こういうサービスはどうだろうか、でも、以前訪問した人はこんなことを言っていたから、ここをもっと改善する必要がある」といった想像力が働くようになるのです。

## 考えなしで行くのは非効率

ここまで読むと顧客訪問の重要さはわかっていただけたことでしょう。それと同時にお伝えしたいのは考えなしで顧客先へ訪問しても成果は得られないということです。最低限、以下の項目は自分の中で整理した方がよいでしょう。

- 自分が最終的に目指す世界観
- 自分が持っている仮説
- どんなことを質問したいのか（Yes or No で答えられない聞き方の方がよいです）
- もしあれば作ったプロダクトやサービスの HP（完成していなくてもよい）

あとは、相手は何者でもない自分のために時間を割いているということを忘れず、礼儀を持って対応しましょう。

## おわりに

いかがでしたでしょうか。本記事では、足を使って顧客訪問をすることの意義やそのことで得られるメリットを紹介しました。

地道なことですし、すごく遠回りに感じる人もいるでしょう。しかし、人生の成功の裏には必ず地道な活動があるではないでしょうか。少なくとも私の今までの人生はそうでした。はじめから上手くできたことなど何ひとつとしてなく、地道な活動を継続することで最後に華が開くという経験が何度もありました。

この記事が多くの初心者起業家の支えとなり、１つでも多くのビジネスが前に進むことを祈ります。

最後までお読みいただき、誠にありがとうございました。

## 筆者について

fwywd 1 期生として活動しています。現時点では会社員（システムエンジニア）と平行して活動中です。 学生時代のすべてを捧げた馬術の世界をよりよくするための事業を検討しています。 ビジネスアイディアの概要や日々の活動などは以下をご覧ください。 起業に興味がある方、馬術関係者の方などは是非フォローしてください。

- [HP（日本の馬術部プロジェクト）](https://www.wellrhythm.com/)
- [SNS (Twitter)](https://twitter.com/senju797)


みなさんはクレヨンしんちゃんに出てくる野原ひろしをご存知でしょうか。野原しんのすけの父親で営業マンとして一家を支えています。その野原ひろしですが、実は「足が臭い」ということで度々いじられています。そのひろしのエピソードで子供の頃に見て忘れられないものがあります。いつものようにしんのすけが、父ひろしの足は臭いといじります。すると母親のみさえが以下のように言います。「これはお父さんが毎日お客さんを訪問して汗をかいている証拠。ありがたいのよ。」父親の偉大さや労働の大変さを伝える良い話ですよね。ただ、大人になってからこの話を振り返ると「リモートという手段があるからだんだんそういった足を使って顧客先を訪ねることはなくなるのかなぁ」とも思っていました。しかし、今起業活動をしている視点から考えるとこれは完全に間違いでした。足を使って顧客先を訪問することは非常に価値のある行為で今後もなくなりません。以降では、上記のように私が確信した理由や、実際に顧客を訪問し感じたこと、これから顧客訪問に行く方へのちょっとしたアドバイスなどを記載していきます。

親でも職場でもなく自分が最大のドリームキラーだった話アドバイス

起業家一年生の「意思決定」 やりたいことの見つけ方

プレゼン資料を作成する正しい手順！伝えたい人の感情を理解すべし

もう悩まない！PV数がぐんぐん伸びるタイトルの付け方ガイド


## はじめに

### 概要

自分のサービスに値段をつけることは一筋縄でいきません。とくに一度決めた価格から値上げをすることは、コストをかけて獲得した顧客が離れてしまう要因となりかねないからです。

私は、現在 BtoC ビジネスを始めるべく準備をしています。私も自らのサービスの価格設定に悩み本や動画で調べていました。そこで出会ったのが、西野亮廣さんが講演会で話していた「VIP 戦略」です。VIP 戦略は平等なサービスを作るのではなく、格差をうまく利用することでサービス全体の満足度をあげる手法です。

こちらがその講演会の動画です。  
[▶ 【永久保存版】西野亮廣の「生き残るための VIP 戦略」を全編公開します](https://www.youtube.com/watch?v=hFV5qZyKZPo)

今回の記事では具体例を出しながら「VIP 戦略」とはなにかについて解説します。

この記事を読むと

- **マーケティングが学べる**
- **経済的格差社会を活用できるようになる**
- **価格設定を工夫してお金のない人にもいいサービスを提供できるようになる**

これからサービスに値段をつけていく方には必見の内容になっていますのでぜひ最後まで読んでいただければと思います。

### 自己紹介

安井海都　(Twitter：[@A1123Kaito](https://twitter.com/A1123Kaito))

大学卒業後、2 年間繊維専門商社でアパレルの企画・生産を行っていました。そこで技術力が高い職人さんの工賃の値切りが常態化していることに疑問を持ち、これまでの常識を捨てすべてのものの価値の再定義を目指す「Rethink Revalue」をミッションとし活動しています。

## VIP 戦略の活用事例から学ぶ

### ラスベガスのホテルはなぜ安い

ラスベガスにある**ベラージオホテル**をご存知でしょうか。巨大な噴水があるホテルです。世界一のエンターテイメントの街であるラスベガスでもトップクラスの格付けが行われています。

![ラスベガス](/img/pages/blog/2022050401/01.png)

実は、**このホテルの最安値は 1 泊 1.5 万円程度**で設定されています。繁忙期のビジネスホテルくらいの値段で宿泊が可能です。想像より安いと感じたのではないでしょうか。

一方、1 番高い部屋はどうでしょうか。こちらは招待がなければ入れないので公式の値段が出ていませんが、聞くところによると **1 泊 2,000 万円程度**ではないかといわれています。もちろん 1.5 万円の部屋だからといって、遠くにあるぼろぼろの別館に連れて行かれるわけではありません。

では、なぜベラージオホテルのような超有名なホテルで 1 泊 1.5 万円という割安な部屋を提供できるのでしょうか。

それは 1 泊 2,000 万円で宿泊してくれている VIP がいるからなんです。**VIP が余分にお金を出してくれているという構造が割安なサービスを作り出せる要因となっています。**

### USJ のユニバーサル・エクスプレス・パス

**USJ も VIP 戦略が非常に上手なことで有名**です。USJ ではユニバーサル・エクスプレス・パスというパスを購入するとアトラクションへ乗る際に、通常とは違う列へ並ぶことができます。人気なアトラクションですと 2 時間待ちになることも少なくない中、ほとんどの場合、このパスさえあればで並ぶ時間を 30 分以下に短縮できます。**USJ はエクスプレスパスを作る事で、VIP が高い値段を支払って他の人も一定のいいサービスを受けられる構造を作っています**。4 つのアトラクションを並ばずに乗れるパスは 7,000 円〜という価格で販売されています。USJ の 2022 年のパークチケット価格が 9,000 円程度と考えると、決して安いものではありません。一部のお金に余裕のある人が＋ α でお金を支払っているからこそ、その他大勢の方が 9,000 円でパークに入場できています。エクスプレスパスを無くし、「全員が平等なサービスであるべきだ」という考えであれば、チケット代は現在の価格から +500 円〜 +1,500 円が適正価格となるでしょう。  
※上場を廃止しているため、具体的な数字を出せず申し訳ありません。

今回の例では格差というほどの値段差ではないかもしれません。しかし、**通常よりもお金を多く支払ってくれる人がいるからこそ、大多数の方々が本来の価格よりも安くサービスを受けられているということは理解できたはずです。**

### なぜ安く提供するのか？

ここは今回の本題ではないので短くまとめますが、ベラージオホテルが安い部屋を提供する意味はブランドという付加価値が必要だからです。ベラージオホテルでの付加価値はラグジュアリーブランド（ステータス）の提供です。そして西野氏は **ラグジュアリーブランドとは『認知度』-『普及率』であると表現しています**。

もう少し簡単に言うと、**みんなが知っているけど「あまり持っていない・経験できないもの」がラグジュアリーであるということです**。 だからこそ認知度を上げるために、ベラージオホテルは割安な部屋を用意しているということです。VIP が高いお金を払うのに見合う付加価値が必須となります。

### 「儲ける = 悪」の日本

**日本では儲けるというのはあまりいい事だと思われていません**。ここでいう儲けるの定義は原価率の低いモノを指します。原価が 100 万円のものを 200 万円で販売しても問題はありませんが、原価が 1 万円のモノを 200 万円で販売すると批判が殺到してしまう現象にフォーカスを当てています。後者を買いたいという人がいても、「そんなものはぼったくりだ！」と批判されてしまうものです。とくにデザインや時間といった無形の価値は軽視されやすいです。

多くの場合は批判を覚悟して、作り上げていくしかないかもしれません。批判している人は、そのサービスを最初から購入する気がないというケースが多いからです。最近だと堀江貴文氏がクラウドファンディングの 10 万円のリターンが自身との食事に設定したことで炎上していました。

## おわりに

平等な価格設定は貧乏が損をする。言葉は乱暴ですが、ここまで読んでいただいた方には意味が理解できるのではないでしょうか。VIP が高い値段を支払ってくれるからこそ、自分たちは本来の訂正価格より安くサービスを受けられます。

事業を作る側としては、多くの方に自分のサービスを広げたいのであるならば、VIP が満足をする付加価値を作っていくことが必要なのではないかと思います。最後まで読んでいただきありがとうございました。

普段は Twitter（[@A1123Kaito](https://twitter.com/A1123Kaito)） 、YouTube（[KAITO-BLOG](https://www.youtube.com/channel/UCbhCbx2ZDFUvJ2pRx4OQNYw)） で起業家の想いや普段の生活を配信しています。フォローしていただければ嬉しいです！


自分のサービスに値段をつけることは一筋縄でいきません。とくに一度決めた価格から値上げをすることは、コストをかけて獲得した顧客が離れてしまう要因となりかねないからです。私は、現在 BtoC ビジネスを始めるべく準備をしています。私も自らのサービスの価格設定に悩み本や動画で調べていました。そこで出会ったのが、西野亮廣さんが講演会で話していた「VIP 戦略」です。VIP 戦略は平等なサービスを作るのではなく、格差をうまく利用することでサービス全体の満足度をあげる手法です。

いま注目の音声メディア！Podcast 配信の始め方とうまく話せる３つのコツ

ラスベガスでは常識の “VIP戦略” とは？


## はじめに

**いま、音声メディアが熱い**ことをみなさんご存知でしょうか。音声メディアとは、**Podcast**（**ポッドキャスト**）と呼ばれる配信方法のことを指しています。昔風にいうと**ラジオ**ですね。これをインターネット経由で配信するネットラジオのことを Podcast と呼んでいるのです。

そして、この Podcast にいま注目が集まっているのです。ネット社会の成長に伴って YouTube など動画での配信ができるようになった今、なぜ昔のラジオに戻っているのでしょうか。本記事ではこの Podcast が注目を集める理由から始まり、実際の収録から配信の方法、そして、うまく話すことができるためのおすすめのテクニックまで紹介します。

## 音声メディアのブーム到来？

### なぜ音声メディアに戻っているのか

いまやスマートフォンを使って誰でも手軽に動画を撮影することができ、YouTube へ無料で動画をアップロードして公開できる時代になっています。そんな中、なぜか原点回帰するように**音声メディア**である **Podcast**（**ポッドキャスト**）に注目が集まっています。

「Podcast 聴いてる？」と知り合い何人かに尋ねてみると「高校受験のときに英語の講座を聴いてたよ。懐かしいね。」と回答が多くありました。私もそんな存在だと思っていました。

少し話が脱線しますが、我々、平成生まれ（筆者は平成３年生まれ）にとっては、そもそもラジオ文化はあまり馴染みがありません。CD や MD（懐かしい！）とともに育ち、そしてそれが MP3 プレイヤーになり、いまやスマートフォンと統合されました。さらに、Spotify や Amazon Music などの音楽をサブスクリプションで提供するサービスが当たり前となり、音源を購入することすらなくなりました。中学時代には少ないお小遣いで CD を買ったり借りたりするのが楽しみの１つでしたが、現代の中学生にはすでに想像できない世界かも知れません。

そして話を戻すと、当時の iPod（これすらも懐かしい）に音源をコピーするときに使っていた iTunes になにかあったなぁという程度の Podcast でした。すでにこの記憶も 10 年近く前の話であり、私が YouTube に出会う前だったかと思います。要するに **Podcast はそんなに使われていなかったし、マイナーで古い存在だと私含めて多くの人が認識している**のです。

ただ、ここに**黒船**が現れました。みなさんも記憶に新しい **Clubhouse** の登場です。芸能人や有名な起業家の人たちから話題になり、恐ろしいほどのスピードで**音声メディア**という存在が普及しました。いまは私の周りでほとんど使っている人はいなくなった印象ですが、Twitter のスペースという機能などに影響しています。

これは予想ですが、この Clubhouse を発端に多くの人が気づいたのではないでしょうか。

「**音声だけ聴いているのってめっちゃ楽じゃん。**」

「**音声だけ届けるのってめっちゃ楽じゃん。**」

YouTube など動画メディアはとても面白いのですが、ユーザー視点でずっと映像を見続けるのが疲れてきたのです。そして、**動画の編集は恐ろしいほど大変**であり、ユーザー以上に動画のコンテンツ提供者が疲弊していたと思います。

### 誰が聴いているのか

きっかけは色々あると思いますが、私の周りはこの頃から音声メディアという選択肢も入ってきました。YouTube での動画編集は疲れたけれど、音声だったら収録してすぐに公開できるから、手軽なテーマでも話せるし良い。

私は 2020 年のコロナウィルスの影響でフルリモート出社に切り替わった人になにか情報を届けられないかと [stand.fm](http://stand.fm) で**オンライン社内報**に取り組みながら、音声メディアの手軽さの可能性を感じていました。

音声メディアは車を**運転しながら聴いている人**、**通勤しながら聴いている人**、**仕事をしながら聴いている人**が多い印象です。YouTube ではエンタメとして消費されがちですが、聞き手のシチュエーションとして仕事モードになっていることが多いため、ビジネス中心の話でも受け入れられやすいメリットがあります。

**これからビジネスを始めようと思っている人にはピッタリの媒体**かも知れません。

### 収録から配信までの流れ

実は Podcast で配信するのは**とっても簡単**なのです。**私は Podcast で配信してみようかな？と思い立った２時間後には公開していました**。

その理由は収録から公開までできる **[Anchor](https://anchor.fm/)** という Spotify 社が提供するアプリがあります。これをスマートフォンにインストールして、あとは**収録ボタンを押してスマホに語りかけるだけ**です。**収録後に BGM を選択すれば自動的にラジオ風の心地良い BGM も追加されます**。１人で話している声だけでは少し寂しいのですが、BGM が追加されることでとても聞きやすくなります。

そして、なんといってもここまでの機能があっても全て**無料**！

Anchor は初期設定では Spotify のみで公開されますが、設定をすることで Apple Podcast や Amazon Music などでも同時に配信することができます。もちろん無料です。

せっかくなので本格的に始めたいと思うのであれば**マイク**をアップグレードすると良いでしょう。私のおすすめは Yeti です。20,000 円弱とマイクには少し高いと感じるかも知れませんが、これぐらいしか機材を準備しなくても良いので奮発すると良いでしょう。良い声は良い印象を与えますよね。また、オンライン会議が多くなった今、マイクの音質が良い人を見ると、私は「わかってるなぁ！」と感じます。リモートワークではラジオ収録以外にも出番が多いので良い製品を買ってみると良いでしょう。

- [ロジクール G Blue Yeti Blackout Edition ゲーミングマイク コンデンサーマイク](https://www.amazon.co.jp/dp/B0822PMBTZ/ref=cm_sw_r_tw_dp_D1H3D4YJAZQR4FAKG1HR)

### どのぐらい時間がかかるの？

私が１時間程度の話をする場合の作業と時間の目安です。

- 企画（10~15 分）
- 収録（1 時間）
- Anchor 上でアップロード・BGM 追加・公開作業（10 分）

私の経験上、動画編集の場合 10 分の動画に対して半日ほどの編集作業をしていました。実に**再生時間の 25~30 倍程度**の編集作業に時間を要していました。

それに対して、音声メディアであれば、1 時間に対して 1 時間 30 分程度で終わります。**再生時間の 1.5 倍程度**で終わるのです。最高ですよね！

## うまく話せる３つのコツ

私は **fwywd radio** をこの４月から配信開始し、現在 13 本リリースしました。**それぞれ１時間程度ひとりで話しており、毎回どれだけ準備しているの？**とよく尋ねられます。どのような準備を行って配信に臨んでいるか。その**うまく話せるための３つのコツを初公開**します。

### １．事前に話の大筋を決めておく

１時間の収録に対して、話の大筋を収録前の 10 分ほどでメモ書きをしながら決定します。前日のうちに配信タイトルの候補を何個か書き出しておきます。例えば「フックと回収エンジン」「資本主義」「情報発信の方法」など。このネタは**その日に誰かに話した内容をヒントにしている**ため、ネタが尽きることは基本的にはありません。逆に言うと、**ちゃんと他の人と会話していることが前提である**とも言えます。fwywd での起業家を目指す人達に一緒に生活しながらアドバイスをすることがネタの源泉になっているわけです。

そのテーマを中心に「**何をどの順に話していくべきか**」に関して、メモを書きながら並べ替えていきます。ちなみに、１本の収録に対して以下のようなメモ書きをしています。基本的にはアドリブではなすのですが、最終的な話のゴールを決めておかないと、話している最中に迷子になってしまいます。あとは**その時の収録を楽しみながらひたすら話していく**感じですね。

![実際の企画メモ](/img/pages/blog/2022050302/01.png)

### ２．噛んでも気にせずに進める

話している最中に噛むこともよくあります。きっちり編集された動画では噛んでいるところや間をカットすることが当たり前になっていますが、**音声メディアでは気にしなくて良い**と思います。逆に編集がないことで、その場で話を聞いているような雰囲気もでるのでラジオ感が出ます。

聴いている側に回るとさらにわかりやすいのですが、**音声メディアは手が空いているので他の作業をしながら聴くことが基本です**。だからこそ、多少の言い間違いなどはほとんど気になりません。

この編集作業が不要であったり、言い間違いをその場で言い直して修正するだけで良ければ気持ちがめちゃくちゃ楽になります。制作側のコストが低いということは**続けやすさ**にも大きく影響します。私は YouTuber として動画撮影をして動画編集をしてというのはよっぽどメリットがないとできないなぁと感じていますが、音声メディアぐらいの手軽さであれば、まぁ楽しいから良いか！という感じで続いています。

### ３．ルーティーンを決める

動画と比較すると手軽であることは間違いありません。そうとは言っても、**一般に公開される情報である以上、言葉選びなどは常に気を使います**。１時間の収録でも体力を結構削られます。これを経験すると思いつきで話すことが続かなくなってきます。

だからこそ、重い腰を上げるための**ルーティーン**が重要です。

私の場合は朝６時に起きて、筋トレを軽くして、行き 10 分ランニング、帰りの 20 分歩きながらラジオで話しているイメージをする。そして、少し熱めのシャワーを浴びて収録に臨みます。６時に起きても収録は８時からです。収録終わりが９時。公開が９時半ごろです。

こういった収録系は収録前のルーティーンを作れないと三日坊主になってしまうので、**生活の一部に組み入れることが重要**ですね。

## おわりに

いま注目の音声メディア Podcast に興味を持っていただけたでしょうか。本記事では注目を集めている背景の紹介から、実際に配信する方法やコツを紹介しました。

**fwywd radio** では起業家のリアルを配信しています。起業や社内での新規事業に興味を持っている人はもちろんのこと、教育についてもよく触れています。また、新しいテーマとしては Web3 や DAO についても話しています。収録の裏側を知っていただいたことでより楽しく聴いていただけるのではないでしょうか。

最後までお読みいただき、誠にありがとうございました。

株式会社キカガク 代表取締役会長
吉崎 亮介

[▶ Twitter のフォローお待ちしています](https://twitter.com/yoshizaki_91)

### fwywd radio の配信テーマ

- #1 起業家としての一歩目に必要なことは？信頼よりも真実を
- #2 新規事業はオペレーションファーストが鍵
- #3 心との向き合い方
- #4 フックと回収エンジン
- #5 資本主義としての組織の作り方
- #6 相手に伝わる情報発信
- #7 教えない教育
- #8 起業のファイナンス
- #9 起業家の特徴と誤解
- #10 起業家、最初の１ヶ月
- #11 起業の現実 feat. 安井海都
- #12 リーダーシップとマネージメント

### fwywd radio を聴く（無料）

- [Apple Podcast](https://podcasts.apple.com/jp/podcast/fwywd-radio/id1621229889)
- [Spotify](https://open.spotify.com/show/0rkAbkopOGEpMLJMME6nlQ?si=J9bAKxktRECj7rzrdIDo8Q)
- [Amaon Music](https://music.amazon.co.jp/podcasts/c90a7a3d-380c-4daf-aed7-ad3a98cdf774/fwywd-radio)


いま、音声メディアが熱いことをみなさんご存知でしょうか。音声メディアとは、Podcast（ポッドキャスト）と呼ばれる配信方法のことを指しています。昔風にいうとラジオですね。これをインターネット経由で配信するネットラジオのことを Podcast と呼んでいるのです。そして、この Podcast にいま注目が集まっているのです。ネット社会の成長に伴って YouTube など動画での配信ができるようになった今、なぜ昔のラジオに戻っているのでしょうか。本記事ではこの Podcast が注目を集める理由から始まり、実際の収録から配信の方法、そして、うまく話すことができるためのおすすめのテクニックまで紹介します。

マーケティング