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

【STUDIO】カードデザインを作りながら、ボックスレイアウトに慣れよう

こんにちは! 認定クリエイターの martina. です。

みなさん、もう STUDIO は使ってみましたか?本当に簡単に web サイトが作れるので、ぜひ作ってみてくださいね。プログラミングが苦手な私も、 web サイト制作に活用しています!

さて今回は、サムネイルのようなカードデザインを作りながら、ボックスレイアウト親子関係などのレイヤー構造を説明します。

色々な要素が入ったボックスを並べていくイメージなのですが、実際にやった方が感覚が掴めるので早速やってみましょう!

カードデザインを一瞬で作りたい方面倒くさい人向けの項目を読んでください。 5 秒で作れます!

カードデザインを作ろう!

まず下図のようなカードデザインのレイアウトを作ります!

STUDIO カードデザイン

カードデザインを作成する手順
  1. カードデザインの表示範囲を決定
  2. カードデザインを作成
順番に解説していきます!

カードデザインの表示範囲を決定

STUDIO ボックス

まずボックス(要素を入れる箱)を置いて今回使うカードデザインを表示する場所を決めます。この中にカードデザインを作っていきましょう。

カードデザインを作成

STUDIO カードデザイン

今度はカードになるボックスを置きます。カードデザインは、画像と文章なので、ボックスの中に画像テキストをいれます。

注意
STUDIO ページ 大きくする

前回の続きから作る場合など、ページの大きさが足りないときは、
ページ下をドラッグして大きくしましょう。

ボックスレイアウトについて(飛ばしても大丈夫です!)

STUDIO では、このようにボックスを作ってから中に要素をいれていきます。そして、要素が入ったボックスを並べて web サイト全体を作っていきます。
このような手法をボックスレイアウトといいます。

STUDIO ボックスレイアウト レイヤー

空のボックスを親ボックスとして、その中に子となるボックスや要素、その孫となるボックスや要素をどんどん詰め込むことで、レイヤー構造を作っています。レイヤーは画像編集や動画編集でも良く使われてますよね。

レイヤー構造にすることで、後から見たときわかりやすい点や、コピペして複製しやすい点などのメリットがあります!

STUDIO レイヤーパネル

どういう構造になってるかは左下のレイヤーパネルから確認できます。
レイヤー構造を意識して、親ボックスを作り子の要素を整えていくと後々微調整するときにやりやすくなるので、上級者の方は、はじめから意識して制作してみましょう!

カードデザインを並べて完成!

下図のようにカードデザインを並べたら完成です。

STUDIO カードデザイン

カードデザインを並べる手順
  1. コピーアンドペーストで複製
  2. 並べ方を決める
こちらも順番に解説していきます!

コピーアンドペーストで複製

STUDIO カードデザイン

画像とテキストを設定したらカードデザインが一通りできました。
テキストと画像の編集方法がわからない人は過去の記事をみてくださいね。
【ノーコード】STUDIO でメインビジュアルを作ろう! そうしたら、このデザインを親ボックスに敷き詰めてみます。

STUDIO コピペ

左下のレイヤーパネルを開き、今作ったカードデザインが選択されている状態で ctrl + C でコピーし、 ctrl + V でペーストしてください。いっぱいペーストしましょう!いっぱい増えました!

並べ方を決める

STUDIO 配置

縦にまっすぐ出てしまったら、一番初めに配置した親ボックスの下にある矢印で並べ方を決めましょう。矢印の方向にカードが並べられるので、今回は Z 型の矢印を選択して敷き詰めました。
( GIF では最初間違えて → を押してしまい、右に一列に並んでしまっています。)

STUDIO スクロール

また縦や横に 1 列に整列させたかったり、もっと多くのカードを並べたいときは、親ボックスを選択した状態で、左上のはみ出しスクロールに変えましょう。そうすると親ボックスの範囲で、カードをスクロールで表示できます。

POINT
親ボックスを選択するときは、作業画面上ではなく、レイヤーパネルから選択すると子ボックスや画像など他の要素の押し間違いが減ります!
あとは画像やテキストを自分の好きなように編集しましょう!

STUDIO カードデザイン

全体のカードに同じ編集をする場合は、もう一度編集してからコピペしてくださいね。(画像と文字の間隔や、透過で並べたい場合など)

面倒くさい人向け

STUDIO プリセット

左側のアドパネルを開くと、 Card というところがあるので、気に入ったデザインをクリックかドラッグアンドドロップすれば一瞬で作ることも可能です!

まとめ

今回はボックスレイアウトレイヤー構造になれるため、カードデザインを作ってみました。
コピペでどんどん増やせて、そこから画像やテキストを変えればいいだけなので、とても簡単にかっこいい web サイトが作れますね♩
今後もまだまだ STUDIO の記事は作っていくのでお楽しみに!