Googleスライドにコードを美しく表示！ハイライトと自動化の極意

技術カンファレンスの登壇資料や社内勉強会、クライアントへの仕様説明において、Googleスライド上にプログラミングのソースコードを掲載する機会は日常的に発生します。しかし、エディタからそのままテキストを貼り付けると、インデントが崩れたり単色のプレーンテキストになってしまい、視認性が著しく低下して聴衆の理解を妨げる原因になりがちです。

Googleスライドには執筆時点（2026年）でも、ネイティブのシンタックスハイライト機能が標準搭載されていません。そのため、いかに手作業を減らし、見やすく色分けされたコードブロックを配置できるかがプレゼンテーションのク覚的品質を大きく左右します。本稿では、手軽な拡張機能や色分けコピペの裏ワザから、Google Apps Script（GAS）やPythonを活用したスライド自動生成の高度な手法まで、現場で本当に役立つノウハウを徹底取材・検証しました。

📌 【この記事の重要ポイントまとめ】

• 要点1：単なるコピペでは黒一色になるコードも、VS Codeのリッチテキストコピーや拡張機能「Code Blocks」を活用すれば数秒で美しいシンタックスハイライトが実現できる。
• 要点2：大量のコード解説スライドや日次レポート作成には、Google Apps Script（GAS）やPythonスクリプトを用いた自動生成パイプラインの導入が最も工数対効果が高い。
• 要点3：登壇用（視認性重視の画像・高コントラスト）と共有用（検索性・テキストコピー重視）で埋め込み手法を明確に使い分けることがプレゼン成功の鉄則である。

Googleスライドにコードを綺麗に表示する決定的な方法と埋め込みの裏ワザ

「Googleスライドにコードを綺麗に表示できない」という悩みに対する最も即効性の高い解決策は、リッチテキスト形式（RTF）を保持したまま貼り付ける手法です。多くの開発者が遭遇する「文字が真っ黒になる」「行間が広がりすぎる」という現象は、エディタ側でプレーンテキストとしてクリップボードに送られていることが主な原因です。

Visual Studio CodeやJetBrains系IDE（IntelliJ IDEA、PyCharm等）を使用している場合、エディタ上でコードを選択してコピーするだけで、内部的には構文ハイライト情報を含んだリッチテキストが保持されています。Googleスライド側のテキストボックスを作成し、そのまま通常の貼り付け（Ctrl + V または Cmd + V）を行うことで、エディタのカラーテーマを反映したシンタックスハイライトが即座に反映されます。

背景色も含めて美しくレイアウトしたい場合は、1マス×1マスの表（テーブル）を挿入し、そのセル内にコードを貼り付ける裏ワザが有効です。表の背景色をダークグレー（例：#1e1e1e）やネイビーに設定し、枠線を非表示にすることで、VS Codeのダークモードのようなスタイリッシュなコードブロック枠が手軽に完成します。

手間を最小化するシンタックスハイライトの手法｜拡張機能と色分けコピペの実践

日常的にスライドを作成するエンジニアやテクニカルライターの間で支持されている代表的な手法は、以下の3パターンに大別されます。

1. Google Workspace拡張機能「Code Blocks」の導入

Googleスライドのメニューにある「拡張機能」＞「アドオンを取得」から「Code Blocks」をインストールすると、スライド内で選択したテキストボックス内のコードをワンクリックでハイライト処理できます。C++、Python、JavaScript、Go、Rustなど主要な言語に対応しており、好みのカラースキーム（MonokaiやSolarizedなど）を選択して適用できるため、スライド全体のトンマナに合わせた統一感が保てます。

2. Webジェネレーターを活用したリッチテキスト変換

ブラウザ上で手早くハイライトを作成したい場合、「Carbon」や「Ray.so」、あるいは「highlight.js」のデモサイトを利用するのが効率的です。コードをブラウザ上で整形し、「Copy as Image」ではなくテキストとしてコピー可能なサービスを利用して貼り付けることで、スライドのファイル容量を抑えつつ鮮明なベクター描画を維持できます。

3. マークダウン変換ツール（Marp等）との連携

スライド全体をコードベースで管理したい開発現場では、Markdownからスライドを自動変換する「Marp」や「Slides as Code」のアプローチが定番化しています。Markdown内でバッククォート（等）で囲んだコードは完璧に色分けされ、完成したスライドをGoogleスライド形式（.pptx経由）へインポートすることで、手作業の配置作業を完全に排除できます。

【徹底比較】コード表示手法のメリット・デメリットと推奨シーン

それぞれのコード埋め込み手法について、作成速度、視認性、保守性などの観点から比較データを整理しました。

【実態検証】開発現場と登壇者が語るリアルな失敗談と視認性の壁

エンジニアコミュニティや登壇経験者への取材、およびSNS・知恵袋等に寄せられた生の声を分析すると、コード埋め込みにおけるトラブルの大半は「会場プロジェクターでのコントラスト不足」と「フォントの崩れ」に集中しています。

ITmedia等の取材記事やテック系勉強会の現場レポートでも指摘されている通り、手元のMacBookや4Kモニターで綺麗に見えているダークモードの背景（濃紺や黒）と細い等幅フォントは、会場の古いプロジェクターや照明の明るい部屋では文字が潰れて全く読めなくなるリスクを孕んでいます。実際に「後ろの席からコードが読めず、発表内容が頭に入らなかった」というフィードバックは後を絶ちません。

また、等幅フォント（Monospace）の指定が正しく反映されていない場合、全角スペースやタブが意図しない幅で描画され、Pythonのようにインデントが構文を決定する言語では致命的な誤読を招く事例も確認されています。現場のプロは、フォントに「JetBrains Mono」や「Fira Code」、またはGoogleフォントの「Roboto Mono」を明示的に指定し、フォントサイズは最小でも18pt〜24pt以上を確保することを鉄則としています。

Google Apps Script（GAS）とPythonによるスライド自動生成・操作の全手順

定期的にソースコードの解説スライドを作成する場合や、社内研修資料を量産するケースでは、プログラムによる自動生成パイプラインの構築が最大の威力を発揮します。

Google Apps Script（GAS）によるコードカードの自動生成

Googleスライドのコンテナバインドスクリプトまたはスタンドアロンスクリプトから、SlidesAppを利用してテキストボックスを生成し、等幅フォントと背景色を適用するGASの最小コード例です。

 function insertCodeSlide(titleText, codeSnippet) { const presentation = SlidesApp.getActivePresentation(); const slide = presentation.appendSlide(SlidesApp.PredefinedLayout.BLANK); const titleBox = slide.insertTextBox(titleText, 40, 30, 640, 40); titleBox.getText().getTextStyle().setFontSize(20).setBold(true); const bgShape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE, 40, 90, 640, 280); bgShape.getFill().setSolidFill('#282c34'); bgShape.getBorder().setTransparent(); const codeBox = slide.insertTextBox(codeSnippet, 50, 100, 620, 260); const textRange = codeBox.getText(); textRange.getTextStyle() .setFontFamily('Roboto Mono') .setFontSize(14) .setForegroundColor('#abb2bf'); } 

Python（Google Slides API / python-pptx）を用いた自動化

外部CI/CDパイプラインやデータ分析基盤から直接スライドを吐き出したい場合は、Pythonのgoogle-api-python-clientを利用してGoogle Slides API v1を直接叩くか、python-pptxでローカルに生成したプレゼンテーションをGoogleドライブへ自動アップロードする構成が堅牢です。構文解析ライブラリであるPygmentsと組み合わせることで、Pythonスクリプト単体でAST（抽象構文木）を解析し、トークンごとに色情報を付与したスライド要素を完全自動出力することも可能です。

一般に知られていない盲点とネットの誤解｜テキスト埋め込み対画像化の真実

ネット上のノウハウ記事では「コードはすべてCarbonなどのツールで画像化して貼るのが一番綺麗」と推奨されるケースが目立ちます。しかし、これには重大な盲点が存在します。

第一に、画像化されたコードはGoogleドライブ内の全文検索インデックスの対象外になります。後から過去の資料を「あのAPIの記述があるスライドはどこだっけ？」と探す際、テキスト情報が失われていると資料の再利用性が著しく低下します。

第二に、受講者や読者がコードをコピー＆ペーストして手元で実行できないというアクセシビリティ上の大きなデメリットが生じます。特にオンラインセミナーやアーカイブ配信の共有資料では、コードが画像化されていること自体が受講者体験を損なう要因となります。したがって、「登壇本番用のスライド」と「配布・アーカイブ用のスライド」で要件を切り分ける視点が欠かせません。

【プロの結論】用途別に見極める実装判断基準と認知負荷の低減策

認知心理学における「ワーキングメモリの負荷理論（スウェラーの認知負荷理論）」をプレゼンテーションに応用すると、スライド上のコードが読みづらいだけで、聴衆の脳のリソースは「文字の解読」に消費され、「発表者の話を聞く」ためのリソースが枯渇します。

プレゼンテーションの成功率を最大化するためには、以下の判断基準で手法を選択してください。

• 【おすすめできる人：色分けコピペ／アドオン】
  日常の社内ミーティング、仕様共有、受講者にコードを実際にコピーして試してもらいたいワークショップ形式の勉強会。文字情報の検索性と即時修正の柔軟性が最優先されます。
• 【おすすめできる人：高解像度画像化（Carbon等）】
  500人規模以上の大型カンファレンス登壇、基調講演。環境によるフォントレンダリング崩れを絶対に許容できず、3〜5行程度の象徴的なコードのみをドラマチックに見せたいシーンに最適です。
• 【おすすめできる人：GAS／Python自動生成】
  数十〜数百問のプログラミング教材を定期更新する教育担当者、日次バッチ処理のエラーログやAPI実行結果を自動でスライド化して定例会に流し込みたいDX推進リーダー。

【google スライド コード】に関するよくある質問（FAQ）

Q1：Googleスライドにコードを貼り付けるとインデント（タブ・スペース）が崩れるのはなぜですか？
A1：Googleスライドのテキストボックスはデフォルトでプロポーショナルフォント（文字ごとに幅が異なるフォント）が適用されているためです。フォントを「Roboto Mono」や「Courier New」などの等幅フォントに変更し、タブ文字を半角スペース2文字または4文字に置換してから貼り付けることで解決します。

Q2：拡張機能「Code Blocks」が会社のGoogleアカウントでインストールできません。対処法はありますか？
A2：組織のGoogle Workspace管理ポリシーによりサードパーティ製アドオンがブロックされている可能性があります。その場合は、ローカルのVS Codeからリッチテキスト形式でコピー＆ペーストする手法や、Webブラウザ上のハイライトツールからテキストコピーして貼り付ける方法を利用してください。

Q3：スマホやタブレットでGoogleスライドを見たときにもハイライトは崩れませんか？
A3：リッチテキストとして文字単位で色付けされている場合、モバイル版Googleスライドアプリでも色はそのまま保持されます。ただし、画面幅の違いによる意図しない折り返し（テキストラップ）を防ぐため、フォントサイズを適切に調整し、1行あたりの文字数を60文字程度以内に抑えるレイアウト設計をおすすめします。

まとめ：最適な手法を選択してスライドの説得力と開発効率を最大化する

Googleスライドにおけるソースコードの表現は、単なる見た目の装飾にとどまらず、登壇資料の説得力や聴衆の理解度を左右する極めて重要な要素です。手作業による「色分けコピペ」から拡張機能の活用、さらにはGASやPythonによる「スライド自動化」まで、用途と目的に応じた適切なアプローチを選択することで、作成工数を劇的に削減しながらプロフェッショナルなプレゼンテーションを実現できます。本稿で紹介したテクニックを日々の資料作成にぜひ役立ててください。 （出典: google スライド コード（Yahoo!ニュース））