メディア

「料金へ」「よくある質問へ」のように、同じページの中の目的の場所へ移動するリンクの作り方。IDの付け方、リンクの選び方、別ページのIDへ移動するときの書き方、固定ヘッダーに隠れるときの直し方を、Studioを例に整理します。

生成AIが作ったサイトを取り込むと、書体が思っていたものと違って見える。原因になりやすい「システムフォント」の仕組み、最初に伝える指示、Studioでの確認と直し方を整理します。

robots.txtは、検索エンジンのクローラーに、サイトのどこを見に来てよいかを伝えるファイルです。できること・できないこと、基本の書き方、Studioでの自動生成とアップロード、確認のしかたを整理します。

スクロールしてもヘッダーやボタンを画面に表示し続けたい。Studioの「位置」設定の「固定」と「追従」の違い、設定手順、本文やアンカーリンクの移動先がヘッダーに隠れるときの直し方、重ね順の考え方を整理します。

生成AIが作った料金表や会社概要の表を、Studioに持ち込むと列の位置がずれる。Studioに表の部品が無いことと、列をそろえる作り方（固定幅の横並び）、最初に伝える指示、表のまま使える場面を整理します。

サイトに何人来て、どのページが見られているかを知るための、Googleアナリティクス（GA4）の設定手順。プロパティの作成、測定IDの取得、Studioへの設定、動作確認、数字が二重になるときの確認点を整理します。

サイトを公開したら、Google Search Consoleに登録しておくと、検索での見え方を確かめられます。所有権の確認方法の選び方、Studioでの連携手順、サイトマップの送信、つまずきやすい点を整理します。

生成AIが作ったサイトで、アイコンの場所が空白になったり、「home」「mail」のような英単語が表示されたりするのはなぜか。アイコンフォントとSVGの仕組みの違い、頼み方、Studioに持ち込むときの考え方を整理します。

取引先だけに見せたい、公開前に関係者で確認したい。ノーコードサイトをパスワードで保護するときの手順と制限、ページ単位で隠したいときの別の方法、検索への影響を、Studioを例に整理します。

Claude CodeやCursorなどのコーディングAIで作ったサイトを、Studioで編集・公開できる形にする手順。チャット型AIとの違い、最初に伝える指示、フォルダごとの読み込み、ReactやNext.jsになってしまったときの対処、崩れやすい箇所をまとめます。

会社紹介や商品の説明動画をホームページに載せたい。YouTube動画の埋め込みコードの取り方、Studioなどのノーコードサイトへの置き方、比率とスマホでの見え方、自動再生や開始位置の設定、つまずきやすい点を整理します。

ホームページから、LINE公式アカウントの友だち追加につなげたい。LINE側でのURL・ボタン・QRコードの取得手順と、Studioなどのノーコードサイトへの設置のしかた、確認のポイントを整理します。

ページのURLを変えたとき、古いURLから新しいURLへ自動で案内する「301転送」。Studioの「リダイレクトページ」での設定手順と、使える範囲・使えない記号・対象プランを、公式ヘルプにもとづいて整理します。

Studioのページ設定にある「構造化データ」は、検索エンジンにページの内容を伝えるためのコード（JSON-LD）を入力する場所です。手順・貼るコードの例・書き換える項目・よくあるエラーを整理します。

ヘッダーのロゴ・ナビ・ボタンが重なったり見切れたりしないよう、帯域ごとのいちばん狭い幅で収まるかを足し算で確かめる方法を、実際に測った数値の例とあわせて整理します。

Studioで誤ってボックスやページを消してしまったとき、戻す方法は2つあります。直前の操作を取り消す「元に戻す」と、保存された時点へ戻す「バージョン管理」の違いと、復元前に知っておきたい注意点を整理します。

独自ドメインをつないだサイトを開くと、アドレスバーに「保護されていない通信」と表示されることがあります。よくある原因と、DNS設定まわりで確認したいポイントを整理します。

サイトを公開してしばらくすると、問い合わせフォームに営業メールや自動送信のスパムが届くようになることがあります。完全には防げない前提で、送信を減らす・見落としを防ぐための現実的な対策を整理します。

生成AIにサイトの下書きを頼むと、見栄えを整えるために仮の文章や架空の数字・お客様の声が入ることがあります。そのまま公開すると誤解を招くおそれがあるため、公開前に確認したい箇所を整理します。

存在しないURLにアクセスされたとき、初期設定のままだと素っ気ない画面が表示されます。Studioで404ページ（見つかりませんページ）を用意する基本の手順と、公式ヘルプで案内されている注意点を整理します。

ページのURL（パス）は、公開後に変えることもできますが、そのままにしておくと検索順位や外部からのリンクに影響することがあります。変更前に確認しておきたいことを整理します。

サイトを開いた瞬間に文字が一瞬別のフォントで表示されたり、真っ白のままだったりすることはないでしょうか。Webフォントの読み込み時に起きるこの現象の原因と、一般的な対処のしかたを整理します。

レスポンシブが「絶対に崩れない」設定はありませんが、崩れの多くは設計の段階で減らせます。Studioの公式ブログが案内する4つの考え方を、実際の設定パネルの画像とあわせて整理します。

Studioで画面を組み立てる部品「ボックス」には、テキスト・画像・埋め込み・カルーセル・トグルなど複数の種類があります。「追加」パネルの分類にそって、それぞれの役割と使い分けの目安を整理します。

Studioでネットショップを作りたいと考えたとき、標準機能だけで完結できるのか気になったことはないでしょうか。公式ヘルプの案内にもとづいて、現実的な選択肢を整理します。

生成AIに作らせたサイトを別の場所に持ち込むと、さっきまで表示されていた画像が真っ白や壊れたアイコンになることがあります。よくある原因と、取り込む前に確認したいポイントを整理します。

ノーコードサイトを個人や小規模事業で公開するとき、プライバシーポリシーや特定商取引法にもとづく表記が必要かどうか迷うことがあります。一般的な確認ポイントを整理します（最終的な判断は専門家にご確認ください）。

ノーコードサイトの問い合わせフォームで、送信は完了しているのに通知メールが届かない・迷惑メールフォルダに入ってしまうことがあります。よくある原因と、確認・対処のしかたを整理します。

Studioでサイトを公開したのに、Googleで検索しても出てこない——そんなときに確認したいポイントを、公式ヘルプの情報にもとづいて整理します。noindex設定や反映までの時間の目安も解説します。

「ボックスの親子関係が保存できる最大の深さを超えたためデータを保存できません」というエラーは、Studioのボックス入れ子構造の階層上限（目安11階層）が原因です。仕組みと、深くなりすぎないための防ぎ方を整理します。

生成AIに作らせたサイトには、訪問者の設定に合わせて色が切り替わるダークモード機能が入っていることがあります。Studioに持ち込むとなぜ消えてしまうのか、仕組みの違いと現実的な対処を整理します。

生成AIに書かせたHTML/CSSを商用サイトに使ってよいか、気になったことはないでしょうか。利用規約上の位置づけや、確認しておきたいポイントを整理します（最終的な判断は専門家にご確認ください）。

生成AIに複数ページのサイトを作らせると、ページごとのタイトルや説明文（meta description）が入っていなかったり、全ページ同じ文言になっていたりすることがあります。原因と、確認・修正のしかたを整理します。

Studioが発表した新サービス「Studio.Drop」の要点と、生成AIの下書きをStudioへ持ち込むSHITAJIとの違いを整理します。起点・行き先・公開後の運用スタイルが異なり、使い分けの目安になります。

店舗や施設の場所を伝えるのに便利なGoogleマップの埋め込み。iframeで埋め込む基本の手順と、埋め込む前に確認しておきたいポイントを整理します。

Studioには、外部ツールを連携しなくても使える標準のアクセス解析機能があります。サイトを公開した時点で自動的に計測が始まる、Studio Analyticsの基本と、確認できる数値の見方を整理します。

公開したサイトの表示速度が気になって、PageSpeed Insightsで測ってみたものの、出てきた数字やアルファベットの意味がよく分からない——という方向けに、まず見るべきポイントを整理します。

店舗やサロンなど、実店舗を持つサイトを作ったら、Googleビジネスプロフィールとの連携もあわせて確認しておきたいところです。サイトとプロフィール、両方を整えるときの基本的な確認ポイントを整理します。

Studioには、ブログやお知らせのような「同じデザインで内容だけ増えていくページ」を管理する専用機能（Studio CMS）があります。CMSダッシュボードとデザインエディタの役割分担、基本の仕組みを整理します。

せっかく作ったサイトを独自ドメイン（自分で取得した◯◯.comなど）で公開したいとき、何をどの順番で進めればいいか、基本の流れを整理します。

おしゃれな配色を選んだつもりが、実は文字が読みにくい——という状態は珍しくありません。文字色と背景色のコントラスト（明暗差）について、最低限気をつけたい基本を整理します。

StudioにはFigmaのデザインをそのまま取り込める公式プラグインがあります。手元にあるのがHTML/CSSの場合、Figmaを経由する方法と、HTMLから直接持ち込む方法の2つがあり得ます。それぞれの手順と向き不向きを整理します。

生成AIで作ったサイトに限らず、フリーランスに作ってもらったコード、他社のノーコードツールから書き出したファイル、購入したテンプレートなど、外部のHTML/CSSをStudioにインポートしたい場面は他にもあります。手作業・画像・Figma経由・変換ツールの4つの手段と選び方を整理します。

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つの指示と、確認すべき4つの画面幅を紹介します。

生成AIに作らせたサイトは、公開後の修正でつまずくことがあります。文章や画像をあとから自分で差し替えやすくしておくための、作る段階での工夫を紹介します。

ノーコードツールでホームページを作り始める前に確認しておきたい4つのポイントをまとめました。独自ドメイン、料金の変動、データの持ち出し、更新のしやすさなど、選んでから困らないための視点です。

自分でHTMLを書く、ノーコードツールを使う、制作会社に外注する——ホームページを持つ主な3つの方法を、初期費用・時間・自由度の観点から比較します。

ChatGPT・Claude・Geminiが書いたHTML/CSSのサイトを、ノーコードツールStudioで公開・運用するための現実的な方法を3つ整理。手作業での再現、画像として貼る方法、変換ツールの使いどころを比較します。

ノーコードツールStudioのレスポンシブ設定の基本を初心者向けに解説。ブレークポイントの仕組み、大きい画面から小さい画面へ調整する順番、よくある崩れの直し方をまとめます。

生成AIにWebサイトのHTML/CSSを書かせるときに仕上がりを安定させるプロンプトの書き方。構成の渡し方、原稿の用意、画像の扱いなど、今日から使える5つのコツを紹介します。