MENU
Gemini

HTMLで社内マニュアル作成！初心者でもコピペで完成5ステップ

Geminiがコード生成
t.inoue

「HTML」…なんだか黒い画面に謎の英語がズラッと並んでいて、プログラマーさんだけの特別な世界だと思っていませんか？

実は私も、最初はHTMLと聞いただけで「うわ、難しそう…」と敬遠していました。でも、ご安心ください。本当の基本は、驚くほどシンプルなんです。

この記事では、専門知識ゼロ、プログラミング経験ゼロの方でも、コピペするだけで「Webサイトのような本格マニュアル」が作れてしまう、魔法のような5つのステップをご紹介します。

この記事を読み終える頃には、あなたもHTMLの面白さに目覚め、職場の情報共有を劇的に変える第一歩を踏み出しているはずです！

目次
  1. そもそもHTMLって何？Webページの骨格です
  2. なぜ今、町工場で「HTMLマニュアル」が役立つのか？
  3. 準備はたったこれだけ！必要なもの
  4. コピペでOK！HTMLマニュアル作成5ステップ
  5. もう面倒ならGeminiに作ってもらおう！
  6. まとめ

そもそもHTMLって何？Webページの骨格です

難しく考える必要は全くありません。 HTMLは、Webページの「骨格」を作るための言葉です。

私たちが普段見ているWebサイトの文章や画像は、すべてこのHTMLによって「ここは大きな見出しですよ」「ここからここまでが段落です」「ここにこの画像を置いてください」といった指示が与えられています。

例えるなら、Wordで文字を大きくしたり、箇条書きにしたりする作業を、「タグ」と呼ばれる簡単な記号（< >）を使って行っているイメージです。特別なソフトは不要で、Windowsに標準で入っている「メモ帳」さえあれば、誰でも今すぐ始められます！

なぜ今、町工場で「HTMLマニュアル」が役立つのか？

「WordやExcelじゃダメなの？」と思うかもしれません。もちろん、それらも素晴らしいツールです。しかし、HTMLマニュアルには、町工場の現場でこそ輝く3つの大きなメリットがあるんです。

1. オフラインでも見れる！ネット環境は不要

作成したHTMLファイルは、インターネットに繋がっていない現場のパソコンでも、ダブルクリックするだけでブラウザ（Google ChromeやMicrosoft Edgeなど）で開けます。サーバーも不要なので、ファイル単体でUSBメモリに入れて持ち運ぶことも可能です。

2. 「リンク機能」が超便利！情報が繋がる

HTMLの最大の強みは「リンク」です。 「この部品の詳細は、サーバーにあるPDF図面を見てね」 「この作業の前に、必ず安全確認マニュアル（別のHTMLファイル）をチェック！」 といったように、関連する情報（ファイル、別のマニュアル、写真、会社の共有フォルダなど）を青い文字で次々に繋いでいくことができます。情報があちこちに散らばらず、一つのファイルから全てにアクセスできるのは、想像以上に快適ですよ。

3. 更新や修正がとにかく楽！

機械の操作手順が少し変わった、新しい工具を導入した、といった変更があった場合、Wordだとレイアウトが崩れたりして修正が面倒なことがありますよね。 HTMLはただのテキストファイルなので、該当箇所を書き換えて保存するだけ。見た目が崩れる心配もなく、誰でも簡単にメンテナンスできます。

準備はたったこれだけ！必要なもの

準備するものは、本当にこれだけです。

  • パソコン
  • メモ帳 (あるいは、それに類するテキストエディタ)
メモ帳

特別なソフトをインストールする必要は一切ありません。会社のどんなパソコンにも入っている「メモ帳」で、プロと同じWebページが作れるんです。ワクワクしませんか？

コピペでOK！HTMLマニュアル作成5ステップ

さあ、いよいよ実践です！ まずはデスクトップに「マニュアル」という名前で新しいフォルダを作成してください。

「マニュアル」フォルダ

これから作るHTMLファイルや、使いたい写真はすべてこのフォルダの中に入れて作業すると、管理がとても楽になります。

ステップ1：基本の「おまじない」をコピペする

まずは、HTMLを書く上での「様式」となる基本のコードを書きましょう。これは毎回同じなので、「おまじない」としてこのままコピーしてメモ帳に貼り付けてください。

<!DOCTYPE html>
<html>
<head>
<title>ここにマニュアルのタイトル</title>
</head>
<body>

</body>
</html>
メモ帳を名前をつけて保存
メモ帳を名前をつけて保存
マニュアルフォルダへ格納

貼り付けたら、ファイルの種類を「すべてのファイル」にして、manual.html という名前で、先ほど作った「マニュアル」フォルダに保存しましょう。

これで準備完了です！

ステップ2：見出しでメリハリをつける <h1> <h2>

先ほど作成したファイルを右クリック→「メモ帳で編集」で開きます。

メモ帳で編集

文章に「大見出し」と「中見出し」を付けて、内容を分かりやすく整理します。 <h1> が一番大きな見出し、<h2> が二番目に大きな見出しです。

<body>と</body>の間に、以下のように書いてみましょう。

<h1>旋盤作業 安全マニュアル</h1>
<h2>服装の注意点</h2>
<p>作業服の袖や裾は、機械に巻き込まれないように必ずボタンを留めること。</p>
<h2>始業前点検</h2>
<p>必ず始業前に、機械の安全装置が正しく作動するか確認すること。</p>

【ポイント】 <p>は「Paragraph（段落）」の略で、普通の文章を囲むときに使います。

ステップ3：箇条書きで手順を分かりやすく <ul> <li>

手順やチェック項目は、箇条書きにすると格段に見やすくなります。 <ul>で「ここから箇条書きが始まりますよ」と宣言し、各項目を<li>で囲みます。

先ほどの始業前点検の内容を、もっと分かりやすくしてみましょう。

<h2>始業前点検</h2>
<ul>
  <li>安全カバーは定位置にあるか</li>
  <li>非常停止ボタンは正常に作動するか</li>
  <li>刃物に欠けや割れはないか</li>
  <li>作業周辺に油漏れはないか</li>
</ul>
メモ帳追加

ステップ4：写真を入れて一目瞭然！ <img>

文章だけでは伝わりにくいことも、写真が1枚あるだけで理解度が全く変わります。 使いたい写真を「マニュアル」フォルダの中に入れ、<img>タグを使って表示させましょう。

例えば、cover-ok.jpg という名前の写真を入れる場合は、以下のようになります。

<h2>安全カバーの確認</h2>
<p>安全カバーがこの写真のように、しっかりと閉まっていることを確認してください。</p>
<img src="cover-ok.jpg" width="400">
メモ帳追加

【ポイント】 width="400" は「画像の横幅を400ピクセルにする」という指定です。この数字を変えれば、画像の大きさを自由に変えられます。

旋盤の安全カバーが閉まっている様子の写真

今回はサンプル画像を使います。

画像データは「マニュアル」フォルダの中に「cover-ok.jpg」というファイル名で格納しておきます。

ステップ5：リンクで情報をつなげる <a>

HTMLの真骨頂、リンク機能です。<a>タグを使います。 例えば、会社のサーバーにあるPDFの図面ファイルにリンクを貼ってみましょう。

<h2>関連資料</h2>
<p>詳細な寸法は、<a href="https://example.com/shared-drive/zumen-123.pdf">こちらの図面(PDF)</a> を確認してください。</p>

【ポイント】 href="" の中に、リンク先のURLやファイルパスを入れます。Webサイトのアドレスだけでなく、パソコンの中にある別のファイルへの道筋も指定できます。 今回は信頼できる外部リンクの例として、example.com のURLを記載していますが、実際に社内の共有ドライブのリンクなどをここに貼り付けます。 [ここに、Googleドライブの共有リンクを取得する方法のヘルプページへのリンクを自然な流れで挿入] （例：Googleドライブのファイル共有方法については、こちらの公式ヘルプページが参考になります。）

↓全ての内容を折り込んだ内容がこちら

<!DOCTYPE html>
<html>
<head>
<title>ここにマニュアルのタイトル</title>
</head>
<body>

<h1>旋盤作業 安全マニュアル</h1>
<h2>服装の注意点</h2>
<p>作業服の袖や裾は、機械に巻き込まれないように必ずボタンを留めること。</p>

<h2>始業前点検</h2>
<ul>
  <li>安全カバーは定位置にあるか</li>
  <li>非常停止ボタンは正常に作動するか</li>
  <li>刃物に欠けや割れはないか</li>
  <li>作業周辺に油漏れはないか</li>
</ul>

<h2>安全カバーの確認</h2>
<p>安全カバーがこの写真のように、しっかりと閉まっていることを確認してください。</p>
<img src="cover-ok.jpg" width="400">

<h2>関連資料</h2>
<p>詳細な寸法は、<a href="https://example.com/shared-drive/zumen-123.pdf">こちらの図面(PDF)</a> を確認してください。</p>

<p>必ず始業前に、機械の安全装置が正しく作動するか確認すること。</p>
</body>
</html>

参考にしてください。

ファイルを開いてみよう

メモ帳から作った「manual.html」ファイルを開いてましょう。

するとブラウザから開いてこのように表示されます。

ブラウザから開いたマニュアル

どうですか？しっかりした作業マニュアルが完成しました！

もう面倒ならGeminiに作ってもらおう！

Geminiがコード生成

ここまでのステップでhtmlコードというものがどんなものかは何となく理解できたかと思います。といっても、今までのは初歩の初歩。

「こんなの覚えてる余裕なんてないよ・・・」って思われる方、ご安心ください！

今は、こんなコードなんて簡単に作成してくれるAIがいます！

ということで、参考にGeminiにこんな感じでお願いします。

Geminiに指示

たったこれだけの指示でOKです。

ポイント

送信する前に項目から「Canvas」ボタンを押して有効にしてきます

Geminiがhtmlコードを生成

すると、あれよあれよという間にコードを生成。

このコードを先ほどの要領でメモ帳に貼り付け、画像やリンクを追加したら完成しちゃうんです。

右上のプレビューボタンを押すともう、完全にできちゃってますね、、恐ろしい時代になりました。変更したい場合は、具体的に指示してあげれば何度でも修正してくれます。

もちろん「こんな時、どう書けばいいんだろう？」「このタグの意味が分からない…」 そんな時は、迷わずGeminiに聞いてみましょう！

例えば、 「HTMLで表を作りたいです。コードを教えてください」 と質問すれば、すぐにコピペで使えるコードを生成してくれます。分からないコードを貼り付けて「このコードの意味を小学生でも分かるように説明して」と頼むことだってできます。

AIをアシスタントにすれば、あなたのHTML学習は一気に加速します。恐れずに、どんどん活用してみてくださいね！

まとめ

Geminiがコード生成

いかがでしたか？ 最初は難しそうに見えたHTMLも、基本のタグをいくつか組み合わせるだけで、驚くほど実用的なマニュアルが作れることを感じていただけたでしょうか。

  • <h1> <h2>で見出しをつける
  • <ul> <li>で箇条書きにする
  • <img>で写真を入れる
  • <a>でリンクを貼る

まずはこの4つを覚えるだけで十分です。

今回ご紹介した方法は、Webサイトを作るための壮大な知識の、ほんの入り口にすぎません。しかし、この小さな一歩が、あなたの職場の情報共有を大きく変えるきっかけになります。

さあ、まずはこの記事のコードをコピペして、あなたの部署だけの「オリジナルHTMLマニュアル」作りに挑戦してみませんか？その小さな成功体験が、きっと仕事をもっと楽しく、もっとクリエイティブなものに変えてくれるはずです。

そして、ある程度のイメージと知識が付いたら（付かなくても全然OKですが・・）AIをうまく活用してもっと壮大なプロジェクトに挑戦してみるのも面白いかもしれません。

AIが発達してこんなに身近な存在となった今だからこそ、早めに理解し上手に活用することはこれからのDX化には必須な条件になるのは間違いありません。

Geminiはコード生成以外にも活躍の場は無限大です！

あわせて読みたい
【Googleドキュメント活用】Geminiが要約！議事録作成がゼロになる神ワザ
【Googleドキュメント活用】Geminiが要約！議事録作成がゼロになる神ワザ
ABOUT ME
TAKA社長
TAKA社長
Google Workspace見習い
小さな町工場の社長。 日々業務に追われ何とか打開する策として『Google Workspace』を契約。実際にアナログで手間だった作業の問題事例とDX化で改善していく方法を詳しく紹介していきます。 DX化・システム化とか言ってますが、基本的にはAI（Gemini）任せでお願いしているだけなので作業としてはとても簡単。 ですので、GoogleWorkspaceの各アプリを効率的に使う方法や便利な機能などを理解してもらえば嬉しいです。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました