ウェブデザイン演習 第01回

ウェブデザイン演習 第01回

2024年09月30日 /最終更新:2024年10月03日

オリエンテーション、そしてデザインのトレース・模写について説明します。

ウェブデザイン演習 第01回

まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。

こんにちわ。
ウェブデザイン演習を担当する、情報ビジネス学科の脇坂です。

本講義ではPhotoshopやIllusratorの応用部分の使い方を「トレース・模写」という方法で習得し、
チラシやウェブバナーなど実務レベルでの制作工程を手を動かしながら学びましょう。

本講義について

本講義の目的

本講義は、「ウェブデザイン実務士」という資格取得のための資格必修科目になります。
ウェブデザイン実務士とは、

インターネット利用技術に関する知識と技能、ウェブページの意匠計画に関する基礎的、専門的知識、および、ウェブページの管理運営に関して必要な技能を身につけていると認定される資格。

・・・と講義の大義名分はそうなんですが、
本音を言えば、将来のグラフィックデザイナーを生み出すきっかけ作りになればいいなと思っています。

そのため講義内で数回みなさんが学びたいことへのアンケートを取り、
その結果を受けて講義内容を変えていきたいと考えています。
つまりこの時間は、みなさんがみなさん自身で講義をデザインすると考えてください。

私と一緒に楽しくて面白い講義を作っていきましょう!

本講義の進行について

本講義の進行はこのブログ、テキストを使っていきます。
テキストは「トレース&模写で学ぶ デザインのドリル」を使用します。

またYoutubeなどをはじめとした動画を利用して、IllustratorやPhotoshopなどのアプリの応用的な使い方を学んでいきたいと考えています。
トップページのURLをブックマークしてすぐに表示できる状態にしておいてください。

WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

基本的には講義1回につき1記事、全15回の講義で全15記事を使って進めていきますが、
進行具合によっては前の講義記事の途中からはじめることもあります。

なお、必ず授業用にUSBメモリなどを購入して準備しておいてください。
みなさんが授業のサンプルファイルや制作した作品データの置き場所として使用します。

本講義ですべきこと

ウェブデザインの基礎を学んだみなさんは次のステップに進み、
テキストの中にある、架空の印刷物やウェブバナーを題材にしたトレース・模写によって、
実際の制作物の制作方法手を動かしながら細かく学んでいきます。

今までの科目はメディア・ウェブデザイン領域の基礎部分を学んだ時間になりましたが、
ここからは領域をより深く、応用部分を学ぶ時間にしていきましょう。

なお、みなさんが後悔しないために、念のために言っておきたいのは、
今までと比べ物にならないほど自分で解決方法を見つける必要に迫られることになり、
2年生前期までの科目と比べるとかなり難易度が高くなり評価も厳しくなると思います。

本講義の定義

まず前提として、本講義の講義名はウェブデザイン演習とされていますが、
以前説明したように、ウェブデザイングラフィックデザインの一部です。
印刷物やウェブデザインも含まれるため、本講義はグラフィックデザイン全般の演習と考えてください。
(つまり正確にいえばグラフィックデザイン演習が正しいです)

Adobe系ソフトを使いこなしプロのデザイン作品を再現できるように

目指すところとして、業界で広く使用されているAdobe系のソフト使いこなし
チラシや名刺、ポスターなどやウェブバナーなどのプロのデザイン作品を自分の手で再現し、
実際の現場、つまり実務でも即戦力とされるレベルのスキルの習得を目指します。

ただ「トレース・模写」による学修は、言ってしまえば「誰かの作品の真似」をしているだけ
言われた通りに手だけを動かし、自分の頭を動かさずにいると、ただそれだけになります。

私は最終的には、みなさん自身が思い描いて創り出したオリジナルのデザインを、
みなさん自身がウェブのバナーのデザインとしてウェブサイトに公開できたり、
チラシや名刺のデータを印刷して手に取ったりできる段階に成長してほしいと思っています。

本講義の提出物・採点方法

本講義は、半年間15回にわたって講義をすすめていきますが、それぞれの回の講義で学んだ課題、
主にIllustrator・Photoshopでのトレース作品模写作品、そしてオリジナル作品を書き出し、
何度か提出するようになります。各課題の提出期限は原則その授業時間内の提出になります。

また何度か小テストを行い授業の理解度を確認し、知識を深めていきたいと思います。
上記のような日々の課題・小テストの提出状況・意欲や態度などを主な採点方法にするので、
定期試験はありません

出席について

本講義の出席確認は、UNIPAのスマホ出席機能を利用します。

スマホ出席マニュアル

公欠の課題

私の担当科目では、公的理由での欠席は公欠の扱いになります。
公欠を認めるには、公欠届の提出とは別に公欠の課題を提出しなければいけません。
公欠課題に関して詳しくは以下のページを参照、ページ内のフォームより提出を行なってください。

公欠課題提出

本書の使い方・ダウンロードデータについて(P.003〜004)

前述した通り、本講義のテキストは「トレース&模写で学ぶ デザインのドリル」を使用します。

本書の使い方

まずは、「本書の使い方」を確認してください。
このテキストは30件の演習問題で構成されたドリル形式のものになっており、
「完成見本」「素材」「テキスト」が含まれたダウンロードデータを活用しながら進めます。

手順

基本の手順は以下となりますが、それぞれの詳細は後ほど解説します。

  • STEP 1 トレース
  • STEP 2 模写
  • STEP 3 オリジナル制作

テキスト「トレース&模写で学ぶ デザインのドリル」を確認するとわかりますが、
各LESSON内で①トレース②模写③制作演習(オリジナル制作)といった流れがあります(例外もある)。
これがスムーズにスキル習得に繋がるとも言えますので、基本的にはこの流れに沿って講義進行を行います。

なお、このウェブデザイン演習の科目の目的は実際の現場で通用するスキルの習得ですが、
そのためにトレースが最も重要な作業になるためトレース作業を重点的に行うことになります。

ダウンロードデータについて

本書の演習問題で使用しているデータは以下のWebサイトからダウンロードすることができます。

URL:https://www.socym.co.jp/book/1257

ダウンロードデータは「Adobe Creative Cloudユーザー向け」と「その他のアプリユーザー向け」の2種類を用意していいます。お使いのアプリに合わせて目的のデータをダウンロードしてください。各データの概要は以下のとおりです。

では現時点でダウンロードしておきましょう。手順は以下。

  1. ダウンロードページを開き、少し下にスクロールする。
  2. 「概要」「目次」「正誤表・ダウンロード」の3つのタブのうち「正誤表・ダウンロード」 タブをクリックする。
  3. 「ダウンロードデータ」の項目の「AdobeCCユーザーはこちら」のボタンをクリックしてダウンロードを開始する。

ダウンロード時の注意点は、ファイルのサイズがかなり大きく、
この授業時間内にダウンロードが完了できない可能性がある点です。
もし完了できなければ次回以降、テキストを開始してから考えます。

トレース・模写・オリジナル制作について

トレース・模写の目的

トレース・模写に関して知る上で、まずはその目的を考えてましょう。
以下の動画がとても参考になると思いますので、拝見しましょう。

動画内で「バナー模写の目的」として挙げられているのは以下です。

  1. デザインツールの使い方習得
  2. デザイン力の基礎習得

動画のタイトルは「バナー模写のやり方解説!・・・」ですが、
その目的はトレースも模写も共通したものになっています。

トレースとは

トレースに関して、テキストより引用します。

まずは「完成見本」の画像データを「下絵」として配置し、その上に全く同じように素材や文字を配置する「トレース」を行ってみましょう。プロのデザインを正確にトレースすることでバランスの取り方や細部の調整など、新しい「気づき」がきっとあるはずです。

引用:トレース&模写で学ぶ デザインのドリル P.003

つまり、プロが制作したチラシなどの上に、なぞるように素材やブロック文字などを配置し、
そのデザインで使われている表現に最もふさわしいなぞり方」を習得する作業がトレースです。

暗記するように頭で覚えるのではなく、自然に身体で慣れさせることが目的で、
私の実務においての経験上トレースが最も自らのスキルアップにつながったと断言できます。

なおトレース・模写に共通して言えることは、決まった手順などは存在せず、
それぞれのやり方でデザインの再現ができればそれでよいということです。

模写とは

模写に関しても、テキストより引用します。

トレースに慣れてきたら「模写」に挑戦てみましょう。模写の場合「下絵」は配置せず、「完成見本」を見ながら同じようにレイアウトしていきます。「完成見本」と見比べながら、全体のバランスはおかしくないか、文字の位置やサイズは適正か、などを確認することで、デザイン力がアップしていきます。

引用:トレース&模写で学ぶ デザインのドリル P.003

「模写」は「トレース」のように下絵を配置してなぞるのとは違い、
完成見本を見ながら、全く同じようにデザインの再現を行う作業です。

効率的なやり方は、新規ファイル作成時にアートボードを左右または上下に2つ用意しておき、
一方のアートボードに完成見本を配置反対のアートボードを模写用として使って練習する方法です。

「トレース」と比べると難易度はぐんと上がりますが、「なんとなくの感覚の排除」に有効で、
横に並べて文字通り「模写」するので作業もしやすいでしょう。

「模写」作業が終わったら、最後に完成見本を模写用アードボードに移動し、
重ねて表示してどれだけ正確に模写できたかを確認してみましょう。

オリジナル制作

本講義では最終的にオリジナル作品の制作も行っていきます。
こちらも、テキストより引用します。

素材とテキストデータを使ってオリジナルでデザインを組んでみましょう。制作を始める前にそのデザインの目的や役割、テーマなどをしっかり考えることも大切です。カタチにしていくことで、実戦でもすぐに役立つスキルが磨かれていきます。

引用:トレース&模写で学ぶ デザインのドリル P.003

「トレース」「模写」で表現を実現するスキルは習得したはずですので、
今度はそのスキルを使ってオリジナルの作品を作ってみましょう。

最初は写真や文字を少し変えるだけでもいいでしょう。
慣れてきたらレイアウトや配色などにも変化をつけたり応用を行うことで、
確実にデザイン力のアップにつながります。

課題の提出

トレースについてや、そのやり方を説明してみよう

初回の課題は、みなさんが「トレース」について理解ができたか?を知るために、
みなさん自身に「トレースって何?トレースのやり方は?」の説明をしてもらいたいと思います。
約束として「自分自身の言葉で考えて説明してみましょう。

人に説明するというスキルは、まず自分自身が理解できていないと身についていないも同然です。
まずはトレースの概要と手法について、しっかりと理解ができていることを願っています。

また、課題フォームでは、「テキストの演習の中でやりたいものはどれ? また、あなたならテキスト以外でどんなデザイン作品をトレースしたい?」と「授業にのぞむこと」という設問を用意しています。

課題の提出

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

ウェブデザイン演習 トレースについての理解課題提出フォーム

提出が終わり次第退出してください。