Sponsored Link
前回はデザインの中心に据えるルールである「デザインルール」を決める重要性について解説しました。
またデザインの準備のため、デザインファイルへの色・テキストのスタイルを登録しました。
いよいよ今回はWebページデザイン演習を進めていきたいと思います。
Webページデザイン演習〜準備編:アートボード&ガイド作成～
次に「Webページデザイン演習」の「ページデザイン」ページに新規にアートボードを作りましょう。
今回も下記のリンクからFigmaを開き、それぞれのデザインファイル「Webページデザイン演習」を開き、
ページパネルで「ページデザイン」を表示しておきましょう。
アートボードを作る
ではアートボードの作成方法の解説です。
以下の記事を参考に新規でアートボードを作成し、サイズを「W(横幅):1440」「H(高さ):2045」に指定しましょう。
また、作ったアートボードの名前をレイヤーパネルで「トップページ」に変更しておきましょう。
アートボードにガイドを引く
ではアートボードの作成方法の解説です。
以下の記事を参考に定規を表示(Shift + R)してガイドを引いてみましょう。
今回は「Y方向(上下):0px・800px」の2つ、「X方向(左右):0px・1440px」の2つの座標にガイドを引いてください。
なおガイドはこちらだけではなく、ページデザイン制作中も随時追加していきますので、
ガイドの引き方は確実に理解しておき、指示があったら追加できるようにしておきましょう。
なお、Webページデザイン作業は別途作成した作成手順のページを確認しながら進めていきます。
作業の性質上、わからないまま進めてしまうと、あとから取り戻すのが極めて困難ですので、
不明点は必ず都度挙手してください。
学生の皆さんは気にするかもしれませんが、私は授業がストップしても全く問題ありません。
Webページデザイン演習〜header・mainimg作成編〜
完成イメージの再確認
以前一度「専用デザインファイルの確認」を行いましたが、時間がたったので再度確認してみましょう。
今回皆さんがWebデザイン制作体験を行うページの完成図は以下です。
非常に基本的な構成のデザインですが、Figmaによるデザイン作業に最低限必要なスキルはほとんど入っています。
Webページデザイン作業開始
ではページデザイン作業を始めるため、Figmaのチームのプロジェクトから、
自分の「学籍番号 Webページデザイン演習」ファイルを開いてください。
header作成編
ではまずはheaderの作成手順を見ながら作業を行いましょう。
以下のページをCtrl + クリックください。
mainimg作成編
次にmainimgの作成手順を見ながら作業を行いましょう。
以下のページをCtrl + クリックください。
本日のまとめ
いかがでしたか?実はFigmaでのデザイン作業は私もさほど経験がありません。
しかしながらPhotoshopやIllustratorに比べると驚くほど簡単で、すぐにページが出来上がってしまいました。
次回は続きで「service」のページデザインを行なっていきましょう。
