ウェブサイト運用の不安を軽減する更新マニュアル作成のコツとポイント

ウェブサイトの管理画面がどんなに分かりやすい作りでも「使い方がわからないと怖くて編集できない」という運用担当の方もいるのではないでしょうか？

そんな担当者さまの不安を取り除くためにも、neccoでは運用しやすいウェブサイトを目指して実装しています。

しかし、実装だけでは、カバーしきれない部分があります。そのため、運用担当者の方が、よりウェブサイトを運用しやすいよう更新マニュアルを作成しています。

そこで、この記事では更新マニュアル作成のコツとポイントをご紹介します。

分かりやすさは運用するときの安心に繋がる

ウェブサイトを見る人だけではなく、ウェブサイトを更新する担当者の方も安心して更新し、ウェブサイトを有効にご活用いただけるように分かりやすい更新マニュアルの作成が重要と考えます。

• neccoにウェブサイトの作成依頼をした場合の更新マニュアルが気になる運用担当者の方
• 更新マニュアルを作成することになったエンジニアの方

のお役に立てる記事になっています。ぜひご覧ください。

マニュアルを作成する前に

neccoでは、どんな時に更新マニュアルを作るのか

WordPressやmicroCMS、STUDIOなどのCMSを使用したサイトなど、お客さまがウェブサイトを運用する場合に更新のマニュアルを作ります。

更新マニュアルを作成する場合の形式

neccoでは、更新のマニュアルを作る際に、主にNotionを使用しています。

お客さまのご希望に合わせて、Googleドキュメントなどで作成することもあります。

主に使用しているツール

Shottr

画面のスクリーンショットを使用する際に、吹き出しなどの装飾を追加するために使います。

Shottrは、下記のようなメリットがあります。

• 数字の吹き出しで順番を分かりやすくできる
• 吹き出しでコメントを入れやすい
• ぼかしなども手軽に使える
• 使用するカラー選択がシンプル

無料で手軽に使えるツールなので、更新マニュアル作りにはもちろん、テキストコミュニケーションなどでスクリーンショットを添付して伝えたい場合などにもおすすめです。

Figma

neccoでは、ウェブデザインのツールとしてFigmaを利用しています。マニュアル作りでももちろん役立ちます。

Figmaは、主に管理画面とサイト上の表示を比較する際などに使用しています。Shottrでの表現が難しい場合に使用します。

マニュアルをデータベース化する（Notionを使用する場合）

複数ページになる場合は、項目ごとにデータベース化し、管理しやすいようにします。データベース化することで、マニュアルが分散せず、一箇所で管理できるメリットがあります。

この作成したデータベースの公開用URLをお客さまにお伝えしています。

アイコンはマニュアルの内容をイメージしやすいものを設定しています。

更新マニュアルを作成する上でのポイント

下記のポイントに気をつけながら、更新マニュアルを作成しています。

1. 目次は必ず追加する
2. やること（行動）を端的に書く
3. 操作手順とスクリーンショットの表記は、同じ番号にする
4. 管理画面とサイト上での表示の比較画像を掲載する（主に管理画面とサイト上の見た目が大きく変わる場合）
5. 複雑な動作は動画で伝える
6. 注意事項や補足はコールアウトブロックで追加

1. 目次は必ず追加する

更新マニュアルを開いてすぐに概要を把握できるようにするため、ページの頭に目次を追加します。

Notionでは、右側に目次を表示される機能が追加されました。

しかし、下記の理由もあり、どの作成形式であっても目次は必ず設置しています。

• Notionを使う人によっては、設定で目次を非表示にしている場合がある
• Notionに使い慣れていない人は、目次があることにも気がつかない場合がある

目次ブロックは、/tocで追加することが可能です。目次を作成するショートカットキーが存在しないので、スラッシュコマンドを利用します。

Notionのショートカットやスラッシュコマンドは、下記からご確認いただけます。

キーボードショートカット – Notion (ノーション)

階層リンクブロックでより親切なページに

階層リンクブロック（パンくず）を設置し、より親切なページにしています。開いているページの位置を把握することができるため、ウェブサイトのように見ることができます。

階層リンクブロック（パンくず）は、/breadで追加することが可能です。

2. やること（行動）を端的に書く

操作の説明は丁寧に書くことで分かりにくくなる場合があります。

そのため、マニュアルの場合は、極力端的に操作内容を書きます。

また、Notionのコードブロック（または太字）を使って強調し、その画面で「何を」操作するのかが視覚的に分かるように目立たせています。

3. 操作手順とスクリーンショットの表記は、同じ番号にする

操作手順は、スクリーンショットと同じ番号を振ります。

あまり操作手順を詰め込むと混乱するため、1つの説明につき、2〜3つの操作まで記載します。

何をクリックすればいいのかをスクリーンショットと合わせて一目瞭然にすることで、操作する箇所を探す手間を省くことができ、読む人の負担を減らします。

「編集するのがが怖い」などの不安を軽減できるように工夫しています。

他にも下記のような装飾をよく使用します。

4. 管理画面とサイト上の表示を視覚的に比較する

管理画面とサイト上の表示が異なる場合があります。そのような場合には、Figmaを使用して比較画像を作成します。

例えば、下記のような場面で使用します。

• 管理画面とサイトでの表示が大きく異なる場合
• カスタムした特殊なブロック
• Shopifyを使用したECサイトの表示

管理画面のどこに入力すると、サイト上でどのように反映するのかが初めて使う人でも分かりやすいようにします。

5. 複雑な動作は動画で伝える

スクリーンショットやテキストで伝えにくい動作は、動画を使います。

こちらのサンプル動画はシンプルな作業ですが、主に下記のような場合に動画を準備しています。

• 手順の説明が複雑化する場合
• 画像が複数必要な説明の場合

長い動画は情報量も多くなりやすいため、使い方によっては画像での説明の方が分かりやすいこともあります。

動画を使用する場合は、下記のポイントに気をつけて動画の使用が逆効果にならないように注意しています。

1. 短い動画に分ける（動画1本につき、10秒〜20秒ほど）
2. 動画はあくまでも動作のイメージとし、画像やテキストで補足する

6. 注意事項や補足はコールアウトブロックで追加

補足や、注意事項などはNotionのコールアウトブロックで追加します。

コールアウトブロックは、アイコンやカラーを変えることができます。文言の種類により、アイコンもイメージしやすいように変更しています。

コールアウトブロックを使うことで、マニュアルにメリハリもつくのでおすすめです。

さいごに

今回は更新マニュアル作成のコツ、ポイントについてまとめました。

neccoでは、日頃から安心して運用しやすいサイトを目指してウェブサイトの実装をしています。

実際にウェブサイトを定期的に更新いただいたり、「操作がわかりやすくなった」「管理画面からの編集するときに感じていた不安が軽減した」などのお声をいただいています。

今後も「運用しやすいサイトづくり×分かりやすい更新マニュアル」で、ウェブサイトを充実させるお手伝いができると嬉しいです！

ウェブサイト・ウェブアプリ制作のサービス内容については下記からご確認ください。

Web Design & Development – Service

お仕事のご依頼、お待ちしております！

お仕事のご依頼・採用募集

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

• フロントエンドエンジニア
• アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

（2024年1月時点）