ウェブデザインB 第06回

ウェブデザインB 第06回

2026年05月14日 /最終更新:2026年05月14日
読了目安:約5分

演習03のキャンペーンのDMのトレース(後編)を行ない、デザインの基礎知識を習得しましょう。

ウェブデザインB 第06回

前回取った「ウェブデザインについての講義」の意見についてアンケートを行いました。
アンケートの結果は以下のようになりました。

ウェブデザインの講義を行ってもよい・・・81%(17票)
グラフィックデザイン1,000本ノックを続けたい・・・14.3%(3票)
ぜひやってほしいです!!・・・4.8%(1票)

上記のような結果になりましたので、今回から何回かに分けて
ウェブデザインについての知識やルールの講義を行いたいと思います。

ひとまず今回は前回のトレースの続きを行い、終わり次第ウェブデザインについて講義を行います。

前回の振り返り

前回はテキストの演習03のトレースを途中まで行い、以下のIllustratorスキルを習得しました。

  • パス上文字ツールを使って既存のオブジェクトのパスに沿った文字の流れを作る

ハッピークリスマスキャンペーンのアーチの文字のトレースで終わっていたので、その続きを行いましょう。
編集中のファイルは間違いがなければ「学籍番号_trace03.ai」のはずです。

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

演習03 デザイントレース「キャンペーンのDM」 後編

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

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

  1. 「ファミリーモール」の文字列を自分の氏名に変更する。

以上です。
今回はそのままYoutubeを開いてしまいましょう。

課題の提出

ではトレースを行った「キャンペーンのDM」を提出しましょう。
課題の提出形式はjpg以外は受け付けられないようになっています。
必ずjpgに書き出して提出してください。

手順は以下。

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

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

演習03 キャンペーンのDM課題提出フォーム

はじめてのデザイン

今回からはデザインに関しての基礎知識をレクチャーしていこうと思います。
新たに「はじめてのデザイン」というシリーズを執筆し、3記事を準備しました。

では順に記事を見てみましょう!

はじめてのデザイン その1 〜デザインの基本・考え方〜

はじめてのデザイン その2 〜デザインの対象物とそれぞれの特性〜

はじめてのデザイン その3 〜デザインの進め方:思考と実践のプロセス〜