メむンコンテンツぞスキップ
芋出し画像

䌚話だけでどこたで䜜れる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ア゜シ゚むト・プログラム参加者です。

    あなたぞのおすすめ