simple-web-system technology

Webに関する技術をシンプルに扱うブログ

Claude Artifactsを使っていい感じのWebサイトを作成する備忘録

以下作ってみて感じたことをざっくり紹介

結構簡単にできるから面白い

HTMLで作る。Reactで作らない

Reactだとcdnが使えないので、レイアウト用のライブラリが限られてしまう。

HTMLで作ること

UIライブラリ用にCSSを読み込む場合は、Safariwebkit系のブラウザを使う

実際にChrome等でTailwindCSSを使ってClaude Artifactsを使ってWebサイトを作ってみるとわかるが、デザインが適用されていないのがわかる。

前の記事で紹介したけど、ChromeFirefoxだとCSPでCSSが読み込まれなかったりする。

SafariとかGnomeのブラウザだとサクッと読み込める(Windowsはどうすればいいかわからない・・・)

blog.hatena.ne.jp

UIライブラリを指定する

tailwind, daisy, bulma, bootstrapとか指定するとサクッと作ってくれるので色々試すの楽しい

アイコンをつける

fontawesomeとかからアイコンを使ってくれるので、手軽に見た目が良くなる。

デザインを作ってから詳細コンテンツをMarkdownとかで指定する

まずいい感じのデザインを作って、あとからMarkdown等でコンテンツを流し込むといい感じになる

意外と出力できる量が少ない

出力トークンの関係で大きめのサイトを作ろうとすると、途中で止まってしまうことも結構ある。

出力する内容を取捨選択するしかない。

あとで自分で編集するなら、コンポーネント単位で出力してもらうのもいいかも