Sponsored Link
前回は、配布した専用デザインファイル「Webページデザイン演習」を使い、編集画面のインターフェイスの解説を行いました。
今回はウェブページデザイン制作体験に使う準備のため、デザインファイルへの配色やフォント関連指定のスタイルを登録していきましょう。
※複製および移動を行っていない場合は授業に参加できず、加点対象外になりますので注意してください。
この記事の目次
準備編 ～スタイル登録～
まずはウェブページデザインで使用する配色を色スタイル、またフォント関連の指定をテキストスタイルとして登録しましょう。
下記のリンクからFigmaを開き、前回手元に複製した「Webページデザイン演習」ファイルを開きましょう。
まずはそれぞれの登録の方法を解説します。
配色を色スタイルへ登録する
配色を色スタイルとしてFigma上であらかじめ設定しておく方法を紹介します。
色スタイルとは、PhotoshopやIllustratorでいうスウォッチパネルのようなものです。
それでは以下の記事をCtrl + クリックください。
フォント関連指定をテキストスタイルへ登録する
次にフォント関連の指定をテキストスタイルとしてFigma上であらかじめ設定しておく方法を紹介します。
PhotoshopやIllustratorでは「書体・太さ・大きさ・行送り」などの項目を設定していましたが、
Figmaではそれらは、あらかじめ設定しておいて選択するだけという状態にすることができます。
それでは以下の記事をCtrl + クリックください。
演習課題
ではデザインファイルで開くページは都度指示します。
色スタイル・テキストスタイル登録課題
今回は先ほど学んだ色スタイル登録とテキストスタイル登録を演習課題にします。
手順は以下。
- Figmaでデザインファイル「Webページデザイン演習」を開く。
- ページパネルで「スタイル登録」を表示する。
- アートボード「色スタイル登録」の「見本」を参考に「課題」の手順に従って色スタイル登録を行う。
- アートボード「テキストスタイル登録」の「見本」を参考に「課題」の手順に従ってテキストスタイル登録を行う。
- 記事を参考に、共有ボタンからリンクをコピーし、課題提出フォームで提出する。
以上です。
色スタイル登録およびテキストスタイル登録が完了したら、
以下のフォームに共有コピーしたリンクを貼り付けて送信してください。
今回の課題の提出期限も通常通り、次回授業開始前までとします。
Webサイトにおけるデザイン
以前、デザインとアートの違いやウェブデザインでするべきこと・流れの解説を行いました。
Webデザインは「情報を整理して伝える」ことを、最も重要な役割や目的としていますが、
今回はWebサイトにおけるデザインの役割や目的について掘り下げたいと思います。
以下の記事をCtrl + クリックください。
本日のまとめ
今回はFigmaを使用する時にあらかじめ作っておきたい色スタイルとテキストスタイルの登録について解説しました。
ここで登録を行ったような配色やフォント関連指定などは、一般的にページデザイン制作に工程が進んでから行う場合もありますが、
以前「ウェブデザイン?ウェブ”ページ”デザイン?するべきこと・流れ」紹介した、「STEP02」 プランニングで決めることができれば、
その後のチーム単位でのワークフローでメンバーの細かい認識を合わせることができ、結果的にクオリティアップにつながります。
軽く見てはいけない重要な工程です。
しっかりと覚えておいてください。
