2025年8月５日に新しいClaude Ops4.1がリリースされたので、例によって簡単な精度比較を実施してみました。
過去のClaude検証記事
Case 1️⃣ 論文 PDF ➡ チートシート生成
🎯 テスト内容
Transformer のバイブル 「Attention Is All You Need」 を PDF で投入し、
“ウェブプレゼン資料型チートシート” を生成してもらう。
投げたプロンプト（全文）
添付したPDF論文ファイルを分析し、インタラクティブな「プレゼン資料型チートシート」をHTML/CSS/JavaScript/SVGで作成してください。
論文の本質を把握でき、エグゼクティブへの説明にも使える高品質なウェブベースのビジュアライゼーションを目指します。
日本語の資料を作成してください。
【技術仕様】
1. ベース構造：
- レスポンシブHTML5レイアウト（16:9比率最適化）
- モダンなCSS Grid/Flexboxによる洗練されたレイアウト
- 暗号化PDFパーサーでの論文テキスト抽出（可能な場合）
2. インタラクティブ要素：
- JavaScript駆動のホバーエフェクトとクリックアクション
- タブ切り替え式セクションナビゲーション
- 重要データの拡大/詳細表示機能
- SVGベースのインタラクティブチャート（D3.js活用）
3. ビジュアライゼーション：
- 論文構造を表現するSVGフローダイアグラム
- データをリアルタイム表示するWebGLシェーダーエフェクト
- カスタムSVGアイコンとシンボル
- 論文メトリクスのアニメーションダッシュボード
4. パフォーマンス最適化：
- 非同期データローディング
- コンポーネントの遅延読み込み
- シェーダーコードの最適化
【コンテンツ構成】
1. ヘッドラインセクション：
- 論文タイトル（アニメーションタイポグラフィ）
- 著者情報と研究メトリクス（インタラクティブバッジ）
- カラーコード化された研究分野タグ
2. 「Key Insights」パネル：
- 論文の核心（最大3つ）を強調表示
- クリックで展開するディテール
- 重要度を示すビジュアルインジケーター
3. 「Research Architecture」セクション：
- SVGで描画された研究フレームワーク図
- シェーダーアニメーションによる方法論フロー
- クリック可能な実験設計コンポーネント
4. 「Data Story」ビジュアライゼーション：
- インタラクティブなデータグラフ（D3.js）
- WebGLシェーダーによるデータパターン表現
- ドラッグ可能なデータポイント調査ツール
5. 「Impact Analysis」ダッシュボード：
- リアルタイム引用メトリクスAPI連携
- 関連研究領域へのインパクトビジュアライゼーション
- 将来研究方向性のフォースダイレクテッドグラフ
6. 「Practical Applications」セクション：
- インタラクティブなユースケースカード
- 産業別応用可能性スコア
- ホバーで詳細表示される実装シナリオ
【実装指示】
- メインHTMLコンテナに階層的構造を実装
- モダンなCSSでビジュアルヒエラルキーを確立
- Three.jsまたはD3.jsによるデータビジュアライゼーション
- GLSLシェーダーでデータパターンを動的表現
- 研究手法のインタラクティブSVGフローチャート
- ローディング/トランジションにスムーズなアニメーション
- タッチデバイス対応のインタラクションデザイン
- アクセンチュア風のダーク系の配色を選択
このプレゼン型チートシートは、学術的正確さとビジュアルインパクトを両立させ、論文内容をわかりやすく伝えると同時に、技術的に洗練されたウェブエクスペリエンスを提供するものにしてください。
⚔️ 出力比較
Claude OPS 4.1
Claude OPS 4.0
Claude 3.7
Case 2️⃣ Python コード ➡ 多言語ドキュメント生成
🎯 テスト内容
Python ソースを食わせて、日英切替ボタン付き の詳細設計書を生成させる。
投げたプロンプト（全文）
以下のpythonコードの日本語の詳細設計書を作成してください。
#条件
・アクセンチュア風のビジネス向けのデザイン、配色、レイアウト
・html、css、Javascriptだけで作成する。
・フロー図などはSVG画像を用いて#flow-codeを参考にきれいなフロー図を描画すること。
・見た目を良くするためにシェーダー（shader）ーなどを活用すること。
・デザイン：ダーク系
・英語、日本語切替ボタンを実装すること。
・出来るだけ冗長なコードは避け、少ないコードで実装すること。
#flow-code
~~~
<style>
.animate-flow {
animation: flowAnimation 10s linear infinite;
}
@keyframes flowAnimation {
0% {
stroke-dashoffset: 300;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
<svg width="100%" height="100%" viewBox="0 0 1000 400">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#7928ca" />
<stop offset="100%" stop-color="#ff0080" />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<rect x="0" y="0" width="1000" height="400" fill="#161b22" />
<circle cx="150" cy="200" r="60" fill="#1e2430" stroke="url(#gradient1)" stroke-width="2" />
<text x="150" y="200" font-size="14" fill="#e6edf3" text-anchor="middle">xxx</text>
<circle cx="150" cy="200" r="70" fill="none" stroke="#7928ca" stroke-width="1" opacity="0.3" class="pulse" />
<circle cx="350" cy="80" r="50" fill="#1e2430" stroke="url(#gradient1)" stroke-width="2" />
<text x="350" y="80" font-size="12" fill="#e6edf3" text-anchor="middle">xxx</text>
<circle cx="350" cy="210" r="50" fill="#1e2430" stroke="url(#gradient1)" stroke-width="2" />
<text x="350" y="215" font-size="12" fill="#e6edf3" text-anchor="middle">xxx</text>
<circle cx="350" cy="340" r="50" fill="#1e2430" stroke="url(#gradient1)" stroke-width="2" />
<text x="350" y="350" font-size="12" fill="#e6edf3" text-anchor="middle">xxx</text>
<circle cx="550" cy="200" r="60" fill="#1e2430" stroke="url(#gradient1)" stroke-width="2" />
<text x="550" y="190" font-size="14" fill="#e6edf3" text-anchor="middle">xxx</text>
<text x="550" y="210" font-size="10" fill="#8b949e" text-anchor="middle">xxx</text>
<circle cx="550" cy="200" r="70" fill="none" stroke="#ff0080" stroke-width="1" opacity="0.3" class="pulse" />
<circle cx="750" cy="200" r="60" fill="#1e2430" stroke="url(#gradient1)" stroke-width="2" />
<text x="750" y="190" font-size="14" fill="#e6edf3" text-anchor="middle">xxx</text>
<text x="750" y="210" font-size="10" fill="#8b949e" text-anchor="middle">TTS API</text>
<circle cx="900" cy="200" r="60" fill="#1e2430" stroke="url(#gradient1)" stroke-width="2" />
<text x="900" y="200" font-size="14" fill="#e6edf3" text-anchor="middle">xxx</text>
<path d="M210 200 C280 200, 280 80, 300 80" fill="none" stroke="#7928ca" stroke-width="2" stroke-dasharray="5,5" class="animate-flow" />
<path d="M225 200 C280 200, 280 220, 300 220" fill="none" stroke="#7928ca" stroke-width="2" stroke-dasharray="5,5" class="animate-flow" />
<path d="M210 200 C280 200, 280 350, 300 340" fill="none" stroke="#7928ca" stroke-width="2" stroke-dasharray="5,5" class="animate-flow" />
<path d="M400 80 C450 80, 450 170, 490 170" fill="none" stroke="#7928ca" stroke-width="2" stroke-dasharray="5,5" class="animate-flow" />
<path d="M400 220 L490 200" fill="none" stroke="#7928ca" stroke-width="2" stroke-dasharray="5,5" class="animate-flow" />
<path d="M400 340 C450 340, 450 230, 490 230" fill="none" stroke="#7928ca" stroke-width="2" stroke-dasharray="5,5" class="animate-flow" />
<path d="M610 200 L690 200" fill="none" stroke="#ff0080" stroke-width="2" stroke-dasharray="5,5" class="animate-flow" />
<path d="M810 200 L840 200" fill="none" stroke="#ff0080" stroke-width="2" stroke-dasharray="5,5" class="animate-flow" />
</svg>
~~~
#python
~~~
｛ここにコードを張り付けておく}
~~~
Claude OPS 4.1
Claude OPS 4.0
Claude 3.7
Case 3️⃣ HTML だけでマリオ風ゲームを再現🍄
最後に恒例のマリオ風ゲームの再現ですが、著作権チェックが厳しくなっておりそのままマリオ風ゲームを作らせるのはNGになっていたので、主人公を🐤にして制作してみました。
Claude OPS 4.1
Claude OPS 4.0
以下からプレイできます。
Claude 3.7
おまけ
svg画像生成能力も気になったのでちょっと試してみました。
https://note.com/piyo_bird/n/nd26b86000e04 このサイトに書いてあることを１枚スライドに超わかりやすくまとめてsvg画像にして。
デザインはアクセンチュア風カラーで視認性が高いレイアウトでお願いします。
生成したSVGをPPTに取り込んで比較した結果は以下の通り。
Claude OPS 4.1
Claude OPS 4.0
劇的に変わったという感じではないですが、4.1の方が全体的にレイアウトが細かく調整されていたり、わかりやすくポイントを纏められている気がしました。
まだ全然使い倒せていないので、4.1が強いユースケース等模索していきたいですね。
アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。
Discussion
この比較わかりやすくて良いですね！勉強になります！