Figmaの「auto layout」を上手く活用し、制作時間を短縮する

ホームページ制作

2025-06-13

Shere:

矢崎　祐

デザインツールFigmaを用いて、Web制作におけるワイヤーフレームやデザインの作成を行う際、「auto layout」という機能を使用する事があるかと思います。

この「auto layout」を上手く活用して制作時間を短縮する小ワザを共有していきたいと思います。

Webサイトのデザインを作成中、仮にクライアント様から写真のブロック同士の位置を変えて欲しいなどと依頼があった際に、一つ一つの要素を移動するには大変な作業が予想されるかと思います。

この場合、まず、それぞれの要素をGroup化します。

グループ化は右クリックから「Group selection」もしくは、

要素をドラッグしてcommand＋GでGroup化できます。

この二つの要素を選択してauto layoutをかけます。

あとはグループ同士を画像のように入れ替えれば

簡単に位置の変更が可能になります。

わざわざ所定の位置に一つ一つ移動する必要がない上に、位置ずれの心配もなく要素を入れ替える事ができます。

これを応用することによって制作がある程度出来上がった段階での修正でもスムーズに対応が可能となります。

他にも、複数の要素を移動したい場合は、以下のようにグループ化すれば、お客様が仮にお問い合わせフォームの順番をあのようにこのようにしたいと仰ったとしても数秒で対応可能です。

作業する量によっては、各セクション、各グループ毎に細かく「auto layout」をかけてデザインしていく方が、後々の変更依頼がスムーズに行えることかと思います。

他にも活用方法はあるかと思いますが、あくまでも私が今まで作業を行った上でこの方法が一番しっくりくる、且つ作業効率にもつながると思い、今回ご紹介させていただきました。

他にもfigmaに関する情報を発信していきたいと思います。

少しでも作業が効率良く捗れれば幸いでございます。

この記事を書いた人

営業/ディレクター

矢崎　祐

UIデザイン、Webデザインをメインに制作。ノーコードでの実装も可能。元シェフ飲食店歴10年。趣味はスポーツ（する方）サッカー、フットサル、ゴルフなど

記事カテゴリ

人気記事ランキング