https://blog.seitaro.work/tags/hugo/ Recent content in Hugo on Seitaro Blog Hugo -- gohugo.io ja Seitaro Tue, 21 Jul 2026 22:00:00 +0900 https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/ Tue, 21 Jul 2026 22:00:00 +0900 https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/ <img src="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/blog-redesign-with-gpt-5-6-sol.jpg" alt="Featured image of post GPT-5.6 Solに曖昧な指示でブログを作り直してもらった" /><p>このブログは、Hugoの<a class="link" href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener noreferrer">Stack</a>テーマを使っている。</p> <p><img src="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/desktop-before.png" width="1909" height="915" srcset="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/desktop-before_hud2f99d22eeaa6cb4c35d024e92a3457e_999256_480x0_resize_box_3.png 480w, https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/desktop-before_hud2f99d22eeaa6cb4c35d024e92a3457e_999256_1024x0_resize_box_3.png 1024w" loading="lazy" alt="Stackデフォルト デスクトップ" class="gallery-image" data-flex-grow="208" data-flex-basis="500px" ></p> <p><img src="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/mobile-before.png" width="380" height="831" srcset="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/mobile-before_hua1630d4ed28c3d05e02ad0fbf76f3262_294843_480x0_resize_box_3.png 480w, https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/mobile-before_hua1630d4ed28c3d05e02ad0fbf76f3262_294843_1024x0_resize_box_3.png 1024w" loading="lazy" alt="Stackデフォルト モバイル" class="gallery-image" data-flex-grow="45" data-flex-basis="109px" ></p> <p>機能には困っていなかったが、他のブログで同じテーマが採用されているものをたまに見かけていたので、見た目をもう少し自分好みにしたくなった。 そこで、GPT-5.6 Solにリポジトリを渡し、雰囲気だけ伝えて作り直してもらった。</p> <blockquote> <p><a class="link" href="https://blog.stin.ink/" target="_blank" rel="noopener noreferrer">blog.stin.ink</a>や<a class="link" href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a>のデザインやレイアウトを参考に、少し寄せたい。 スタイリッシュ、シンプル、遊び心を大切に。 さりげなくアニメーションを入れる場合は心地よさ重視で。 あくまでStackベースなので、機能の互換性を破壊しないように。 一覧のカードは画像→タイトル→ディスクリプション→日付と読了見込みの時間→カテゴリの順になるように。カテゴリに現在色付けされているが、同じモノトーンでよい。 各記事のページは見出しや引用などのスタイルを刷新したい。 また、単純なwebリンクやTwitterリンクはOGPとして埋め込めるようにしたい。</p> </blockquote> <blockquote> <p>とても良いね。2カラム構成になるのであれば、一覧画面の1ページあたりの表示件数は偶数で10件にするとよさそう</p> </blockquote> <blockquote> <p>一覧から記事を開くときに、上下にふわっと広がってページが展開されるようにアニメーションして記事を開くことはできる？可能なら実装して欲しい</p> </blockquote> <blockquote> <p>モバイルで表示されるハンバーガーメニューについては <a class="link-card" href="https://catnose.me/" target="_blank" rel="noopener noreferrer"> <span class="link-card__inline-label">https://catnose.me/</span> <span class="link-card__body"> <span class="link-card__title">catnose</span><span class="link-card__description">Personal website of catnose.</span><span class="link-card__site"> <span class="link-card__mark" aria-hidden="true">↗</span> catnose.me </span> </span><span class="link-card__image" aria-hidden="true"> <img src="https://catnose.me/opengraph-image.png?3f2b5ca9edffc59b" loading="lazy" decoding="async" alt=""> </span></a> のように、下部にふわっと展開させるmenuを置く形に変更したい。PCサイズはハンバーガーにならないと思うので不要。</p> </blockquote> <p>かなり雑な指示だったが、破綻なく、それなりに意図どおりに実装してくれた。</p> <p><img src="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/desktop-after.png" width="1889" height="911" srcset="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/desktop-after_hua559a9806cf21a68d2ee7597749736e9_1083812_480x0_resize_box_3.png 480w, https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/desktop-after_hua559a9806cf21a68d2ee7597749736e9_1083812_1024x0_resize_box_3.png 1024w" loading="lazy" alt="スタイル編集版 デスクトップ" class="gallery-image" data-flex-grow="207" data-flex-basis="497px" ></p> <p><img src="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/mobile-after.png" width="379" height="832" srcset="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/mobile-after_hu9914b24937e62d786b844ea97a70314f_332163_480x0_resize_box_3.png 480w, https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/mobile-after_hu9914b24937e62d786b844ea97a70314f_332163_1024x0_resize_box_3.png 1024w" loading="lazy" alt="スタイル編集版 モバイル" class="gallery-image" data-flex-grow="45" data-flex-basis="109px" ></p> <p><img src="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/mobile-after-menu.png" width="382" height="832" srcset="https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/mobile-after-menu_hueb94a6a3ec0ac4139d13adfa7f7c417a_204759_480x0_resize_box_3.png 480w, https://blog.seitaro.work/p/blog-redesign-with-gpt-5-6-sol/mobile-after-menu_hueb94a6a3ec0ac4139d13adfa7f7c417a_204759_1024x0_resize_box_3.png 1024w" loading="lazy" alt="スタイル編集版 モバイル メニューオープン" class="gallery-image" data-flex-grow="45" data-flex-basis="110px" ></p> <p>最後にPageSpeed Insightsのモバイルとデスクトップを満点にするよう頼むと、画像配信や読み込み順を修正し、両方とも主要4カテゴリが100になった。</p> <p>メンテナンス等に責任を持つ必要がない領域においては、ここ半年くらいでコードを見なくても良くなってきた。</p> <p>勿論、お客さんがいるサービスや大規模なコードベースでは今のところまだソフトウェアエンジニアリングやコードの把握に価値がありそうだが、そうではない軽いところはAIに全部任せられる。</p> <p>便利になった反面、プログラミングの筋力みたいなものは衰えていっている気がする。たまには趣味として、敢えて手書きでコーディングする機会も作っておいた方が良いのだろうか。</p>