Sponsored Link
前回は、デザインとアートの違い、またウェブデザインですべきこと・流れの解説を行いましたね。
その中でウェブデザインの工程の一部にページデザイン・修正作業という工程があることを解説しました。
今後の授業でみなさんが学んでいく最も重要な内容は「ページデザイン」の作り方です。
ページデザインの作り方はFigmaを使っていきますので、Figmaを使用可能な状態にしておきましょう。
今回はFigmaのアカウントの作成や、各画面の紹介を行い、また授業の課題提出の流れを確認していきたいと思います。
この記事の目次
Figmaのアカウント開設
Figmaを使用するにはアカウントが必要になります。
早速アカウントの開設を行いましょう。
Figmaの各画面の解説
ホーム画面「ファイルブラウザ」
まずはホーム画面である「ファイルブラウザ」の解説を行います。
チーム・プロジェクト・デザインファイル
次は少し仕組みや構造・概念的な部分の、チーム・プロジェクト・デザインファイルの階層構造を解説します。
このセクションの、特にドラフトとチームのデザインファイルの違いを把握しておかないと、今回の演習課題が理解できません。
しっかりと理解しておいてください。
Figmaの課題提出の流れ
Figmaで行った課題をフォームに提出する流れを確認しましょう。
演習課題
ドラフトに複製課題
今回は登録したばかりのFigmaに慣れるため、「Figmaで行った課題をフォームに提出する流れ」で学んだファイルのドラフトへの複製と、自分のチームのプロジェクトへの移動を演習課題にします。
手順は以下。
- 以下の課題ページ「演習03 ドラフトに複製課題」を開く。
- ドラフトに複製する。
参考:課題ページのリンクを開き、自分のプロジェクトに複製する。 - ファイル名を「学籍番号 ドラフトに複製課題」と名称変更し、チームのプロジェクトに移動する。
参考:課題ファイル名の名称変更を行ない、ファイルを移動する。 - 課題ファイルの「この文字列を書き換えてね」の文字列を「学籍番号 氏名」に書き換えてください。
※編集するには、ダブルクリック > 書き換え > Ctrl + Enterで編集完了 - 記事を参考に、共有ボタンからリンクをコピーし、課題提出フォームで提出する。
以上です。
今回の課題ページは以下です。
課題ページ:演習03 ドラフトに複製課題
今回の課題が完了したら、以下のフォームに共有コピーしたリンクを貼り付けて送信してください。
今回の課題の提出期限も通常通り、次回授業開始前までとします。
専用デザインファイル
ウェブデザイン演習の授業で、FigmaによるWebデザイン制作体験を行うため、
オリジナルで専用デザインファイル「Webページデザイン演習」を準備しました。
今回皆さんがWebデザイン制作体験を行うページの完成図は以下です。
こちらのデザインファイルのWebデザイン制作体験を行うために、ドラフトに複製してチームのプロジェクトに移動しましょう。
移動しておくことで、複数人での作業や確認に使用することができるようになります。
手順は以下。
- 以下の課題ページ「Webページデザイン演習」を開く。
- ドラフトに複製する。
参考:課題ページのリンクを開き、自分のプロジェクトに複製する。 - ファイル名を「学籍番号 Webページデザイン演習」と名称変更し、チームのプロジェクトに移動する。
参考:課題ファイル名の名称変更を行ない、ファイルを移動する。 - ページ「ページデザイン」を開いておく。
以上です。
課題ページ:Webページデザイン演習
こちらの専用デザインファイルを使って、今後のウェブページデザイン実践を進めますので、準備不足の場合は授業参加自体が不可能です。
必ずドラフトに複製してチームのプロジェクトに移動しておいてください。
本日のまとめ
いかがでしたか?PhotoshopやIllustratorより簡単にデザイン制作を行えるFigmaですが、
次回からは演習用のデータでデザインの練習を行い、学んだ技術をオリジナルWebデザインの制作に活かしましょう。
