Visual Studio Codeで文章執筆 文系ライターが紹介する使い方とカスタマイズ解説
Visual Studio Codeで文章執筆 文系ライターが紹介する使い方とカスタマイズ解説

Visual Studio Codeで文章執筆 文系ライターが紹介する使い方とカスタマイズ解説

城村うるり アイコン

城村うるり

/ 更新:

当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。

テキスト=文字書くことを目的としたソフトウェアの事を『テキストエディタ』と呼びます。 Windowsの『メモ帳』やMacの『テキストエディット』もこのひとつですが、今回紹介する『Visual Studio Code(ビジュアル・スタジオ・コード)』もこのテキストエディタのひとつです。

本来プログラムを効率的に記述する事を想定して作られた無料で使えるソフトなのですが、その豊富なカスタマイズ機能で『ライター業務=文章を書く』にも活躍するソフトです。 実際に、文系出身のライターである筆者が使っていて便利だと思った機能を中心に、インストールから、便利な使い方などをご紹介したいと思います。

〈電子書籍/コミックの品揃え世界最大級〉【ebookjapan(イーブックジャパン)】

Visual Studio Codeとは

文章を書くことをメインの仕事にされているみなさんは、日頃どんなエディタで文章を書かれているのでしょうか? MS Wordが多いのでしょうか。最近ではGoogleドキュメントも人気ですね。

当記事で紹介するVisual Studio Code(略称 VS Code)はマイクロソフトが開発したデスクトップ用ソフトウェアで、厳密には『ソースコードエディタ』に分類される、プログラミング向けのエディタです。

 Visual Studio Code 公式サイト
Visual Studio Code 公式サイト

対応OSは、WindowsMacOS、Debian、Red HatなどのLINUX系に対応していて、しかも無料で利用できます。

ソースコード=HTMLやCSS、PHPなどのプログラムコードを記述する際に、タグとテキスト部分を自動的に色分けしてくれたり、段落ごとに自動的に行頭をずらしてくれるなどの機能が、ほぼすべてのメジャーなプログラミング言語に対応しています。 言語ごとの記述の特徴に対応していたり、予測入力もこなしてくれたりと、開発の省力化にも役立つと評判も高いようです。

HTML、JSON、Java、などなどメジャーな言語から、マニアックなものまで対応している Visual Studio Code
HTML、JSON、Java、などなどメジャーな言語から、マニアックなものまで対応している

そしてこのソフトは、理系エンジニアだけでなく、筆者のように文字・文章の執筆をメインの仕事にしている人にもおすすめできますよ! という事を具体的な例を交えて解説していきます。

あ、その前にパソコンにインストールしておきましょう……。

インストールの手順

  1. Visual Studio Codeの公式ページから
  2. Download now』をクリックして
  3. インストールするOS用をクリック
  4. プログラムのダウンロードがはじまります
  5. ダウンロードしたファイルを起動
  6. インストーラーの内容にしたがっていけば完了

日本語化して使うには

続いて日本語化したいという方の為に日本語化の手順もご紹介しておきましょう。

  1. 上部メニューの『View』>『Coomand Palette』 と選択
  2. 入力欄に『Language』と入力すると表示される『Configure Display Language』を選択
  3. さらに『Install Additional Languages…』を選択
  4. 画面左側に言語パックが沢山表示されるので『Japanese Language Pack…』を選択
    ※左側、上部の入力欄に『Japan』と入力すればすぐに見つかります。
  5. Install』をクリックしインストールが完了したら右下に出てくる『Restart』をクリック
  6. ソフトウェアが再起動し、日本語で表示されます。

※筆者は英語のまま使用していますので、以下の画面解説は英語UIとなっています。ご了承ください。

文系ライターが使い倒すVisual Studio Codeの設定

筆者が、Visual Studio Codeで文章を書くようになってから、この機能のおかげで仕事が楽になったと感じているのが以下の5点です。

  1. 読みやすいフォント
  2. 目に優しい画面
  3. 文字数確認機能
  4. 自動保存機能
  5. Markdownへの対応

上記の点に注目しながら、本ソフトの使い方や魅力をお伝えしていきます。

1.読みやすいフォントに設定できる

ライター業とは、目と指を特に使う仕事なので、『目』はいたわってあげたい点です。

少し話がそれますが、目を酷使してしまうと眼精疲労が原因で首や肩に不調が出たり、全身に影響が出ることもあります。これはVDT症候群と呼ばれ、現代人の体調不良の典型的な原因とされています。

そして、そんな大事な目を労わるという意味で、文字が読みやすい……というのはとても大事なことだと思います。読みやすいフォント=可読性の高いフォントで表示されている文章は、読みにくいフォントのそれよりも精神的なストレスが少なくなりますし、目の疲れ抑えてくれます。

そして読みやすいフォントは=執筆しやすいフォントでもあります。つまり、自分にとって見やすいフォントを使ってテキストエディタで作業できれば、執筆の負担も減らすことができるだろう、と考えました。

そこで筆者は、下記のような設定でVisual Studio Codeを使っています。

  • 文字の大きさ(12pt
  • 背景カラーテーマ(solarized light
  • フォント(半角:Raleway, 全角:Yu Gothic UI)
  • カーソルスタイル(underline) 

この設定のもうひとつのポイントとしては、半角と全角で違うフォントを設定しているという点。それぞれ見た目が違うフォントを指定しておく事で、文章中で意図せず半角と全角が混ざってしまっても、すぐに気が付いて修正する事ができます。

Font Familyの設定
Font Familyの設定

フォント設定の手順

以下に、フォント設定の変更手順を解説します。

※補足:上記解説画像4枚目……『Font Family』欄はプルダウンでフォントを選択できるような設計にはなっていないので、直接OSにインストールされているフォント名を正しく入力する必要があります。 例えば、メイリオであれば、『Meiryo UI』MSゴシックであれば、『MS UI Gothic』と入力しなければいけません……。

少し手間ですが、私は(Windows10使用)[設定画面]→[個人用設定]→[フォント]と推移しフォント名を確認しながら入力しました。

Windows10のフォント管理画面からフォント名を確認し力する

※※半角文字と全角文字で利用フォントを変えたい場合には、2つのフォント名を設定します。その際、半角フォントをひとつ目に設定し、全角フォントをふたつ目に入力します。

また、カーソルの設定が変更できるのもうれしいところ。 一般的なテキストエディタでは、文字の横で縦線が点滅していたりするのですが、これを『Underline』に設定すると、文字の直下が横線で点滅します。

ひと昔前のワープロのようなレトロな雰囲気で個人的に気に入っています。

Cursor Styleの設定
Cursor Styleの設定

2.目に優しい画面に変更できる

昨今ダークモードが流行し、スマホやPCのテーマを暗い色で揃える方が増えてきました。 文章を書く際にも、黒背景に白文字で書かれている方もいらっしゃるのではないでしょうか。

筆者の場合は、以前は白背景に黒文字で、何の違和感もなく執筆していたのですが、ダークモードが登場し試しにつかってみた所、背景と文字の色の変化でかなり目への負担が違うという事実に気がつきました。

そして Visual Studio Codeでは、画面の設定を細かく設定する事もできますし、いくつかのプリセットテーマから画面の色をいっぺんに変更する事もできます。

Visual Studio Codeのカラーテーマ例
Visual Studio Codeのカラーテーマ例

筆者が使っているカラーテーマSolarized lightは、アイボリーの背景に濃い灰色文字の組み合わせなのですが、個人的にはこれが特に目に優しい配色と感じたので使っています。

カラーテーマ『Solarized light』がお気に入り
カラーテーマ『Solarized light』がお気に入り

3.文字数を計算してくれる拡張機能『CharacterCount』

Visual Studio Codeには『拡張機能』という、追加機能が提供されています。 操作画面左側から、拡張機能の検索ができるので、これらの中から気に入った機能を後から追加できるのです。

米マイクロソフトが開発していることもあり、またオープンソースとして内部を公開しているため、個性的で使い勝手のいい拡張機能が数多く存在し、またその数は日々増え続けています。

そして筆者は文字数を計測してくれる『CharacterCount』という拡張機能を利用しています。

日本の開発者の方が作成した拡張機能で、プレーンテキストとMarkdown形式のテキストをリアルタイムカウントして表示してくれます。 全角文字でも半角文字対応で、選択した箇所のみのカウント……なんて事もできてとても便利です。

適切な表現をクライアントの望む文字数で完結させる』ために、リアルタイムの字数を常時表示してくれるこの機能はとても重宝します。

画面の下部にカウントされた文字数が表示される
画面の下部にカウントされた文字数が表示される

4.自動保存機能してくれる拡張機能『Auto-Save on Window Change』

作業途中のデータが突然なくなってしまう……この現象は何もテキストに限ったことではありません。

PowerPointでのプレゼン資料作成時、画像編集時、動画編集時……などなど。 せっかく長時間作業したものが、突然のトラブルで保存もきかず、何も残らずほぼイチからやり直す……という経験は誰しもお持ちではないでしょうか。

最新の画像編集、動画編集ソフトなどにはほぼ備わっている『自動保存』機能ですが、Visual Studio Codeでも実現する事ができます。

この拡張機能を導入すると、Alt+Tab(Windowsの場合)の組み合わせで使用アプリを切り替えるタイミングで、執筆文章を自動保存してくれます。 マウスで他のウィンドウのクリックした時も同様に上書き保存させる事ができます。

Windowsでウインドウを切り替える
Alt + Tab キーで自動保存される
Windowsでウインドウを切り替える
Alt + Tab キーで自動保存される

筆者の場合、執筆時にWebブラウザで調べものをしながらや、画像の編集をしながらといった事が多いので、この拡張機能のおかげで意識せずに上書き保存をかけることができます。

……ウィンドウを切り替えない限り保存してくれないので、厳密に言うと自動保存ではないのですが、マシンに負担をかけないという面でも気に入っています。

5.Markdownにも対応

Markdown記法とは、ライトなデジタル文章の書き方で、Visual Studio Codeはこれにデフォルト(基本機能)で対応しています。

簡単に言うと、”#”や”*”、”()”などの装飾文字を使って文章を書いていくことができる方法です。もともとHTMLの記述を簡略化する目的で発生したもので……

  • #文字列 と記入すると h1の見出しとして、##文字列 と記入すると、h2の見出しと認識します。
    #の数を増やせば、更に下のランクの見出しとして認識します。
    • ###文字列 = h3
    • ####文字列 = h4
    • ……
  • 太字にしたい場合は**で文字をはさみます。
    • 例:**太字にしたい文字**
  • 引用文は、文頭に>を記述する
  • などなど……

簡略化の文字は半角で記載しなければいけないので日本語でライティングをしている時には頻繁にキーボードで全角と半角を切り替える必要があるのですが、さらにIMEの辞書ツールを活用してひらがな入力からの変換を保存することでさらに効率化させています。

Markdown応用編

Visual Studio Codeでは、ウィンドウを2つに分割するスプリットビューに対応しています。 これを利用すればMarkdownの執筆画面と閲覧画面を一度に見ることもできるので、執筆はMarkdownで行い、閲覧画面で見出しが大きく、太字はきちんと太字で表示されているのを確認する……なんて事ができるのです。

テキストエディタで書いたままだと、自分のクセや視点から離れることができないので、第3者視点で冷静に見ることができない事があります。 そこで筆者は何らかの形で違うスタイルでの表示してみる……という事を実践していたのですが、Visual Studio Codeのこの機能で、他のアプリで開く……というひと手間が減って助かっています。

これは、執筆後に校正する際に特に便利な機能で、記述ミスを発見しやすくなります。

Markdown画面と、プレビュー画面を同時表示させて、自分で書いた文章の校正にも利用しています。
Markdown画面と、プレビュー画面を同時表示させて、
自分で書いた文章の校正にも利用しています。

その他にもある、便利な拡張機能

以上、私が主に仕様している設定や拡張機能を紹介しましたが、他にも沢山の拡張機能があります。そこでいくつか便利な拡張機能をご紹介しますので参考にしていただければ。

vscode-pdf

文字通り、Visual Studio Code上でPDFを開くことができる拡張機能です。編集や細かな設定はできませんが、閲覧する分には問題なくきちんと表示してくれます。

テキスト校正くん

執筆中にリアルタイムで校正をかけてくれる拡張機能です。

ただ、これは少し使う人を選ぶかもしれません。筆者の場合は書くそばから文章に赤い波線が追加表示されてしまい、気が散って執筆に集中できなくなってしまいました。以来Offにしています。ただ、自分好みのカスタマイズに幅広く対応しているので、うまく設定すれば使い勝手はいいかもしれません。

Luna Paint

興味本位で導入したのですが、テキストエディタであるはずのVS Code上でJPGやPNGなどの画像加工ができてしまいます。 ただ、専用ソフトを持っている場合はおそらくそちらの方がずっと使いやすいのであくまで、画像加工の環境が無い場合に……といった所でしょうか。

Visual Studio Code 『Luna Paint - Image Editor』
Visual Studio Code
『Luna Paint – Image Editor』

まとめ 文系のライターにもVisual Studio Codeはおすすめ!

当記事では、ライターの視点からコード・テキストエディタ『Visual Studio Code』についてご紹介しました。

文章を書くには環境が重要です。それは執筆場所であったり椅子であったりするでしょう。キーボードにこだわる方も多くいらっしゃいます。指を始めとした身体に環境を合わせることはとても重要と言えるのですが、それと同じくらいスクリーンの中も重要だと私は思います。

指と同様、目も疲労が溜まってきてしまえば、執筆に影響が出ます。 そして煩わしい作業が多くあることも、執筆がなかなかうまく進まない原因の1つでしょう。 執筆に少しでも壁やハードルを感じてきた際には、環境を変えてみることで先が見えてくることもあります。

そんな環境の改善手段のひとつとして、執筆向けのソフトウェアにも気を配ってみてはいかがでしょうか?

世の中には多数のテキストエディタ公開されていて、今回ご紹介したVisual Studio Code以外にも評価の高いエディタはたくさん存在します。

改めて自分の執筆スタイルを振り返ってみて、どういった点を変えていくと仕事が捗るか思考をまとめてみた上で、それにあったカスタマイズが可能なテキストエディタを探してみることで、執筆作業の効率が向上するかもしれませんよ。

Visual Studio Codeで文章執筆 文系ライターが紹介する使い方とカスタマイズ解説

この記事をシェアする

この記事のタイトルとアドレスをコピー

この記事を気に入ったらハートマークで応援してください

この記事の執筆は……

城村うるり アイコン

城村うるり

某香港在住博士に憧れてガジェットの世界に入ってきました。iPhoneは3Gから使用。Nokia端末も好きでした。

ドイツで2児の子育て奮闘中。趣味は旅行と写真撮影。レビューや雑学系ニュースなど書いていきます。

コメント

  1. oak より:

    とても良い記事と思うけど『文系ライターが紹介する』というタイトルの割には

    ダイビング関連→タイピング?

    執筆画面とと閲覧画→”と”の重複

    ソースコード=HTMLやCSS、PHPなどのプログラムコードを記述する際に、タグとテキスト部分を自動的に色分けしてくれたり、段落ごとに自動的に行頭をずらしてくれるなどの機能が、ほぼすべてのメジャーなプログラミング言語に対応しています。→文章のつながりが不自然

    世の中には多数のテキストエディタ・ソフトウェアが公開されている分野でもありますので、→これもなんかつながりが不自然

    ほかにも単語の不統一などが目につく。
    重箱の隅をつつくような指摘で申し訳ないけど、読んでいる側からするととても気になってしまうのです。

関連する記事

ドキュメンタリー『宮﨑駿と青サギと… ~「君たちはどう生きるか」への道~』&長辺映画12に『On Your Mark』を加えた『宮﨑駿監督作品集 改訂版』 2024年7月3日発売

ドキュメンタリー『宮﨑駿と青サギと… ~「君たちはどう生きるか」への道~』&長辺映画12に『On Your Mark』を加えた『宮﨑駿監督作品集 改訂版』 2024年7月3日発売

note『創作大賞2024』 小説、漫画、エッセイなど16のカテゴリで募集開始 日本最大級の創作コンテスト

note『創作大賞2024』 小説、漫画、エッセイなど16のカテゴリで募集開始 日本最大級の創作コンテスト

『令和6年能登半島地震』へ支援・募金ができるWebサービス・Webサイト まとめ

『令和6年能登半島地震』へ支援・募金ができるWebサービス・Webサイト まとめ

Amazon Kindle『翔泳社ゴールデンウイークセール』開催 2023年5月12日(金)まで 対象書籍一覧も掲載

Amazon Kindle『翔泳社ゴールデンウイークセール』開催 2023年5月12日(金)まで 対象書籍一覧も掲載

2023年冬アニメ新作76作品一覧  放送日、公式&配信サイトリンク まとめ

2023年冬アニメ新作76作品一覧 放送日、公式&配信サイトリンク まとめ

2021年秋アニメまとめ 全63作品が放映開始! 一覧 人気投票も開催中

2021年秋アニメまとめ 全63作品が放映開始! 一覧 人気投票も開催中

ルームミラー型ドラレコ『AUTO-VOX X6』製品レビュー【製品提供記事】

ルームミラー型ドラレコ『AUTO-VOX X6』製品レビュー【製品提供記事】

WordPress記事に設定したタグでAmazonサーチウィジェットに商品を表示させる

WordPress記事に設定したタグでAmazonサーチウィジェットに商品を表示させる

楽天の店舗運営 ショップ デザイン&機能 のカスタマイズまとめ

楽天の店舗運営 ショップ デザイン&機能 のカスタマイズまとめ

Amazonの類似ドメイン、TLDドメイン管理にみる、ブランディングや商標戦略を考える

Amazonの類似ドメイン、TLDドメイン管理にみる、ブランディングや商標戦略を考える

jQuery『iziModal』で自由度の高いモーダルウインドウを実装。設定方法とオプション解説

jQuery『iziModal』で自由度の高いモーダルウインドウを実装。設定方法とオプション解説

jQueryスライダー『slick.js』 設置方法解説と設定オプション一覧

jQueryスライダー『slick.js』 設置方法解説と設定オプション一覧


page top