無料で使えるGoogleドキュメントでアウトライン機能が使えることを初めて知ったので、備忘録もかねて記事に残します。
Googleドキュメント操作方法:(PCの場合)
まずはPCでの操作方法ですね。
本記事での使用OSはWindowsですが、MacBookでも同じ要領で操作できるかと思います(SaaSのいいところですね!)。
操作方法:「概要」を表示する
1、メニューバー「表示」→ 「概要を表示」を選択

左側に「概要」欄が表示されていればOK

まだ見出しはないので空欄です。実際に見出しをつけていきましょう。
操作方法:実際に見出しをつける
見出しにしたい文字をドラッグして選択
(画像では「操作方法」選択)

「標準テキ…」タブを展開
→見出しレベルを選択

これで選択していた「操作方法」がh2の見出しになりました。左側のウィンドウにも見出しとして表示されています。

これで見出しが1つ完成!!他の見出しにもレベルに応じて見出しをつけていきます。全部つけた様子が以下の画像です。

私はまず全部書き出してから見出しをつけます。ここは人によって好みが分かれるかと。
補足メモ:WordPressとの見出しレベル対応
見出しレベルはWordPressの見出しレベルとリンクしています。
見出し1 = h1
見出し2 = h2
見出し3 = h3
また、選択後にショートカットキー「Ctrl + Alt + 2」(h2の場合)だと、プルダウンメニューの操作をしなくてもいいのでより早く作業できて利便性が高い!!
Googleドキュメントアプリでの操作方法:(スマホの場合)
次にスマートフォンでの操作方法をご紹介します。
iPhone SE3でもGoogleドキュメントのアプリでアウトライン機能を使えました。Androidのスマホ(pixelなど)でも同じく操作できると思います(SaaSのいいところ!!)。
操作方法:実際に見出しをつける
Googleドキュメントのアプリをひらきます。

新規作成から見出しタイトルを文字列で記入します(この時点では見出しはありません)。

見出しにしたい行を選択し、上部メニュー「Aと_」をタップします。

上部のメニューをタップし「スタイル」メニューから見出しをつけます。


補足メモ – 複数行一度に見出しを作れる
複数行選択し同じ操作をすれば、一度に複数行の見出しを作れます。

出先や移動中、PCを操作できなくてもGoogleドキュメントでアウトライン機能を使えるのはありがたいですね!!
アウトラインによるWordPress上での便利なこと
ここまででGoogleドキュメントのアウトライン機能で見出しは作れました。では、何が便利になるのかを解説します。
見出しの順番入れ替えが簡単!!
順番を入れ替えたいブロックをドラッグで選択

切り取り(Ctrl+X)
ペースト(Ctrl+V)
で入れ替えたい場所へコピー

構成を練る段階だと、見出しの順番入れ替えなんて頻繁に発生するので助かりますね。
作った見出しのWordPressへのコピペが超優秀!!

https://ja.wordpress.org/
Googleドキュメントで作成した見出し。なんと、WordPressにコピペした時点で見出しになってるぅぅぅ!!
■コピー前↓

■コピー後↓

h3:白基調に黒文字見出し
これ個人的に超助かる!!記事の構成を考えつつ一瞬で見出しも作れるなんて一石二鳥すぎます♪♪
え…?
あたりまえ??
皆知っている???
少しずつSTEP UPするのが大事ですから(震え声)
適用されているh2, h3見出しのデザインはテンプレートによるのでご留意ください。
まとめ
WordPressでのブログに限らず、文章を書き始める前に記事のアイディア出しから構成をしっかり練ることが重要だと書籍から学びました。
書籍ではMicrosoft Word(有料)でのアウトライン機能使用方法が紹介されていましたが、無料のGoogleドキュメントでもできたのは嬉しいですね!!仕事の場面(企画書、報告書など)ではチームでの共有もしやすいので更に便利なのではないでしょうか。
考えながらいきなり文章を書いていた頃よりもメリットを感じています。
・短時間で文章がかけるようになった
・最初と最後でぶれない文章がかけるるようになった
この学びは精神科医の樺沢紫苑先生が執筆された書籍「アウトプット大全」から得ました。別記事『「アウトプット大全」読書での学びを素早くブログ記事にする方法』にまとめましたので参考にしてみてください。