【STUDIO初心者ガイド】リスト機能で作業効率を大幅UPする方法

リスト機能とは？

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

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

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

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

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

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

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

リスト機能の注意点

STUDIOのリスト機能を使って一度リストにしたものは、後でリスト化を解除するとができませんので、リストにする前に慎重に検討します。

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

リストを使ったデザインは、パソコンだけでなく、スマホでもきちんと見えるようにする必要があります。パソコンとスマホでは、リストの並び方が変わる場合がありますので、この点も考えてデザインをすることが大切です。

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

STUDIOでデザインをするときは、まず基準（PCサイズ）のデザインを作ります。その後、画面のサイズが小さいタブレットやモバイル用にデザインを調整します。この時、エディタ上部ピンク四角の部分を使ってブレイクポイントを設定できるようになっていますので、様々な見え方を確認しながら作業していただく事ができます。

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

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

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

STUDIOアカウントを準備

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

STUDIOでの操作手順

STUDIOにログインしたら、「新規プロジェクト」を作成します。

1.まずリスト化したいボックスを作成します。今回は、デザインパネルの「追加」から、ボックスとイメージとテキストをドラッグ＆ドロップして、このようなボックスをつくりました。

2.出来上がったボックスを右クリックして、ピンク四角の「リスト化」をクリックします。

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

リストの編集

リスト化したボックスを編集したい時は、ボックスをクリックして、ピンク四角部分のボタンを押すと、黄色四角部分に編集パネルが現れますので、ここでテキストや色、画像、を変更する事ができます。

リストの追加

リスト内容を増やしたい場合は、ピンク四角の「＋New」ボタンを押すと追加していけます。

リストの削除

リストを減らしたい場合は、ピンク四角のゴミ箱ボタンを押すと削除できます。

要素の追加

リスト内容に、テキストや画像などの要素を追加したい場合は、ボックスパネルの「追加」からドラッグ＆ドロップして追加します。追加した要素は全てのリストに反映されます。

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

STUDIOでは矢印ツールを使って、ボックスがどの方向に並んでいくかを設定できます。矢印ツールは、ボックスをダブルクリックして、上部に出た矢印マークにホバーすれば出現します。今回は画面幅に応じて折り返し表示させたいので、ピンク四角部分の折り返し矢印を選択します。

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

リストのひとつをダブルクリックし、更にダブルクリックして選択状態にしてから、ピンク四角部分のスタイルバーの内容を設定すれば、余白、色、角丸、不透明度などの変更ができます。

ボックスの配置

ピンク四角のアイコンを使ったメニューでの配置は、アイコンを選択し、その位置を設定します。水平方向には左端、中央、右端の位置を選べ、垂直方向には上、中央、下の位置から選択することができます。これはボックスをダブルクリックして上部に現れた配置のアイコンをホバーすると出現します。

両端揃えと均等配分

配置のアイコンの折りたたまれているメニューを開くと、両端揃えと均等配分が設定できます。

両端揃え

両端揃え（ストレッチ）とは、ある要素の高さが親の要素の高さに合わせて自動的に伸びる設定のことです。これにより、要素が親の高さいっぱいにまで広がります。子要素の縦幅を「auto」にして設定してください。

均等配分

均等配分とは、親要素の中で子要素を均等に配置する方法です。この方法には二つのタイプがあります。一つ目は「space-between」で、これは子要素の最初のものを親要素の端に、最後のものを反対側の端に配置し、その間の子要素は均等に間隔を空けて配置します。

二つ目は「space-around」で、こちらは各子要素の周りに均等な余白を与えて配置します。これにより、すべての子要素が親要素内で均等な見た目になります。

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

レイヤーパネルを開き、ピンク四角をクリックすると、テキスト、画像、URL、ブール値、カラーの編集を追加でき、編集する事ができます。

テキスト

文字を追加できます。

画像

画像を登録できます。

URL

外部サイトのURLや、内部リンクを設定できます。

ブール値

オン（on）/オフ（off）を切り替える事ができます。

カラー

RGB、HEX、HSLの値で色を変更できます。

プロパティの紐づけ

プロパティと紐づけたい対象をダブルクリックして、更にダブルクリックすると、レイヤーパネルが開きます。ピンク四角のプロパティ横の青い点と、紐づけたい対象を結べば完了です。

まとめ

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

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