オンライン工場見学をWebサイトで案内したい製造業のための無料コード配布

移動が制限されている現在、オンラインで工場見学や製品サンプルの説明などを行うことができないだろうか？と試してみましたのでご報告します。合わせて、コピペで使える「オンライン工場見学」案内ページを配布します。自社でオンライン工場見学を行ってみたい製造業の方、コピペして、自社のWebサイトに貼り付けてご使用ください。(無料)

オンライン工場見学とは？

オンライン会議アプリZoomを使ってミーティングを設定し、お客様を招待します。御社のスマートフォンを通じて対話を行いながら、設備や製品サンプルなどの説明を行うことができます。お客様にお越しいただかなくても、現場・現物を見ながら打ち合わせが可能です。オンライン会議の良いところは、通常は工場訪問した人しか現場・現物を見ることができませんが、複数人で同じ映像を見ながらディスカッションできることです。

実際にどのような感じになるのか？

下記は、離れた場所Aにある電子工作品をスマホで映しながら、場所Bにあるパソコン上に表示された映像を録画したものです。ぜひ一度社内でもテストを行って感覚を掴んでみてください。意外と良いです。撮影に使っているのはiPhone7plusの格安スマホですので、最高環境でもなんでもありません。

Zoomでオンライン工場見学、実施手順

1.Zoomアカウントを取得し、アプリをインストールする。
2.ミーティングをスケジュールする。
3.お客さまへ、ミーティングに参加する情報をお送りする。

1.Zoomアカウントを取得し、アプリをインストールする。

パソコンからZoomのWebサイトよりサインアップしてアカウントを取得します。スマートフォンにはZoomのアプリをインストールし、同じアカウントでサインインしておきます。

2.ミーティングをスケジュールする。

パソコンでサインインし、最初に「設定」より設定を行います。「「ブラウザから参加する」リンクを表示します」にチェックを入れます。これにより、お客様はZoomをインストールしなくても会議に参加できるようになります。

次に「ミーティング」より、「新しいミーティングをスケジュールする」をクリックします。下記は標準的な設定です。

「ホスト前の参加を有効にする」にチェックを入れておくとホストがいなくてもミーティングが開始できます。ホストとは、ミーティングをスケジュールした人です。ミーティングをスケジュールする人と、現場でスマートフォンを操作する人が違うZoomのアカウントを使用する場合にはチェックを入れましょう。「待機室を有効にする」にチェックが入っている場合、参加者はホストの許可がなければ入室できません。

保存してミーティングを作成すると、「招待状をコピーする」というリンクが表示されますので、URL、ID、パスワードをコピーしましょう。

3.お客さまへ、ミーティングに参加する情報をお送りする。

URL、ID、パスワードを送付する際に、ひとつ注意点があります。お客様もZoomをインストールされている場合は、URLをクリックするだけで会議に参加できます。

Zoomをお持ちでない場合、アプリはインストールしなくても良いですが、サインアップはしていただく必要があります。事前にアカウントを取得していただくようにお願いしましょう。ZoomがインストールされていないパソコンでURLをクリックすると下記の画面が表示されます。

Zoomをインストールするようにファイルがダウンロードされますが、インストールしなくても「ブラウザから参加」をクリックし、お名前を入力すれば会議に参加可能ですので、その旨を伝えておくと良いでしょう。

「オンライン工場見学」の案内ページを自社Webサイトに追加する

「オンライン工場見学承っています」というページを自社Webサイト内で公開し、問い合わせを得られるようにしましょう。そのための見本ページのコードを配布します。(見本ページはこちら)下記のコードを全てコピー(コード内にマウスカーソルを置き、Ctrl+Aで全選択、Ctrl+Cでコピーできます)して、Wordpressやその他ホームページの中に貼り付けていただいてご使用ください。

@media screen and (min-width:640px) {
#zoom_page #container {
	width: 100%;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 60px;
	font-family: "メイリオ", sans-serif;
}

#zoom_page #container .sp_only {
	display: none;
}

#zoom_page #container img {
	width: 100%;
	height: auto;
}

#zoom_page h1 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  font-size: 36px;

}
#zoom_page h1:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 320px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
  
}

#zoom_page #container p {
	font-size: 24px;
	line-height: 44px;
	text-align: left;
	margin-top: 30px;
	margin-bottom: 40px;
}

#zoom_page #container h2 {
	text-align: left;
	font-size: 24px;
	padding: 15px;
	background-color: #d9d9d9;
	
}

#zoom_page #container h3 {
	font-size: 30px;
	line-height: 42px;
	color: #0d99c5;
	font-weight: bold;
	background:  url(https://www.web-keiei.com/images/img_06.jpg) no-repeat;
	height: 47px;
	text-align: left;
	padding-top: 2px;
	margin-bottom: 30px;
	margin-top: 40px;
}

#zoom_page #container h3 span.num {
	color: #ffffff;
	margin-left: 14px;
	margin-right: 20px;

}

#zoom_page .left_box,
#zoom_page .center_box,
#zoom_page .right_box {
	display: inline-block;
	vertical-align: top;
}

#zoom_page .left_box {
	width: 45%;
	max-width: 400px;
}

#zoom_page .center_box {
	width: 35px;
	margin-right: 10px;
}

#zoom_page .right_box {
	width: 45%;
	max-width: 365px;	
}

#zoom_page .left_box img,
#zoom_page .right_box img {
	width: 100%;
	height: auto;
}

#zoom_page #container .left_box p,
#zoom_page #container .right_box p,
#zoom_page #container p.s_wide {
	font-size: 18px;
	line-height: 30px;
}

#zoom_page #container p.s_wide {
	width: 560px;
	margin-left: auto;
	margin-right: auto;
}
#zoom_page #container img.zoom_btn {
	width: 100%;
	max-width: 538px;
	height: auto;
	
}

}

@media screen and (max-width:639px) {
#zoom_page #container {
	width: 94%;
	padding: 3%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	font-family: "メイリオ", sans-serif;
}

#zoom_page #container .pc_only {
	display: none;
}

#zoom_page #container img {
	width: 100%;
	max-width: 557px;
	height: auto;
}

#zoom_page h1 {
  position: relative;
  margin-bottom: 1em;
  font-size: 30px;
  line-height: 42px;
  display: block;
  padding-bottom: 10px;
  border-bottom: solid 2px #000000;

}
#zoom_page h1:before {
  content: '';
}

#zoom_page #container p {
	font-size: 16px;
	line-height: 28px;
	text-align: left;
	margin-top: 30px;
	margin-bottom: 40px;
}

#zoom_page #container h2 {
	text-align: left;
	font-size: 20px;
	padding: 10px;
	background-color: #d9d9d9;
	
}

#zoom_page #container h3 {
	font-size: 20px;
	line-height: 32px;
	color: #0d99c5;
	font-weight: bold;
	background:  url(https://www.web-keiei.com/images/img_06.jpg) no-repeat;
	height: 47px;
	text-align: left;
	padding-top: 8px;
	margin-bottom: 30px;
	margin-top: 40px;
}

#zoom_page #container h3 span.num {
	color: #ffffff;
	margin-left: 18px;
	margin-right: 30px;

}

#zoom_page .left_box,
#zoom_page .center_box,
#zoom_page .right_box {
	display: inline-block;
	vertical-align: top;
}

#zoom_page .left_box {
	width: 100%;
}

#zoom_page .center_box {
	width: 100%;
	margin-right: 10px;
}

#zoom_page .right_box {
	width: 100%;
}

#zoom_page .left_box img,
#zoom_page .right_box img {
	width: 100%;
	height: auto;
}

#zoom_page #container .left_box p,
#zoom_page #container .right_box p,
#zoom_page #container p.s_wide {
	font-size: 18px;
	line-height: 30px;
}

#zoom_page #container p.s_wide {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
}

</style>

<h1>Zoomでオンライン<br class="sp_only">
工場見学受付中</h1>

<p>
当社では、ミーティングシステムのZoomを使用したオンライン工場見学を受け付けています。サンプル品を見たい、設備を見たい方は、ご連絡ください。
</p>

<h2>Zoomを使用したオンライン工場見学の流れ</h2>

<h3><span class="num">1</span>Zoom会議室へ入室します</h3>

<dl class="left_box">
<dt><img src="https://www.web-keiei.com/images/img_01.jpg"></dt>
<dd>
<p>
当社からミーティング用URLを送信いたします。時間になりましたらアクセスしてください。
</p>
</dd>
</dl>

<dl class="right_box">
<dt><img src="https://www.web-keiei.com/images/img_02.jpg"></dt>
<dd>
<p>
Zoomアプリをインストールしていない方は、「ブラウザから参加」をクリックして、名前を入れていただくと参加できます。
</p>
</dd>
</dl>

<h3><span class="num">2</span>当社のスマホからの映像が見られます</h3>

<p class="s_wide">パソコン(またはタブレットやスマートフォンも可)に、当社のスマートフォンから映し出される映像が見えます。サンプルのご説明や、工場設備のご説明をさせていただきますので、見たい箇所をご指示ください。</p>

<h3><span class="num">3</span>ミーティングの終了</h3>
<p>
ミーティングが終了しましたら、弊社からZoomをクローズしますので、お客様に行っていただくことはございません。対面での工場見学＆ミーティングと同じように、お気軽にご質問ください。
</p>

</div>

</div>

コードご利用上のご注意:
・コードの改変は自由に行っていただけます。
・お問い合わせボタンのリンク先は、自社Webサイトのお問い合わせページへリンクを張ってください。
・コードは自由に利用いただけますが、コードや内容がで原因で起こったトラブルには、当社は責任を負いません。

コロナに負けず、知恵を出し合っていきましょう。

5/8追伸熱処理武藤工業さまオンライン工場見学追加いただきました。

更新：2020年04月27日