Android StudioでFlutterプロジェクトを作成してClaude Codeで開くまでの手順

FlutterはAndroidとWebの両方に対応したアプリを1つのコードで作れる開発環境です。この記事ではAndroid StudioでFlutterプロジェクトを新規作成し、Claude Codeで開くまでの手順を画像つきで解説します。コードが書けなくても、Claude Codeに日本語で指示するだけで開発を進められる環境がこれで整います。

Flutter SDKのパスを設定する

Android Studioを起動したら、画面上部のメニューバーから「File」①をクリックします。表示されたメニューの中から「New」②を選ぶと、さらにメニューが展開されます。その中にある「New Flutter Project」③をクリックするとプロジェクト作成画面が開きます。

左側のメニューに「Flutter」という項目①があります。これをクリックすると右側に「Flutter SDK path」という入力欄が表示されます。

初期状態では空欄になっているので、右端の「…」ボタン②をクリックしてフォルダ選択画面を開きます。

フォルダ選択画面が開いたら、左側のメニューから「ドキュメント」を選びます。一覧の中に「flutter」フォルダ③があるのでクリックして選択します。下部の「フォルダー」欄に「flutter」と表示されたことを確認したら「フォルダーの選択」ボタン④をクリックします。

フォルダの選択が完了すると「Flutter SDK path」の欄にパスが自動で入力されます。内容を確認したら画面右下の「Next」ボタンをクリックして次に進みます。

プロジェクトの基本情報を設定する

「Next」を押すとプロジェクトの設定画面が表示されます。設定する項目は以下の通りです。

Project name① プロジェクトの名前を入力します。初期値は「untitled」になっているので、好きな名前に変更してください。英語の小文字とアンダースコアのみ使用できます（例：my_app）。

Project location② プロジェクトの保存場所です。初期値のままで問題ありません。

Android language③ 「Kotlin」を選択してください。最初からKotlinが選ばれているので、そのままで大丈夫です。

Platforms④ 対応するプラットフォームを選択します。今回はAndroidとWebを使うので、少なくともこの2つにチェックが入っていることを確認してください。

設定が完了したら右下の「Create」ボタンをクリックしてプロジェクトを作成します。

---

Cannot Save Settingsというエラーが出た場合

プロジェクト名に使用できない文字が含まれているよ、という内容のエラーです。

Flutterのプロジェクト名はアルファベットの小文字とアンダースコア（_）のみ使用できます。ハイフン（-）や大文字、日本語は使用できないので注意してください。「OK」を押してプロジェクト名を修正してから再度「Create」をクリックしてください。

プロジェクトの作成

「Creating Flutter project」と表示されてプロジェクトが作成中です。完了するまでそのままお待ちください。

Process ‘app’ Is Runningというポップアップが出た場合

「Process ‘app’ Is Running」というポップアップが表示された場合は、以前に起動していたアプリがまだ動いていることを意味しています。新しいプロジェクトに切り替えるためにプロセスを終了する必要があります。「Terminate」をクリックして問題ありません。

プロジェクトの作成完了

しばらく待つとプロジェクトの作成が完了します。左側にプロジェクトのフォルダ構成が表示され、右側にREADME.mdが開いた状態になれば成功です。

これでFlutterプロジェクトの準備ができました。次はこのプロジェクトフォルダをClaude Codeで開いて、開発を始めます。

FlutterプロジェクトをClaude Codeで開く

Claude Codeのに戻り、画面下部にある「フォルダーを選択」ボタンをクリックするとフォルダ選択画面が開きます。

Claude Codeの画面下部にある「フォルダーを選択」ボタン①をクリックするとフォルダ選択画面が開きます。

上部のパス②に「AndroidStudioProjects → digitalhack」と表示されていることを確認します。フォルダの中にandroid、lib、webなどFlutterプロジェクトのフォルダ構成が表示されていれば正しいフォルダです。

下部の「フォルダー」欄に「digitalhack」と表示されていることを確認したら「フォルダーの選択」ボタン③をクリックします。

プロジェクトの読み込み完了

フォルダの選択が完了すると、入力欄の下に「digitalhack」と表示されます。これでClaude Codeがプロジェクトのフォルダを認識した状態になりました。あとは入力欄に日本語で指示を入力するだけで開発を始められます。

まとめ

Android StudioでFlutterプロジェクトを作成してClaude Codeで開くまでの手順は以上です。フォルダを選択するだけでClaude Codeがプロジェクトを認識してくれるので、難しい設定は必要ありません。次の記事では実際にClaude Codeに指示を出して開発を進める手順を紹介します。