Sponsored Link
前回は、編集画面のインターフェイスの解説を行いました。
今回はWebページデザインを進めるにあたり、デザインの中心に据えるルールである「デザインルール」を決める重要性について解説します。
またウェブページデザイン制作体験に使う準備のため、デザインファイルへの配色やフォント関連指定のスタイルを登録していきましょう。
※複製および移動を行っていない場合は授業に参加できず、加点対象外になりますので注意してください。
デザインルール
デザインルールについて
今回はまず「デザインルールの役割」の解説を行います、下記の記事をCtrl + クリックください。
上記の記事から、デザインルールを決めることで、デザインの一貫性を保つなど様々な役割があるということでした。
デザインルールを管理するテンプレート
今回、デザインルールを決めるときに使えそうなテンプレートを準備してきました。
このデザインルールテンプレートをデザインファイル内の別ページにでも作っておけば、
前回演習で行ったような色スタイルとテキストスタイルの登録も管理しやすいですね。
(実は授業と演習のボリュームの関係で、どうしても別にせざるを得ませんでした。)
こちらの使い方、および演習課題は後日レクチャーします。
時間がなく項目が少ないですが、後日UIデザインルールなども追加していきたいと考えています。
今回はざっと確認してみましょう。
準備編 ～スタイル登録～
では、ウェブページデザインで使用する配色を色スタイル、またフォント関連の指定をテキストスタイルとして登録しましょう。
まずは色スタイルおよびテキストスタイルの、それぞれの登録の方法を解説します。
配色を色スタイルへ登録する
配色を色スタイルとしてFigma上であらかじめ設定しておく方法を紹介します。
色スタイルとは、PhotoshopやIllustratorでいうスウォッチパネルのようなものです。
それでは以下の記事をCtrl + クリックください。
フォント関連指定をテキストスタイルへ登録する
次にフォント関連の指定をテキストスタイルとしてFigma上であらかじめ設定しておく方法を紹介します。
PhotoshopやIllustratorでは「書体・太さ・大きさ・行送り」などの項目を設定していましたが、
Figmaではそれらは、あらかじめ設定しておいて選択するだけという状態にすることができます。
それでは以下の記事をCtrl + クリックください。
演習課題
では下記のリンクからFigmaを開き、前回手元に複製した「Webページデザイン演習」ファイルを開きましょう。
色スタイル・テキストスタイル登録課題
今回は先ほど学んだ色スタイル登録とテキストスタイル登録を演習課題にします。
手順は以下。
- Figmaでデザインファイル「Webページデザイン演習」を開く。
- ページパネルで「スタイル登録」を表示する。
- アートボード「色スタイル登録」の「見本」を参考に「課題」の手順に従って色スタイル登録を行う。
- アートボード「テキストスタイル登録」の「見本」を参考に「課題」の手順に従ってテキストスタイル登録を行う。
- 記事を参考に、共有ボタンからリンクをコピーし、課題提出フォームで提出する。
以上です。
色スタイル登録およびテキストスタイル登録が完了したら、
以下のフォームに共有コピーしたリンクを貼り付けて送信してください。
今回の課題の提出期限も通常通り、次回授業開始前までとします。
本日のまとめ
今回はデザインルールの重要性を解説しました。
以前、デザインは「設計・問題解決」であると伝えましたが、デザインルールはまさにそれを達成するためのものです。
家を作る場合、建て始めてから仕様を決めるより、建てる前にしっかりプランを立てたほうが間違いがないですよね。
またデザインルールを目に見える形にするために、色スタイルとテキストスタイルの登録を行いましたね。
いずれも軽く見てはいけない重要な工程です。しっかりと覚えておいてください。
