Claude

動きが遅いっ！ 我がサイトは3年目に突入しやした 10月1日をもってこのサイトは3年目へ突入。御覧頂いている皆様、本当にありがとうございます。いや、もうね、本当にありがとうございます（媚びへつらう）。 2年目は色々とございました。殆どこのサイトを更新しないというね。 まぁYouTubeも本腰いれっか！と思ったら本腰入れすぎたっていうねｗｗｗ いやまぁ笑っている場合じゃないんです。このサイトを運営するためにレンタルサーバーを借りておりますので、更新しないだけレンタル代が水の泡、塵となって消えているわけです。 特に2年目後半は殆ど更新しねぇ・・・という状況が続いたので3年目は積極的に自分が世に送り出したいことをやりたいもんだねぇ！という思いです。そんな3年目のスタート、今回は少し心機一転していこうと思っております。 と言ったって、もう11月なるだろうが！というツッコミもあるでしょう。申し訳ありません。正論は受け付けません。その通りすぎますので。 今回の心機一転は Webデザイン更新 です。ということで、ここからはですます調の敬体から〜だ。の常体に戻ります。 なぜWebデザインを更新したいんだい？ 一度、当サイトのトップページを御覧いただきたい。 へっ素人丸出しやないの！ まぁ・・・素人が作りましたぁ！というようなデザインである。いや素人なんだが。 このデザインを開設当初からずっぅぅぅぅと使っている。 じゃあさっさとWebデザイン変えれば良いじゃん。 そんな声をぶち込んでくる人もいらっしゃるだろう。何も知らねぇくせによぉ⋯いや失礼しました。一概にデザイン更新をすると言っても色々とハードルが高いのである。 当サイトでは脆弱性が問題になったPHPでしれっと注目を浴びたWordPressを使用し運営している。 https://ja.wikipedia.org/wiki/WordPress このWordPressを使うことで自分オリジナルデザインでサイトを開設できるし、拡張していくとお店の予約システムであったり、掲示板の仕組みも導入することができるという非常に自由性が高いシステムとなっている。 ただWordPressを使うことで自由性を手に入れる代わりに「自分で保守していかねばならない」ということが発生する。 日本国内・海外に目を向けると当サイトのように自分で情報を発信するサービスというのは星の数ほど宇宙の膨張率ほどに存在する。 日本国内の有名どころだと「アメーバブログ」、いやらしいサイトが使っていることでおなじみの（持論）「FC2ブログ」やまとめサイトがバンバンに使っているようなイメージの「ライブドアブログ」そしてなんか論文的な内容を垂れ流している人がよく使っていそうな「はてなブログ」が有名だ。そして最近では芸能人の情報発信地や金儲けを企んでいる人がよく使っているようなイメージのある「note」も人気だ。あ、自分もnoteに投稿しています（宣伝）。 https://note.com/tetsu_kawabata 海外だとGoogleが展開するBloggerや•世界中のライター、研究者、エンジニアが記事を投稿する知的なプラットフォームmediumというのもある。mediumという存在を今知ったなんて言えやしない。 多くのサービスがこの世に存在するが、それぞれのメリットとして「ユーザーは保守・開発をしなくても良い」ということにある。 サービス側が提供する基本的な機能やデザインで満足するならば既存サービスで問題はない。ただ、逆に言うと「拡張性や自由性がない」のが問題になる。 「バズりてぇ！」「なんか他の人と違うことしたいんだブヒィッ！」という厨二病的思考を持った人間は既存サービスでは満足できずにWordPressへ流れ着く。 流れ着いたWordPressには乗り越えるべき問題が控えているとは知らずに哀れな人間はレンタルサーバーを借りたりしてしまうのだ。それが私なのだ。 WordPressの難しさ WordPressではサイトのデザインや機能を変更できるテンプレート「テーマ機能」が用意されている。世界中で使われているWordPressだ、世界中の有志が様々なテーマを用意している。 ニュースサイトのようなもの、写真を全面に押し出すもの、文章だけを表示させるという尖ったものもある。 そんな当Webデザインの根幹を担うテーマには、よしあかつきさんが公開しているテーマ・ystandardを使用している。 https://wp-ystandard.com/ ystandardはカスタマイズ前提で設計されていて、使用する側が規約内で色々と手を加えられるようになっている。色も好きに、記事の見せ方やスタイリッシュに見せることも可能だ。 他のテーマでは大きく変更が出来ないようになっていたり、自分好みには変更ができない仕組みが組み込まれていたりと面倒な部分があり、それとは異なってystandardは自由性がとても高い。大変素晴らしいテーマなのだ。 じゃあその素晴らしき力があるテーマを私は使いこなせたのか？ 正解わかりきっているでしょう？使いこなせなかったんどああああああ！ 知識がありませんでした なぜ使いこなせなかったのか？単純に知識がなかった。 WordPressを構築するのは非常に簡単だ。自分が運営するサイトはエックスサーバーを使用しているのだが、サーバー内にWordPressを組み込んでくれるという手厚いサポートもある。 https://www.xserver.ne.jp/manual/man_install_auto_word.php なので「あっWordPressでサイト運営してぇ」と今日ちょっとラーメンでも食べに行くか的な感じで初めることだってできる。 ただ、そこからは自分でやっていかねばならない。当たり前である。お前のやりたいことなんだからお前がやれや、ということ。 2024年開設当時、WordPressを自分色に染めるならHTMLの知識が必須だった。いや今もなのだが。 トップページの中央に〇〇を配置して・・・と思ったらHTMLでコード書かねばならない。記事の背景を白くしたい、URLの枠を作りたい、など色々なアイディアを具現化するならば更にHTMLを極める必要がある。 じゃあ、HTML勉強したらよかったんじゃね？ と思うだろう。これがねぇ⋯難しいんすよ⋯本当にムズい。HTMLと単純に言ってもパソコンの言語の1つですからねぇ。勉強する気になれませんでしたぁ⋯！ 勉強ができないだけなんだろ？ ちっ⋯正論はそこまで。 サイトを開設してバズりてぇ！という発情期の犬的な考えしか無かった私だ。 自分がどのようなサイト運営の方針を考えているか？それに則っていくとデザインはシンプルもしくはカラフルなのが良いのか？サイトに長く留まってもらうためのサイト内の設計はどうするか？ それらを全てすっ飛ばし、開設した。だってサイトアイコンも無かった程に「まずサイトを開設するか！」という思いしか無かった。 https://tetsu-dakawa.com/2024/12/14/icon-generater/ その状態のまま2年経ってしまった。家を支える骨組みに違和感を覚えながらも、意外と崩壊しないね。なんて思いつつ、突き進んだ。 それでもね。やっぱりやらねばならないんです サイトを満2年もやっていれば何となく自分でやりたいこと合わないことがわかってくる。どうやら自分はニュースマガジン的なサイトにしていきたいようだ。更新頻度は少ないけど。どうやら自分は高品質な写真を多く張りたいようだ。更新頻度は少ないけど。 とにかく、自分がやりたいことが徐々に具現化してきた今こそ「Webデザインを変える時がやってきた！」と思っている。 ただHTMLの知識は2年経った今でも取得していないし、これからもする気はない！それでもWebデザイン更新したいっ！というないものねだりを抱えていた最中、TwitterないしXを見ているととある人物のポストが流れてきた。 それは「AIサービス・ClaudeとChatGPTを使って自分が運営する会社のWebデザインを更新した」という内容。その人物は、「1つもコードを書かず」という内容。更に「HTMLの知識は1つもない」と来た。 ・・・・・・・・・ その手があったかぁっっ！ AIに頼ります。 サイトを開始した2024年から2年が経ち世界は大きく変わってきた。多くの人が深い知識をもっていなくても何とか立ち回れるようになってきた。それができるのもAIによるものだ。 AIというと色々あるが一番に有名なのがChatGPTだろう。ここ最近はCMも放送するほどに生活に食い込んでくるのが当然のサービスとなってきた。 https://www.youtube.com/watch?v=12I1abKjH-Q 少しフィルム調なのが気になる それに準じるのがClaudeだろう。ChatGPTの親会社OpenAIの元メンバーによって開設された会社Anthropicによって展開されているAIサービスだ。 https://ja.wikipedia.org/wiki/Claude 自分はClaudeの有料プラン「Claude Pro」に加入している。個人向けの有料プランではスタンダードなものだ。加入時期は2026年4月頃から。 加入した理由は本腰を入れたYouTubeのデータを次の動画に有効活用したかったからだ。 どんな動画テーマが見られているか、どんな層の視聴者が集まっているか、サムネイルはどのようにするべきか、などなどを知るため考えるために活用していた。 ただ、情報活用ぐらいしかClaude使いこなせていなかった。そんな中で今回の情報。Claudeってそこまでできるんかい⋯！という驚きでいっぱいである。 投稿元を見ていくと以下の順序で進めたそうな。 ClaudeもしくはChatGPTにWebデザインの方針を伝える ↓ Webデザインの候補を出力してもらい、そこから絞り込む ↓ デザインを更に精査。Claude CodeもしくはCodeXでテスト環境に移行する ↓ テスト環境で問題なければ、手動と合わせてClaude CodeもしくはCodeXで本番環境へ移行 ↓ 実際にWebデザインを更新、公開 この流れで人間の手が加わったのは「Webデザインの細かい指摘」「更新後に人間側が必ず操作する部分」ぐらいらしく、自分が触りたくねぇと忌避していたHTMLのコード部分については全てClaudeもしくはChatGPTによって構築されたというのだ。 はぁ⋯もうなんか人間いらねぇんじゃね？と思ってしまうほどだ。ここ最近のSNSでは驚き屋というカテゴリーに属する人たちが増えている。 SNSや動画サイトなどで、最先端の技術や新しいツール（主に生成AIなど）に対して、大袈裟なリアクションや過剰な誇張表現を用いて注目を集めようとする発信者（インフルエンサー）を指す俗語 Googleより引用 うるせぇな、大げさすぎるだろ！なんて思ったりしていたが自分が直接的に触れる部分が自動化されたり改善されているのを知れば、まぁ驚きたくもなる。 Webデザインの更新ができるようになった要因はAIサービスの発展で片付けられない。主に2つの要素が絡んでいる。1つ目はデザインを生み出すAIツールの発展。 ここ最近、街中の飲食店やスーパーなどでケバケバしい色味をした商品ポップなどを見かけることが多くなってきた。あとジブリ風の自画像とか。あれ使っている人に碌な人いないよね。 https://www.itmedia.co.jp/news/article/2608/18/2000000580/ まぁこれらは全てAIツールによって出力されたもので、使用には不向き。やっぱり人間だよね！と思っていたのだが、それは前の話だ。 ChatGPTやClaudeではデザインに特化した機能がここ最近になって向上。「ちょっと違うよね」という感じだったのが、ツールの向上によって「使用に耐える」ユーザーが求めるものに寄せられるようになってきた。 そして2つ目にHTMLといったプログラミング言語を組み立てるツール「バイブコーディング」の発展が大きい。 バイブコーディング 詳細な設計書や手動でのコーディングをせず、「こんな感じのアプリを作りたい」といった自然言語のノリ（雰囲気＝バイブス）をAIに伝え、対話を重ねながらソフトウェアを開発する手法 Googleより引用 バイブコーディングは2025年2月頃に提唱されたもので、ChatGPTではCodeXとしてClaudeではClaude Codeとして利用することができる。Cursorという開発環境に特化したサービスもある。 https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0 サービススタート時点では人の手で書いたほうが⋯という感じだったのが、2026年頃からAIの急速な発展によってバイブコーディングの品質が向上。 C言語やJAVA、Pythonだと色々なプログラミング言語に対応していてHTMLも当然のように対応できる。自分が見た投稿の内容は当にそのバイブコーディングを利用して更新することができた。という内容だった。 じゃあやってみよう もしかして⋯簡単にデザイン更新できる⋯！？ とは言ってもだ。簡単に物事が進むとは流石の3年目突入男、AIの進歩によって1日2日、一朝一夕で成し遂げられるとは思わない。 まずもってどんなWebデザインが良いのかを具現化することが必要だ。現在のWebデザインは良くも悪くも素人感満載である。あぁ⋯まぁブログぅって感じだ。 このサイトの長らくの問題は「他の記事へ移動してもらうことが少ない」ということ。例えば何らかのきっかけで自分の記事をTwitterないしXで見つけてもらっとしても、他の記事を見ないでスッ⋯といなくなってしまう。いなくならないでぇ！とお願いしても、トップページを見てもらうとわかる通り、最新記事は出てるけど過去記事は自分からスクロールしてボタンを押し、と操作をお願いしなくてはならない。 なので、 ・過去の記事を見てもらうための構造 が必要だろう。ということでClaudeに考えてもらおう。 なんか藁に縋る感 単純な質問だ。それに対してClaudeは、 車見にやってきたら大量のパンフ押し付けられた気分 めちゃくちゃ長いの出してきたな。 1発目でこんなに出るぅっ？しかも内容は頭が痛くなるほどに妥当な指摘ばかりだ。一番見られたい記事を見てもらうような構造になっていません、トップページだけでなく記事ページにも手を入れる必要がありますよ、なんてものも。クソっ素人だからって正論は酷すぎるだろぉっ！？ ひょえぇぇこんなの素人じゃ絶対に思いつかんだろう⋯でも、それが簡単に出来てしまうんだから怖い世の中だ。 では一度、「カワバタテツヒロの自己満足」の特徴をClaudeに読みとってもらい、それに準じた内容で新デザインのページを出力してもらおう。 AIが反乱を起こしても見逃してもらうために敬語を使うタイプです モック＝見本を出力してもらって、良いものがアレばそれを採用したい。さてどんなのが出力されるのかしら？ 簡単に3つ出力された。スゲェな… A案は自分が旅行記事を出しているからか、中央付近には路線図が。B案はニュースマガジン的なサイトにしたいことを読みとったのか雑誌サイトのような感じ。C案は過去の記事へのアクセスを重視しているようだ。 どれも凄いのだが、どうもAIが作りました！という感じがする。どこが？と言われると、全体的にというか、ふわっとしている所がAI感を強めているような気がしてならない。いや本当言葉にできないけど、AIって感じ。AIにデザインしてもらうとすごく感じるんすよ⋯ まぁ、この1発目の出力で自分が理想とするWebデザインとは言えない。ここからブラッシュアップしていこう。 自分のデザインを求める ClaudeにはClaude Designというデザインツールが用意されている。今回のようなWebデザインの追求にはもってこいである。自分が〇〇の色を、フォントを、という感じに修正してもらうことができる。 相手はAIと言えど、個人的な志向を伝えることが必要だ。もし、伝えなかったらAI側が自動でデザインを構築していくことになる。もしここからYahoo! JAPANや楽天市場のようにゴチャゴチャしているものになるのは⋯嫌だねぇ。 自分の志向を言葉にする必要がある。その志向に近いのはイギリスのBBCやオーストラリアのSBS Newsがそれに近い。情報が詰め込まれているのに過剰に詰め込まれている感じがしない設計と白と黒、場合によっては1色が追加されるだけの色味。これがベストだと思う。 ということで、 注文が多すぎるだろ 結構お願いしましたがどうなんでしょうねぇ。日本国内でよく見るものとは違うのが良いの！とワガママをブチかましたが、はたしてどんなものが出てくるか。 2つが出力された。おぉ⋯一気にスタイリッシュになった。白と黒を使用することでゴチャゴチャ感が減っている。ような気がする。気がするだよ？デザインについては素人だからわからんのだ。 スマホで表示された場合のモックまでも用意されている。すげぇ。 広告が表示されたときにはスマホではどうなるか？文字の大きさもこれぐらいになりますよ。という提案までもされている。 確かにこのデザインもいいとは思うが、もう少し見やすさを追求していきたい。またアイコンも無かったことにはされたくはねぇので、 このアイコンも素っ頓狂な顔してラァ というお願い。すると、 回遊性向上をするには何が必要かまでも出力された。これを素人じゃetc… D案のニュース型がカテゴリーごとの表示に対応したものに発展している。で、注目なのがこのモックでは「連載」というのが据え置かれている。 Claudeに聞いてみると「同じタグが付いていて且つ記事の内容が続きもので投稿されているのであれば、それを閲覧者に連載記事であることを伝えるべきだと思う」というのだ。 せ、正論… 冬の北海道シリーズであるとか最近まで更新している東京→博多を3日間掛けて移動するというのもある意味では連載だ。ただ今のデザインではそれを伝えられていない。 SNSや検索を通してアクセスした人に1回だけ読んでさようなら〜を回避するためには「他にもありまっせ！」というのを打ち出すしかない。なら「連載ですよ〜1話から読みませんか〜」というのに対応した項目が用意された。ということだ。 更に記事ページでの広告の表示も「ページの長さに対して、これぐらいにした方が良いですよ」と教えてくれもする。 ということで、 F案で決定しました。自分の思うスタイリッシュさに近づいているような感じがしたし、カテゴリーや回遊性の向上も出来ている気がする。すばらしい。 次はテスト環境の構築→本番環境へ移行 淡々とデザインが決定したような流れになっているが、ここから細かい修正を終えるのに2週間は掛かっている。 アイコンをこれぐらいの大きさに、記事内のフォントは、画像も大きく貼り付けた時に⋯などなどを一個一個決めていった。AIと言えど、対話しながらデザインの崩壊を避けつつ理想に近づくには時間が必要だ。 SNSではClaude/ChatGPTのおかげで「一瞬で！」できた。というのを見かけるが、まぁ場合によってあり得るかも知れないが、基本的には使う側の言語化やテクニックがないと1発で良いものが生まれるなんて、今の段階ではほぼあり得ない気がする。 そりゃそうだ。自分がこうしたい、ああしたいを言葉に出来ていないのに「雰囲気でプロジェクト進めてくださぁい」なんて言ったら優秀な人材でも右往左往する。 結局、自分の思うことは自分にしかわからない。そして、それを言葉にして伝える力が必要なんでしょうなぁ。ということが痛いほどにわかった。 そんなわけでデザインが決定。いよいよ次はこのデザインをもって公開！と行きたいところだが、まだサーバーに移す前に「テスト」する必要がある。 それを乗り越えればいよいよ本番へ。できるのか！？乞うご期待っぃい！