【Studio初心者ガイド】リスト機能で作業効率を大幅UPする方法｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

ウェブ制作やデザイン作業では、効率的に作業を進めるための工夫が求められます。

この記事では、Studioのリスト機能を使って効率的にレイアウトを組み立てる方法や、作業時間を短縮するための具体的な活用術を解説します。

リスト機能をマスターして、よりスピーディーで整然とした制作を実現しましょう。

リスト機能とは？

リスト機能を使えば、同じスタイルのレイアウトを複数回繰り返し使用する際に、これをグループ化して効率的に管理できます。

例えば、左側に画像が配置され、右側にタイトルがあるというデザインのボックスを4つ並べたい場合、それぞれを個別に作成する代わりに、リスト機能を活用することで一気に作成することが可能です。

デザインの一貫性を保ちつつ、追加や変更が必要な時にも一括で更新することができ、作業の手間を大幅に削減します。

リスト機能とコンポーネント（シンボル）機能の違い

リスト化は、同じレイアウトを持つが内容が異なる要素（画像やテキストなど）を繰り返す場合に適しています。例えば、プロダクトリストやニュース記事の一覧が該当します。

対照的に、コンポーネント化は、ナビゲーションやボタンなどの共通の要素を一括で変更できるようにする機能です。ページ全体で共通する要素（ヘッダーやフッター、ナビゲーションメニュー）に使用されます。

これらの機能を適切に使い分けることで、ウェブサイトの整合性を保ちつつ、更新作業を効率化することができます。

レスポンシブデザインの対策

リストを使ったデザインは、パソコンだけでなく、スマホでもきちんと見えるようにする必要があります。

パソコンとスマホでは、リストの並び方が変わる場合がありますので、この点も考えてデザインをすることが大切です。

レスポンシブデザインは、デスクトップPC、タブレット、スマートフォンなど、どのデバイスでもウェブサイトがうまく表示されるように調整する技術です。

Studioでデザインをするときは、まず基準（PCサイズ）のデザインを作り、その後にタブレットやモバイルなど画面幅に応じて調整します。

Editor 5.0では、ブレイクポイントの切り替え場所が画面下部に固定されたツールバー（ピンク四角）へ移動しています。

ブレイクポイントを切り替えながら表示を確認し、デバイスごとにレイアウトが崩れないように調整してください。

また、「ブレイクポイントごとのボックスの表示／非表示設定」の操作箇所はレイヤーパネル内にあります。

表示条件（表示／非表示）を変更したいレイヤーをホバーし、右側に表示される目のアイコン（ピンク四角）から設定します。

リストを使ったデザインは、PCとスマホで並び方が変わることがあるため、ブレイクポイントを切り替えて見え方を確認しながら調整することが重要です。

例えば、スマートフォンでは画面が縦長なので、リストのアイテムが縦に並ぶように変更するかもしれません。このようにデバイスごとに最適なデザインを考えることが大切です。

Studioでのリスト機能の設定方法

Studioでは、リストを直感的動作で簡単にデザインすることができます。手順をお話ししていきます。

Studioアカウントを準備

Studioの公式ウェブサイトにアクセスし、アカウントを取得してログインしましょう。

Studioでの操作手順

Studioにログインしたら、「新規プロジェクト」を作成し、デザインエディタを開きます。

1.リスト化したいボックスを作成します。追加パネルから、ボックス／画像／テキスト（ピンク四角）をドラッグ＆ドロップしてスクリーン上に配置します。

配置したボックスを右クリックして「リストを作成」（ピンク四角）をクリックします（ショートカットで行う場合は Mac：⌘ + L / Windows：Ctrl + L）。

すると簡単にリスト化する事ができます。

リストの編集

リスト化したボックスを編集したい時は、スクリーン上で対象のボックス（リスト）を選択し、画面右側の右パネルに表示される編集項目（タブ）から、テキストや画像などの内容（データ）を編集します。

リストのデータは右パネルの［データ］タブ（ピンク四角）で管理でき、必要に応じてスクリーン上で直接編集し、編集後はリスト外をクリックして確定します。

リストの追加

リスト内容（リストアイテム）を増やしたい場合は、スクリーン上でリストを選択します。

そして、右パネルに表示される［データ］タブから、「＋New」ボタン（ピンク四角）を押すとリストアイテムを追加していきます。

リストの削除

リストを減らしたい場合は、スクリーン上でリストを選択し、画面右側の［データ］タブ のゴミ箱ボタン（ピンク四角）を押すと削除できます。

要素の追加

リスト内容に、テキストや画像などの要素を追加したい場合は、画面左側の［追加パネル］（ピンク四角）を開き、追加したい要素をドラッグ＆ドロップして追加します。

追加した要素は全てのリストに反映されます。
※同じ情報が全てに反映されるため、それぞれを変更したい場合は右側パネルの「データ」より追加したプロパティに対応する項目を追加し、紐づける作業が必要です。

リストボックスの並ぶ方向を変える

Studioでは矢印の方向アイコンを使って、ボックスがどの方向に並んでいくか（配列方向）を設定できます。

設定は、スクリーン上の配列方向・配置メニューから行うか、右パネルの［ボックス］タブ内の［方向］（ピンク四角）から行います。

画面幅に応じて折り返し表示させたい場合は、方向アイコンの中から折り返しを選択します。

余白、色、角丸、不透明度などの変更

リスト内の要素の余白、色、角丸、不透明度などを変更したい場合は、対象のボックスを選択し、右パネルのボックスタブ（ピンク四角）で各項目を設定します。

余白は右パネルでマージン／パディング／ギャップとして数値設定できます。

角丸と不透明度、色（背景色）は、右パネルの［ボックス］タブ内の外観メニュー（黄色四角）から設定します。

ボックスの配置

ボックスの配置（整列）は、矢印アイコンの右横にあるアイコン（ピンク四角）で設定します。

または右パネルの［ボックス］タブ内の［配置］セクション（ピンク四角）から行います。

両端揃えと均等配分

両端揃え（stretch）や均等配分（space-between / space-around）は、配置（整列）のメニューから設定します。

均等（space-between）は子要素を両端に寄せて配置し、均等（余白含む）（space-around）は両端に余白を含めて間隔を配分します。

両端揃え（stretch）は要素の高さが親要素の高さに合わせて自動的に伸びる設定で、子要素の高さにばらつきがある場合に利用すると、親要素の高さに応じて子要素の高さが調整されます。

プロパティ（テキスト、画像、URL、ブール値、カラー）の追加と編集

プロパティ（テキスト、画像、URL、ブール値、カラー）の追加・編集は、リスト選択中に右パネルの［データ］タブに表示されるプロパティ管理表（ピンク四角）で行います。

テキスト

テキストボックスやリッチテキストボックスに紐付けて利用します。

画像

アップロード画像やフリー画像を設定でき、画像ボックスに紐付けて利用します。

URL

プロジェクト内のページや外部サイトへのリンクを設定できます。

ブール値

オン／オフ（true / false）を表します。

カラー

色（カラーコード）を登録し、ボックスの塗りや文字色として利用できます。

プロパティの紐づけ

右パネルの［データ］タブ内のプロパティ管理表で管理しているデータは、リストアイテム内のボックスに紐付けることでデザインに反映されます。

コネクタ（ピンク四角）は、リストアイテムをダブルクリックしてから、もう一度クリックすると出現します。

まとめ

Studioのリスト機能を使いこなすことで、ウェブデザインの効率と品質を向上させることができます。リスト化による一貫性のある管理は、デザイン作業をスムーズにし、変更も一括で簡単に行えます。

また、レスポンシブデザインの対策として、デバイスごとの最適化をチェックすることが重要です。Studioを活用し、デザインの可能性を広げ、より魅力的なウェブサイトを創造していきましょう。

ウェブ制作やデザイン作業では、効率的に作業を進めるための工夫が求められます。