diff --git a/package-lock.json b/package-lock.json
index 60b5595192c..6eb692724fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22274,6 +22274,12 @@
         "node": ">= 12"
       }
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
+      "license": "MIT"
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.6",
       "dev": true,
@@ -41487,6 +41493,7 @@
         "get-user-media-promise": "1.1.4",
         "graphql": "^14.7.0",
         "highlight.js": "^10.7.3",
+        "html-to-image": "^1.11.13",
         "immutable": "3.8.3",
         "intl": "1.2.5",
         "js-base64": "2.6.4",
diff --git a/packages/scratch-gui/package.json b/packages/scratch-gui/package.json
index 1d94e2ee51a..cf0537da5ad 100644
--- a/packages/scratch-gui/package.json
+++ b/packages/scratch-gui/package.json
@@ -152,6 +152,7 @@
     "get-user-media-promise": "1.1.4",
     "graphql": "^14.7.0",
     "highlight.js": "^10.7.3",
+    "html-to-image": "^1.11.13",
     "immutable": "3.8.3",
     "intl": "1.2.5",
     "js-base64": "2.6.4",
@@ -176,7 +177,7 @@
     "react-intl": "6.8.9",
     "react-modal": "3.16.3",
     "react-popover": "0.5.10",
-    "react-redux": "8.1.3",
+    "react-redux": "^8.0.0",
     "react-responsive": "9.0.2",
     "react-style-proptype": "3.2.2",
     "react-tabs": "5.2.0",
diff --git a/packages/scratch-gui/src/containers/ruby-tab.jsx b/packages/scratch-gui/src/containers/ruby-tab.jsx
index a7bbb1dfa90..a5ad0e7e31a 100644
--- a/packages/scratch-gui/src/containers/ruby-tab.jsx
+++ b/packages/scratch-gui/src/containers/ruby-tab.jsx
@@ -47,6 +47,8 @@ import AutoCorrectModal from '../components/auto-correct-modal/auto-correct-moda
 import RubyScriptPreview from '../components/ruby-script-preview/ruby-script-preview.jsx';
 import {generatePreviewCode} from '../lib/ruby-script-preview';
 import {autoCorrect, defaultSettings as defaultAutoCorrectSettings} from '../lib/auto-correct';
+import {downloadRubyAsImage} from '../lib/ruby-screenshot';
+import cameraIcon from '../components/blocks-screenshot-button/icon--camera.svg';
 import styles from './ruby-tab/ruby-tab.css';
 import {loadMonacoLocale} from '../lib/monaco-i18n-helper';
 import {getPrism, loadPrism} from '../lib/prism-parser';
@@ -422,6 +424,14 @@ const RubyTab = props => {
         onFontSizeChange(DEFAULT_FONT_SIZE);
     }, [onFontSizeChange]);
 
+    const handleScreenshot = useCallback(() => {
+        if (!editorRef.current) return;
+        const target = vm.editingTarget;
+        const spriteName = target ? target.sprite.name : 'sprite';
+        const title = props.projectTitle || 'project';
+        downloadRubyAsImage(editorRef.current, title, spriteName);
+    }, [vm, props.projectTitle]);
+
     const handleSelectTarget = useCallback(targetId => {
         const target = vm.runtime.getTargetById(targetId);
         if (target) vm.setEditingTarget(target.id);
@@ -967,6 +977,20 @@ const RubyTab = props => {
             <div className={styles.zoomControlsWrapper}>
                 <button
                     className={styles.zoomButton}
+                    data-testid="ruby-screenshot"
+                    title="Rubyコードを画像として保存"
+                    onClick={handleScreenshot}
+                >
+                    <img
+                        alt="Rubyコードを画像として保存"
+                        className={styles.zoomIcon}
+                        draggable={false}
+                        src={cameraIcon}
+                    />
+                </button>
+                <button
+                    className={styles.zoomButton}
+                    data-testid="ruby-zoom-in"
                     onClick={handleZoomIn}
                 >
                     <img
@@ -976,6 +1000,7 @@ const RubyTab = props => {
                 </button>
                 <button
                     className={styles.zoomButton}
+                    data-testid="ruby-zoom-out"
                     onClick={handleZoomOut}
                 >
                     <img
@@ -985,6 +1010,7 @@ const RubyTab = props => {
                 </button>
                 <button
                     className={styles.zoomButton}
+                    data-testid="ruby-zoom-reset"
                     onClick={handleZoomReset}
                 >
                     <img
diff --git a/packages/scratch-gui/src/lib/ruby-screenshot.js b/packages/scratch-gui/src/lib/ruby-screenshot.js
new file mode 100644
index 00000000000..5834d7c0891
--- /dev/null
+++ b/packages/scratch-gui/src/lib/ruby-screenshot.js
@@ -0,0 +1,88 @@
+// === Smalruby: This file is Smalruby-specific (Ruby tab screenshot export) ===
+
+import {toBlob} from 'html-to-image';
+import downloadBlob from './download-blob';
+
+/**
+ * Builds the export filename for Ruby tab screenshots.
+ * @param {string} projectTitle - Project name
+ * @param {string} spriteName - Sprite / stage name
+ * @returns {string} PNG filename
+ */
+const buildFilename = function (projectTitle, spriteName) {
+    return `${projectTitle}_${spriteName}_ruby.png`;
+};
+
+/**
+ * Captures the Monaco editor content as a PNG image and triggers a download.
+ * Temporarily expands the editor to its full content height so that all lines
+ * (including those scrolled out of view) are rendered in the DOM before capture.
+ * ViewZones (e.g. furigana annotations) are captured naturally as DOM elements.
+ * @param {object} editor - Monaco editor instance
+ * @param {string} projectTitle - Project name (used in filename)
+ * @param {string} spriteName - Sprite / stage name (used in filename)
+ * @returns {Promise<void>}
+ */
+const downloadRubyAsImage = async function (editor, projectTitle, spriteName) {
+    if (!editor) return;
+
+    const editorDomNode = editor.getDomNode();
+    if (!editorDomNode) return;
+
+    const model = editor.getModel();
+    if (!model || model.getLineCount() === 0) return;
+
+    // Save original state
+    const scrollTop = editor.getScrollTop();
+    const scrollLeft = editor.getScrollLeft();
+    const containerEl = editorDomNode.parentElement;
+    const originalHeight = containerEl.style.height;
+    const originalOverflow = containerEl.style.overflow;
+
+    try {
+        // Disable scrollBeyondLastLine to get tight content height
+        editor.updateOptions({scrollBeyondLastLine: false});
+        editor.layout();
+
+        // Expand editor to full content height so all lines are in the DOM
+        const contentHeight = editor.getContentHeight();
+        containerEl.style.height = `${contentHeight}px`;
+        containerEl.style.overflow = 'hidden';
+
+        // Force Monaco to re-layout at the new size
+        editor.layout();
+
+        // Wait for Monaco to render all lines
+        await new Promise(resolve => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(resolve);
+            });
+        });
+
+        // Capture the editor DOM as a PNG blob.
+        // skipFonts avoids SecurityError when html-to-image tries to read
+        // cssRules from cross-origin stylesheets (Monaco's CDN CSS).
+        const blob = await toBlob(editorDomNode, {
+            backgroundColor: '#ffffff',
+            pixelRatio: 2,
+            skipFonts: true
+        });
+
+        if (blob) {
+            downloadBlob(buildFilename(projectTitle, spriteName), blob);
+        }
+    } finally {
+        // Restore original state
+        editor.updateOptions({scrollBeyondLastLine: true});
+        containerEl.style.height = originalHeight;
+        containerEl.style.overflow = originalOverflow;
+        editor.layout();
+        editor.setScrollTop(scrollTop);
+        editor.setScrollLeft(scrollLeft);
+    }
+};
+
+export {
+    buildFilename,
+    downloadRubyAsImage
+};
diff --git a/packages/scratch-gui/test/integration/ruby-tab-furigana-zoom.test.js b/packages/scratch-gui/test/integration/ruby-tab-furigana-zoom.test.js
index 2b1ab026a7b..b3656dc4108 100644
--- a/packages/scratch-gui/test/integration/ruby-tab-furigana-zoom.test.js
+++ b/packages/scratch-gui/test/integration/ruby-tab-furigana-zoom.test.js
@@ -53,14 +53,14 @@ const getFuriganaInfo = async () => {
  * Click the zoom-in button in the Ruby tab.
  */
 const clickZoomIn = async () => {
-    await clickXpath('//div[contains(@class, "ruby-tab_zoomControlsWrapper")]//button[1]');
+    await clickXpath('//button[@data-testid="ruby-zoom-in"]');
 };
 
 /**
  * Click the zoom-reset button in the Ruby tab.
  */
 const clickZoomReset = async () => {
-    await clickXpath('//div[contains(@class, "ruby-tab_zoomControlsWrapper")]//button[3]');
+    await clickXpath('//button[@data-testid="ruby-zoom-reset"]');
 };
 
 describe('Ruby tab furigana zoom follow', () => {
diff --git a/packages/scratch-gui/test/unit/lib/ruby-screenshot.test.js b/packages/scratch-gui/test/unit/lib/ruby-screenshot.test.js
new file mode 100644
index 00000000000..1afc7d7afa4
--- /dev/null
+++ b/packages/scratch-gui/test/unit/lib/ruby-screenshot.test.js
@@ -0,0 +1,195 @@
+import {
+    buildFilename,
+    downloadRubyAsImage
+} from '../../../src/lib/ruby-screenshot';
+
+jest.mock('../../../src/lib/download-blob', () => jest.fn());
+import downloadBlob from '../../../src/lib/download-blob';
+
+// Mock html-to-image
+jest.mock('html-to-image', () => ({
+    toBlob: jest.fn()
+}));
+import {toBlob} from 'html-to-image';
+
+// Helper: create a mock Monaco editor instance
+const makeMockEditor = ({lineCount = 5, contentHeight = 200} = {}) => {
+    const domNode = document.createElement('div');
+    const container = document.createElement('div');
+    container.style.height = '300px';
+    container.appendChild(domNode);
+
+    return {
+        getDomNode: jest.fn(() => domNode),
+        getModel: jest.fn(() => ({
+            getLineCount: () => lineCount
+        })),
+        getContentHeight: jest.fn(() => contentHeight),
+        getScrollTop: jest.fn(() => 0),
+        getScrollLeft: jest.fn(() => 0),
+        setScrollTop: jest.fn(),
+        setScrollLeft: jest.fn(),
+        updateOptions: jest.fn(),
+        layout: jest.fn(),
+        _domNode: domNode,
+        _container: container
+    };
+};
+
+// ---- buildFilename ----
+
+describe('buildFilename', () => {
+    test('builds filename with _ruby suffix', () => {
+        expect(buildFilename('MyProject', 'Cat')).toBe('MyProject_Cat_ruby.png');
+    });
+
+    test('handles Japanese characters', () => {
+        expect(buildFilename('プロジェクト', 'ネコ')).toBe('プロジェクト_ネコ_ruby.png');
+    });
+
+    test('handles empty strings', () => {
+        expect(buildFilename('', '')).toBe('__ruby.png');
+    });
+});
+
+// ---- downloadRubyAsImage ----
+
+describe('downloadRubyAsImage', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('does nothing when editor is null', async () => {
+        await downloadRubyAsImage(null, 'project', 'sprite');
+        expect(toBlob).not.toHaveBeenCalled();
+    });
+
+    test('does nothing when editor DOM node is null', async () => {
+        const editor = makeMockEditor();
+        editor.getDomNode.mockReturnValue(null);
+        await downloadRubyAsImage(editor, 'project', 'sprite');
+        expect(toBlob).not.toHaveBeenCalled();
+    });
+
+    test('does nothing when model is null', async () => {
+        const editor = makeMockEditor();
+        editor.getModel.mockReturnValue(null);
+        await downloadRubyAsImage(editor, 'project', 'sprite');
+        expect(toBlob).not.toHaveBeenCalled();
+    });
+
+    test('does nothing when model has zero lines', async () => {
+        const editor = makeMockEditor({lineCount: 0});
+        await downloadRubyAsImage(editor, 'project', 'sprite');
+        expect(toBlob).not.toHaveBeenCalled();
+    });
+
+    test('calls toBlob with editor DOM node and correct options', async () => {
+        const mockBlob = new Blob(['test'], {type: 'image/png'});
+        toBlob.mockResolvedValue(mockBlob);
+
+        const editor = makeMockEditor({contentHeight: 500});
+
+        await downloadRubyAsImage(editor, 'MyProject', 'Cat');
+
+        expect(toBlob).toHaveBeenCalledTimes(1);
+        const [domNode, options] = toBlob.mock.calls[0];
+        expect(domNode).toBe(editor.getDomNode());
+        expect(options.backgroundColor).toBe('#ffffff');
+        expect(options.pixelRatio).toBe(2);
+        expect(options.skipFonts).toBe(true);
+    });
+
+    test('downloads blob with correct filename', async () => {
+        const mockBlob = new Blob(['test'], {type: 'image/png'});
+        toBlob.mockResolvedValue(mockBlob);
+
+        const editor = makeMockEditor();
+
+        await downloadRubyAsImage(editor, 'MyProject', 'Cat');
+
+        expect(downloadBlob).toHaveBeenCalledWith('MyProject_Cat_ruby.png', mockBlob);
+    });
+
+    test('does not download when toBlob returns null', async () => {
+        toBlob.mockResolvedValue(null);
+
+        const editor = makeMockEditor();
+
+        await downloadRubyAsImage(editor, 'MyProject', 'Cat');
+
+        expect(downloadBlob).not.toHaveBeenCalled();
+    });
+
+    test('temporarily expands editor to full content height', async () => {
+        const mockBlob = new Blob(['test'], {type: 'image/png'});
+        toBlob.mockImplementation(() => {
+            // Check that container was expanded when toBlob is called
+            expect(editor._container.style.height).toBe('500px');
+            expect(editor._container.style.overflow).toBe('hidden');
+            return Promise.resolve(mockBlob);
+        });
+
+        const editor = makeMockEditor({contentHeight: 500});
+        editor._container.style.height = '300px';
+
+        await downloadRubyAsImage(editor, 'project', 'sprite');
+
+        // After capture, container should be restored
+        expect(editor._container.style.height).toBe('300px');
+    });
+
+    test('restores scroll position after capture', async () => {
+        const mockBlob = new Blob(['test'], {type: 'image/png'});
+        toBlob.mockResolvedValue(mockBlob);
+
+        const editor = makeMockEditor();
+        editor.getScrollTop.mockReturnValue(42);
+        editor.getScrollLeft.mockReturnValue(10);
+
+        await downloadRubyAsImage(editor, 'project', 'sprite');
+
+        expect(editor.setScrollTop).toHaveBeenCalledWith(42);
+        expect(editor.setScrollLeft).toHaveBeenCalledWith(10);
+    });
+
+    test('restores state even when toBlob throws', async () => {
+        toBlob.mockRejectedValue(new Error('capture failed'));
+
+        const editor = makeMockEditor();
+        editor._container.style.height = '300px';
+
+        await expect(
+            downloadRubyAsImage(editor, 'project', 'sprite')
+        ).rejects.toThrow('capture failed');
+
+        // State should still be restored
+        expect(editor._container.style.height).toBe('300px');
+        expect(editor.layout).toHaveBeenCalled();
+    });
+
+    test('disables scrollBeyondLastLine before capture and restores it after', async () => {
+        const mockBlob = new Blob(['test'], {type: 'image/png'});
+        toBlob.mockResolvedValue(mockBlob);
+
+        const editor = makeMockEditor();
+
+        await downloadRubyAsImage(editor, 'project', 'sprite');
+
+        // First call disables, second call (in finally) re-enables
+        expect(editor.updateOptions).toHaveBeenCalledWith({scrollBeyondLastLine: false});
+        expect(editor.updateOptions).toHaveBeenCalledWith({scrollBeyondLastLine: true});
+    });
+
+    test('calls editor.layout() to trigger re-render', async () => {
+        const mockBlob = new Blob(['test'], {type: 'image/png'});
+        toBlob.mockResolvedValue(mockBlob);
+
+        const editor = makeMockEditor();
+
+        await downloadRubyAsImage(editor, 'project', 'sprite');
+
+        // layout should be called at least twice: once to expand, once to restore
+        expect(editor.layout.mock.calls.length).toBeGreaterThanOrEqual(2);
+    });
+});