メインコンテンツへスキップ
見出し画像

会話だけでどこまで作れる?58歳会社員がChatGPT Workで公式サイトを作った記録


    足利市立美術館で、私のオリジナルキャラクター「紫苑」の作品を展示することになりました。

    展示に合わせて、ポストカードやしおりも作っています。

    前回の記事ではポストカードの制作の記録も公開しました。

    そのグッズを手に取ってくださった方に、作品だけでなく、
    作者である「カナミン」のことも知ってもらえたら。

    そう考えたとき、ひとつ困ったことがありました。
    私の活動は、いろいろな場所に分かれていたのです。

    noteには、AIとのつきあい方や日々の挑戦を書いている。

    Amazonには、初めて出版したKindle本がある。

    Xでは、紫苑の作品や制作途中の出来事を投稿している。

    ZORAでは、NFT作品を公開している。

    しゅわしゅわ王国のしーぷんという、別のオリジナルキャラクターも育てている途中です。

    それぞれのリンクを並べるだけなら、リンク集でもよかったのかもしれません。

    でも今回は、作品を見て初めてカナミンを知った方に、

    「この人は、どんな人で、ほかに何を作っているんだろう?」

    と、もう一歩先まで見てもらえる場所を作りたいと思いました。

    そこで、ChatGPTの「Sites」という機能を使って、公式サイトを作ってみることにしました。

    画像

    完成形が見えないまま、ホームページ作りを始めた


    私は、ホームページを作るためのコーディングはできません。

    デザインの専門知識があるわけでもありません。

    しかも、最初からサイト全体の完成形が見えていたわけではありませんでした。

    決まっていたのは、

    • 美術館で作品を見た方への案内先にしたい

    • Kindle、note、X、作品をひとつにつなげたい

    • 「AIクリエイター カナミン」の公式サイトにしたい

    という、大まかな目的だけです。

    「こんなサイトにしたい」とChatGPT Workに伝え、まずはどう指示をすればいいのかを聞いてみた。その後、チャットで何度かやりとりをしてサイトを作ってもらいました。

    画像
    まず、どう指示すればいいのかを聞いてみた


    画像
    ここから壁打ちをしながらサイトを修正していきました


    表示されたサイトを見て、

    「自己紹介は、もっと最初にあった方がいいかも」

    「最新のnoteも見えるようにしたい」

    「スマホでは、カナミンとナノのイラストが続いて見えるね」

    と、気になったことをひとつずつ伝えていきました。

    すると、そのたびに表示や順番が修正されていきました。

    設計図を完成させてから作り始めるのではなく、
    見ながら考え、話しながら整えていく。

    私にとっては、その進め方がとても合っていました。


    PCでよくても、スマホでは違って見えた


    ホームページは、PCで見るだけでは終わりません。

    スマホで開いてみると、PC版では気にならなかった部分が、いくつも見つかりました。

    トップのイラストのすぐ下に、自己紹介用のカナミンとナノがまた登場して、少し重複して見えたのです。

    そこで、スマホ版だけイラストとサイトタイトルの順番を入れ替えてもらいました。

    右上には三点メニューも追加し、

    • カナミンとナノ

    • 最新note

    • 美術館展示

    • 紫苑の作品

    • しーぷん

    • Kindle・SNS

    • お問い合わせ

    へ、すぐ移動できるようにしました。

    「スマホ版だけ、この順番にしたい」

    そんな細かな相談まで、会話で調整できたのは意外でした。

    画像
    スマホ版トップと三点メニュー



    うまく表示されないものもあった


    もちろん、最初からすべてが順調だったわけではありません。

    新着情報として、noteとXを並べて表示しようとしたところ、Xのタイムラインが読み込まれず、大きな空白ができてしまいました。

    これでは、せっかくサイトを訪れてもらっても「表示に失敗しているのかな」と思われてしまいます。

    相談した結果、Xの埋め込みはやめて、最新noteだけをサイト上部に表示することにしました。

    Xは、下部のリンクから見てもらう形に変えました。

    noteも、最初は記事タイトルだけで、見出し画像が表示されませんでした。

    そのことを伝えると、記事ページから見出し画像を取得する方法に変更され、最新記事のサムネイルが並ぶようになりました。

    トップ画像では、元のイラストに入っていた文字が、白い部分からうっすら透けて見える問題もありました。

    それもスクリーンショットを見せながら、タイトル部分を白く覆うように直してもらいました。

    AIで作ると、一度で完璧なものが出てくる。

    そんなイメージを持つ人もいるかもしれません。

    でも今回のサイト作りは、そうではありませんでした。

    私が違和感を見つける。AIに伝える。修正されたものを、もう一度見る。

    この繰り返しでした。

    うまくいかないことがあっても、専門用語で原因を説明する必要はありません。

    「ここに文字がうっすら見える」

    「Xが表示されないね」

    「スマホだと重複して見える」

    見たまま、感じたままを伝えることで、次の修正へ進めました。

    画像
    Xが表示されなかった/noteサムネイルも非表示
    画像
    noteサムネイルが表示されるように


    問い合わせ先は、Googleフォームにした


    サイトが形になってくると、「問い合わせ先も必要では?」という話になりました。

    作品の感想だけでなく、今後は展示や掲載、コラボレーション、キャラクターの利用について連絡をいただくことがあるかもしれません。

    最初はnoteの問い合わせ機能も考えました。

    けれど、noteから届くメールの中に問い合わせが埋もれてしまうと、気づかない可能性があります。

    メールアドレスをサイトに直接載せることにも、少し抵抗がありました。

    そこで、Googleフォームで専用の問い合わせ窓口を作りました。

    画像

    フォームには、

    • お名前・活動名

    • 返信先メールアドレス

    • 問い合わせの種類

    • 問い合わせ内容

    • 関連するWebサイトやSNS(任意)

    だけを設定しました。

    サイトの下部とスマホの三点メニューから、フォームを開けるようにしています。

    作品を見てもらうだけでなく、その先のご縁にもつながる入口ができました。


    気づけば、半日ほどで形になっていた


    サイトの構成を考え、PCとスマホの表示を確認し、細かな修正を重ね、問い合わせフォームまで追加する。

    気づけば、かかった時間は半日ほどでした。

    もちろん、掲載する文章やイラスト、Kindle本、紫苑の作品は、これまで積み重ねてきたものです。

    それでも、それらを一つのホームページとしてまとめるところまで、専門知識のない私が半日ほどで進められたことには驚きました。

    会話だけで形になったこと。

    PC版だけでなく、スマホ版まで調整できたこと。

    失敗しても、その画面を見せながら相談し、直していけたこと。

    これまでホームページ作りに感じていたハードルが、ずいぶん低くなりました。

    作る前に知っておきたい利用条件


    ここは大切なので、私の利用環境を書いておきます。

    私はChatGPT Plusを契約し、PCから制作しました。

    2026年9月現在、ChatGPT WorkとCodexは、無料プランでも一部利用できます。

    ただし、無料プランのCodexは短時間の軽い作業向けで、プランによって利用できる範囲や上限が異なります。

    今回、ホームページの作成と公開に使った「Sites」は、Plus、Pro、Business、Enterprise、Eduの対象機能です。

    無料プランとGoプランでは利用できません。

    また、Sitesの作成・管理について、OpenAIの公式案内に記載されているのはWeb版とChatGPTのデスクトップアプリです。

    そのため、この記事と同じ方法を試すなら、

    ChatGPT Plus以上の対象プラン+PC

    を前提に考えると分かりやすいと思います。

    完成した公開サイトは、スマホからも見ることができます。

    画像
    「同じ方法で作るには?」プラン比較図解

    ※サービスの提供状況や利用条件は変更される場合があります。最新情報はOpenAI公式ページをご確認ください。

    作ったのはホームページ。整理されたのは、自分の活動だった


    完成したサイトには、カナミンとナノの自己紹介、Kindle本、最新note、美術館展示、紫苑、しーぷん、SNSへのリンク、問い合わせ窓口が並んでいます。

    バラバラに活動していたつもりはありませんでした。

    でも、一つの場所に並べてみて初めて、それぞれが少しずつつながってきたことに気づきました。

    AIについて書いてきたnote。

    そこから生まれたKindle本。

    AIと壁打ちしながら育ててきた紫苑や、しーぷん。

    そして、初めての美術館展示。

    ホームページを作ることは、見栄えのよいページを用意するだけではありませんでした。

    「私は何をしてきて、これから何をしていきたいのか」を整理する時間でもあったのです。

    専門知識がなくても、最初から完成形が見えていなくても、まず相談してみる。

    表示されたものを見て、「ここは違う」「こうしたい」と伝えていく。

    それなら、AI初心者にもできるホームページ作りがあるのだと思います。

    画像


    今は美術館展示、次はKindle②の司令塔へ


    今回作ったサイトは、これで完成して終わりではありません。

    ホームページは、活動が立派になってから作るものだと思っていました。

    でも実際には、まだ途中だからこそ、作る意味がありました。

    今は、足利市立美術館で作品を見てくださった方に、カナミンの活動を知ってもらうための窓口です。

    展示が終わったら、展示案内は活動記録として残し、次は制作中のKindle②を中心にしたサイトへ少しずつ変えていく予定です。

    しーぷんの絵本や、新しい紫苑の作品も、これから加わるかもしれません。

    今は、美術館展示の窓口。

    次は、Kindle②の司令塔へ。

    このサイトも、カナミンの活動と一緒に、少しずつ育てていこうと思います。


    ▶ カナミン公式サイト


    画像
    読んでいただき、ありがとうございました


     
     
    50代女性会社員。保険事務。 非ITからITパスポートに挑戦し合格。 AIと対話しながら、迷いもそのまま書いています。 学び直しや働き方の気づきを綴るnote。 📚 Kindle『AIと暮らす本① AIとのつきあい方』発売中。 ※Amazonアソシエイト・プログラム参加者です。

    あなたへのおすすめ