メディア
Studioの使い方、生成AIを使ったWeb制作、ノーコード制作のコツを発信しています。
Studioには、ブログやお知らせのような「同じデザインで内容だけ増えていくページ」を管理する専用機能（Studio CMS）があります。CMSダッシュボードとデザインエディタの役割分担、基本の仕組みを整理します。
せっかく作ったサイトを独自ドメイン（自分で取得した◯◯.comなど）で公開したいとき、何をどの順番で進めればいいか、基本の流れを整理します。
おしゃれな配色を選んだつもりが、実は文字が読みにくい——という状態は珍しくありません。文字色と背景色のコントラスト（明暗差）について、最低限気をつけたい基本を整理します。
StudioにはFigmaのデザインをそのまま取り込める公式プラグインがあります。手元にあるのがHTML/CSSの場合、Figmaを経由する方法と、HTMLから直接持ち込む方法の2つがあり得ます。それぞれの手順と向き不向きを整理します。
生成AIで作ったサイトに限らず、フリーランスに作ってもらったコード、他社のノーコードツールから書き出したファイル、購入したテンプレートなど、外部のHTML/CSSをStudioに持ち込みたい場面は他にもあります。手段の全体像を整理します。
Studio自身も、チャット形式でサイトの下書きを作れる機能を用意しています。すでにChatGPTやClaudeなどのAIチャットを使っている場合は、そちらで下書きを作ってからStudioに持ち込む方法もあります。それぞれの向き不向きを整理します。
ChatGPTに書いてもらったHTML/CSSのサイトを、Studioで公開・編集できる形にするまでの手順。コードの受け取り方、ファイルの分かれ方の違い、取り込んだあとに崩れやすい箇所と直し方をまとめます。
ClaudeにHTML/CSSで書いてもらったサイトを、Studioで編集・公開できる形にするまでの手順。アーティファクト（画面右側のプレビュー）からのファイルの取り出し方、React形式で返ってきたときの対処、崩れやすい箇所をまとめます。
GeminiにHTML/CSSで書いてもらったサイトを、Studioで編集・公開できる形にするまでの手順。プレビュー付きの編集画面からのコードの取り出し方、Googleフォントの扱い、取り込んだあとに崩れやすい箇所をまとめます。
v0（Vercel）で作ったサイトをStudioで編集・公開できる形にする手順。v0の出力が基本的にReact形式であること、HTML/CSSとして受け取るための頼み方、それができないときにブラウザで保存して読み込む方法、崩れやすい箇所をまとめます。
Lovableで作ったサイトをStudioで編集・公開できる形にする手順。LovableのプロジェクトがReact形式であること、公開したページをブラウザで保存してフォルダごと読み込む方法、Lovableに静的HTMLを頼む方法、崩れやすい箇所をまとめます。
Bolt（bolt.new）で作ったサイトをStudioで編集・公開できる形にする手順。最初から「フレームワーク無しの静的HTML/CSS」で作ってもらう頼み方、プロジェクトのダウンロードとフォルダ読み込み、React形式になってしまったときの対処、崩れやすい箇所をまとめます。
Studioには多言語化の専用機能がありません。カスタムコードとIDを使い、Googleスプレッドシート・Google Apps Script（GAS）と組み合わせてテキストを差し替える「ID差し替え方式」という実務的な方法を紹介します。
Studioには多言語化の専用機能はありませんが、プロジェクトの構成を工夫することで多言語サイトを作った事例があります。代表的な3つの方法と、それぞれの向き不向きを整理します。
ページごとに同じヘッダーやフッターを配置していると、直したいときに1ページずつ編集する羽目になります。Studioのコンポーネント機能を使うと、複数箇所に配置した要素を1箇所の編集でまとめて更新できます。基本の使い方を整理します。
生成AIに作らせたサイトのスライダーやアコーディオンは、JavaScriptで動きを制御していることがほとんどです。Studioにそのまま持ち込んでも動かない理由と、Studio側の代わりの機能を整理します。
アクセス解析や広告のタグを入れると、クッキー同意バナーが必要かもしれないと聞いたことがある方も多いはずです。何が判断材料になるのか、基本の考え方を整理します（最終的な要否は専門家にご確認ください）。
Studioには、外部サービスを使わずプロジェクト内で完結するフォーム機能があります。項目の設定、送信後のサンキューページ、通知の受け取り方など、基本の仕組みを整理します。
ページごとに生成AIへヘッダー・フッターを頼むと、同じデザインのつもりでも、余白や文言、リンクの並びが少しずつ違って出来上がることがあります。原因と、揃えるための伝え方を整理します。
関係者に確認してもらいたいけれど、まだ検索エンジンやSNSには出したくない——そんなときの下書きの見せ方には、いくつかの選択肢があります。それぞれの特徴を整理します。
アクセシビリティとは、より多くの人がサイトを使えるようにすることです。Studioには、画面が見えなくても内容が伝わるようにする機能がいくつか用意されています。代表的な機能と使いどころの基本を整理します。
生成AIにサイトを作らせるとき、「アクセシビリティに配慮して」と一言添えるだけでは、期待した対応にならないことがあります。具体的に伝えるとよい4つの指示を紹介します。
海外のお客様も想定してサイトを多言語対応させたいとき、翻訳を追加するだけでは不十分なことがあります。公開前に確認しておきたい基本のポイントを整理します。
Studioでは、専用のアニメーションツールではなく「条件付きスタイル」という仕組みで動きを表現します。仕組みの基本、ホバー・出現時など代表的な使い方、つまずきやすいポイントを整理します。
生成AIに書かせたホバーエフェクトやスクロールアニメーションは、CSSの@keyframesやtransitionとして書かれています。Studioは条件付きスタイルという別の仕組みで動きを表現するため、そのままでは持ち込めません。仕組みの違いと実務的な対処を整理します。
ノーコードツールは自動保存されている安心感がありますが、「うっかり消した」「ツール側の不具合」に備えたバックアップは別に考えておく必要があります。何を・いつ控えておくとよいか基本を整理します。
ブラウザのタブに表示される小さいアイコン（ファビコン）と、SNSでシェアされたときに表示される画像（OGP画像）。見落とされがちですが、サイトの印象を左右する2つの設定の基本を整理します。
生成AIに作らせたサイトの問い合わせフォームは、見た目は完成していても、送信ボタンを押した先が用意されていないことがあります。よくある3つの理由と、実際に動かすための考え方を紹介します。
フリー素材サイトから拾った写真やイラストも、実は利用条件がそれぞれ違います。「商用利用可」の意味、クレジット表記の要不要など、公開前に確認しておきたい基本を整理します。
見出しや本文のフォントを既定のものから変えたいとき、Studioにはシステムフォント・Webフォント（Google Fonts・TypeSquareなど）・独自フォントの3種類があります。それぞれの特徴と選び方の基本を整理します。
生成AIに複数のセクションやページを作らせると、見出し下の余白やセクション同士の間隔が、微妙に統一されないことがあります。原因と、そろえるための指示の出し方を紹介します。
せっかく設置した問い合わせフォームが、送信されているのに気づかない・迷惑メールに埋もれる、といったことがあります。公開前に確認しておきたい4つのポイントを整理します。
同じページ内に飛ばす、外部サイトに飛ばす、少し下にスクロールする——リンクの目的地によって、開き方や設定を変えたほうが親切なことがあります。基本の使い分けを整理します。
使っているノーコードツールを乗り換えたくなったとき、あとで慌てないために先に確認しておきたい項目を整理します。ドメイン・データの持ち出し・リダイレクトの3点が中心です。
アクセス解析ツールを導入したものの、数字が並ぶ画面のどこを見ればいいか分からない——という方向けに、公開したばかりの段階でまず確認したい3つの見方を紹介します。
Studioに限らず、Web制作で表示速度を左右する要因の多くは画像です。アップロードする前に確認しておきたい、書き出しサイズ・形式・枚数の3つの工夫を整理します。
ページごとに色やフォントをその場で指定していると、あとから統一感を直すのが大変になります。サイト全体の色・フォントを一括で管理する考え方の基本を解説します。
ノーコードで作ったサイトのSEO対策は、何から手をつければいいか迷いがちです。効果が出やすい基本の3つと、公開したばかりの段階では後回しでよい項目を整理します。
パソコンでは問題ないのに、少しだけ狭いノートパソコンやタブレット横向きの画面で崩れる――Studioで公開したサイトにありがちなこの症状の仕組みと、確認のしかたを解説します。
生成AIが書いたHTML/CSSは、画面を少しだけ狭めた途中の幅で崩れることがあります。よくある3つの原因（折り返しの指定漏れ、計算式の幅、伸縮の指定漏れ）と、確認・修正の考え方を整理します。
生成AIへ「レスポンシブ対応して」と頼んでも、画面を狭めると崩れることがあります。あいまいな指示で起こりやすいすれ違いと、具体的に伝えるとよい5つの指示を紹介します。
生成AIに作らせたサイトは、公開後の修正でつまずくことがあります。文章や画像をあとから自分で差し替えやすくしておくための、作る段階での工夫を紹介します。
ノーコードツールでホームページを作り始める前に確認しておきたい4つのポイントをまとめました。独自ドメイン、料金の変動、データの持ち出し、更新のしやすさなど、選んでから困らないための視点です。
自分でHTMLを書く、ノーコードツールを使う、制作会社に外注する——ホームページを持つ主な3つの方法を、初期費用・時間・自由度の観点から比較します。
ChatGPT・Claude・Geminiが書いたHTML/CSSのサイトを、ノーコードツールStudioで公開・運用するための現実的な方法を3つ整理。手作業での再現、画像として貼る方法、変換ツールの使いどころを比較します。
ノーコードツールStudioのレスポンシブ設定の基本を初心者向けに解説。ブレークポイントの仕組み、大きい画面から小さい画面へ調整する順番、よくある崩れの直し方をまとめます。
生成AIにWebサイトのHTML/CSSを書かせるときに仕上がりを安定させるプロンプトの書き方。構成の渡し方、原稿の用意、画像の扱いなど、今日から使える5つのコツを紹介します。