WEB制作におけるFigmaの操作方法｜②Figmaで作るWEBデザインカンプの制作ポイントの振り返り

学んだこと

『実務通用するデザインとデータ作成のポイント』

アートボードとコンテンツ幅

・モニターシェア1位のサイズは1920px

　　1920pxいっぱいにデザインすると小さい画面でははみ出して表示されてしまう

　　日本の大手企業サイトのコンテンツ幅：およそ950〜1200pxが一般的

　　→コンテンツ幅が1200pxの場合、アートボード幅は1440pxがちょうど良い

　・スマホ版は、アートボード390px前後が標準

ガイドラインとグリッドシステム

・Figma上での操作：メニュー→表示 →レイアウトグリッドにチェック

→グリッドに沿って配置すれば整った構成に

　　メニュー→表示→ピクセルグリッドをオンにすると、ズレを視覚的に

　　確認できて精度UP

フォント設定

・Webで使えるフォントの種類

①端末に標準インストールされているフォント

②Adobe Fonts

③Google Fonts

④セルフホスティング

　　・Figmaでのフォントスタイル管理

　　→「ベースフォント：16px」など、プロジェクトごとにスタイル登録しておくと

　　一括管理が可能

余白（マージン・パディング）

・コンテンツ間・テキスト間の余白は統一感が命

　　・余白の上下はできるだけ偶数で、キリの良い数字にする。

　　　（例：40px、60pxなど）

　　・各セクションの余白ルールを決めておくと、全体が整って見える

画像の比率（アスペクト比）

・デザインに使う画像は、縦横比を意識して統一。

　　・黄金比（1:1.618）や白銀比（1:1.414）なども構図の参考に。

　　・写真やモニターサイズに多い比率（16:9、4:3など）も意識して選ぶと◎

　　▼Figmaプラグイン「Aspect Ratio」

　　→選択レイヤーの比率を即表示したり

　　　任意の比率に合わせてリサイズできる便利ツール

レスポンシブ対応

・Webサイトはユーザーによって見る環境がバラバラ

→どんな画面幅でも崩れないレイアウトに設計する

　　・よくある誤解：「スマホ版は縮小すればOK」→それは間違い

　　・スマホデザインの基本ルール

　　①FVは「16:9」くらいがバランスが良い

　　②横並びは縦並びに変更

　　③スマホ用にフォントサイズを調整（例：14〜16px）

　　④PC版と全く違うデザインにしない（構成を変えるだけ）

気づき・感想

次にやること