エンジニアの「歩み寄り」が壁を溶かす。デザイナーに Claude Code を活用してもらいたい!


AI 活用を促進するためにエンジニアがデザイナー向けに Claude Code のワークショップを行いました。

ワークショップ実施後、日が浅いため大きな変化はありませんが AI 活用について前向きに取り組める環境に変わってきたのではないかと感じています。

非エンジニア職の活用が想定よりも進まず、どうすれば活用してもらえるのか悩まれている方へ取り組みの1歩目を紹介します。

デザイナーにとってのハードルを考える

デザイナーにとってハードルとはなんでしょうか?
その 1 つとしてターミナル(CLI)の操作であると考えています。

エンジニアであればファイルの作成、フォルダの移動、書き込みなど対応できる方も多いと思いますが、デザイナーの中には苦手意識を持つ方もいらっしゃることでしょう。

そこで苦手意識を払拭するために検討したのが、Claude のデスクトップアプリです。

デスクトップアプリ(GUI)で Claude Code を利用する

デスクトップ版の Claude Code であればターミナルと同様の設定で Skills やコマンドを利用することが可能です。

つまり、エンジニアが作成した Skills をそのまま利用してもらうことができます。

ファイルの作成や書き込みも Claude Code に依頼できるので、ターミナルの操作方法がわからなかった方にも Claude Code のチャット欄に入力すれば問題なく対応できます。

デザイナーに Claude Code の便利さを体験してもらう

新しいツールを自身のワークフローに組み込むためには、ツールが便利であると認識することが近道だと考えています。

そこで設定から利用までを体験するワークショップを考えました。
ワークショップは下記の条件を元に設計することにしました。

  • 個人で進捗も異なることが予測されるため、やり切ることを考えず最低限必要な時間で設定(今回は30分)
  • 日常業務に近く少し困っていることを解決できるもの
  • 対象は、プロジェクトチーム内のデザイナー
  • 初期設定ができてないこと

そして「Notion 検索が Claude Code 経由でできること」をゴールに設定することにしました。

「Notion 検索」を題材に選んだ理由は、実務で利用頻度が高いツールであったためです。
加えて、以下の効果も見込みました。

  • 情報の参照速度を上げて、チームの機動力を上げる
  • 新規アサインメンバーが正確なキーワードを知らなくても目的のドキュメントに辿り着ける環境をつくる
  • 過去のコンテキストを迅速に検索できるようになる

ワークショップを実施するまでの事前準備

Claude Code を利用してこなかったデザイナーという想定なので「設定ファイルの作成位置」「利用するスキルファイル」「必要なコマンド」などをドキュメントとして準備し視覚的に確認できるようにしました。

また、Notion の ゲストアカウントの場合は、Notion MCP を利用できないため事前に独自の CLI を作成しました。
Skills を作成するのでも良いのですが、CLI を作ったのはトークンの節約をしたかったためです。

ワークショップの進め方と当日の反応

当日は事前に作成したドキュメントを画面共有しながら、手順を一つずつ確認して進めました。

Notion MCP のインストールや Notion インテグレーションの設定など、個人で環境が異なる部分は Claude に聞きながら各自で対応してもらう形を取りました。

デザイナーの反応としては、Claude Code が Notion を検索して結果を返す様子を見て「へー」という納得感のある反応が印象的でした。

ドキュメントを見ながら進められたこともあり、戸惑いのようなものはほとんどなかったと思います。

ワークショップ開催後、デザイナーからは「もっと使っていきたい」という声をもらったので成功だったと言えます。

想定外の出来事

Homebrew のインストールや Xcode の更新については事前に対応をお願いしていましたが、もう少し考えたらわかったことで、当日になって更新が走ってしまうケースがあり進捗にバラつきが出てしまいました。

参加人数は数人だったので大きな問題にはなりませんでしたが、事前に brew コマンドが利用できることの確認まで含めてお願いしておくとよりスムーズに進行できると思います。

職能の境界を溶かすのは、ツールではなく「配慮」

今回の試みを通じて再確認したのは、新しいツールを導入する際に最も重要なのは「相手のコンテキストに歩み寄る」ことだという点です。

エンジニアが「自分たちにとっての当たり前(ターミナル)」を押し付けず、デザイナーが「これなら自分でもできそう」と思える手触り感のある環境を整える。

その上で職域を超えて橋渡しをする人がいることで会社全体で AI 活用に取り組むための土台ができ、結果チーム全体の成果を最大化させると信じています。

次やるなら

今回のワークショップでは当日に環境差分が出てしまったことが反省点でした。

次に同様の取り組みをするなら、Homebrew のインストール確認や Xcode の更新といった初期設定の部分から事前に対応できるよう、プロンプトやドキュメントをまとめて配布しておきたいと考えています。

「Claude に聞けば自分でも設定できる」という体験を事前準備の段階から提供できれば、ワークショップ当日は本題にすぐ入れるようになり、より多くの時間を「便利さの体験」に使えると考えています。

Gaji-Labo は フロントエンドのAI開発の実績と知見があります

急速に進化するAI技術、進まないUIとの統合…。 ユーザー体験を損なわずにAIを導入したいと考えながら、実装や設計に悩み、開発が停滞している。 そんな課題を抱えるプロダクトや開発チームを、私たちは数多く支援してきました。

フロントエンド開発の専門企業である Gaji-Labo は、AIチャットや自然言語処理UIなどの設計・実装において、AIの特性を踏まえた体験設計・UI開発・運用まで、フェーズに応じたサポートが可能です。

フロントエンドでのAI導入を相談する!

Gaji-Labo フロントエンドエンジニア向けご案内資料

Gaji-Labo は新規事業やサービス開発に取り組む、事業会社・スタートアップへの支援を行っています。

弊社では、Next.js を用いた Web アプリケーションのフロントエンド開発をリードするフロントエンドエンジニアを募集しています!さまざまなプロダクトやチームに関わりながら、一緒に成長を体験しませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください!

求人応募してみる!


投稿者

フロントエンドエンジニア。 事業会社で LPO や EFO のサービス改善を経験し、Gaji-Labo に入社。 関わってくださる人により良い選択を提供できることを目指し日々奮闘しています。 3度の飯よりアニメが好き。