STUDIOのレスポンシブデザインで押さえておきたい技３選
STUDIOは「ノーコード」のWebサイト制作ツールですが、タグの設定によるサイトの構造化を行うことで、よりSEOに強いサイトを作ることができます。
HTMLを書いたことがある方はイメージができるかと思いますが、ヘッダー・フッター・大見出し・小見出し・パラグラフ（文章）…等々、各要素がそのWebサイトおいて果たしている役割を「タグ」で表し、検索エンジンにとってわかりやすいサイトにしておくことは重要です。
このように役割をタグで表現していくことは、セマンティクスHTMLと呼ばれています。
詳細はこちらごご参照ください➔Semantics（セマンティクス）-MDN。
STUDIOではタグを指定することで、文字を見出しや本文として設定することや、ボックス全体をヘッダーやフッターとして設定することができるのです。
また、サイトタイトルやディスクリプションの設定など、基本的なSEO対策もできますので、公開前にひと手間かけて上位表示をねらいましょう！
- STUDIO SEO対策その① 最適なタグを設定しよう
- STUDIO SEO対策その② レイヤー構造を整理しよう
- STUDIO SEO対策その③ タイトル＆ディスクリプションを設定しよう
- STUDIO SEO対策その④ 404ページを設定しよう
STUDIO SEO対策その① 最適なタグを設定しよう
「タグ」とは、HTMLを書くときに指定する**h1（大見出し）、h2（中見出し）、p（パラグラフ）**などのことです。「この部分は見出しですよ」などと検索エンジンのコンピューターに教える役割があります。
ONE POINT ➔➔ 基本的なSEO対策として、「見出し」にはそのサイトのキーワード（「この単語で検索したときに上位表示されたい！」というワード）を含めましょう！
また、文章（または文章＋画像）の**「かたまり」をheader（ヘッダー）やfooter（フッター）、section（セクション）**などとするタグ付けもします。
では、それらをSTUDIOではどのように設定していくのか見ていきましょう！
文字をタグ付けする
まずは、ご自身のサイトについて、「大・中・小見出し」と「本文」の関係をしっかりと構成しておきましょう。
例として、以下のWebサイトの文字についてタグ付けを行っていきます（※本記事の説明用に作成した架空のWebサイトです）。
まずは大見出しの「インテリア百科」という文字を選択した状態で、画面右のメニューを開きます。さらに**「タグ」の項目**を展開すると、文字要素に適用できるタグが選択肢として現れます。
デフォルトでは「p（パラグラフ）」が選択された状態になっているので、**「h1（大見出し）」**をクリックしてこれに変更しましょう。
なお、「h1（大見出し）」はサイトにつき、原則１回だけ使用します。
続いて「中見出し１」を選択し、同様にメニューを展開して、**「h2（中見出し）」**に設定しましょう。「h2」は、各セクション冒頭のタイトルなどに使うとよいでしょう。
次に、３つある「小見出し」のそれぞれに対し、上記と同様の操作で**「h3（小見出し）」**を設定します。
**見出しに相当するタグは「h1」〜「h6」**まであり、数字が小さいほど重要度の高い見出しとなります。
通常の文章（今回の例では「テキストテキスト…」の部分）は、**「p（パラグラフ）」**を選択しておきましょう。
ボックスをタグ付けする
ここでは、各セクションの親要素となっているボックスに対してタグ付けを行っていきます。
まず、ヘッダー部分のボックスを選択して画面右のメニューを開きます。「タグ」項目を展開すると、文字のときとは異なる選択肢が現れます。これらは、ボックスに対して設定することができるタグです。
ボックスに対するタグは、デフォルトでは「div（※）」となっております。今回は、**「header（ヘッダー）」**をクリックしてこれに変更します。
※divはディブと読みます。dividedが由来で「分割された」という意味です。divタグに強い意味はなく、単なるグループとして扱いたい時に指定します。
次は、その下のセクションです。（元の画像ではこのセクションの背景色が透明でわかりづらいので、このセクションの親要素のボックスに黄色く色をつけました。）この背景部分をクリックして選択し、画面右のメニューを開きます。
今度は、選択肢から**「section（セクション）」**を選択します。
通常、このようなセクションはいくつかあるので、トピック毎に**「section（セクション）」タグ**で区切ります。
また、今回の例には載せませんでしたが、多くのWebサイトには最下部にサイトマップや連絡先を記した「フッター」が設置されています。フッターがある場合は、そのボックスに**「footer（フッター）」タグ**を設定しましょう。
STUDIO SEO対策その② レイヤー構造を整理しよう
STUDIOでは、「ボックスモデル）」を意識してサイトを構成すると、自動的にHTMLのようなレイヤー構造が生成されます。
※「ボックスモデル」がピンとこない方は、以下をご参照ください。「STUDIO基本操作① ボックスモデルを制すものはSTUDIOを制す！？」
では、さっそく例を見てみましょう！
画面左のメニューを展開し**「レイヤー」のタブを開くか、メニュー下の「レイヤーへのショートカットアイコン」**をクリックすると、レイヤーメニューが開きます。
最初は各セクションの親要素のみが表示され、子要素は折りたたまれています。子要素も表示させたい時は、要素名の左のマークをクリックしましょう。
下記の例では、**「header（ヘッダー）」の中に「h1（大見出し）」が、その下の「section（セクション）」の中に「h2（中見出し）」や「div（ボックス）」**が含まれている様子がわかります。
なお、後から付け足した要素を既存の要素の中に子要素として入れたい場合は、レイヤーパネル上で、移動させたいレイヤー（やなどの文字）を移動後の場所にドラッグ＆ドロップすることで、レイヤー構造を整理することができます。
HTMLになじみのない方も、STUDIO上でボックスレイアウトをきちんと意識してサイトを作れば、この階層構造は自動的に生成されるので、特に悩まなくて大丈夫です！
ONE POINT➔➔レイヤータブを開いた状態で画面右のメニューを開くと、選択したレイヤーに対してタグなどの条件を設定することができます。
階層が深い場所にある文字などは、誤ってその親要素を選択してしまうことが多いので、こんなときにもレイヤーパネルを活用できるのです！
STUDIO SEO対策その③ タイトル＆ディスクリプションを設定しよう
Webサイトが完成したら、公開前に必ず設定すべきことがあります。それが、**「タイトル」と「ディスクリプション」**です。これらは、Googleなどの検索エンジンで検索したときに「検索結果」として表示されるものです。
ONE POINT ➔➔ SEO対策の基本として、本文の内容と「タイトル」および「ディスクリプション」は必ず一致させましょう。いくら人目を引くタイトルをつけても、本文との関連性が薄く「ユーザビリティが低い」と判断されると、検索順位が下がってしまうでしょう。
では、さっそくSTUDIOでの「タイトル」と「ディスクリプション」の設定の仕方をご紹介します。
**エディタ画面の右上に「ページ設定」**という項目があります。これをクリックすると、画面右側にページ設定に関するメニューが開きます。
この「ページ設定」メニューをよく見ると、「サイト」タブと「ページ」タブがあることがわかります。「サイト」のタブではこのWebサイトサイト全体に関する設定を、「ページ」のタブでは現在編集中のページに関する設定を行います。
サイト全体のページ設定
まずは、このサイト全体のページ設定をしていきましょう。
- タイトル
- このサイト全体を表すタイトルを入力しましょう。
- 説明文（= ディスクリプション）
- このサイト全体を100文字程度で説明する文章を入力しましょう。
- ファビコン
- サイトが表示されているとき、タブの左側に表示される小さい画像（アイコン）を設定しましょう。
- 推奨サイズは32×32pxです。
- 例として、Googleの検索画面を表示しているときのタブを見てみましょう。このカラフルな「G」のロゴがファビコンです。
- カバー画像
SNSなどでシェアされたときに表示される画像を設定しましょう。推奨サイズ1200×630pxです。 - 言語
主な使用言語を設定します。
外国人の方が「翻訳サービスを利用しながら閲覧したい」というときに役立ちます。
（「コレ、何語のページ？」の疑問に答えます）。
各々のページ設定
STUDIOでは、Webサイトの複数のページがある場合、それぞれのページに対して個別の設定を行うことも可能です。
「ページ設定」を開き、今度は「ページ」タブに移動します。
編集画面に表示されているページについて設定をおこなっていきます。
「タイトル」「説明文（=ディスクリプション）」「ファビコン」「カバー画像」「言語」は、先に説明したとおりです。「ページ」タブ内に設定すると、これらの設定を個別のページに対して設定したことになります。
※全ページ共通のファビコンにしたい場合は、「サイト」タブでファビコン設定をしましょう。「サイト」タブで設定すれば、それが全ページに反映されます。「言語」も同様に、全ページ共通言語も場合は「サイト」タブで設定し、日本語ページ、英語ページ…などを作成した場合はページごとに言語設定しましょう。
以下２項目が、「ページ」に特有の設定項目です。
- 公開設定
各ページの**「公開」「非公開」について設定**できます。
ただし、特定のページを非公開にする設定はSTUDIOの有料プランに加入する必要があります。 - Noindex
これをONにすると、そのページが検索結果に現れなくなります。
ただし、検索されないというだけで「公開」自体はされていることに注意しましょう。
STUDIO SEO対策その④ 404ページを設定しよう
Webサイトを閲覧しているとき、**「404 NOT FOUND」**というページに遭遇したことはありませんか？
**「404ページ」とは、「現在、そのページは存在しません」**というときに現れるページです。以前は存在していたけれど現在は削除されたページにアクセスした場合や、間違ったURLを入力した場合などに表示されます。
さて、それではWebサイトを作る側として「404ページ」を考えてみましょう。
情報が古くなったページや終了したイベントの告知など…Webサイト内のページを削除することはありますよね。あるページを削除したことが、素早く検索エンジンに反映されるかというと…そうもいきません。また、内部リンクを削除し忘れることもあるでしょう。
そんな「消し忘れ」のURLがクリックされたとき、以下のようなページが現れたらどうでしょうか。
びっくりして、ページを閉じてしまうのではないでしょうか。あるいは（間違ったURLを入力した場合は）サイト自体が閉鎖されたと思って、訪問を諦めてしまうかもしれません。
しかし、こちらのページでしたらいかがでしょうか。
ユーザーがサイトに留まってくれる可能性がぐっと増えると思いませんか？
このように、「404ページ」をきちんと設定することで、サイトの離脱率を下げることができるのです。さらに、トップへのリンクや、おすすめ記事の表示といった工夫をすると、ユーザーの離脱を防ぐのに役立ちます。
では、この「404ページ」をSTUDIOでどのように設定するかを解説していきます！
エディタ画面左のメニューの「ページ」タブまたは、右上のアイコンから、「追加（プラス）」をクリックします。すると、追加するのは「ページ」か「モーダル」か選択肢が現れるので「ページ」をクリックします。
新規ページに404ページをデザインします。「サイトトップへ」のボタンには、サイトトップへのリンクを設定することを忘れずに！
デザインができたら、画面左上の「タイプ」から「404ページ」を選択しましょう。これで「404ページ」の完成です。リンク切れの際や誤ったURLが入力されたときは、自動的にこのページが表示されます。
おわりに
基本的なSEO対策は、STUDIOを使うときも、他の手段でサイトを作成するときと同じです。
適切なキーワード選定とその配置（キーワードをタイトルに盛り込むなど）、要素のタグ付けと構造化、タイトルやメタディスクリプションなどのページ設定…などをきちんと意識して、それらをSTUIDOのサイトにも設定していきましょう。
STUIDOの有料プランに加入すると、Google Search Consoleとの連携ができるようになります。これに登録すると、「クリック数」やサイト訪問者が「どんなワードで検索したか」がわかるようになります。本格的にサイト運営を始めるときには、積極的に利用していきましょう！
表示するスクリーンサイズによらず（パソコン⇔タブレット⇔モバイル）、それぞれの画面で最適な見やすさを提供する**「レスポンシブデザイン」！**
(※「モバイル＝スマホ」)
スクリーンサイズが変わってもレイアウトが崩れることなくきれいに表示できる…それは現代のWEB制作には必須の技術であるといえるでしょう。
STUDIOではボックスモデルを意識してサイトをデザインすることで、簡単にレスポンシブサイトが作れます。この機会にぜひ、マスターしましょう！
（ボックスモデルについては、こちらをご参照ください！ 『STUDIO 基本操作① ボックスモデルを制す者はSTUDIOを制す！？』）
本記事の学習内容はこちらです。
- STUDIO 画像をレスポンシブ対応にする
- STUDIO 文字をレスポンシブ対応にする
- STUDIO ハンバーガーメニューの作り方
STUDIO 画像をレスポンシブ対応にする
STUDIOで作ったWEBサイトの画像は、ある程度は自動的にレスポンシブデザインとして表示されます。
今、画像は「基準（パソコン用）」モードで配置してあります。この状態で、タブレット / モバイルモードに切り替えると、画像も自動的に縮小されます。画像は中央付近を中心に縮小されるので、ほとんどの場合、縮小後も違和感なく表示されます。
デザインエディタに画像を配置するとデフォルトではパソコン用のサイズとして設定されますが、「レスポンシブ」のタブから、基準（パソコン） / タブレット / モバイルモードに表示サイズを切り替えることができます。
※表示サイズが切り替わるポイントをブレイクポイントといいます。
表示できる画面幅は上記3種類しかないわけではなく、デザイン画面の両サイドバーをドラッグすることで、表示幅を調整できます。また、ブレイクポイントを何pxにするか編集することもできます。
もし、「レスポンシブ」タブが見当たらない場合は、ボックスや画像が選択された状態になっている可能性があります。そのときは、画面の余白部分をクリックしてみましょう。レスポンシブタブが現れるはずです。
画像のレスポンシブ設定がうまくいかない
たいていの画像は、スクリーンサイズが変わっても、STUDIOが「いい感じに」拡大・縮小して違和感なく表示させてくれます。
しかし、画像によっては**「イメージ通りの表示にならない」場合もあれば、「モバイル（スマホ）では別の画像を表示させたい」**という場合もあるでしょう。ここでは、そんな場合の対処法をご紹介します。
例として、まず、以下のように表示させたい場合を考えます。
基準（パソコン）モードで、「①パソコン」のように上下に画像を２つ並べてみてください。
※1枚目画像は「横長」のため、モバイル版では端が切れてしまっています。また、2枚目の画像は「縦長」の方が人物がキレイに収まる構図になっていますね。
この状態で、１枚目の画像をクリックして選択された状態にし、スタイルバーの左上にある「表示」を開きます。
すると「基準」「タブレット」「モバイル」の選択肢が現れますので、表示させたいモードのみにチェックを入れます。この場合は、「基準（パソコン）」にチェックを入れて、「タブレット」及び「モバイル」のチェックを外します。
同様に、２枚目の画像をクリックして選択します。スタイルバーの「表示」を開き、「基準」のチェックを外し、「タブレット」「モバイル」にチェックが入った状態にします。
以上のように設定することで、パソコン画面では1枚目の画像が、タブレットとモバイル版では2枚目の画像が表示されるようになります。（※チェックが入っていない画像は、無いものとして扱われるので、そこに空間ができてしまうことはありません。）
画像の配置やSTUDIO内でのトリミングについてはこちらの記事も参考にしてください！
『STUDIO基本操作② 画像の編集と設定をマスターしよう』
『STUDIOの便利な画像操作５本ノック！』
場合によっては、これらの画像編集の技術との**「あわせ技」**で思い通りの表示を目指しましょう！
画像が複数ある場合のレスポンシブ表示
次のような場合を考えてみましょう。パソコン版では画像が横並びに3つ並んでいます。ですが、このままモバイル版で表示すると…ちょっと窮屈ですね。
そこで、モバイル版では３枚の画像が縦に並ぶよう設定してみましょう！
（※モバイル版でも画像を横並びのままにしたい場合、画像サイズは%で指定しておくことがオススメです。pxで指定していると、はみ出した部分がカットされてしまいます！）
スタイルバーの「レスポンシブ」を「モバイル」モードにしてから各画像を選択します。そして、ボックスタブから横幅を100%に変更します。（「Shiftキー」を押しながらそれぞれの画像をクリックすることで、3枚同時に選択できます）
ただし、このままでは画像が「横並び」設定のままであるため、中央の画像以外が左右にはみ出して切れてしまい、まだうまく表示されません。
…では、ここからの編集を３ステップで解説します！
- STEP1 画像の配置設定を変更する
画像が入っている親ボックスを選択し、「横並び」から「折り返し（ジグザグの矢印）」に変更します。 - STEP2 親ボックスの範囲の変更
3枚の画像に対して親ボックスが小さすぎ、画像がはみ出してしまっています。子要素が収まる範囲まで親ボックスの縦幅を広げましょう。 - STEP3 親ボックスの配置設定の変更
親ボックスの設定が「中央寄せ」になっていると、スクリーンからはみ出た部分（上部）が切れてしまいます。縦並びの場合は**「上端揃え」または「均等配置」**にしておきましょう。
「縦並び」「横並び」「均等配置」といった画像の配置がの設定方法はこちらで詳しく解説しています➔『ボックスモデルを制すものはSTUDIOを制す！？』
文字をレスポンシブ対応にする
この章では、レスポンシブ対応となる文字設定について解説していきます。
文字については、パソコン / タブレット / モバイル と個別に設定できる項目とできない項目がありますので、その辺りをしっかり押さえておきましょう。
では、STUDIOのレスポンシブ設定について、「できること」「できないこと」に分けて解説していきます。
- 文字サイズ → OK
スクリーンサイズ毎に異なる文字サイズを設定することができます。 - 文字スタイル → OK
文字の色、フォント、行高、シャドウ…など、スタイルバーにある項目ならたいていOKです。文字の配置（右揃え / 左揃え / 中央寄せ）なども、画面サイズ毎に異なる設定ができます。 - マージン/ パディング →OK
マージン / パディングはスクリーンサイズ毎に異なる設定にすることができます。余白をたっぷりとってデザインしたけれど、モバイル版で見ると多すぎる余白のせいで文章が読みづらい…などというときは、モバイル版だけマージン / パディングを個別に設定し直すことができます。 - 書き込む文字そのもの→✖️
パソコン / タブレット / モバイルごとに文字ボックスの内容を変えることはできません。つまり、「モバイル版で見ると文字数が多いかな…」と思って文章の一部を削除すると、それがパソコン / タブレットモードにも自動的に適用されてしまいます。 - 改行→✖️
改行する場所も、パソコン / タブレット / モバイルごとに設定することができません。例えば、パソコンモードで改行位置を変更すると、それがモバイル / タブレットモードにも適用されてしまいます。
上記で「OK」の項目については、以下の操作でスクリーンサイズ毎の表示設定を行います。
①「基準」画面で文字を配置する
② 「レスポンシブ」タブ内で「タブレット」または「 モバイル」モードを選択する
③「タブレット」または「モバイル」モードにおけるスタイルを設定する
STUDIO ハンバーガーメニューの作り方
ここでは、レスポンシブデザインに必須の「ハンバーガーメニュー」の作り方を解説します。
ONE POINT
スマホなどスクリーンサイズが小さい場合は、グローバルメニューが表示し切れないので、画面の右上にメニューを折り畳んで格納することが多いです。通常、**「３線のアイコン（←ハンバーガーメニュー）」**をクリックすることで、メニューが展開されます。
では、さっそく作っていきましょう！
- STEP1 メニューバーの作成
今回は、ちょっとラクをして用意されているフォーマットを使いましょう。画面右のメニューを開き、「追加」→「セクション」と移動します。セクションタブ内の**「ナビゲーション1」をドラッグ&ドロップ**でページ上部に挿入します。
※フォーマットを組み込んだ後は、メニュー項目を増やしたり、デフォルトの文言やリンクボタンの色を変えたりと、自由に改変することができます。
フォーマットを使う利点は、タブレット / モバイルモードにしたとき、デフォルトでメニューを「ハンバーガーメニュー」にしてくれることです！ただし、この時点での「ハンバーガーメニュー」はリンクがついていないので、クリックしても何も起こりません。
ONE POINT
自分でメニューを作成するときは、「基準（パソコン用）」画面のメニューバーの他に、モバイル / タブレット用メニューバーを別途作成します。そして、それぞれについて、「表示」から**「基準」「 タブレット」「 モバイル」のON/OFFを設定**して、どちらのメニューが表示されるかを指定します。
ハンバーガーメニューのアイコンは、アイコンメニューから取得できます。
- STEP2 タブレット / モバイル用メニューの作成
ここでは、タブレット / モバイルモードで、「ハンバーガーアイコン」をクリックしたときに現れるメニューを作成します。
「追加」アイコンをクリックすると、「ページ」「モーダル」「リダイレクト」の選択肢が現れるので、「モーダル」を選択します。
そして、モーダルの編集画面で、タブレット / モバイル用のメニューを作成します。各メニュー項目に、それぞれページへのリンクを付けることを忘れずに！※「モーダル」でも、「ページ（いつものエディタ）」と同じ操作方法で編集ができます。
- STEP3 ハンバーガーメニュー（アイコン）にリンクをつける
「レスポンシブ」を「タブレット」または「モバイル」にし、ハンバーガーメニューのアイコンをクリックして選択された状態にします。この状態で、画面右の設定メニューを開きましょう。
「リンク」項目で「ページ」を選び、「ページを検索」と書かれた検索窓をクリックすると、「Page1」「Modal1」という選択肢が現れます。
ここで「Modal1」を選ぶと、ハンバーガーメニューのアイコンに対し、先程作成したモーダルがリンク付けされます。
プレビューで確認してみましょう。ハンバーガーメニューをクリックすると、モーダルに作成したメニューが無事表示されました。
表示が崩れるときのチェックポイント
さいごに、制作したWebサイトのレイアウトが、画面サイズによってズレてしまうときのチェックポイントを見ておきましょう。
- 画像（またはその画像の親要素となっているボックス）の横幅がpx設定になっている。
➔%に設定してみましょう。 - 画像が切れる、表示されていないものがある
➔親要素の「配置」を確認しましょう。「横並び」でなく「折返し」にするなどでうまくいくケースがあります。 - 新しい要素の追加を「基準」以外のモードで行った
➔新しい要素は基本的に「基準」モードで作成し、その後タブレット / モバイルについて表示の個別設定を行っていきます。STUDIOでは、「モバイルファースト」の考え方で作業をすることはオススメできません。
慣れないうちは、リンクを貼り忘れたり、マージン・パディングの設定がpxになっていたり…とミスもしやすいものです。
慌てず自分のチェックリストを作るなど工夫して、レスポンシブデザインのすてきなサイトを作りましょう！
