ウェブデザインB 第15回

いよいよ今回でウェブデザインBは最終回、最後の演習になります。
みなさんよく頑張りました。

前回の振り返り

前回は演習Web01のトレースを途中まで行いましたが、使用したPhotoshopスキルは今まで行ったことの復習ばかりでした。
言い換えれば、使用頻度の高いスキルはひと握りであり、ほとんどの表現は実現可能であるということです。

動画のPart.2の「TOPICS」の画像差し替えまでで終わっていたので、
「TOPICS」の残りと「INSTAGRAM」「footer」のトレースを行い、完成させましょう。
編集中のファイルは間違いがなければ「学籍番号_traceWeb01.psd」のはずです。

まずPhotoshopを開く前に使用するフォントのインストールを行っておきましょう。
サンプルファイル内のTrue TypeフォントファイルをドラッグやShiftクリックで全て選び、
「右クリック > インストール」でインストールしておいてください。

演習Web01 デザイントレース「デザイン会社のWebサイト」 その3

トレース・模写の条件(再掲)

ではトレース作業を行いましょう。その際の条件は以下。

1. ナビゲーションメニューの「私たちについて」の「私たち」を自分の氏名に変更する。

以上です。
今回はそのままYoutubeを開いてしまいましょう。
Part.2の07:01～です。

課題の提出

ではトレースを行った「デザイン会社のWebサイト」を提出しましょう。
課題の提出形式はjpg以外は受け付けられないようになっていますので、必ずjpgに書き出して提出してください。

手順は以下。

1. 上部メニューから❶「ファイル」→❷「書き出し」→❸「Web用に保存(従来)」をクリックする。
2. 「Web用に保存」ポップアップの右側の「名前」のプルダウンから「JPEG高」を選択し、下の保存ボタンをクリックする。
3. 「Web用に保存」ウィンドウがでてくるので、左側のフォルダショートカットから保存先のフォルダを選択し、
   ファイル名に「学籍番号_trace_web01」を入力、最後に「保存」ボタンをクリックすると書き出しが完了する。
   ※ファイル名が上記と違うものは課題点の加点対象外です。

では、以下のフォームの必要項目に記入を行い、送信を行ってください。

演習Web01 デザイン会社のWebサイト 課題提出フォーム

なお、今回の演習課題の提出期限は補講期間最終日の23:59までとします。

最終課題の提出が終わったら

動画をメインにして行った授業は時間が読めない場合もあり、
一人一人にレクチャーしきれなかった部分があります。

そこで最終課題「デザイン会社のWebサイト」の提出が終わったら、
授業の残り時間は、以下のいずれかの項目に対応する流れにします。

1. 授業内の演習で未提出・未完了の課題(各自聞きに来てください)を提出する。
2. 課題提出はできているが、不明点があるトレースに関して質問する。
3. 授業内で課題にならなかった演習に挑戦する。

授業で行った全トレース

まずは上記❶❷のために、以下に演習記事と提出フォームのリンクを載せておきます。
現時点の提出状況を確認しながら振り返りましょう。

• トレース演習基本編「ほしのふるまち」/ 演習00 ほしのふるまち課題提出フォーム
• 演習01 デザイントレース「写真展のチラシ」/ 演習01 写真展のチラシ課題提出フォーム
• 演習02 デザイントレース「不動産会社の名刺」/ 演習02 不動産会社の名刺課題提出フォーム
• 演習03 デザイントレース「キャンペーンのDM」/ 演習03 キャンペーンのDM課題提出フォーム
• 演習05 デザイントレース「ドーナッツ屋のポスター」 / 演習05 ドーナッツ屋のポスター課題提出フォーム
• 演習Web02 オリジナルデザイントレース「情ビInstagramバナー」/ 演習Web02 情ビInstagramバナー 課題提出フォーム
• 演習Web01 デザイントレース「デザイン会社のWebサイト」 / 演習Web01 デザイン会社のWebサイト課題提出フォーム

授業で行えなかった全トレース

最後に上記❸のため、諸般の事情で授業で行うことができなかったトレースを以下に掲載します。
動画は記事内に用意していますので、さらにスキルアップを狙う人はいずれかを、または全てに挑戦してみましょう。

• 目標15分以内:演習04 デザイントレース「結婚式の招待状」/ 演習04 結婚式の招待状 課題提出フォーム
• 目標10分以内:演習07 デザイントレース「美容クリニックのバナー」/ 演習07 美容クリニックのバナー 課題提出フォーム
• 目標45分以内:演習15 デザイントレース「キャンペーンのバナー」/ 演習15 キャンペーンのバナー課題提出フォーム

上記3件は難易度としてはあまり高くないのですが、上級編として、まず動画を見ずに自分なりの手順でトレースを行い、
詰まってしまった時の確認や、トレースの答え合わせとして動画を使ってもらえたらと思います。
実はこの最終回のために「簡単なトレースを条件付きで行えばスキルアップに最適」と考えられる3件をあえて残しました。

また、上記はIllustratorやPhotoshopを想定したトレースの動画にしていますが、
2年後期開講科目のウェブデザイン演習で本格的にレクチャーを開始するFigmaを使ってみてもよいでしょう。

2024年の時点で、Figmaは使用されているデザインツールのうち82.3%のシェア率を誇っている情報もあるため、
現時点ではすでに「Webデザインツール = Figma」という状況であることは間違いがありません。
条件を満たせば半永久的に無料で使用できるため、勉強しておいて損はありませんよ。

参考:UX Tools – Design Tools Survey – Design Standard Award

最後に

全15回の授業、お疲れ様でした。

授業では毎回のようにそこそこのレベルの課題の提出があり、1年次の授業よりもかなり大変だったと思います。
ただ私が知る限り、デザイントレースは「デザインソフトウェアのスキルを最速で確実に身につける練習法」です。
そのため、みなさんのスキルアップに確実につながっていて、身についている自信があります。

また、チラシやポスター、WebデザインやWebバナーなどのグラフィックアイテムが、
実際の制作現場でどういった工程で制作されているのかをトレース作業を通して学ぶことで、
みなさんに「自分は作り方も知っているし、実際に作ったこともある」という事実をプレゼントすることができました。

この事実をどう使うかはみなさんにお任せします。
そして、2年後期のウェブデザイン演習ではWebデザイン制作に特化したデザインスキルをレクチャーします。
楽しみにしていてくださいね。

ありがとうございました。