Claude Designの紹介とノンデザイナーへのメリット
今日は、Claude Designって何がすごいのかと。 ノンデザイナー、もちろん僕もノンデザイナーでございますが、向けに徹底解説をしていきたいと思います。
まず、僕、クロードデスクトップアプリのこととか、結構推しておりまして、世界一わかりやすいクロードアプリの教科書というものを出して、なんと参考書1冊分2980円なんですけど、すでに1000名の方が購入をしていただいておりまして、ご好評いただいております。
特に、AI初心者向けです。割と内容としては。ただ、中級者とか今後アップデートしていくので、上級者向けの内容もあるんですけど、非常にご好評いただいておりまして、ぜひそちらも見てほしいんですが、今回はそれとはまたちょっと違うものになります。
同じクロードという、アンソロピックというAIの会社が出しているものなんですが、今回はこのデザインに注力した、いわゆるAIモデルになっております。AIモデルというかAIサービスというかツールになっているということですね。
何かというと、いわゆるプロのデザイナーがFigmaというツールを使うんですよ。このFigmaが分からないじゃないですか。僕も分からない。使ったことないんだけど。正直、これによって何が起こるかというと、今までデザイン未経験だった人もプロのデザイナーと同じようなデザインワークフローですね。
例えばウェブサイトを作るとか、ランニングページを作るとか、公式サイト、あとはウェブアプリとか何かを作っていく場合に、デザイナーと同じようなワークフローをノンデザイナーもできるようになって、なんならですね、プロのデザイナーが作るようなウェブサイトのデザインを本当に素人が半日で作れてしまう可能性を持っているものが、このクロードデザインというものです。
僕もちょっと1、2時間触ってみたんですけど、正直ヤバいということで、まずは今日はノンデザイナー向けなので、入門というかクロードデザイン何がすごいねんというのが10分くらい聞いたら、それはヤバい、使わないといけないかもねというような内容に話していきたいと思います。
Figmaとは何か？デザイン制作のワークフロー
まず、そもそもフィグマって何ってことなんですけど、僕もこれ全体フィグマ使ったことないですからね、そこからお話をさせてください。例えばフリーランス学校とかで何かLPとかサイトを作るときに、デザイナーさん、チフネコさんとかに依頼するんですけど、フィグマでちょっとワイヤーフレームを作りましたとか言ってくださるのが、もう何のことか僕は分かってなかったです。
このフィグマっていうのは、世界中のプロのウェブデザイナー、アプリデザイナーがほぼ全員使っているデザイン専用ソフトでございます。フォトショップってね、なんかこう画像加工とかあるじゃないですか、フォトショップ、フォトショップ、あれのデザイン版みたいなイメージでOKと。
で、このフィグマに何を作っているかというと、本物そっくりだけどまだ動かないアプリとかウェブサイトの画面を作っているというふうに思ってください。僕らって普通何か例えば、アナとかジャルとかの公式サイトに行ったら綺麗なウェブデザインっていうかね、ウェブサイトがあってピコピコピコと触れるじゃないですか。
あれを作る前にこんな動きとかこんな画面とかこんな構成どうですかねっていうものを見せるものがフィグマなんですね。で、専門用語で言うとMockupとかプロトタイプというものになります。要は完成予想図みたいなものですよね。
Mockupって何かね、この商品をここにはめ込んでみようと、ああいいじゃんこれで行こうみたいな、そういうのっていろんな現場でもあると思うんですけど、例えば僕が今フリーランス学校の新しいローンチを控えているんですけど、それの会員ページみたいなのを作りたいとしますよね。これ実際ちょっと作っていかないといけないというか作るんですけど、
例えばそれをエンジニアさんにさ作ってって頼むと、後からさここの色変えたいとかボタンの位置がこっちがいいとかさってなった時に作り直しが大変じゃないですか。だから家とかでもありますよね。そうそう、LLACハウス建てる時もありましたよ。やっぱ設計師さんに、例えばまずはそのラフのデザインを作ってもらうわけですね。こんなイメージでって。
それがさいきなりさ大工さんに設計図っていうか、これ作ってくださいって作り始めてさ、あ、やっぱねごめん1階建てより2階建ての方がいいとかだったらやばいことが起こるじゃないですか。とんでもない現場だね。そう、そういったことがウェブで起こらないように、ああもうほんとこれいいね、もうこれでいきましょうみたいな。
だからLLACハウス、本社兼そのAI活用の拠点を作る時もですね、そういう風な模型まで作ってくれてね、建築師さんが。それで僕見て、ああこんな感じだったらめちゃくちゃいいですねっていうので、3Dとかさ、まさにプロトタイプみたいなものですよね。それを見て、ああこうしましょうみたいなね、トイレはこうやって女性用専用トイレも作りたいですとか言って作っていったんですけど。
まさにそういったことをやるのがFigmaであると、そのデザインのことですね。だから見た目だけの完成予想像を作って関係者でこれでいこうと合意しながら、そして最終エンジニアが本物を作る。家だったら大工さんがそれを作っていくというような流れでございます。この見た目だけの完成予想像を作るのがFigmaであると。
で、具体的にFigmaで作れるものっていうのを並べるとですね、スマホアプリの全画面とかホームページのトップから申し込み完了までのセンイーズだったり、プレゼンのスライドとか、SNS投稿への画像を散らしロゴ集とか、人に見せるもの、バナーとか含める四角物、ほぼ全部作れるのが万能ツール、このFigmaなんですね。
ただ、Figmaの弱点としては、使い方を覚えるのに時間がかかったりとか、ボタンの角を丸くするだけでも結構メニューを開いてどの数値を入れてみたいなことを覚える必要があるらしいです。ごめんなさい、これもAIの台本です。僕もよくわかっております。今、理解しながら読んでおります。で、ノンデザイナーにはハードルが高いということですね。ここで出てくるのがクロードデザインのわけですよ。
Claude Designの機能と使い方
はい、ということで、このクロードデザインは何ものかということで、一言で言うと、Figma、完成予想像を作る、Figmaで何時間もかけて作るような成果物を日本語で指示するだけで出してくれるツールです。お母さんとかにさ、カレー作っといて、みたいな感じでね、指示を出す。指示って言うとダメだね。お願いをしたりするじゃないですか、人間同士だと。それと同じようなことをできる。デザインに関してもやってくれるということですね。
操作を覚える必要ないし、例えば僕がLLCハウスの料金プランの紹介ページを作って、色は水色メインでとかって言ったら文章で出てきたりとかすると。だからFigmaっていうのはデザイン版のワードみたいな感じですね。クロードデザインはそのワードにChatGPTが載ったみたいな感じ。ちょっとこれわかりにくいね。はい、っていう理解でOKですと。
画面を開くとタブが並んでるんですけど、これどういう風に見るかちょっと僕も開いたんですけど、まず英語なんですね。まず4つのタブがあります。タブっていうのは画面のアプリ、ウェブのアプリなんですけど、ウェブサイトにまずアクセスしてクロードデザインを使うんですね。
そのウェブサイトにアクセスしたそのサイト自体をMacとかだとドックに追加できるんです。ホーム画面っていうかそのパソコンのね。それがいわゆるウェブアプリみたいな言い方をするんですけど、そのウェブアプリとして使うことができますと。で、そのウェブアプリを開くと何が起こるかというと、ただのブラウザの画面ね。
クロームとかサファリとかで見に行ったらただのブラウザの画面をそれをわざわざホーム画面に追加してるっていうのがウェブアプリみたいなものなんですけど、その画面で何が映ってるかというと4つ映ってます。4つ何があるかと。まずプロトタイプ。プロトタイプって何やねんって感じですけど。
いわゆるそのアプリとかウェブサイトの画面デザインを作るってやつね。いわゆるさっきの完成予想像を作るってやつ。で、専門用語で言うとワイヤーフレームとかね。あとMockupとかそういうことをすると。で、そこのなんかねプロトタイプの中にこのワイヤーフレームとハイファイってあるんですよ。ハイフィディビティかな。
で、これは何かというと完成版に近いものを作るモードなんですね。だからワイヤーフレームはなんかこうこんな感じでラフラフに。で、ハイファイはもうものすごい色も画像もちゃんと本番環境に近いものが入ったものだということです。これがまずねプロトタイプっていうところにありますと。
で、次にスライドデッキっていうものがあります。スライドデッキ。これが多分僕らにとって一番なじみ深いというか使うケースが多いだろうものになります。いわゆるパワーポイントみたいなデザインを作れるようなものがスライドデッキです。
スライドデッキじゃないな。パワーポイントとか言ってくださいね。わかりにくいよね。だからプロトタイプっていうのがまず1個目あって、その横にスライドデッキっていうのがありますと。なのでそれは普通にパワーポイントを作りますね。まだ僕はそれ触ってないんだけど、見た感じですねえぐいの出てきてます。スライドショーとかでアニメーションとかあるじゃないですか。それもできちゃう。
だから相当レベルの高いスライドを作れるので、これも僕ちょっと明日試してみようかなというふうに思います。
次3つ目がですね、フログテンプレートっていうのはテンプレートをあらかじめ作っておいて、それを元に作るみたいな感じですね。例えばアニメーションっていうテンプレートがあって、これモーションデザインのテンプレートらしいんですけど、これを使うと同じようにモーションでそういうものがデザインが作れると。
あと4つ目、これがOther、その他ですけど蒸気以外の自由枠ということで、よくわかんないですけど、おそらく僕らが仕事で使うってなったらまずスライドデッキが多いんじゃないですかね。
いわゆるノートブックエルみたいな感じですよ。パワーポイントを自動で作成するみたいな感じなんですけど、これが多いかな。
で、その次に多分そのウェブデザインとかアプリをどうやって作るかっていうところのプロトタイプを使っていくみたいな。僕はプロトタイプしか使ってないんですけどね。
いやでもね、すごいのがフリー行の公式サイトをちょっと作らせたんですけど、これもデプロイを仮にしてるんですけど、どうせだったらこれ作るかって言ってやってるんですけどね。
いや何がすごいって、いわゆるデザイナーさんとかにお仕事を依頼されたことある人はわかると思うんですけど、いくつかパターンを出してくれたりするじゃないですか。このパターンとこのパターンと、家作りもそうですよね。
こっちのシックな感じともっと和の感じみたいな。そういったパターンを8個ぐらい作らせることができるのかな。
それをタブみたいな形でピコピコピコってね、切り替えながらどれがいいかなって選べるんですよ。どれがいいかなって選べながら、そこの色味をワンポチで変えれるんですよ。
この画面見ないとちょっとわかりにくいんだけど、ピンクを使う、ブルーを使う、あったかい系使うとかね、ちょっとモノクロにするみたいなことがワンポチでできて、
このパターンがいいといったらそれを実際に、さっきのハイフィディリティで、実際の本番環境みたいな形でデザインを作っていくことができるんですね。
いやー、もうほんとこれが10分ぐらいできちゃってさ、どうしていいのかわからなくなりましたね。これは触ってみるのがいいと思いますね。
Claude Designの利用方法と注意点
どうやったら触れるかというとですね、クロードのまずはそのプロプランとマックスプランって分かれてるんですけど、プロかマックスどちらかに課金をしていたらこれ使えるようになってるはずです。
おそらくそうだったと思う。僕はマックスプランを使ってるので、そのままマックスプランで使いましたと。
だから今クロードのデスクトップアプリとか使ってる人で、コワークとか使ってる人はもちろんこのデザインを使います。
ただ、多分トークン消費が結構大きいんだと思うんですよ、これはね、割と。なのでそのあたりはちょっと注意をしてみてください。
そうですね、僕もちょっと見に行ってみるんですけど、これなんかね、クロードのデスクトップアプリから使用量って設定とか見れるんですけど、結構使ってるね。
これもね、クロードデザインはデザインだけで、一応それぞれモデルごとに一応分かれてリミットが来るみたいなので、
気をつけないと結構リミットが来て、あれ一週間待たないといけないとかね、追加しないといけないみたいなことが起こるので、遊ぶにしろちょっと見ながら。
だから最初はそのスライドデッキ使ってみるのがいいんじゃないかなというふうに思いますね。ちょっと僕も明日使ってみたいと思います。
Claude Designの活用と今後の展望
ということで、こういうのは本当に触ってみないと分からないんですが、今後レベルの高いウェブデザインを本当にノンデザイナーが出していけるんだけども、
それにおいてはこのデザインがどういうワークフローで動いていくのかを理解しないといけないんですよね。
デザイナーさんがどういうふうに仕事をしているかって理解しながらもいかないといけないし、結構デザイン用語も学ばないといけないので、
要するにデザインを学ばないといけなくなるんですよ。ノンデザイナーにとってのデメリットは学ばないといけない。
デザインはできるんだけど学ばないといけないというね。いい感じにもちろんできるんだけどもっとこだわりたくなると思うんでね。
こういうのをやり始めるとね。というような感じになるかなというふうに思います。
だから結構デザインというもの自体の概念を変えてきた一つのサービスになってますね。こちらはね。
だからおすすめとしてはクロードデスクトップアプリを使いながら日頃の仕事を回しつつ、
ウェブデザイン、見た目ってめちゃくちゃ大事ですからね。見た目が9割ですから、見た目を鍛えるとか作っていくためにはこのクロードデザインを使っていくと、
両方使えたら正直マジで本当に仕事には困らないと思いますね。
いやー僕マジ借金返さなくてはこれでウェブデザインたくさん使って納品すると思います。
今会員サイトがない、ホームページがないとかね、僕が実際フリーランス学校の公式サイトがなくて困ってるというか、ずっと仕事をサボってるんで、
それを今回ちょっとクロードデザインで作りきってですね、ちゃんと皆さんに見せたいと思います。
フリーランス学校の新サービスとAI活用
フリーランス学校がね、いろいろ商品整理を今ガーッとしてまして、いろいろあるんですけども、次は無料講座と無料動画講座と有料コミュニティ。
動画講座とかフィードバックだったりとか質問とかコミュニティとか、あとは何かオフ会とかそういったものが含まれた有料のコミュニティサービス、このどちらかになります。
無料の動画講座、メルマガの動画講座か、あとはいろいろ全部ついた有料のコミュニティかどっちかになるので、
それが今度ねちょうど5月が5周年になりますので、フリーランス学校ね、次の10年に向けて引き続きフリーランスを一人にしないというね、
ミッション、スイコーのために商品導線とかそういったサポートシステムとかめちゃくちゃ分かりやすくするので、
商品が多すぎるとどうしても分散するんですよ、僕のリソースも。もうみんなが成果を出せる環境を作りますので、もう一回。
それぞれいいもの、今までやってきたものがいいものなので、それを合わせた商品を作っておりますので、今ガチャガチャ大工事をしておりますので、
ぜひですね、ちょっとその新しいコミュニティの方もね、気になるなって方は、あの情報また待っていただけると嬉しいです。
ちょっと本当かなり、募集は最初絞って出しますので、またね、あの先行案内とかそういった情報とかはね、出しますので聞いていただけると嬉しいです。
はい、ということで、まあこういった本当にね、あのAIを使ってどうやってね働いていくかとか、お金を稼いでいくかとか、
暮らしを良くするかって結構実務に関わることを全部そっちの有料コミュニティでバーンと出しますので、
もちろん無料講座でもね、AIの活用とか言うんですけど、これ結構ニッチだし、実際僕もあのデザイナーの千舟子さんに聞きながらやったりとかするので、
その聞いている様子とかもね、やっぱりコミュニティの中で出していきたいです。
それが一番の勉強なんで、そういったところはもう本当に完全にあの、もうその新しい有料のコミュニティの方でやっていきますので、
ぜひですね、そういったところを見ていきたいなという方はね、情報を楽しみに待っていただけると嬉しいです。
あと無料講座ももちろん新しくするので、すごくね、いいものを作っていきますので、
いやAIといいものを作れるんですよ、今だったらね。もうすぐいいものができるので、それも良かったら見ていただけると嬉しいです。
はい、これ全部でAIでやってるんだよっていうのはちょっと見せたいと思いますので。
まとめ：Claude Designの革新性
はい、ということで今日はクロードデザインがね、何でヤバいのかってことをデザインの方にも、僕自身もそうですけど、
分かるように解説をさせていただきました。
今日も聞いただきありがとうございます。この後も心地いい時間を過ごしてください。バイバイ。
