ノンプロ研で開催されている「技術ライティング講座 第5期」にホストとして参戦中。
この講座では「技術に関する文章を書くための知識とスキルを身につける」をゴールに、全9回+卒業LTという日程で学んでいます。
6/15(水)、6回目の講座が開催されました。
今回もまとめと演習に取り組んでいきます。
講座内容まとめ
6回目のテーマは「Webライティング」です。
前回まで学んできた文章を書く技術そのものからは少し離れて、Webライティングならではの意識するポイントと、SEOやHTMLといった技術の基礎について学びました。
togetter
当日の受講生の皆さんのツイートまとめです。
このようにノンプロ研では受講中のTwitterでのアウトプットを推奨しており、毎回講師の方がまとめを作ってくれています。
講座のアジェンダ
- Webライティングとは
- SEOの基礎
- Web記事の構成要素
内容
ひとつめの【Webライティングとは】では、Webならではの視点として、以下の3つを学びました。
- どこで読まれるか（＝書く媒体・読む媒体）
- どうやって届けられるか（＝流入経路）
- 読んでる・読んだ後のアクション（＝離脱とコンバージョン）
ポイントを抜き出して整理すると、このような感じかなと思います。
| ポイント | 概要 |
|---|---|
| 書く媒体 | 自身の目的に応じて、独自サイトを作るか・ブログプラットフォームを利用するか |
| 読む媒体 | 読者はスマホからアクセスしていることも多く、スマホで読みやすい形式で書く必要がある |
| 流入経路 | 技術文書の場合は検索からたどり着けるようSEO優先で考える |
| 読み手の離脱率 | 「Webは離脱しやすい」を前提に考えて記事の構成を考える |
| 読み手のアクション | フォローやシェア、コンバージョンなどの欲しいアクションへ繋げる |
ふたつめの【SEOの基礎】では、SEO対策と呼ばれる検索エンジン経由でアクセスを増やす具体的な方法を学びました。
検索結果で上位を狙うためには、そもそも専門性の高いサイトを作る方が有利です。
他にもコンテンツの品質やキーワードが含まれていること、離脱率が低いこと、著名なウェブサイトからリンクされていること、表示回数に対するクリック数の割合である「CTR」が高いこと…なども検索結果に影響しているようです。
みっつめの【Web記事の構成要素】では、WebページのベースになっているHTMLと構成要素について学びました。
HTMLドキュメントはタグで記述されていて、このタグで指定した内容がWebページに表示される仕組みになっています。詳しい書き方は知らなくても、最低限抑えておくととても役立ちます。
ここまでを踏まえてWeb記事を書くときの具体的なポイントをまとめると、以下のようなところです。
- 書く媒体は、カスタマイズ性とメンテナンスの楽さのバランスで、集客など目的に合った媒体を選ぶ
- 冒頭の前置き・目次で離脱を防ぐ
- タイトルとディスクリプションにキーワードを織り込んでしっかり作っておく
- １節は短く・改行を多く、強調などで全体が見やすいような書き方を心がける
- 引用、箇条書き（リスト・番号付きリスト）を活用する
- 見やすい画像を用意する
この中で「画像」については特に技術記事では大切な要素です。読者が見やすいように、以下のようなポイントを抑えた画像を用意する必要があります。
- できるだけ大きい画像を使う
- 場所を赤枠で囲む
- 吹き出しには文ではなく単語か文節を、できるだけ大きな文字で
画像の装飾には自身に合うツール選定も重要そうですね。
演習
今回も、全ての演習ではなく一部に絞ってアウトプットすることにしました。
◯ -> 質問（講座中にチャットで回答）
★ -> 宿題
◯演習6-5
Google検索結果ページで「この記事はクリックしないな」と思ってしまうようなものはありますか？それは、どのような記事ですか？
👉
パッと見でタイトルが欲しい情報とマッチしていなさそうだったりすると、自分はクリックしないなーと思いました。
クリックしてもらう記事を書けるようにするために、どんな記事が「クリックされないのか」を考える質問でした。
クリックされるようにするには、検索結果に出てくる「記事タイトル」「ディスクリプション」をしっかり作る。
— おおさき🥔小さなIT活用で快適な農場づくりを！ (@massa_potato) 2022年6月15日
隣ITではSEOに対するガイドラインを作っているとのこと。見出しや画像のタイトル・代替テキストとかも。#ノンプロ研 #ライティング講座
★演習6-3：Web記事を読む時の視点
何らかのWeb記事を読もうと思ったとき、以下をまとめながら読んでみましょう。 ・いつ読んだか ・どうやってたどり着いたか ・どのデバイスで読んだか ・読んでいるとき、読んだあとどのようなアクションをしたか
👉
こちらの記事を読んだ時のことを書いてみます。
ピンポイントで欲しい情報があったのと、画像が多くて見た目にもわかりやすい記事でとても参考になりました。
★演習6-6：記事のディスクリプション等
演習5-7で執筆した文章について以下を考えてみましょう。 ・狙うキーワード群 ・タイトル：全角32文字程度 ・ディスクリプション：全角100文字程度
👉
以前の演習5-7の宿題で書いた文章について、考えました。
狙うキーワード群
ひとり開発・タスク管理・プロジェクト管理・WBS・メンター
タイトル
ひとり開発のためのタスク管理方法〜WBSを作ってみよう！〜
ディスクリプション
ひとり開発・個人開発ではなかなか難しいタスク管理。今回はメンターさんと相談しながら「WBS」というタスク管理表を制作し、プロジェクト管理の手法について学んだので、実際に取り組んだことをまとめました。
タイトルとディスクリプションを書く練習をすることで、要約力が磨かれそうですね。
クリックされるようにするには、検索結果に出てくる「記事タイトル」「ディスクリプション」をしっかり作る。
— おおさき🥔小さなIT活用で快適な農場づくりを！ (@massa_potato) 2022年6月15日
隣ITではSEOに対するガイドラインを作っているとのこと。見出しや画像のタイトル・代替テキストとかも。#ノンプロ研 #ライティング講座
★演習6-7：記事の構成要素
演習5-7で執筆した文章について、段落、空行、強調、引用、リスト、番号付リストについて見直してみましょう。
👉
こちらで提出。強調とリストをいくつかいれました。
リスト・番号付きリスト
— kudou (@kudou32323) 2022年6月15日
・箇条書き
・文にしない
・文の途中でリストを挟まない
→これ、文にしがちなので注意！#ノンプロ研 #ライティング講座
★演習6-8：画像の装飾
演習6-3の記事で使用している画像について、装飾をつけてみましょう。
👉
画像は使っていますがあまり装飾が必要でないので、保留に。
#ノンプロ研 #ライティング講座
— a03🌔 (@a03) 2022年6月15日
mac は
Skitchもいいよ〜 https://t.co/XqON7Ams44 pic.twitter.com/XBCO64MIzg
ちなみに画像の加工ツールとして、僕は最近はCanvaに一元化してみようと思って試しています。
Canvaでは1つのファイル（デザイン）にスライドのように複数の画像を保管しておくことができるので、例えばブログ記事ごとに1つのファイルを作成するようにすると管理がしやすそうです。
元画像も残るし装飾の微調整もラクで、完成した画像ファイルはローカルに一括ダウンロードしたのちに余白をカットして利用します。
ライティングの画像編集に、元画像も残せるし管理しやすいのではと思いCanvaを採用。
— おおさき🥔小さなIT活用で快適な農場づくりを！ (@massa_potato) 2022年6月16日
吹き出しの縦横サイズ調整がちょっと融通効かないか、と思っていたら、対策発見。https://t.co/Vh6aX0yxdl
技術文書の画像の装飾について、こちらの記事がとても詳しくて参考にさせていただいています。
おわりに
今回はWebライティングならではの視点を学ぶことができました。
ここまでの一連の課題で、ひとまずブログ記事が一記事完成したのではないでしょうか。今回の記事は近々アップしたいと思います！
技術ライティング講座ではこのように、一つの文章を複数のステップに分解して書いていく書き方を習得します。
僕が技術ライティング講座を受講する前は、こんなに準備して文章を書くことは全くしてきませんでした。大変に感じますが、文章をラクに書くための強力なテクニックになります！
ライティングに限らず、資料作成や日常の色々なところで役に立つと実感しています。
