Home

About

IT技術者がバイブコーディングしてみた

今話題沸騰（？）のバイブコーディング。興味を持ったのはかの有名なイケハヤさんのYouTube動画でした。イケハヤさんはnoteもやってるということを最近知り、具体的なやり方を解説した記事があったので参考にして環境を構築し実際にWebサイトを作成して遊んでみました。

正直どんなケテモノコードが出来上がるんだろうとワクワクしてたのですが、予想外に素直なコードが生成されて若干ガッカリでした。ほれ見たことかとドヤ顔でツッコミ入れようと待ち構えてたのに。空気読もうよ。

Käsityö - ハンドメイドアクセサリー

和の心 - 伝統工芸品ECサイト

なるほどねー予想通りプロトタイプを手軽に作るのには使えそうですね。ただ気になるのは非エンジニアの人はこれをそのまま出来ました！　と言って納品しちゃうのかな、ということ。自分で使う用なら問題ないですが。

プロトタイプとして作るのはいい。でもほとんど変えずに本番用にするのは危険な気がします。その先の運用でバグがあったとき、非エンジニアの人はAIに修正させると思うのですが直らなかったケース、あるいは直ったけど別のバグが発生して無限地獄編に突入したケースはどうするのだろう？

結局のところ、サポートなり妥当性をチェックできる技術者が現状では必要なのではと思いました。安心してAIにまかせられるようになるにはもう少し時間がかかりそうですね！

Webサイト作成

令和時代のモダンなHTML／CSS活用術1

2025年9月現在、このサイトで使用しているデザイン技術（HTML、CSS）を備忘録としてまとめてみました。デザインを頑張ってる人、頑張ろうかなと思ってる人の参考になれば幸いです。難しくなりすぎないように概要だけさらっと説明します。用語だけでも知っておくと今後役に立つかもしれません。

レスポンシブデザイン

まずは大枠の「レスポンシブデザイン」。これはPC／スマホ／タブレットといった閲覧者の環境に合わせてレイアウトやデザインを変える手法。現在のWebデザインにおける必修科目です。

基本的にはブラウザ表示領域の横幅を基準として分岐させます。この基準pxをブレイクポイントと呼び年々変化するので時々見直した方がよいでしょう。サイトでは以下のように大きく2つ、小さく4つに分岐させています。

HTML内の分岐

CSS内の分岐：タブレット向け

PC／スマホ向けにCSSを2種類作成し、最後にCSS内でタブレット向けに少し調整する流れ。特にスマホとタブレット縦では縦横のアスペクト比がかなり異なるので、調整しないと不格好になります（文字や画像が大きくなりすぎる）。

1つのCSSファイルにまとることも可能ですが、サイズが肥大化するし管理がややこしくなるのでお勧めできません。

グリッドレイアウト

これも必修レベルの技術。古代のWebサイトでは<table>やfloatがデザイン用途で使われていましたが、今は格子状に要素を配置する「display: grid;」が主流です。

当サイトではPC向けのサイドメニュー配置用にシンプルな使い方をしていますが、頑張れば複雑なレイアウトも組めると思います。

私的に一番のメリットはHTMLの書き順とは無関係に好きな位置に配置できる点ですね。極端な話<header>を一番下に<footer>を一番上に書くことも出来ちゃいます。

フレックスボックス

スマホ向けのボトムナビで使用。これも古代では<table>が使われてましたが現代では「display: flex;」が主流。

似たようなCSSで「display: inline-block;」というのもありますが正直使い分けるよりflexに統一した方が良いと個人的には思います。使い分けるなら以下みたいな感じかな。

リキッドレイアウト

PC向けにブラウザの幅に応じた可変サイズを使うのが「リキッドレイアウト」。サイトではPC／タブレット横向けのCSSで表示幅960px～1152pxの間で要素の横幅や余白を変化させて違和感のないデザインにしています。

最初に1152px以上を作り、最後に1151px以下の調整する流れ。PCでは大きく見せたいけどブレイクポイントは抑えたい、という思惑。

CSS内の分岐

@media (max-width: 1151px) {}

Webサイト作成

流行りのバイブコーディングを考える

バイブコーディングとは何ぞやというと、AIにふんわりとした指示を出して Webサイトなりプログラムなりをお手軽に作成する手法。 「スキルに自信がないかつ手っ取り早く作りたい」 人はどんどん使えばいいと思います。

ただ個人的には「楽しい作業をAIにやらせるのはもったいない」 と感じるしブラックボックスになるのは怖い。 作成後、バグとか仕様変更とか内容修正とかがあった時に対応に 時間がかかりそうな気がします。

イニシャルコストは低いけど ランニングコストが高い印象ですね。 手放しで称賛してるのは多分プログラミングとかWeb作成とか ほとんどしたことがない人なんじゃないかな。

たたき台とかプロトタイプをAIでサクっと出してもらって 手動で調整、運用といった形がよさそうですね。 全部をAIまかせにしたら逆に効率が悪そうです。

Webサイト作成 雑記

サイトデザインをリニューアル！

久しぶりにサイトデザインをリニューアルしました。 コリスさん というWeb関連の情報サイトがあるんですけど ここのデザインをインスパイア参考にさせてもらって 自分流にアレンジしてみました。

PC向けではサイドは固定表示、全体の横幅を可変に。 具体的には960px～1152pxで変化します。 959px以下でスマホ／タブレット向けの表示に。 タブレットで横向きの時にPCと同じ表示になるので 見やすくなったと思います。

あとスクロールバーをデフォルト表示に戻しました。 白背景との一体感を高めるためにカスタムしてたのですが 白背景自体やめたので、必要ないだろうと。

そしてスマホ向けには長らく使っていた 上部のナビゲーションを下部に変更。 スマホアプリでよく使われるボトムナビというやつです。

近年のスマホは大型化が進み、片手操作時に 画面上部へタッチしづらいらしいので思い切って下にしました。 （私は両手で操作するので気にしてなかった） ちなみにLunalysの次期バージョンもこれになります。

ついでにスクロールに追随するアニメーションを廃止。 ちょっとポリフィルのサイズが大きいし 今回はシンプル路線にしてみました。 CSSで全ブラウザが実装されたら復活するかも。

ヘッダー画像もPC／スマホで共通に。 まー途中といえば途中なんですがw 相変わらず色が塗れないのでスクリーントーンで それっぽく出来ないか試行錯誤してる最中です。

Webサイト作成