Slide 1

Slide 1 text

DIST.52 「今から始めるClaude Code超入門」 今から始める Claude Code超入門 合同会社世路庵 沖 良矢 | 2026.1.29 THU

Slide 2

Slide 2 text

目次 1 Claude Codeとは 2 基本的な使い方 3 補足情報

Slide 3

Slide 3 text

おき 沖 よ し や 良矢 @448jp ⚫ 合同会社世路庵 代表 ⚫ デザイナー/エンジニア ⚫ 受託制作一筋23年

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

PROMOTION プロモーション分野 検索エンジン、SNS、AIに対して確実に情報を伝える実装力と、Flashで培った心地よさを追求するア ニメーションスキルを組み合わせ、ユーザーの心に深く残る上質なデジタル体験を創出します。イン タラクションデザインを追及してきた世路庵では、細部の触り心地までこだわり抜いています。

Slide 6

Slide 6 text

APPLICATRION アプリケーション分野 綿密なヒアリング、リサーチを重ね、より深いビジネス理解をふまえた設計、デザインや実装も一気通 貫に対応できるチームが特長です。オーダー通り作るだけに留まらず、長年の実績と経験に基づいた 専門家ならではの提案を得意としています。

Slide 7

Slide 7 text

CORPORATE AND E-COMMERCE コーポレート・EC分野 企業の顔となるブランド表現と、シームレスな購買体験を支える堅牢なシステムを統合し、ビジネス の核となるプラットフォームを構築します。公開後の運用や改善施策についてもサポートし、継続的な KPI達成とブランド価値向上に貢献する提案を行います。

Slide 8

Slide 8 text

世路庵では、制作現場の実績と経験を幅広い層に還元し、ウェブを広げていくために積極的に教育・コミュニティへの貢献を行っています。教育事業では、研修・講義、動画 トレーニング、書籍・雑誌への寄稿、コミュニティ事業では、カンファレンスの運営サポート、勉強会の主催、スピーカーとしての登壇などを実施しています。 教育・コミュニティ事業 企業・大学・専門学校での研修・講義 LinkedInラーニング Web Designing Adobe MAX Japan Vue Fes Japan DIST

Slide 9

Slide 9 text

1 Claude Codeとは What’s Claude Code ?

Slide 10

Slide 10 text

CLIで動く エージェント型 コーディングツール Claude Code is 何?

Slide 11

Slide 11 text

Claude Code時代前は…… Before the Claude Code era...

Slide 12

Slide 12 text

コードエディタ一体型ツール コードエディタと直結してLLMの支援を 受けながら開発できます。コード補完や チャット機能が主体となっています。
 ※現在は、右のプロダクトの中でもエージェント型が増加 デメリット エディタに縛られる

Slide 13

Slide 13 text

アプリケーション自動生成ツール 主にブラウザ上のサービスで、チャット を通してAIが開発をします。 デメリット すでに人間が作った成果物に対し て導入しにくい 品質の制御が困難

Slide 14

Slide 14 text

自律型コーディングツール 既存のプロジェクトに対して、Gitなどを 通して指示したタスクをAIが自律的に 開発します。 デメリット AIが出力したPull Requestに間違 いがないかをチェックする手間が 増えた OpenAI Codex

Slide 15

Slide 15 text

Claude Codeが生まれた背景 多様なIDE Various IDE LLMの急速な変化 Rapid changes in LLM

Slide 16

Slide 16 text

Claude Codeの特徴 ⚫ Anthropic LLMの性能 ⚫ マルチファイル・マルチタスク対応 ⚫ 並列実行能力の高さ ⚫ 実行環境に依存しない(OS、IDE...)

Slide 17

Slide 17 text

Claude Opus 4.5リリース時のSWE-bench結果 引用:https://www.anthropic.com/news/claude-opus-4-5

Slide 18

Slide 18 text

2 基本的な使い方 Basic usage

Slide 19

Slide 19 text

Claude Codeの利用方法は多彩 ⚫ コードエディタ、IDE、ターミナルとの統合 ⚫ Claude Code Web ⚫ Claude Code Desktop ⚫ API経由での利用 ⚫ その他(Chrome拡張機能、GitHub Actions、Slack...)

Slide 20

Slide 20 text

推奨環境 OS Windows 10+ (WSL、またはGit for Windowsを使用) macOS 13.0+ Ubuntu 20.04+/Debian 10+ RAM 4GB以上 その他 インターネット接続必須 Claudeアカウントが必要

Slide 21

Slide 21 text

インストール方法 ⚫ OSによって異なるネイティブインストールを推奨 ⚫ npm経由でのインストールは現在非推奨なので注意

Slide 22

Slide 22 text

機能紹介デモ

Slide 23

Slide 23 text

3 補足情報 Supplemental information

Slide 24

Slide 24 text

料金プラン(サブスクリプション) 月額料金 利用可能モデル メッセージ数(5時間ごと) 最適な用途 Free 無料 Sonnet 4.5 - 試用 Pro $20 + Opus 4.5 10~40プロンプト 軽作業 Max (5x) $100 + Opus 4.5優先アクセス 50~200プロンプト パワーユーザー Max 20x $200 + Opus 4.5常時利用 200~800プロンプト 並列利用 ※上位のTeamプランは5名以上~から導入可能

Slide 25

Slide 25 text

メッセージ制限 セッション 最初のメッセージ開始から5時間=1セッション リセット 各セッション終了時にメッセージカウントがリセット 週間制限 7日間でリセットされる累積利用枠 /usageコマンドで確認可能

Slide 26

Slide 26 text

動作モードの違い(Shift + Tabキーで切り替え) default デフォルトのモード。各ツールの初回使用時に権限の許 可を求める。 accept edits セッション中のファイル編集権限を許可する。 plan 計画策定を行う専用モード。ファイルの編集は行わない。 bypass permissions Claude Codeにすべての権限を与える特殊モード。起動 時に引数を指定して利用する。システムファイルを削除 する可能性もあるので要注意。

Slide 27

Slide 27 text

拡張思考モード(Alt + Tキーで切り替え) 最大予算 中予算 小予算 英語 think harder think intensely think longer think really hard think super hard think very hard ultrathink think about it think a lot think deeply think hard think more megathink think 日本語 熟考 深く考えて しっかり考えて もっと考えて たくさん考えて よく考えて 長考 考えて 複雑な問題に対して、より深い分析と思考を行うためのモード。より多くの時間がかかるものの、多角的な検討とより精度の高い回答が期待 できます。例えば、包括的なプロジェクト計画や、複数ステップの実装などで利用します。利用するには、以下のキーワードをプロンプトに含め ます。

Slide 28

Slide 28 text

CLAUDE.mdの活用 ⚫ プロジェクト以下にCLAUDE.mdを設定(サブディレクトリ可) ⚫ ユーザー/.claude/CLAUDE.mdに置くと全プロジェクトに適用 ⚫ 既存プロジェクトでは/initコマンドでも作成可能 Claude Codeに遵守してほしいプロジェクトやユーザー独自のルールを 「CLAUDE.md」に記述しておくと、毎回のプロンプトで指示を出さなくてよくなります。

Slide 29

Slide 29 text

その他、利用時のTIPS ⚫ 手動でのコード編集は避ける ⚫ 開発サーバーは手動で起動・終了する(環境による?) ⚫ コンテキスト、コンテキスト、コンテキスト!(/clearコマンド) ⚫ ドキュメントを残す ⚫ 最新情報を追う

Slide 30

Slide 30 text

まとめ Conclusion

Slide 31

Slide 31 text

世路庵でのClaude Code活用状況 フロントエンドエンジニア ⚫ フロントエンド実装(7~8割程度) ⚫ プロジェクト構造の分析 ⚫ 実装方針の相談 代表 ⚫ フロントエンド実装(9~10割程度) ⚫ 社内勉強会用スライド作成 ⚫ サイドプロジェクト実装 ⚫ 原稿のプラン、フィードバック

Slide 32

Slide 32 text

Claude Codeをどう使うか ⚫ AI時代は使わないことが大きなリスク ⚫ 煽り屋、驚き屋を信じず、自分自身の目で確かめることが重要 ⚫ 誰もがコードを出力できるからこそ、個性と品質が問われる よいモノづくりをするというゴールは、 ハンドメイドでもAIでも不変

Slide 33

Slide 33 text

ありがとうございました 合同会社世路庵 沖 良矢 @448jp 世路庵 採用情報はこちら!