【AI・動画付き】未経験でもできた！Claude 3.5 Sonnetで作るSNSリンクページ
こんにちは、今日も蒸し暑いですね。
既に暑さに負けている私です(›´ω`‹ )
実は今日、プログラミング未経験なのに、自分のリンクまとめページを作っちゃいました。
◆noteの更新を動画でお届けしています
今回は、完成したwebページの実際の動作を動画にしました。
◆こちらが完成したリンクまとめページです↓↓↓
突然の閃き、そして行動へ
最近話題のClaude 3.5 Sonnet、皆様は使ってますか？
私も使用していて、ふと思いついたんです。
「そういえば、SNSリンクのまとめを作りたかったんだよな…」
リットリンクは素材を用意しないといい感じにならないので、登録せず放置してました。
そこで、Claude 3.5 SonnetのArtifacts機能を使えば、誰でも簡単にWEBページを作れるという情報を耳にした私。
「よし、やってみよう！」と思い立ったのです。
未知の領域への一歩
その瞬間、勇気を出して、未知への一歩を踏み出しました。
プログラミングの「プ」の字も知らない私が、WEBページを作る。
なんだか、宇宙飛行士になるくらい遠い夢のようでした。でも、不思議なもので一歩踏み出すと、次の一歩が見えてくるんですよね。
※最初にぼんやりしたイメージで作成したらそれなりの形にはなりましたが、デザインの変更とリンクを追加したいと思い変更しました。
イメージを自分でCanvaで作成して、Claudeに画像をアップロード。再度作り直しました。
ご自身でイメージがある方は、はっきり伝えるとイメージに近いものが出来ると思います。
驚きの簡単さ
Claude 3.5 SonnetのArtifacts機能を使って、自分のイメージしたwebページのコードを生成。
GitHubアカウントを作成。初めてなので少し緊張しましたが、案外すんなりできました。
GitHub PagesにArtifactsで生成したコードをコピペして、自分で画像をアップロード。
更新してリンクまとめページが完成！
完成の喜び
背景の星空のアニメーションが幻想的で、私がイメージしたDigital Horror Labのテーマにぴったり。
中央に配置されたカードデザインが情報を見やすく整理してくれています。
プロフィール画像は円形で表示され、各種SNSやコンタクト情報へのリンクも整理されて配置。
読みやすく、重要な情報が簡潔に伝わるようになっています。
背景のパルスエフェクトが静的なページに動きを加えて、見ていて飽きません。
未経験者へのエール
正直、最初は不安でいっぱいでした。
でも、やってみたら意外とできちゃうんですよね。プログラミング未経験の方、勇気を出して挑戦してみてください。
きっと、新しい世界が広がりますよ。
スマホからだと少しエフェクトがわかりにくいけど、見れる方はPCやiPadの大きい画面で見ていただけると嬉しいです(⁎˃ᴗ˂⁎)
最後に
この経験を通じて、AIと人間の創造性が組み合わさることで、どれだけ可能性が広がるかを実感しました。
プログラミングの壁を乗り越えて、自分のアイデアを形にする。その喜びは、言葉では表せないほどです。
皆さんも、Claude 3.5 SonnetのArtifactsで、ご自身のwebページやゲーム等ぜひチャレンジしてみてくださいね。
きっと、新しい自分に出会えるはずです。
最近も、作成したページを共有出来て更に自分で再現出来るRemix機能が追加されて、ますます充実のClaude 3.5 Sonnet Artifacts（Remix機能は有料ユーザーのみ）。
次は何を作ろうかワクワクしちゃいますね((*p'∀'q)
いいなと思ったら応援しよう！
