近年では、ノーコードツールで作られたWebサイトを目にする機会が増えてきました。洗練されたデザインや滑らかな動きに「これ本当にノーコード？」と驚かされることも少なくありません。

なかでも注目を集めているのが「／Studio（スタジオ）」。
他のノーコードツールと比べても、デザインの自由度が圧倒的に高く、プロのWebデザイナーにも選ばれているツールです。今回は、その魅力を詳しくご紹介します。

「／Studio（スタジオ）」とは？

「／Studio（スタジオ）」は、ブラウザ上でWebサイトをノーコードで作成・公開できるWeb制作プラットフォームです。
まるでFigmaのような編集画面で、テキストや画像、レイアウトなどをドラッグ＆ドロップで操作でき、コーディングの知識がなくてもプロ品質のサイトが簡単に作成できます。

／Studioの主な特長

ノーコードでプロレベルのWebデザイン

HTMLやCSSなどの知識がなくても、アニメーションやレスポンシブ対応まで実現可能。直感的に操作できるインターフェースで、初心者でも使いやすく、デザイナーの表現力にも応えられる仕様になっています。

デザインの自由度が圧倒的に高い

他のノーコードツールは「テンプレートのカスタマイズ」にとどまりがちですが、Studioはグリッドや余白、フォント、アニメーションの細部まで自由に設計できます。
そのため「既製品っぽさ」を感じさせない、オリジナリティのあるWebサイトが実現できます。

公開もワンクリックで完了

作ったWebサイトはそのままワンクリックで公開可能。サーバーやドメインの設定もStudio内で簡単にできるので、Web制作の手間を大きく軽減します。

デザインと実装のギャップがゼロに

Figmaのような操作感でサイトを作成できるため、「デザインと実装で見た目が違う」といったズレが発生しません。更新や調整も即時に反映されます。

チームでのリアルタイム編集も可能

複数人での同時編集にも対応しており、チーム制作やクライアントとの共有にも最適です。

こんな方におすすめ！！

• 自分でWebサイトを作ってみたいが、コーディングの知識がない方
• フリーランスや個人事業主として、ポートフォリオやサービス紹介サイトを作りたい方
• テンプレートに頼らず、自分のデザインを忠実にWeb化したいWebデザイナー
• 社内でスピーディにページを更新したい広報・マーケティング担当者

実際にさわってみた感想

Studioを使ってみると、「本当にここまで自由にデザインできるの？」と驚くほど。
ノーコードツールにありがちな制約のあるレイアウトがなく、他のWeb制作ツールに比べて非常に自由な制作ができると思います。

特に、余白・行間・アニメーション・階層構造などが視覚的に細かく調整できるのはStudioならではで、実際、企業サイトやブランドのLPでもStudioで作られた事例が増えており、「ノーコード＝簡単だけど制限が多い」というイメージを覆す存在だなと感じました。

まとめ

「／Studio（スタジオ）」は、ノーコードツールでありながら、高いデザイン自由度と操作性を両立したWeb制作ツールです。
「簡単だけど、ちゃんとこだわりたい」「テンプレートに頼らずオリジナルサイトを作りたい」そんな方にこそおすすめです。

まずは無料で試してみて、直感的な使いやすさと、プロレベルの表現力をぜひ体感してみてください！

MTテンプレートの種類

まず、MTのテンプレートは大きく以下のように分類されます。

• インデックステンプレート
• アーカイブテンプレート
  • 記事アーカイブテンプレート
  • 記事リストアーカイブテンプレート
  • ウェブページアーカイブテンプレート
• コンテンツタイプテンプレート
  • コンテンツタイプアーカイブテンプレート
  • コンテンツタイプリストアーカイブテンプレート
• テンプレートモジュール
• システムテンプレート

インデックステンプレート

1つのテンプレートにつき1つのファイルを生成します。
指定したパスに直接ファイルを出力するので、トップページや下層ページのトップなど、固有のレイアウトを持つページで利用したり、cssやJavascriptなどのファイルも設定して管理したりします。
お知らせ一覧（カテゴリ別ではなく全ての一覧）ページなどにも利用します。

アーカイブテンプレート

記事やウェブページなど、登録された各コンテンツに基づいて複数のページを自動生成するテンプレートです。
出力のパスやファイル名、表示コンテンツなどについての任意の指示（ルール）を一つのテンプレートに設定することで、その指示に沿って複数のページをまとめて生成してくれます。
「カテゴリ別」や「年別」、「カテゴリ別+年別」といった指定ができます。

記事アーカイブテンプレート

登録した各記事を、テンプレートに沿って個別ページとして出力します。お知らせの詳細ページなどに利用します。

記事リストアーカイブテンプレート

複数の記事を一覧形式で表示するためのテンプレートです。カテゴリ別や年別など用途別で一覧ページを生成できます。フォルダやファイル名にルールを与えることもできます。

ウェブページアーカイブテンプレート

MTで登録した「ウェブページ」を個別ページとして出力します。記事アーカイブと似ていますが、ウェブページは固定ページとして扱いたいページを登録する際に利用することが多いです。また、記事とは異なり、カテゴリではなくフォルダを設定・利用します。
本文部分をMT管理画面から投稿し、ウェブテンプレートに沿ってページが出力されます。

コンテンツタイプテンプレート

コンテンツタイプに紐づくテンプレートです。

コンテンツタイプアーカイブテンプレート

個別のコンテンツデータを、テンプレートに沿って出力します。登録するフィールドを自由にカスタマイズできるので、商品紹介などの個別ページに活用できます。

コンテンツタイプリストアーカイブテンプレート

コンテンツタイプで登録した複数データを一覧表示するテンプレートです。カテゴリやタグなどの条件で複数ページを出力することも可能です。

テンプレートモジュール

このテンプレート単体ではページを生成しません。
他のテンプレート内で読み込むことが可能なので、共通パーツや共通定義を管理できます。ヘッダーやフッターなど、共通の要素にぜひ活用しましょう。

記事リストアーカイブテンプレートとインデックステンプレートについて

記事の一覧ページについては、以下のように使い分けます。

サイト全体の記事一覧　⇒　インデックステンプレート
カテゴリ別、年別などの記事一覧　⇒　記事リストアーカイブテンプレート

全ての記事リスト一覧はそのページ単体の生成で不足ありません。
一方、カテゴリ別の記事一覧ページなどは、同じレイアウトを使いつつ、カテゴリごとに異なるページを複数生成する必要があります。このような場合、記事リストアーカイブを使えば、条件ごとにそれぞれテンプレート一つでカテゴリ別・年別など柔軟な一覧ページを自動生成してくれます。

単一のページ生成にはインデックステンプレート、特定のルールの下でページを複数生成するならアーカイブテンプレートを利用しましょう。

ウェブページ内のレイアウト切り替え

ウェブページとして登録したページに対して、ディレクトリやそのほかの条件によってレイアウトを変更したい、という場面もあると思います。
そんなときは以下のようなソース例で対応できます。

<mt:setvarblock name="parentfolder"><mt:TopLevelFolder><$mt:FolderBasename$></mt:TopLevelFolder></mt:setvarblock>
<mt:If name="parentfolder" eq="aaa">
<$MTInclude module="ウェブページ　テンプレートa"$>
<mt:ElseIf name="parentfolder" eq="bbb">
<$MTInclude module="ウェブページ　テンプレートb"$>
<mt:ElseIf name="parentfolder" eq="ccc">
<$MTInclude module="ウェブページ　テンプレートc"$>
<mt:ElseIf name="parentfolder" eq="ddd">
<$MTInclude module="ウェブページ　テンプレートd"$>
<mt:Else>
<$MTInclude module="ウェブページ"$>
</mt:If>

アーカイブテンプレートに上記を登録します。
アーカイブマッピングの種類は「ウェブページ」です。
これはウェブテンプレートの切り替える条件を記述したテンプレートになります。例だとディレクトリによってテンプレートを切り替えるようにしています。
「ウェブページ　テンプレートa」のように、先に切り替えたいレイアウト分だけテンプレートは作成しておきます。
※「ウェブページ　テンプレートa」はテンプレート名の例です。ここは作成する任意のテンプレート名に差し替えてください。

「ウェブページ　テンプレートa」や「ウェブページ　テンプレートb」は、本来ならウェブページ用のテンプレートとしてアーカイブテンプレートに登録しますが、今回は切り替えるための上記のみアーカイブテンプレートに登録し、他はテンプレートモジュールにパーツとして登録します。
アーカイブテンプレートとして登録する予定だった「ウェブページ　テンプレートa」をそのままテンプレートモジュールに登録するイメージです。

ソースコードを分解して説明します。

<mt:setvarblock name="parentfolder"><mt:TopLevelFolder><$mt:FolderBasename$></mt:TopLevelFolder></mt:setvarblock>

↑ここでウェブページが属しているフォルダの一番上の階層のフォルダ名を取得します。
/aaa/test/sample.htmlなら「aaa」部分です。

<mt:If name="parentfolder" eq="aaa">
<$MTInclude module="ウェブページ　テンプレートa"$>

↑ここから条件分岐に入ります。
一番上のフォルダ名が「aaa」なら「ウェブページ　テンプレートa」を適用

<mt:ElseIf name="parentfolder" eq="bbb">
<$MTInclude module="ウェブページ　テンプレートb"$>

↑「aaa」でないなら今度は「bbb」かどうかで条件分岐します。
「bbb」なら「ウェブページ　テンプレートb」を適用します

それを切り替えたい分だけ条件として追加します。
例の場合（/aaa/test/sample.html）なら「ウェブページ　テンプレートa」が反映されますね。

これならウェブページの中でもレイアウトの切り替えができますね(∩´∀｀)∩
自分自身、より良い方法や構築を模索中ですが、お客様にとって運用しやすいサイト構築を第一に目指して日々頑張ります。

1. セレクタの書き間違い

症状：スタイルが反映されない

よくあるミス：

p.red-color {
  color: red;
}

上記は「p要素で、classがred-colorの要素」に対して適用されます。
classがred-colorでもp要素以外には効きません。

対策：正しいセレクタを理解する

.red-color {
  color: red;
}

特定のclassにスタイルを当てたい場合は、タグ名を含めず .class名 だけでOKです。

2. プロパティ名や値のスペルミス

症状：一部のスタイルだけが無効になる

よくあるミス：

colorr: blue;  /* "color" のスペルミス */

対策：スペルチェッカーやエディタの補完機能を活用する

Visual Studio Codeなどのコードエディタは、間違ったプロパティに警告を出してくれます。

3. セミコロンの付け忘れ

症状：次のスタイルが反映されない

よくあるミス：

h1 {
  font-size: 20px
  color: red;
}

対策：各プロパティの末尾には必ずセミコロンを付ける

h1 {
  font-size: 20px;
  color: red;
}

こちらもVisual Studio Codeなどのコードエディタでは、自動でセミコロンを付与してくれる拡張機能などが存在します。こうした機能を上手く活用していきましょう。

4. CSSファイルがHTMLに正しく読み込まれていない

症状：スタイルが全く適用されない

よくあるミス：

<link href="style.css">

上記には rel="stylesheet" が抜けています。
「rel」は「relation（関係）」の略で、リンク先のファイルとの関係性を示します。
省略するとブラウザがCSSファイルを無視してしまい、正しく機能しない可能性があります。

対策：linkタグを正しく書く

<link rel="stylesheet" href="style.css">

href内のパスはご自身の環境に合わせて適宜変更が必要です。
こちらもパスが合っていないとスタイルが反映されません。

5. 優先順位と競合の理解不足

症状：意図しないスタイルが適用される

よくある例：

/* 共通スタイル */
p {
  color: black;
}

/* 特定のクラス */
.text-red {
  color: red;
}

HTML:

<p class="text-red">赤くしたいテキスト</p>

この場合は後から書いた.text-redの内容が反映されます。
しかし、さらに強いセレクタや!importantが加わると逆転する場合もあるので注意が必要です。

さらに詳しく：詳細度のルール（Specificity）

CSSには「どのスタイルを優先するか」というルール（詳細度、specificity）があります。

優先順位の目安（高い順）:

1. インラインスタイル（例：style="color: blue;"）
2. IDセレクタ（例：#header）
3. クラスセレクタ、属性セレクタ、擬似クラス（例：.menu, input[type="text"], :hover）
4. タグセレクタ（例：div, p）

同じ要素に複数のスタイルが指定されている場合、基本は上記の順番に従ってスタイルが適用されます。
また、!important をつけたプロパティは、上記のルールよりも強制的に優先されます。

p {
  color: black !important;
}

これは避けられない場合を除き、多用しないようにしましょう。

補足：より詳細なセレクタが優先される

セレクタの具体性（詳細さ）も優先順位に影響します。

.article p {
  color: green;
}

p {
  color: blue;
}

この場合、.article p の方がより具体的なセレクタなので、color: green; が適用されます。
このように具体性が高い指定があると後から記述したcssが反映されない場合があるので注意しましょう。

対策：

• より具体的なセレクタを書く（例：div .text-red）
• !importantを多用しない
• スタイルの競合をブラウザの開発者ツールで確認する
• CSSの記述順や構造にも注意する

まとめ

CSSは正しく書かないと反映されないため、小さなミスでも大きな見た目の崩れにつながります。今回紹介したような基本的なエラーと対策を押さえておけば、初歩的なつまづきは回避できるはずです。困ったときは、ブラウザの開発者ツール（F12キー）を活用して原因を探ってみましょう！

最近は、クライアント様ご自身でも更新しやすいように、すべてWordPressのブロックエディタで構築する案件が増えてきました。
そこで今回は、Local環境を使って、フルサイト編集（FSE）ベースのオリジナルテーマ作成にチャレンジしてみました。あわせて、自分なりの手順も整理してみようと思います！

今回のゴール

・一般的な企業サイトをWordPressのブロックエディタのみで構築
・見た目よりも「構造・仕組み重視」で進行
・「Local」を使って構築
　※今回は、Localのインストールが完了している前提で進めていきます。

Localとは…
「Local」は、WordPressの開発環境をローカルに簡単に構築できるツールで、テーマ開発やテストにも便利です。
詳しくは、公式サイトをご確認ください。

Local

localwp.com

Localを使ってWordPressサイトを作成する

今回は、Localをインストール済みの状態からスタートします。

①左下の「＋」マークをクリック

②「Create a new site」を選択し、「Continue」をクリック

③サイト名を入力（今回は「TEST-FSE」にしてみました）
④「Continue」をクリック

⑤「Preferred」を選択し、「Continue」
　PHPのバージョンなどを変更したい場合は「Custom」を選びましょう

⑥WordPressのログイン情報（ユーザー名・パスワード）を設定
⑦「Advanced options」から「Select Language」を日本語に設定
⑨「Add Site」をクリック！

ローカル環境が完成しました！🎉

「Open site」をクリックすると、作成したWordPressサイトをブラウザで確認できます。
現状はこんな感じです！

まだ何もカスタマイズしていない状態なので、デフォルトテーマ「Twenty Twenty-Five」が反映された状態になっています。
ここから、どんどんカスタマイズしていきます！

「WP Admin」ボタンをクリックすれば、WordPressのログイン画面へ移動できます。
先ほど設定したユーザー名とパスワードでログインしましょう。

WordPressでオリジナルテーマを作成する

プラグイン「Create Block Theme」を追加

まずは、テーマを作成・管理しやすくしてくれるプラグイン「Create Block Theme」 を追加します。

①管理画面から「プラグイン」＞「プラグインを追加」へ

②「Create Block Theme」で検索
③「今すぐインストール」→「有効化」

インストールが完了したら、
「外観」＞「ブロックテーマを作成」へ進みます。

【このプラグインでできること】
・テーマのエクスポート
・新しい空のテーマを作成
・既存テーマの複製
・子テーマの作成

今回は、新しくオリジナルの空テーマを作成したいので、「新しい空のテーマを作成する」をクリックします。

テーマ名だけ入力すればOKです（他の項目は任意）。
今回は「test-theme」としてみました！

「空のテーマの作成と有効化」をクリックすると、オリジナルテーマが作成され、自動的に有効化されます。

「外観 > テーマ」で確認すると、作成したテーマがちゃんと有効になっているはずです。

サイトを表示してみると、デフォルトテーマから変更されており、見た目が少し変わっているのがわかります。

オリジナルテーマのファイル構成を確認してみる

Localの画面にある「Site folder」をクリックすると、ローカルに作成されたサイトのフォルダが開きます。

その中の wp-content > themes フォルダに移動すると、先ほど作成したテーマが追加されているのが確認できます。

【 test-theme の初期ファイル構成】

test-theme/
├── parts/
│ ├── footer.html
│ └── header.html
├── templates/
│ └── index.html
├── readme.txt
├── screenshot.png
├── style.css
└── theme.json

まだカスタマイズしていないのでファイル数は少ないですが、基本構成はこのようになっています。

従来の「クラシックテーマ」では .php ファイルをたくさん用意していたと思いますが、
ブロックテーマでは .html ファイルに置き換わっています！
最初はちょっとびっくりしますよね…！

次回予告

今回は、Localを使ってローカル環境を整え、空のオリジナルテーマを作成するところまで進めました。
次回は、theme.json を使って、WordPressブロックテーマの見た目を整えていきます！お楽しみに！

作業が終わったら…

Localでの作業が終わったら、「Stop site」ボタンをクリックして、サイトを停止しておきましょう。

起動したままにしておくと、PCのメモリやCPUリソースを継続的に消費してしまい、パフォーマンスに影響を与える可能性があります。
作業が終わったら、忘れずに停止しておくのが安心です！

こんにちは。ぴのです。

入社してから丸3年が経ち、早くも4年目に突入しました。
昨年頃から新しい業務が少しずつ増え始め、日々刺激を感じています。

ただ、業務量が突然増えた結果、最初に直面した壁…

そう、「スケジュール管理」です。

昨年、自分のスケジュール管理を新たに見直してみたので、
新入社員の方や同じ悩みを抱えている方の参考になれば嬉しいです🌼

スケジュール管理で見直したこと

①日程はすぐにメモする

基本的なことですが、これが一番大切です。
他の業務にも共通しますが、自分の記憶力を過信すると絶対に忘れます！
メールで来た日程や、口頭で伝えられた内容は、その場でメモするように心がけています。

頭だけで覚えるのは絶対にダメです！100％完璧に覚えるなんて仙人しか無理です👍🏻

②2つ以上のメモ帳を使い分ける

2つ以上使うことで業務の振り返りに最適です…！
わたしの場合は以下のように使い分けています。

• ふせん：その日にやること
• Googleカレンダー：先の予定や締め切り日

Googleカレンダーは見直し時に新たに導入したのですが、個人的に一番助かっています✨
タスク管理機能は明日の予定も確認できますし、気づいた時にすぐにメモがとることができます。

ふせんは、その日の業務の内容や、注意事項を大きく書いて、目に見える場所に貼っています！

③自分の作業時間を意識する

小さな更新作業などは、作業前と作業後に時間を確認して、どのくらいの時間で作業を終えれたか確認するようにしています。

スキマ時間にできないかな～とか、午前中にこれだけすまそうとか、色々と活用できるので、慣れない内は小さな業務から確認してみると良いです。

④業務に期日を設定する

長期の作業になる場合、指定された期日ぴったりにするのではなく、2～3日前に前倒しでカレンダーに登録するようにしています。
これは、修正期間を確保する目的もありますが、早めに設定しておくとモチベーションも上がるのでおすすめです。

⑤優先順位を常に意識する

複数のタスクを抱えているときは、締め切りが一番近いものから取り掛かるようにしています。
ただ、わたしの場合、小さな更新は後回しにすると抜けてしまうことがあるので、先に対応して大きな案件に集中できるようにしています。
気分転換にもなるので、よければやってみてください。

いかがでしたでしょうか…！
スケジュール管理って誰かに教えてもらうとかではなく
自分のやり方で身に着けることが多いですよね😌

こんなことを言いながら未だに期日ギリギリになったり、
忘れそうになることもあります（汗）
ですが、スケジュール管理を見直したことで
業務が飛ぶことはほとんどなくなりました！

作業効率をあげるためにもスケジュール管理はとても大切です。
また便利なツールがあれば試してみたいと思います！
ここまで閲覧いただきありがとうございました。

先日念願のサモエドカフェにいってきました🌼
散歩の時も他のお家の犬に触れるのが日々の幸せです
三宮にあるのでお近くにお住まいの方はぜひ…！

こんにちは！2年目になりました、ふくたろうです。

デザインの制作段階では、配置する要素や原稿がまだ確定していないことがよくあります。
特にカード型やリスト型のように同じデザインが繰り返されるレイアウトでは、文章の修正等が入ると都度余白が変わり、全体のバランスも崩れがちに…💦
そんな時に便利なのが、Adobe XDの「スタック」機能と「パディング」機能です。

スタック機能とは？

「スタック」は、要素が自動的に整列され、間隔が一定に保たれるように配置する機能です。
例えば、ボタンやカードのような繰り返し要素をまとめる際に非常に便利です。

特徴

方向の設定

• 縦方向（縦スタック）：要素が上から下に並ぶ
• 横方向（横スタック）：要素が左から右に並ぶ

ドラッグ＆ドロップでの並べ替え

要素をドラッグするだけで簡単に順序を変更可能です。

自動スペーシング

要素間の間隔が自動で調整され、追加や削除にすぐ対応できます。

ネスト構造対応

ネスト構造とは、スタックの中にさらにスタックを入れることを指します。
新しい要素を追加する場合は、グループ内で要素をコピー＆ペーストするだけで、同じ間隔で自動的に配置されます！

設定方法

1. グループまたはコンポーネントを選択
2. プロパティインスペクターで「スタック」を有効化
3. 垂直または水平方向を選択し、間隔を設定

パディング機能とは？

「パディング」は、要素の内側の余白を自動で設定できる機能です。
例えば、ボタンやカードのように、内部要素に合わせて背景が動的に調整されるデザインに適しています。

特徴

動的な余白

テキストやアイコンのサイズが変わっても、背景の余白が自動で調整されます。

個別設定

各辺（上、右、下、左）のパディングを個別に設定可能です。

設定方法

1. ボタンやカードのように背景とテキストを含む要素をグループ化
2. プロパティインスペクターで「パディング」を有効化
3. パディング値を設定（個別または一括）

スタックとパディングの組み合わせ

スタックとパディングは組み合わせて使うと、さらに効率的なデザインが可能です。
たとえば、複数のボタンをスタックで配置し、それぞれにパディングを適用することで、サイズや間隔を簡単に調整できます。

Adobe XDの「スタック」機能と「パディング」機能は、デザインの効率化に大いに役立つツールです。
要素の追加や削除、テキストの修正が頻繁に発生するプロジェクトでは、これらの機能を活用することで作業時間を大幅に短縮できます！

主な使い方は、
「こんな感じのコピー、他に言い回しないかな？」
「この構成、もっといい見出しあるかな？」
…そんなときに、ChatGPTに相談してます。

とっても便利なんですが、使いすぎると逆に時間がかかることもあって…。
今回は、私なりのモデルの使い分けや“使いすぎ問題”の原因・対処法をまとめてみました！

ChatGPT Plusで使えるモデルと特徴

Plusプランでは、こんなモデルが使えます。

• o3 → GPT-3.5相当。応答が速いが、知識量・精度は控えめ。
• o4-mini → GPT-4系の軽量版。バランス型。o3より精度が高い。
• o4-mini-high → o4-miniの高精度版。精度は高いが応答がやや遅い。
• GPT-4 → 高精度・知識量豊富。応答は遅いが、複雑な内容や深い相談に強い。
• GPT-4o → GPT-4相当の精度＋高速応答＋画像・音声入力対応。万能型。

基本、GPT-4oを使ってます。
スピードも精度もいいバランスなので、“とりあえず”の壁打ち相手として最適です。

おすすめ使い分け

• ブレスト・アイデア出し → GPT-4o
• 簡単なコピーや短文の相談 → o3 / o4-mini
• 詳細な文章・コピーの添削 → o4-mini-high / GPT-4
• 画像を見せて意見をもらう → GPT-4o

迷ったらGPT-4oから試す → 必要に応じて切り替えます。

“使いすぎ問題”で起こること

AI壁打ち、頼りすぎるとこんなことが起こります。

• 自分の意見が薄くなる
• プロンプトを直し続け“正解探し”になる
• どのモデルを使うべきか迷い続ける
• 一度に多く依頼しすぎて“処理中メッセージ”が続く

実際、大量に頼むとこんな感じでAIに返されます。

• すぐに準備しますので、少々お待ちください。
• あと数分で確実に提供できますので、もう少しだけお時間いただけますか？
• 進捗が出たらすぐにご連絡します！
• この後すぐに、すべてのデータを一括でご提供します！

この状態、ChatGPTが一度に処理できる負荷を超えてしまったときに出やすい現象です。
最終的にエラーで止まる／途中までしか出力されないことも…。

どうすれば“使いすぎ”にならない？

• 「トップページ構造案」「SEO見出し」「キャッチコピー」などに分ける。
• 速度重視ならo4-mini、精度重視ならo4-mini-high／GPT-4。
• AIの意見＋自分の視点で「最終案」に昇華する。
• 自分のゼロ案を書き出した上でAIに補助を依頼。

Plusで足りる？Proに上げるべき？

01.フェードトランジション

ページ全体をフェードアウト→フェードインさせて、やわらかく自然に切り替えます。
滑らかな動きは汎用性が高く、高級感を出したい、優しい雰囲気にしたいなどなど、ほぼどんなサイトにもマッチ！

参考サイト
https://ambientweaving2.lab.zozo.jp
https://bunkanodaidokoro.com/
https://www.nttdata-strategy.com/recruit/

02. スライドトランジション

左右または上下にスライドして新しいページを表示する手法。
アプリのようなモダンな印象を与えてくれます。
ページ切り替え以外にも、スクロールしたタイミングでテキスト表示に使えば、タイトルや文章をシンプルなまま強調できます。
フェードと組み合わせれば、より印象に残る動きも作れてGOOD！！

参考サイト
https://editora.jp/
https://yard-dental.com/
https://daft-about-draft.com/
https://career.datumstudio.jp/

03.SVGマスクアニメーション

SVGのパスを自由な形で利用して、ページを覆い隠しながら切り替える手法。
オリジナリティが出しやすく独特の動きでアート性の高い印象に！？
アイディア次第で、よりブランドにマッチしたサイト表現ができるので、ぜひ取り入れてみてください！

参考サイト
https://www.ntvart.co.jp/
https://www.uuum.co.jp/
https://kurimoto-ganka.com/

ページ切り替えアニメーションは、ユーザーの記憶に残る“動きの演出”です。
ただし、速度や軽さの最適化、目的に沿った表現を心がけることが何よりも大切です。

写真ばっかりでつまらない……シンプルに見せたいけれど印象に残らないからどうにかしかしたい。
そんなお悩みも、アニメーションを付ければ解決できるかも！？
自社サイトやクライアント案件で導入する際の参考にしてみてください！

不定期でも振り返る時間を作らないとうっかり忘れてしまいそうになるので、
今後の自分のために、MTタグを簡単に整理してみました。

フォルダ関連

<$mt:PageBasename$>

ウェブページのファイル名を出力します。

以下のようなフォルダ構成だと、
それぞれpagea_1、pagea_2、pageb_1部分が出力対象です。

＜フォルダ名（url）＞
フォルダA（folderA）
　└─pagea_1.html（/folderA/pagea_1.html）
　└─pagea_2.html（/folderA/pagea_2.html）
フォルダB（folderB）
　└─pageb_1.html（/folderB/pageb_1.html）

folderAやfolderBといったフォルダのディレクトリパス部分を出力したい場合は、

<$mt:FolderBasename$>

が利用できます。

実際に出力する際は、

<mt:SetVarBlock name="page_folderbasename"><mt:PageFolder><$mt:FolderBasename$></mt:PageFolder></mt:SetVarBlock>

と、変数として定義してから

<$mt:Var name="page_folderbasename"$>

で呼び出します。
※「mt:PageFolder」でウェブページが属しているフォルダに関する情報を取得します。

フォルダAやフォルダBといったフォルダ名部分を出力したい場合は、

<$mt:FolderLabel$>

が利用できます。

出力する際は先ほどと同様に、

<mt:SetVarBlock name="page_folderlabel"><mt:PageFolder><$mt:FolderLabel$></mt:PageFolder></mt:SetVarBlock>

と、変数として定義してから

<$mt:Var name="page_folderlabel"$>

で呼び出せます。

フォルダAやフォルダBより上の階層に親フォルダがあり、そのフォルダ名を出力したい場合は、

<mt:ParentFolder><$mt:FolderLabel$></mt:ParentFolder>

で表示させることができます。

カテゴリ関連

記事などでは、カテゴリを設定するかと思いますが、
そのカテゴリに関して使用できるタグもいろいろあります。

<$mt:CategoryBasename$>

カテゴリのファイル名を出力します。

以下のようなカテゴリ設定だと、
それぞれcategoryA、categoryA-1、categoryA-2が出力対象です。

＜カテゴリ名（url）＞
カテゴリA（categoryA）
　└─カテゴリA-1（categoryA-1）
　└─カテゴリA-2（categoryA-2）

カテゴリAやカテゴリA-1、カテゴリA-2といったカテゴリ名を出力したい場合は、

<$mt:CategoryLabel$>

を使用します。

＜カテゴリ名（url）＞
カテゴリA（categoryA）
　└─カテゴリA-1（categoryA-1）★
　　└─カテゴリAA-1（categoryAA-1）
カテゴリB（categoryB）
　└─カテゴリB-1（categoryB-1）
　　└─カテゴリBB-1（categoryBB-1）

他に、例えば上記のようなカテゴリを設定していて、現在のカテゴリが★だとします。
直上の親カテゴリを表示したいときは、

<mt:ParentCategory><$mt:CategoryLabel$></mt:ParentCategory>

で対応することができます。

子カテゴリの場合は、

<mt:SubCategories><$mt:CategoryLabel$></mt:SubCategories>

で対応することができます。

基本的なタグの紹介となっていますが、少しでもお役に立てたら嬉しいです。

1. ファイルの保存ミス

原因1: 拡張子が間違っている

症状: HTMLファイルを開いても、コードのまま表示される。
対策: ファイルの拡張子が正しく「.html」になっているか確認しましょう。

<!-- 正しいHTMLの例 -->
example.html

<!-- ×間違い -->
example.txt
example.htm

拡張子が間違っていると、HTMLファイルとして認識されません。

原因2: ファイルのエンコーディングが適切でない

症状: 文字化けが発生する。
対策: UTF-8で保存されているか確認しましょう。HTMLの<head>内に以下を追加することで、エンコーディングを指定できます。

<!-- 正しいHTMLの例 -->
<meta charset="UTF-8">

<!-- ×間違い -->
<meta charset="Shift_JIS">

Shift_JISなど異なる文字コードを指定すると、文字化けする可能性があります。

2. HTMLの記述ミス

原因: タグの閉じ忘れや入れ子のミス

症状: レイアウトが崩れたり、一部の要素が表示されない。
対策: HTMLタグの閉じ忘れや誤ったネスト（入れ子構造）をしていないか確認しましょう。

<!-- 正しいHTMLの例 -->
<div>
    <p>この文章は正しく表示されます。</p>
</div>

<!-- ×間違い -->
<div>
    <p>この文章は正しく表示されません。
</div>

<p>タグの閉じ忘れがあると、意図した通りに表示されません。
ブラウザの開発者ツール（F12キー）を使うと、エラーがないかチェックできます。

3. ファイルのパスが間違っている

原因: 相対パスや絶対パスの指定ミス

症状: 画像やCSS、JavaScriptが正しく読み込まれない。
対策: リンクやファイルのパスが正しく指定されているか確認しましょう。

<!-- 正しいパスの指定例 -->
<img src="images/logo.png" alt="ロゴ">

<!-- ×間違い -->
<img src="img/logo.png" alt="ロゴ">

フォルダ名が違うと、画像が表示されません。自身の環境に合わせて変更を忘れないようにしましょう。

4. キャッシュの影響

原因: 古いキャッシュが残っている

症状: HTMLを変更したのに、ブラウザに反映されない。
対策: ブラウザのキャッシュをクリアするか、ハードリロードを行いましょう。

• Windows: Ctrl + Shift + R
• Mac: Cmd + Shift + R

または、シークレットモードで開いて確認してみましょう。

5. サーバーにアップロードしたファイルが反映されない

原因: 古いファイルが残っている

症状: 修正したHTMLをアップロードしたのに、変更が反映されない。

対策:

1. ファイルが正しくアップロードされているか確認する。
2. サーバー側のキャッシュをクリアする。
3. .htaccess の設定によってキャッシュが強く保持されていないか確認する。

まとめ

HTMLが反映されない場合、以下の点を確認しましょう。

1. 拡張子のミス → .html になっているか確認
2. エンコーディングの設定 → <meta charset="UTF-8"> を追加
3. タグの閉じ忘れや構造のミス → 開発者ツールでデバッグ
4. ファイルのパスが間違っていないかチェック
5. ブラウザのキャッシュをクリアする
6. サーバーに正しくファイルをアップロードできているか確認

これらのポイントを押さえれば、HTMLが反映されない問題をスムーズに解決できます。エラーが発生した際は、開発者ツール（F12キー）を活用してデバッグしてみましょう！