FigmaでWebサイトのUIをデザインする知識とテクニックをしっかり学べる解説書 -作って学ぶFigma入門
Post on:2025年1月31日
sponsors
※本ページは、アフィリエイト広告を利用しています。
WebサイトのUIをデザインするときにもっとも使用されているツールと言えば、ここ2,3年で完全に一強となったFigmaです。これからもFigma AIやUI3などの新機能がベータ版で公開されており、さらに加速する勢いです。
そんなFigmaの使い方を基本からしっかり学びたい人に、WebサイトやスマホアプリのUIをデザインする手順を学びたい人に、実務に即したFigmaの使い方やUIデザインのテクニックを学べる解説書を紹介します。
解説に使用されているUIデザインも洗練されており、心地よく勉強できます。
本書は昨日発売されたばかり！
Figmaは2024年のアップデートで大きく変わり、本書は2025年1月時点の最新版のUIに対応しています。オートレイアウト，コンポーネント，スタイル，バリアブルといったFigmaの魅力とも言える機能をはじめ、最近のWebサイトで見かけるUIをデザインするテクニックをしっかり学べます。
Kindle版も同時発売されています！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書は7章構成で、Figmaの基礎知識は第1章だけの必要最低限に、あとはFigmaの使い方をたっぷり学べます。Figmaはブラウザベースで動作するWebアプリで、WindowsとmacOS用のアプリとしても利用できます。無料プランと有料プランがあり、無料プランでもほとんどの機能が利用できます。
詳しくは、Figma公式のプランと料金をご覧ください。
第2章から早くもFigmaを実際に使用しながら、その使い方を学びます。まずは、基本的な操作をスマホ用のWebサイトを作りながら学びます。
説明はかなりていねいで、分かりやすいと思います。操作の手順はステップごとにテキストと図で解説されており、操作の順番ごとにナンバリングもされています。また、TipsやNotesなどのさらなる情報もあり、初心者がつまづきやすいポイントや上達するためのテクニックもよく分かります。
第3章では、Figmaの便利な機能としてオートレイアウトとコンポーネントの基本を学びます。
オートレイアウトとは簡単に説明すると、複数のオブジェクトを水平・垂直方向に整列させる機能です。オブジェクト同士の間隔や余白を一貫させることも簡単で、美しいレイアウトを作成できます。
コンポーネントとは繰り返し使用するオブジェクトをコンポーネントに変換して、インスタンスを作成して何度も利用できるようにする機能です。たとえば、ヘッダをサイトの複数のページで共通して使用したり、ボタンをコンポーネントにすれば複数のページで同じデザインのボタンを使用できます。もちろん、個々の画像やテキストは変更可能です。
第4章はオートレイアウトの折り返しバリアント、インタラクションなどの応用操作を学べます。カードのデザインからスタイルとバリアブルを作成し、オートレイアウトでグリッド状に配置します。スタイルでは1つのカラー設定のみ登録できますが、バリアブルでは複数のカラーを登録できるので、必要に応じてカラー設定を簡単に切り替えられます。たとえば、ライトモードとダークモードのUIでバリアブルを使用すると、複数の色をまとめて変更できます。
第5章では、メニューリストの表示やカルーセルなど、最近のWebサイトでよく見かけるUIを作成します。ハンバーガーメニューのアイコンをタップするとオーバーレイで表示されるメニューリストのインタラクションなどもFigmaなら簡単に作成できます。
第6章はレスポンシブ、スマホとデスクトップ用のUIを作成します。Figmaならそれぞれ用のデザインも簡単です。
レスポンシブでよく使用する機能は、プロパティです。たとえば、デスクトップでは必要のないハンバーガーのアイコンはプロパティを使用して、デスクトップ時は非表示します。
最後の第7章は、インタラクティブなUIパーツを作成します。
巻末には、Figmaのショートカット一覧がまとめられているので、よく使用する機能は覚えておきたいですね。
作って学ぶFigma入門の目次
作って学ぶFigma入門の目次
作って学ぶFigma入門の目次
Figmaの解説書はたくさん発売されていますが、必要なときに最新のものをお勧めします。Figmaは絶えず進化しつ続けるツールなので、解説書を手に取ってみようと思ったときが、一番のタイミングだと思います。本書はまさに、最初の一冊にぴったりな解説書です。
献本の御礼
最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
