Blogブログ
2026/4/19/
こんにちは、デザイナーの内田です。
先日始めた、AIと一緒にmicroCMS＆Next.jsで作るイベントLP。
記事にも書きましたが、「AIで完結できる作業を人が勉強する意味ってあるんかな」っていう自問には
「知らないことをAIに丸投げするのは駄目だろ」
っていうアンサーで腹落ちしてはいるんですが……
噂のGPT-Image-2で出力させてみたバナーサンプル。設計意図を特に指定していないので、そのまま使えるものでは当然ないが、これで十分…と、デザイナーも思えるぐらいの品質には到達しつつある。… pic.twitter.com/3xQbry8bpr
— こぎそ (@kgsi) April 18, 2026
すごいですね、AIのアウトプットと進化の速さ。数日単位で変わるクオリティと勢力図。
ポストにもあるように、そのまま使えるかっていうと純粋に文字サイズだったり、写真と文字の関連性だったり、情報のゾーニングだったりは修正したいところです。
が、これってデザイナーが指摘点探すからこそのアレであって。
お客さんの要求レベルは十分に満たしちゃってるんじゃないかと。
ちょっと仕事の仕方を変えていかないといけませんね。
真面目にコメントすると、デザイナーの仕事は見た目が良いアウトプットは最低ライン。
ゴールはアウトプットではなく、そのアウトプットをもって目的を果たすための試行錯誤をデザインに落とし込むことだと思うんですけど、ブーメランすぎて苦しくなりそうなのでもうやめます。
さて、AIと一緒にmicroCMS＆Next.jsで作るイベントLPの進捗です。
前回はやるぞーえいおーってとこで終わってます。
https://www.ryogeisya.co.jp/blog/20260413/2060
まずはサクッと作ったまま放置していたデザインをチェック。
・開催日
・コンセプト概要
・雰囲気共有（写真）
・お知らせ
・出店一覧
・アクセス
・当日スケジュール
・協賛
ボランティアで無償制作（協賛）ですが、まぁ要素はクリアしているか。
microCMS側でどこまで更新出来るようにするかを想定しつつ直すとこ直しました。
このイベント、今年で4回目なんですがMCにお笑い芸人来てもらっちゃったりして。
ライブあったり、トークあったりでなかなか楽しいんですよ。
内田のマークアップスキルは…100点満点で30〜40点くらいでしょうか。
テーブルレイアウトが全盛の頃、職場の先輩のHTMLデータをこっそりコピーして持ち帰り（あかん）独学でCSSを覚えたのがスタート。
AI先生によると
「BEMを使った書き方にシフトしましょう。構成をコンポーネント化しないとあかん。」
とのことで、BEMを勉強。
【命名規則】BEMを使った書き方についてまとめてみた【CSS】 #Sass – Qiita
クラス名を
.Block__Element–Modifier
で統一することでソースの属人化を防いだり、JSなどの言語での扱いやすさも向上させたりすることができると。
なるほどねと思いながらマークアップすると
「ここが違う。そこも違う。あんたBEMを理解しきれてないよ。」（言い回しはもっと優しい）
と怒られます。
「あー、ってとはここはこうなるってこと？」
「違うわアホ。こうじゃ。」
みたいな。
厳しい先輩がメンターだったら心折れてるかもしれない。
AI先生には感情がないから何度もチャレンジできていいですね。
まだ完全に飲み込めていないものの、とりあえずHTMLとCSSが完成。
タブの切替JSを実装（BEMのおかげで超スムーズでやんの）したところで一旦完成。
次フェーズはmicroCMSの作業がオススメだってんで、microCMSでAPIの作成をすることに。
あらかじめ作っておいたイベント用のアカウントで作成を進めます。
あれですね。WordPressにおけるAdvanced Custom Fieldsの作成のような。
これがこうってことは、あれもこうなるってことか！みたいな感覚で作業が進められました。
え、これは違うんかい！ってなる展開まで想定しておけます。
出店者APIを作成し、仮のデータをひとつ作成したところで一旦終了。
他のAPI作成は追々。
お次はターミナルを使ったNext.jsのインストール。
デザイナーだとあまりターミナルは使わないかもなんですが。
内田の場合、弊社バックエンドエンジニアさんの指示でちょいちょい触ります。
サーバー上のデータをviで触ったり、デプロイ時に魔法のコマンド入れて触ったり。
環境構築にもよく使っていて、毎回エラーを起こしてバックエンドエンジニアさんの手を煩わせています。
ので、ちょっとやそっとのエラーの繰り返しくらいでは心折れません。
Node.jsではJavaScriptでOSの機能にアクセスするプログラムを組むことができます。
なるほど。40%だけ理解した。
Nodeのバージョンが低くてプロジェクト作成出来なかったりしましたが、無事に諸々解決して…
初期画面表示までこぎつけました。
次回はmicorCMS SDKを入れて繋ぎこみ、仮投稿したデータを取得して画面に出すところって感じでしょうか。
イベント自体の活動のスタート想定が2026/06/01なので、それまでにのんびりと完成させたいところ。
前回の記事で内田の自由時間は8:00-10:00、22:00-26:00くらいと書いたんですが
この時間帯に、大事な用事がありまして。
我が家には2頭の愛犬イタリアン・グレーハウンドがいます。彼らの散歩時間がここに入ってきます。
週末やなんかは歩いて10分くらいの公園まで連れていって、1時間ほど走らせます。
個人的には猫派なんですが、ワンコもいいですね。散歩のおかげか、健康診断でひっかかっていた数値がだいぶ下がりました。
体重も6kgほど落ちて。
膝の上で仰向けになって寝るのが好きなようで。
これ、ルッキズム的な意味合いでありかなしかで言うと、なしだなって思いながら腹を撫でています。
ペットにおける毛量って割と大事ですよね。モッフモフの方が。ね。
だからといってモッフモフの男性がモテるかっつうとそうでもないってのが不思議。
まぁでもかわいいんです。うちの子。
当社への各種サービスお問い合わせ、ご質問、資料請求はこちらからお問い合わせください。
お問い合わせ内容の確認後、担当者よりご連絡させていただきます。