Sponsored Link
前回はウェブページデザイン制作体験に使う準備のため、デザインファイルへの色・テキストのスタイルを登録しました。
今回はWebページデザインを進めるにあたり、デザインの中心に据えるルールである「デザインルール」を決める重要性について解説します。
この記事の目次
デザインルール
デザインルールについて
今回はまず「デザインルールの役割」の解説を行います、下記の記事をCtrl + クリックください。
上記の記事から、デザインルールを決めることで、デザインの一貫性を保つなど様々な役割があるということでした。
デザインルールを管理するテンプレート
今回、デザインルールを決めるときに使えそうなテンプレートを準備してきました。
このデザインルールテンプレートをデザインファイル内の別ページにでも作っておけば、
前回演習で行ったような色スタイルとテキストスタイルの登録も管理しやすいですね。
(実は授業と演習のボリュームの関係で、どうしても別にせざるを得ませんでした。)
こちらの使い方、および演習課題は後日レクチャーします。
時間がなく項目が少ないですが、後日UIデザインルールなども追加していきたいと考えています。
今回はざっと確認してみましょう。
本日のまとめ
今回はデザインルールの重要性を解説しました。
以前、デザインは「設計・問題解決」であると伝えましたが、デザインルールはまさにそれを達成するためのものです。
家を作る場合、建て始めてから仕様を決めるより、建てる前にしっかりプランを立てたほうが間違いがないですよね。
準備編 ～アートボード&ガイド作成～
次に「Webページデザイン演習」の「ページデザイン」ページに新規にアートボードを作りましょう。
今回も下記のリンクからFigmaを開き、それぞれのデザインファイル「Webページデザイン演習」を開き、
ページパネルで「ページデザイン」を表示しておきましょう。
アートボードを作る
ではアートボードの作成方法の解説です。
以下の記事を参考に新規でアートボードを作成し、サイズを「W(横幅):1440」「H(高さ):2045」に指定しましょう。
また、作ったアートボードの名前をレイヤーパネルで「トップページ」に変更しておきましょう。
アートボードにガイドを引く
ではアートボードの作成方法の解説です。
以下の記事を参考に定規を表示(Shift + R)してガイドを引いてみましょう。
今回は「上下:0px・800px」「左右:0px・1440px」の座標にガイドを引いてください。
なおガイドはこちらだけではなく、ページデザイン制作中も随時追加していきますので、
ガイドの引き方は確実に理解しておき、指示があったら追加できるようにしておきましょう。
