記事内に商品プロモーションが含まれる場合があります
ノーコードでおしゃれなWebサイトを作れる「Studio」ですが、いざ操作してみると「使い方がイマイチわからない」という方もいるのではないでしょうか。
この記事では、Studioを始めてみたものの手が止まってしまった初心者さん向けに、実際に簡単なWebページを作って一緒に操作して覚えるチュートリアルの形で使い方を解説します。
1.StudioのWebページ作成チュートリアル
それでは、とても簡単な構成のシンプルなページを一緒に作ってみましょう。一度でも「最初から最後まで作る」というのをやってみると、確実にステップアップできるはずです！
今回試しに作ってみるのはこちらのページです。イヌの写真家のホームページ、という設定で、無料プランの範囲でシンプルに作ってみます。
ページ作成で使う画像は、こちらに用意したので、クリックしてダウンロードできます。
下準備
新規デザインを開いたら、まずは「色」や「フォント」の下準備をしておくとスムーズです。
適当にボックスを追加し、「塗り」をクリックします。
使いたい色は最初に決めておきます。今回は「背景色1：#c3b5a6」「背景色２：#fff9f2」「文字色：##8c6a45」にしたいと思います。
背景色１のカラーコード(#c3b5a6)をコピーして、①のところに貼り付けて色が反映されたら、②のプラスボタンを押します。するとパレット上にその色が登録されます。
あらかじめ登録されている不要な色は、左上のバツをクリックして削除しておきましょう。
背景色２（#fff9f2）と文字色（#8c6a45）も同様に登録して、カラーパレットができました。このように用意しておくと、ここから色を選ぶだけでいいので、後の操作が楽になります。
続いて、フォントも登録しておきます。
テキストを追加したら、上の「フォント」にマウスをのせ、開いたメニューで「フォントを追加」をクリックします。
今回は日本語用に「Noto Sans JP」、英字用に「Josefin Sans」、サイト名用に「Pacifico」を使います。
追加メニューで、フォント名をクリックして追加します。検索も可能です。
このようにフォントを３つ登録しました。（不要なLatoは消しましたが、別にあっても大丈夫です）
カラーとフォントの登録が完了し、これで下準備はOKです！
ヘッダーを作る
まずは、一番上のヘッダーから作ってみましょう。ちょっとややこしい部分もありますが、余白やグループ化、配置など、基本を理解しやすいパートなので、頑張ってみましょう…！
まず、左メニューの一番下をクリックします。
メニューが開いたら、上の「追加」タブ→左側の「セクション」をクリックします。すると「ナビゲーション」があるので、「ナビゲーション１」をクリックしましょう。
この「セクション」はナビゲーションのほかにもいろいろあり、「すでにボックスやボタンなどが組み合わせてあるパーツ」なので、挿入してほぼそのまま使えるので便利です。
このようにデザイン上に挿入されました。右端の「リンク」のボタンは不要なので、クリックしてバックスペースキーで削除します。
続いて、ヘッダー（ナビゲーション）の背景色を変更します。
真ん中らへんをクリックして背景を選択し、上の「塗り」をクリックします。するとカラーパネルが開くので、登録しておいたグレージュ(#c3b5a6)を選択します。
続いて、テキストの「ロゴ・サイト名」をクリックして編集し、「Doggo Photo」に変更します。
お店のロゴなどがあればロゴ画像にすればよいですが、今回は手軽に「ロゴっぽく見えるフォント」に変更したいと思います。
サイト名が選択された状態で、上のタブで「テキスト」になっていればテキストの色やフォント等の変更ができます。「フォント」をクリックして、あらかじめ登録していた「Pacifico」を選択しましょう。
続いて、もう少し右にある「塗り」をクリックして、色を白にします。
左側の「行高」と「文字間」も変更しておきましょう。行高は１、文字間は0.05にします。
続いて、ヘッダー右端のメニュー名を編集していきましょう。
ここはボックスがたくさん並んでいてそのままでは分かりにくいので、左下から「レイヤー」を開きましょう。
ヘッダー（< header>のレイヤーです）の中身を見てみると、なにやら非表示になっている< icon>のレイヤーがあります。不要なので消しておきましょう。
なお、レイヤーは行を折りたたみ可能です。各行の左端の「>」をクリックすると折りたたまれた分を開くことができます。
さて、デフォルトのメニューは３つしか並んでいませんが、４つにしたいので、「メニュー」を増やしたいと思います。
「メニュー１」〜「メニュー３」は、そのひとつ上の< div>のボックスに入っています。一番下のメニュー３をクリックして、[Ctrl](または[command])＋[D]で複製しましょう。
すると、メニュー３が２つになり、全部でメニューが４つ並びました。< div>のボックスの中に、< p>のテキストが４つ入った状態です。
ひとつずつクリックして、メニュー名を「About」などに変更していきましょう。
メニュー名を変更できたら、次はフォントなどの装飾を変更します。
同じ装飾にしたいので、[shift]を押しながらそれぞれクリックしていき、４つが複数選択された状態にします。
上のメニューで、フォントを変更しましょう。英字なので「Josefin Sans」にします。
さらに、上の「塗り」で文字色も白に変更しましょう。
「行高」も１にしておきます。
文字間は、広げてみたらなんか間延びしたかんじになったので、そのまま０としました。
続いて、余白の調整をしておきます。無駄な余白がデフォルトでついているので、それを消していきます。
メニュー名４つが複数選択されたまま、上のタブで「ボックス」をクリックします。そしてすぐ下の「パディング」をクリックします。
余白は「パディング」と「マージン」の２種類があり、「パディング」は枠の内側を広げる＝自分の領域を広げる、「マージン」は外側の余白を広げる、という役割があります。
図にするとこんなかんじです。「要素の中身」というのは、webサイト上に表示したいテキストや画像のことです。先ほどで言えばメニュー名の「About」の文字などです。
中央の鍵マークと線がグレーの場合は、上下左右の余白を1つずつ変更できます。
中央を１回クリックすると、真ん中がカーブになった線になり、この状態では上下あるいは左右がセットで変更されます。もう１回クリックすると、直線のみになり、上下左右すべてが同じ値に変更されます。
ということで、上下左右のパディングを０にして余白をなくしました。
ここでレイヤーをみてみると、< div>が３つ並んでいて、真ん中は無駄に多い不要な< div>となっています。
無駄な箱を消したいので、メニュー名が入っている< div>をドラッグして、不要な< div>の上に移動させます。
すると不要な箱が消え、サイト名とメニュー名の箱だけになりました。
時々レイヤーをチェックして、不要な< div>があれば消すようにするのがおすすめです。気が付かないうちに箱に箱がかさなりまくって多重になると、エラー表示されたりすることもあるので要注意です。
続いて、メニュー名の間隔を広げます。メニュー名の入った箱をクリックし、上の「ギャップ」をクリックして40にします。
「ギャップ」というのは箱の中身どうしの距離です。ギャップ０でぴったりくっついて並び、ギャップが大きくなると間隔が離れていきます。
ギャップ40でいいかんじになりました。
続いて、ヘッダーの縦幅を「auto」にします。
するとキュッと縮むので、パディングで余白をつくります。
パディングを左右40、上下18に設定して、いい感じになりました。
一見これでよさそうですが、ここから「画面幅が大きい場合」にそなえて、ひと手間かけます。
Shiftキーを押しながら、サイト名の箱とメニュー名の箱をクリックして複数選択にします。その状態で[Ctrl](または[command])＋[G]を押して、グループ化します。
サイト名の箱とメニュー名の箱のレイヤーの階層が揃い、ひとつ上の大きな箱に一緒に入りました。これがグループ化です。
このグループの横幅を1080pxに設定します。
さらに、ひとつ上のレイヤーのheaderをクリックして、デザイン上にある縦棒をクリックし、中央配置にします。
すると、画面の中央に幅1080pxでタイトルとメニューが表示されるようになります。大きなディスプレイで表示した場合でも、タイトルとメニューの間が広がりすぎなくて、見やすいと思います。
もう少しいじりましょう。サイト名の< p>をクリックして、上メニューの「サイズ」でフォントサイズを32か36にしましょう。
また、ヘッダーを固定しておきます。固定しておくと、スクロールする際にヘッダーがついてきて、サイトに訪れたユーザーさんがメニューなどを使いやすくなります。
headerを選択してから、左上の「配置」をクリックし、「固定」を選択しておきましょう。
最後に、「タグ」を設定しておきます。設定しなくてもWebサイトとして公開はできますが、設定しておいたほうがSEO的によいです。
サイト名の< p>をクリックしてから、右側の開くボタンをクリックします。
開いたメニューの「タグ」をクリックし、「h1」を選択します。
「h1」とは「大見出し」的な役割をもちます。サイト名ですね。
メニューにも同様に、「nav」のタグをつけておきましょう。
こんなかんじでタグをつけておくと、Googleさんにも「このサイトの構造はこうなんだな」と認識してもらうことができます。
なお、タグとは別で、レイヤーが増えていくと何が何やら分かりづらくなるかもしれません。必要に応じて、レイヤー名を変更しておくのがおすすめです。
この「レイヤー名」はタグとは違い、Studio上での機能となります。特に外部への影響を与える要因とはならないので、自分のわかりやすいように設定しましょう。日本語でも大丈夫です。
トップ画像を挿入
ヘッダーが完成したので、続いて、トップ画像を挿入したいと思います。ここのパートは、画像を入れるだけなのでとても簡単です。画像を大きく表示させる方法などを理解できます。
まずは画像をアップロードしたいので、左メニューの一番下をクリックします。
上の「追加」タブ→左の「アップロード」をクリックし、「ファイルをアップロード」をクリックします。
するとパソコンのフォルダが開くので、画像をすべて選択して「開く」をクリックし、アップロードします。
アップロードが完了すると画像が表示されているので、「横トップ画像」の写真をクリックし、デザイン上に挿入します。（ドラッグしても挿入できます）
画像のところに「box/img」の切り替えがあるので、「img」をクリックして切り替えておきます。
「img」は画像として使用したいとき、「box」は背景画像などとして使用したいときに使います。ここでは画像上になにも乗せずに単体で使いたいので、「img」としておきます。
続いて、画像を大きく表示したいので、上の「横幅」のメニューで単位を「%」を選んでから、数値を100にして横幅を100%にします。
トップ画像を大きく表示できました。
続いて、画像の「alt」を設定します。
「alt」というのは「代替テキスト」というもので、画像が読み込めなかったときに代わりに表示してくれる文になります。
右側のメニューをクリックして開きます。
開いたこちらに、写真を説明する文章を入力します。今回は「海で撮影した笑顔の犬」とかですね。だらだら長くせず、簡潔は説明がよいかと思います。
「About」を作る
続いて、文章と写真を並べた「About me」の部分を作成します。先程よりは難しいですが、そこまで複雑なことはしないので、頑張ってみましょう！「画像とテキストを並べる方法」が理解できます。
まず、新しい大きな箱を置きたいので、「セクション」を追加します。
上の「塗り」で、背景色を#C3B5A6のグレージュに変更しておきます。
続いて、まずは見出しとなるテキストを追加します。
上メニューで色を白に変更してから、文章を「About me」にします。「どんな写真家？」とう文言も小さく付けたいので、とりあえず[Ctrl](または[command])+[D]で複製しておきましょう。
先に上の「About me」を編集します。
フォントを「Josefin Sans」にし、フォントサイズを64px、行高1、文字間0.05にします。
下の「どんな写真家？」は、Noto Sans JPにしてサイズを12px、行高１、文字間0.05にします。
トップ画像とぴったりくっついた状態なので、レイヤーで「section」を選択し、上のパディングをクリックしたら、上下を100にしましょう。これでいいかんじに隙間ができました。
見出しは２つでセットなので、Shiftキーを押しながら２つを選択し、[Ctrl](または[command])+[G]でグループ化しましょう。
グループ化すると、こんなかんじで２つが１字下がりになり、上にひとつ< div>が追加されます。（レイヤー名が「group」になっていてわかりやすいですね）
また、見出しにタグを付けておきましょう。それぞれ見出しのテキストをクリックしてから右メニューを開き、タグで「About」を「h2」、「どんな〜？」を「span」にしておきます。
続いて、画像を追加します。追加できたら、画像上のボタンで「img」にするのを忘れないようにしましょう。
説明文用のテキストも追加します。
現時点で画像もテキストもぎゅんぎゅんに詰まっていますが、全部要素を追加してから余白を調節するので、とりあえず追加していきましょう。
テキストのデザインを変更します。色を白、太さ500、フォントをNoto Sans JP、サイズを15px、行高１、文字間0.05です。
そうしたら、見本サイトの説明文が３文あるので、[Ctrl](または[command])+[D]で複製して全部で３つにします。
複製したテキストの文章を編集したら、Shiftキーを押しながらクリックして複数選択し、[Ctrl](または[command])+[G]でグループ化します。
レイヤー名は初期設定は「group」になりますが、「about文」などわかりやすくしておくと後々便利なので、不慣れなうちは適宜変更しましょう。
続いて、画像と説明文グループを複数選択し、これもグループ化しておきます。
ひとつの箱の中に「画像」と「テキスト３つセット」が入った状態になりました。（レイヤー名を「about全体」にしておきます）
見本サイトのように画像を右、文章を左、と並べたいので、「about全体」のレイヤーをクリックし、すぐ上に表示されている矢印をクリックして、「←」を選択します。
そうすると、このように下にあった文章が左、上にあった画像が右、と並べかえることができました。
続いて画像を選択して、上メニューの「横幅」で500pxに設定します。
するとこのように、箱から文章が飛び出してしまいました。これを修正します。
テキストが３つ入っている「about文」のレイヤーをクリックし、横幅を「flex」にしましょう。これできれいに収まります。
続いて、文章が中央揃えになっているので左揃えにします。
また、テキスト同士の間隔がないので、見やすく広げましょう。テキスト３つはグループ化して一緒の箱に入れてあるので、箱の中身同士の間隔を広げる「ギャップ」を使います。
テキストが入っている箱を選択して、上の「ギャップ」で値を30にします。すると黄緑部分のように、隙間が広がりました。
同じようにして、画像とテキストセットが入った箱を選択し、ギャップを30にして、画像と説明文の間隔も広げます。
テキストが２行になってテキスト内の行間が狭い場合は、「行高」を大きくして広げることができます。
さらに、見出しとAbout本体の間も広げたいので、一番外側の箱のギャップを60にして広げましょう。
これでだいぶいいかんじになったと思います。が、ここで少しだけ幅を狭めてみましょう。
すると、左右の余白がまったくないことがわかります。
ということで、余白を作るためにAboutの一番外側の箱を選択して、パディングで左右を40にしましょう。これで余白ができ、画面幅を狭くしても隙間が維持されます。
もっと画面幅を狭くするとかなりデザインが崩れますが、とりあえずPC画面幅で完成させてから、スマホ幅サイズでデザインを調整するようにします。（これをレスポンシブ対応といいます、具体的な操作は後ほど解説します）
さて、最後に画像の角がつんつんしすぎな気がするので、角を少し丸くしておきます。上の角丸で調節可能です。
「Menu」を作る
続いて、こういった「枠で囲まれた画像＋テキスト」のようなメニューカードの作成をやっていきます。とても便利なリスト化という機能を学びましょう。
先ほどは「About」のセクションを完成させたので、今度は新しく「Menu」のセクションを作っていきます。
流れとしては、Menu用の新しいセクションを作って、中にメニューカード（枠で囲まれた画像＋テキスト）をひとつ作成、そのカードをリスト化して３つにする、となります。
まずはAboutのセクションを選択した状態で[Ctrl](または[command])+[D]を押し、セクションを複製します。
新しいセクションを選択し（必要に応じてレイヤー名を「menu」などにしましょう）、背景色を「#FFF9F2」にします。
続いて、見出しの色が白だと見えないので、「#8C6A45」にします。
ここの「About」の内容は不要なので、クリックしてバックスペースキーで削除しておきましょう。
見出し部分の文章を「Menu」と「ー撮影コースー」に変更します。
続いて、画像を「追加」タブの「アップロード」から貼り付け、「img」に変更しておきます。（余裕があれば右メニューから「alt」を入力しておきましょう）
続いて「追加」の「ボックス」からテキストを挿入し、「屋内撮影コース」とコース名に変更したら、色を「#8C6A45」の焦げ茶にします。
こんなかんじで、画像のすぐ下にテキストがあればOKです。もうひとつ必要なので、[Ctrl](または[command])+[D]で複製しておきましょう。
画像とテキストの間に変な余白がついているので削除します。「section」をクリックしてから上の「ギャップ」をクリックし、60になっているのを「0」にします。
先ほど作成したAboutセクションにギャップが設定されていて、それを複製して使っているので、ギャップが残ってしまっていたんですね。
一番下のテキストを料金「￥19,800」に変更し、すぐ上の「屋外撮影コース」のテキストとグループ化します。
グループ化したところで、このあと複雑になっていくのでレイヤー名をわかりやすいように変更しておきます。
さらにコース説明のテキストを２つ追加し、それぞれ文章を編集したら、グループ化しましょう。
現時点でこんなレイヤー構成になっていればOKです。Sectionの中にタイトルのdiv（箱）、画像、コース名・料金のdiv、コース説明のdivですね。
ここでさらに、「コース名・料金」と「コース説明」のdivをグループ化します。（レイヤー名は「説明全体」にしておきます）
さらに、画像と、「説明全体」のdivをグループ化して、大きなdivにしましょう。（レイヤー名は「メニュー全体」）
こんなかんじで、「メニュー全体」のdivの中に「画像」と「説明全体」が入っていればOKです。
こんなかんじで、divの中にdivが入って、さらにdivとdivが…というのはwebサイトの構造でよくあることなので、「どのdivがどれか？」がわかりやすいように、レイヤー名を活用しましょう。
ここでメニュー全体のdivを選択して上の矢印で「→」をクリックし、左から右への横並びにします。
それから、Sectionを選択して「ギャップ」を60にし、見出しとメニュー全体の隙間を広げましょう。
メニュー全体のdivを選択し、背景を白にします。
続いて、メニュー内容のテキストのデザインを変更していきます。
まずは「屋外撮影コース」を選択し、太さ700、サイズ24px、行間1、文字間0.05に設定しましょう。
続いて「￥19,800」を選択し、太さ700、サイズ16px、行間1、文字間0.05に設定しましょう。
コース説明の上段は、太さ500、サイズ15px、行間1、文字間0.05に設定しましょう。
コース説明の下段は、太さ500、サイズは少し小さめに12px、行間1、文字間0.05に設定すればよさそうです。
続いて、間隔をいいかんじにしていきます。
「説明全体」のdivを選択して、「ギャップ」を40にしましょう。コース名とコース説明の間隔が広がります。
さらに「コース説明」の中の間隔も広げたいので、「ギャップ」を10にしましょう。
続いて、画像の横幅を400pxに設定します。
「説明全体」の横幅も、横幅が狭くなったときにはみ出さないようにflexにしておきます。
続いて、メニューの角を丸くしたいので、「メニュー全体」のdivで角丸を12pxで設定します。
すると右側は角丸になりましたが、左側は丸くなっていません。これは、犬の画像の角が丸くなっていないためです。（画像の裏側で背景の白は丸くなっています）
なので、画像の左側の角だけ、角丸の設定をしましょう。角丸をクリックした後に、右側のボタン（③）をクリックすると、個別に角丸を設定できます。
それからシャドウの設定をします。上のメニューから「シャドウ」をクリックして、右下に影がかかるボタンをクリックし、ぼかしを10に設定します。
これでいい感じのメニューカードができました。調整し忘れた部分を含め、もうすこし調整していきます。
まず、コース名と料金の間隔が近いので、「コース名・料金」のdivを選択してギャップを10に設定します。
それから、「コース説明」をクリックしてすぐ上に表示される棒のマークをクリックして、左寄せにしておきましょう。
また、横幅を狭めたときに余白がきちんとできるように、「説明全体」のdivでパディングを左右に40設定しておきます。
まずは、「メニュー全体」を選択したら、レイヤー上ではなくデザイン上で右クリックして、「リスト化」をクリックします。
すると一瞬でメニューカードがリスト化され、２つになりました。リストそのもののレイヤーは「ul」で、リストの中身（メニューカード）が「li」になっています。
リストが選択されている状態でレイヤーを上にスクロールすると、一番上にリストのメニューが表示されています。
ちょっと見やすいように、左メニューの幅を広げておきましょう。境目をクリックしたまま移動させれば幅を調節できます。
一番下の「New」をクリックすると、リストの中身< li>（メニューカード）を増やすことができます。
メニューカードは３つほしいので、ひとつ増やして合計３つにしておきましょう。
続いて、リストメニュー上でメニューカードを編集していきます。まずは画像をクリックしてみましょう。
「アップロード」から画像を選んでクリックするだけで、デザイン上のメニューカードの画像が差し替わります。
同様にして、テキストも見本サイトのとおり編集していきましょう。
削除したいテキストは、空欄にしておけばOKです。
リスト内も、通常のボックスのようにギャップが設定できます。メニューカード同士の間隔を広げたいので、「ul」を選択して「ギャップ」を30に設定しましょう。
それから、デフォルトでパディングが10になっているので、０にして無駄な余白を削除しておきましょう。
最後に、横幅を100%に設定すれば、メニューリストの完成です。
「Gallery」を作る
続いて、この部分を作っていきます。写真を並べるだけなのでとても簡単です、が、「PC表示のときに２つずつ画像を横に並べる」というのをやってみたいと思います。
まずは新しいセクションにするので、先程まで作っていたメニューのセクションを[Ctrl](または[command])+[D]で複製します。
新しいセクションを「gallery」にしておきましょう。
また、不要なメニュー表を削除します。
あとで背景色を暗くするので、タイトル部分のテキストをShiftキーを押しながら２つとも選択して、クリーム色に変更しておきます。
続いて、セクションを選択して、「塗り」で背景をこげ茶にします。
また、タイトルの文章も「Gallery」と「撮影写真」に変更しましょう。
続いて、「追加」の「アップロード」から、ギャラリー用の写真を１枚挿入します。「img」にするのも忘れないようにしましょう。
デザイン上で画像を右クリックして、「リスト化」を選択します。
リスト化されたら、レイヤーの一番上にあるリストのメニューで「New」のボタンをクリックして、画像が６枚になるように増やします。
続いて、画像をクリックしてギャラリー用の写真に差し替え、というのをひとつずつやっていきます。
すべての画像を差し替えたら、画像を選択した状態で、横幅を「100％」に設定しましょう。
続いて、画像の一つ上の「li」を選択し、横幅を「50%」に設定します。
リスト部分をデザイン上でダブルクリックすると、このように「周りが暗くリスト部分が明るい表示」になります。上の矢印にマウスカーソルをのせて「並べ方」のメニューを開きましょう。
この中から、「折り返し」の矢印をクリックして設定します。すると２画像ずつ横に並んだ状態になるかと思います。
細かい部分を調整したいので、まずはulのパディングがデフォルトの10になっているのを、「0」に変更します。
続いて、ulのギャップを「40」に設定します。
さらに横幅を100%にしましょう。
それから、画像に影をつけます。画像を選択した状態で、上の「シャドウ」をクリックして、右下に影が落ちるボタンをクリック、値を左から「5・5・10・1」にします。
これで画像が横２列に並びましたね。PC表示ならいいかんじですが、スマホ表示だと画像が小さくなりすぎるので、後ほどレスポンシブ設定をしていくときにスマホ表示の場合は縦１列に並べるようにします。
最後に、テキストを追加しましょう。セクションの外側に配置された場合は、ドラッグして内側に移動させます。
文章を「…and more.」に変更し、サイズを「20px」、フォントを「Josefin sans」、太さを500、色を白色にします。
「Contact」とフッターを作る
いよいよ最後のパーツです！お問い合わせの部分と、フッターを作ります。「画像を背景にする」のと、「アイコン」を使ってみましょうね。
まずは背景用の画像をデザインに追加します。
横幅を「100%」にします。縦幅は作業しやすいように、とりあえずの「500px」にしておきます（あとで変更します）。今回は画像を背景として使うので「Box」のままでOKです。
タイトル部分はコピペにすれば楽なので、Galleryセクションのタイトル部分のdivを、[Ctrl](または[command])+[C]でコピーします。
デザイン上で背景画像をクリックして[Ctrl](または[command])+[V]でペーストし、画像外に配置された場合はドラッグして移動させます。
タイトルの文章を「Contact」「お問い合わせ」に変更しましょう。
続いて、他のセクションと同じようにパディングを上下100、左右40に設定します。
続いて、インスタグラムとLINEのアイコンを挿入します。自分で用意しなくても、Studio上に素材があるので、それを利用しましょう。
追加タブで「アイコン」をクリックし、「Font Awesome」を選択してから「instagram」で検索しましょう。下に出てきた線画のものを今回使用します。
アイコンは色とサイズの変更が可能です。色を白、サイズを「64」にしましょう。
続いて、テキストを追加して「Instagram」の文字にします。行高1、フォントをNoto Sans JP、太さを500、色を白にします。
また、LINEも同様にアイコンを追加しましょう。
LINEのアイコンはサイズが64だと少し大きくなってしまうので、直接入力して56くらいにしておきます。色は白でOKです。
LINEのテキストも追加します。設定はInstagramの文字と基本的に同じでよいですが、少しバランスを整えたいので文字間を「0.05」にします。
パーツが揃ったので、並べ方を整えていきましょう。
まずはアイコンとそのテキストをグループにします。Shiftキーを押しながら選択し、[Ctrl](または[command])+[G]でしたね。
Instagramのグループ、LINEのグループをそれぞれ作ったら、横並びにしたいので、さらにそのグループ同士をグループ化します。
外側のdivを選択して、デザイン上の矢印から「→」を選択して、インスタグラムとラインを横並びにします。
LINEの文字とアイコンが近すぎるので、ギャップで隙間をあけてみました。
そうするとアイコン同士の高さが合わなくなったので、Instagramの文字の行高を1.5にして揃えてみました。
続いて、画面幅が大きすぎるとアイコン同士が離れてしまうので、それを防ぐために、外側のdivの横幅を300pxに設定しておきます。
仕上げに、アイコン同士をきれいに並べたいので、それぞれのアイコン・テキストのdivの横幅を「flex」に設定します。すると外側の箱の幅300pxの中で１：１にきれいに並ぶようにできます。
最後に、アイコンのあたりをクリックしたら各SNSへ飛べるようにしたいので、リンクを設定します。
アイコン・テキストのdivをクリックして、右メニューをクリックして開き、「リンク」のところに飛ばし先のURLを貼りましょう。
最後に背景画像の縦幅をautoにし、パディングの上下が100だと広いかんじがするので、上下を80、左右を40にして、完成です。
あとはフッターですね。あってもなくてもよいようなパーツですが、「このWebページはここまでです、続きはありません（コーディングミスで表示されていないわけではありません）」というのがユーザーさんに分かりやすいので、設置しましょう。
まずは追加タブの「ボックス」から「Section」をクリックして新しいセクションを追加します。あとは背景の塗りをグレージュに、横幅を100%に設定します。
テキストを追加し「@2024 Doggo Photo」のようにコピーライトを入れ、色を白、フォントをJosefin Sansにします。
セクションの縦幅をautoにして、パディングを上下20に設定します。
ちょっとフォントが大きいかな？と思うので、フォントサイズを12pxにしました。
これでページのデザインが完成しました！
レスポンシブ設定をする
異なる画面幅に対応したデザインにすることをレスポンシブ設定といいます。
Studio上で画面幅を狭くしたり広くしたりしてみて、表示がおかしくなったら修正する…という地道な作業です。
だいたいは以下の点に気をつければ、修正できるかと思います。（もちろんデザインによりますが…）
- パーツの並べ方を横並びから縦並びに変更する
- 「横幅」の設定を変更する
- フォントサイズを変更する（PC用をそのままスマホにすると大きすぎる）
- パディングやギャップなどの余白を調整する
- 画面幅によって「表示」「非表示」を駆使してその画面幅専用のデザインにする
Studioでは、デザインの端で黒矢印になったところで左右にドラッグすると、画面幅を変更できます。デザイン上のパーツが未選択状態であれば、上に「どのデバイスの幅か」が表示され、そこをクリックして変更することもできます。
ちなみに、右上のライブプレビューをクリックすると、実際のWeb上ので表示を確認できます。
QRコードをスマホで読み取れば、スマホでページを開くこともできます。
では、さっそく始めていきましょう。まずスマホ幅に狭めて、上から順にみていきます。
幅が狭くなると、横並びになっていたメニュが消えてしまいます。レイヤーで見てみるとまぶたを閉じたような非表示のマークがついています。
自動で非表示になってしまったので、これを表示させます。
左上の「表示」のメニューをクリックして、チェックが外れた「モバイル」「タブレット」チェックを入れれば、表示されます。
表示されたメニューとサイト名の間が狭いので、ギャップを30に変更して間隔を広げます。
続いて、トップ画像が横長なので、スマホ幅で表示しても小さくなってしまいますよね。トップ画像は印象的に大きめに表示したいので、スマホ画面用に縦長の画像を使用したいと思います。
追加タブの「アップロード」から、縦用トップの画像を選んでクリックします。
すると、横長のトップ画像と縦長のトップ画像が両方表示された状態になってしまいます。なので、「表示・非表示」の機能をうまく使って、PC画面とタブレットには横長トップのみ、スマホ画面には縦長トップのみが表示されるようにしましょう。
横トップ画像を選択し、左上の表示メニューで「モバイル」のチェックを外します。同じように、縦トップ画像を選択して、「基準」「タブレット」のチェックを外しましょう。
続いて、縦のトップ画像を大きく表示するために、横幅を100%にします。
表示幅をさらに狭くすると、サイト名が２行になってしまいました。これを修正していきます。
フォントサイズを小さくすればよさそうなので、32pxに変更します。
メニューも横にはみ出てしまっているので、ギャップを15にしておさまるようにしましょう。
ヘッダー全体のパディングも、上下18、左右20に調整しておきます。
続いて、「About」の部分が大変なことになっているので、「about全体」のdivを選択して、縦並びにしましょう。
divを横並びにしたものは、スマホ表示にするとひどいことになりがちです。縦並びにして解決しましょう。
少し幅を広げて、タブレット表示にします。タブレットでも横並びだとイマイチなので、縦並びにしておきましょう。
画像が小さく表示されているので、スマホ・タブレットともに「about写真」を選択して、横幅100％にして大きく表示させます。
再びスマホ幅に戻し、「About me」のタイトルのフォントサイズを48pxに変更します。
ちょっと間隔が広いですね。Aboutのsectionを選択して、ギャップを40、パディングの上下を60に変更しましょう。
AboutセクションはこんなかんじでOKでしょうか。続いて、Menuセクションを修正していきます。
Menuのsectionを選択したら、パディングを上下60にしましょう。
続いて、「メニュー全体」のliを選択して、下向き矢印をクリックして縦並びにします。
画像を修正しましょう。「メニュー全体」の中のimgを選択し、横幅を100％にします。さらに角丸の位置がおかしくなっているので、「左上・左下」だったのを「左上・右上」に修正します。
さらに、「説明全体」のdivを選択し、パディングを上下40、左右30に変更しましょう。
コース名が少し大きい気がするので、18pxにします。
コース説明も、２行以上になると行間が詰まってしまいますね。行高を1.5にして、少し間隔を広げて読みやすくします。
コース名とコース説明の間隔が広いので、「説明全体」を選択してギャップを20にします。
ここまでで一度、画面幅を調節して表示を確認してみましょう。
すると、「タブレット」の範囲内で、幅が633px程になると表示が崩れる部分があることがわかりました。
コース一覧は、大きめのタブレットならPCと同じく横並びでよいですが、小さめのタブレットだと縦並びにしてしまったほうが良さそうですね。
なので、ここでブレイクポイントを編集して解決したいと思います。
「ブレイクポイント」とは、「設定を変える基準点になる画面幅」のことです。レスポンシブ設定のメニューから編集できます。
Studioでは、３つあるブレイクポイントにさらに２つ追加でき、全部で５つのブレイクポイントを設定できます。
今回は、「小さめのタブレット画面はモバイル画面と同じデザインでいいや」と思ったので、「モバイル」のブレイクポイントを最大値の「690px」に設定しました。
便宜上「タブレット」「モバイル」と呼んでいるだけで、実際は表示する画面幅で判断しています。なので、「モバイル」で「690px」に設定したことで、690px以下の画面幅ならタブレットでもスマホでも「モバイル」でのデザイン設定で表示されるようになります。
ブレイクポイントを設定できたら、すぐ下の「編集を完了」をクリックします。
これで、画面幅を変更しても大丈夫になったかと思います。続いて、Galleryも修正していきましょう。
２列並びでは画像が小さすぎるので、１列にしたいと思います。デザイン上でリストをダブルクリックし、折り返し矢印をクリックして「↓」の矢印を選択しましょう。
続いて、liの横幅を100％にします。
他のセクション同様、Galleryセクションもギャップとパディングを調節しましょう。ギャップを30、パディングを上下60、左右40にします。
写真同士の間隔も広いので、ulを選択してギャップを20に変更します。
あとはタイトルが大きいので、修正します。「Menu」も修正し忘れていたので、次の「Contact」も一緒にまとめて、フォントサイズを48pxにします。
これでおそらくOKでしょう。続いて、「Contact」の部分を見ていきたいと思います。
まずはsectionのパディングを上下60左右40、ギャップを30に変更します。
Contact部分は広げても縮めても問題なさそうなので、これでOKかなと思ったのですが…
よく見ると、アイコン同士の高さがあっていないですね…！気になるので直します。
このズレは「アイコンそのもの周囲の余白」が異なるために発生したものですね。LINEは余白がなく、Instagramは余白があるのでズレています。
ということで、LINEに余白をつけてみます。LINEのアイコンを選択して上の「ボックス」をクリックし、パディングを上のみ４にします。
ついでに若干、LINEのほうが文字が大きいようなかんじがするので、フォントサイズを18pxにしてみました。
確認のため、スマホで見てみるとなんだか追従してくるヘッダーが大きいですね。
ということで、ヘッダーにデフォルトでついていたパディングを０にします。
さらに、サイト名とメニューの間のギャップを小さくして、ヘッダー全体の幅を狭くしたらOKです。
以上でレスポンシブ設定が完了です！お疲れ様でした。
あと少し、メニュー項目のリンク設定と、公開設定だけ頑張れば、Webページの完成です…！
メニューにリンクを設置してジャンプできるようにする
ページが完成したので、ヘッダーのサイト名とメニューにリンクを設置し、ページ内をジャンプできるように設定します。
一般的に、サイト名（ロゴなど）をクリックすると、トップ画面に戻りますよね。また、メニュー名をクリックして各項目へ飛べるようにすれば、ユーザーさんがほしい情報に一瞬でたどり着けて便利です。
下準備として、まずは各セクションにIDを設定します。これにより、リンクのジャンプ先として、URLではなくIDを指定できます。
Aboutのセクションを選択したら、右メニューを開き、IDのところに「about」と入力しましょう。
Menu、Galleryも同じように設定します。
「Contact」は背景画像がSectionのベースになっていたため、タグが「div」になっていました。なので、タグを「section」にして、その下のIDに「contact」を入力しましょう。
続いて、メニューにリンクを設定します。
メニューの項目になっている「T」をクリックし、右メニューを開いたら、リンクのところをクリックします。するとIDが一覧で表示されるので、各メニュー名と同じIDを選択して設定します。
また、サイト名のテキストが入っているdivを選択し、こちらはリンクで「Home」を設定しましょう。
これで、ページ内のどこにいても、トップ画面や各セクションの頭へいつでもジャンプできるようになりました。
ページの設定と公開
ここまでで、ホームページ自体は完成です！お疲れ様でした。最後にページ公開のための簡単な設定をして、公開します。
左メニューで「ページ」のタブをクリックし、設定のマークをクリックして「サイト設定」を開きます。
上から順に入力していきます。項目の内容がよくわからなければ、「？」にカーソルを合わせると説明が表示されるので、確認しましょう。
すべて入力できたら、右上の「公開」をクリックしましょう。
するとドメイン（ホームページの住所のようなもの）を設定する画面になります。入力して、下のボタンをクリックしましょう。
なお、ドメインはすでに存在するドメインと同じにはできないようになっています。「doggo-photo」と入力してもエラーになるので、ちがうものを入力してくださいね。
まとめ
以上、無料プランかつ簡単な操作のみでホームページを作ってみました。
- 「セクション」でナビゲーションを挿入して編集
- 文字と写真を左右に並べる
- 「リスト化」の機能を活用する
- 複数の写真をきれいに並べる
- 「アイコン」を利用する
- レスポンシブ対応の調節をする
これらの操作を、ページ作成を通して実践しました。
Studioには他にももっといろいろな機能があるうえ、ヘルプページなども充実しているので、「このデザインってどうやるんだろう？」と思ったときにすぐに調べられます。
サルワカでは初歩的なことしか解説していませんが、Studioではもっといろいろな表現が可能です。実践しながら、調べながら、どんどんステップアップしていってくださいね。
