機械学習・ディープラーニングがゼロから学べる大人気『脱ブラ』が無料に!

【ノーコード】STUDIO でメインビジュアルを作ろう!

こんにちは!インターン生の martina. です!
前回の STUDIO の記事読んでいただけたでしょうか?
【ノーコード】STUDIO で Web ページを爆速で公開する方法を解説! おしゃれな Web サイトを数分で公開できるのでぜひ読んでくださいね!
さて今回は、新規ページのメインビジュアル部分をサクッと作りながら、画像とテキストの扱い方について解説します!

画像の配置

新規の空白のページから作っていきましょう。

STUDIO 画像

  1. 左側のアドパネルに画像のアイコンがあるので、置きたい場所にドラックアンドドロップ
  2. 画像の端を掴んで大きさを整える
  3. ドロップした空の画像をダブルクリック
  4. 左側のアドパネルから画像選択
STUDIO 画像 アップロード

また、アップロードタブからアップロードを選択して、自分で用意した画像をアップロードすることもできます。

POINT
画像のトリミングはできないので、アップロードする場合は表示したい場所を中心に来るように編集してアップロードするのが良いです。

画像編集

STUDIO 画像 編集

画像端にある丸いアイコンをドラッグすることで画像の端を丸めることができます。
このときボックスタブを選択していないと丸いアイコンが出てきません。

STUDIO 画像 編集

ボックスタブでは画像の配置をより詳細に調整できます。
マージンやパディング、画像の縦横の大きさなどを細かく調整したり、先程の角丸もこちらで数値を見ながら調整できます。大きさなどは、とりあえず直感的に作ってみて、後からこちらで微調整すると使いやすいです。
画像タブでは、明るさやコントラスト、ぼかしなどを調整して画像をかっこよく編集できます。

POINT
メインビジュアルをページいっぱいに表示したいときは、ボックスタブの縦幅の右側(上記画像で px となっているところ)をクリックし、vh に変えると全画面表示になります。

テキストの配置

次にテキストを置きましょう。
STUDIO では置く場所が端か真ん中に要素を置けるのですが、少し左寄りとか少し上に置きたいときは少しコツが入ります。

STUDIO ボックス テキスト

  1. ボックスをドラッグアンドドロップ
  2. その中にテキストをドラッグアンドドロップ
  3. ボックスを選択してフォントを置きたい方に寄せる
  4. STUDIO 配置

  5. ボックスの端をドラッグして大きさを調整
これでテキストが好きなところに置けていますね。
STUDIO ではこのようなボックスレイアウトというデザイン方法を採用しています。慣れるまで大変ですが一緒に頑張りましょう!

STUDIO ボックス 透過

そして、ボックスタブの塗りを透過させれば、テキストが綺麗に表示されます。

STUDIO 選択

このとき、ちゃんとボックスが選択されているかに注意してください。(メニュータブにボックスしかない状態)

STUDIO テキスト 編集

先ほどの画像と同じようにテキストタブから、サイズやフォント、色など細かく調整できます。

STUDIO テキスト 追加

また、異なる大きさやフォントのテキストを、今作ったボックスの中の配置したいときは、左側のアドパネルからテキストをドラッグアンドドロップしてください。

まとめ

STUDIO での Web ページ制作はこのような作業を積み重ねて作っていく流れになります。
よくわからない人はできていれば大丈夫です!徐々に慣れていきましょう!