投稿者: master

学科 ユーザーインターフェイス基礎②【オンライン】

-本日のアジェンダ-

1限目
学科 ユーザーインターフェイス基礎②
作品の制作について

2限目
学科 ユーザーインターフェイス基礎②
作品の制作について

3限目
学科 ユーザーインターフェイス基礎②
作品の立案

4限目
学科 ユーザーインターフェイス基礎②
作品の立案

5限目
学科 ユーザーインターフェイス基礎②
作品の立案

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：作品を作る説明
内容1：ロゴについて
内容2：作成準備
内容3：デザインという職業について
課題：なし
注記：このページはピクトグラムとロゴの情報が記載されていますが、このページはロゴだけを対象に修正要！

本日のテーマ

納品する作品の準備です。

デザインをする時は、機械の力と一緒に正確なレイアウトを心がけてみましょう。

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「デザインの考え方」の教科書①.pdf

【動画】「デザインの考え方」の教科書①

提案の考え方について

商業デザインというお仕事は、お客さま（クライアント）とその先の、お客さま（ユーザー）を意識したデザインが求められます。
先ずは、 お客さま（クライアント） の希望するイメージを具現化しなければなりません。様々な提案方法を確認し実装出来るようにしていきましょう。

ロゴとは？

ロゴタイプ，通称「ロゴ」 は、図案化・装飾化された文字・文字列のことで、団体名、商号、商品名、雑誌名、書名等を印刷・表示する際などに使用される。

参考サイト

ロゴ制作で使える基本操作

  • 文字ツール
  • 文字パネル
  • 字形パネル
  • 段落
  • 整列パネル
  • 変形パネル
  • パス上文字ツール
  • アウトライン表示

文字ツールとは？

「文字ツール」. 名前の通り、文字を入力するツールです。 文字ツールでの入力方法は、大きく分けて2種類あります 。

【ポイント文字】の入力

文字ツールで、画面の好きなところをクリックすると、カーソル（Iビーム）が表示されます。そのまま、文字を入力すれば、クリックした部分を先頭に文字が入力されていきます。

【エリア文字】の入力

一定の幅で文章を折り返したい場合は、エリア文字を使います。文字ツールで、画面内を斜めにドラッグすると、文字を入力するためのテキストエリアが出来上がります。

ポイント文字とエリア文字の切り替え

ポイントテキストで文字を入力した場合でも、強制的にEnterキーやReturnキーを使って改行を入れることができます。

参考サイト（Ai）

文字パネルとは？

文字を入力する前にテキスト属性を設定したり、属性をリセットして、テキストレイヤーにおける選択した文字の表示形式を変更することもできます。個々の文字に書式を設定するには、それらの文字を選択します。テキストレイヤー内の 1 文字、一定範囲の文字、またはすべての文字を選択できます。

参考サイト（Ai）

字形パネルとは？

字形パネル（書式／字形または、ウィンドウ／書式／字形）を使用すると、あるフォントの字形を表示したり、特定の字形をドキュメントに挿入したりできます。

参考サイト（Ai）

段落とは？

行揃えの指定、単語、文字、段落間隔の調整、段落のインデント、ハイフネーションの調整などを行うことができます。

参考サイト（Ai）

整列パネル

イラストレーターでデザインを行う際、「オブジェクトなどの位置を正確に揃える」ということはとても重要な事です。整列パネルを使用すると、簡単に複数のオブジェクトを揃えたり、均等な間隔に並べることもできます。

参考サイト

変形パネル

Illustrator の変形パネルでは、オブジェクトの位置、サイズおよび方向を設定します。パネルに値を入力することで、選択したオブジェクトの位置や大きさ、角度を変更することができます。また、変形の基準点を変更したり、オブジェクトの縦横比を固定したまま拡大・縮小したりすることが可能です。

参考サイト

パス上文字ツール

線を書いてパス上文字ツールを選択する. 今回は曲線ですが、オープンパスであればどんなパスでも大丈夫です。 とりあえず適当に曲線を描きます。 線を描いたら、【パス線上文字ツール】または【文字ツール】を選択して下さい。

参考サイト

アウトライン表示

イラストレーターには表示モードが『プレビュー』と『アウトライン』の２種類あります。 『プレビュー』は[塗り]も[線]もアピアランス効果も見える、つまり普通に作業している状態。 そして、『アウトライン表示』というのはオブジェクトのアウトライン、つまりパスだけを表示するモードです。

参考サイト

今後の日程

  • 10月18日 (金)　ロゴの制作

本日の課題

手書きでいいので、ロゴのイメージを作りましょう。
それぞれの作品の方向性をしっかりとイメージし、制作を進めていきましょう。

学科 デザイン概論①【オンライン】

-本日のアジェンダ-

1限目
学科 デザイン概論①
デザインという仕事について

2限目
学科 デザイン概論①
ポートフォリオとは？

3限目
学科 デザイン概論①
構成のまとめ方について

4限目
学科 デザイン概論①
本日のまとめ

5限目
学科 デザイン概論①
本日のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：オンラインで講師とディスカッション(質問タイム)
内容1：デザインという仕事について
内容2：ポートフォリオのディスカッション
内容3：予備日程
課題：なし

・ディスカッション→受講生さんの「質問タイムを設ける」
通常ですと「オンラインは質問をまとめておく」ですが、ディスカッションでは受講生さんからの質問を積極的に受けつけてください。

本日のポイント

デザインとアートは違います！

商業デザイナーに必要な考え方を理解し、今後の作品制作に生かしましょう。

【資料】

「デザインという仕事について」.pdf

【動画】「デザインという仕事について」

参考サイト

WordPressサイトの掲載内容について【再掲】

WordPressサイトには、以下の内容を掲載しましょう。

ポートフォリオサイト

ポートフォリオサイトとして活用できるように以下の項目を掲載してください。

  • ご挨拶
  • プロフィール（自己紹介）
    – 名前
    – 顔写真
    – 生年月日
    – 略歴
    – 仕事への姿勢や意気込み
    – 自己PR
    – 保有スキル
    – スキル項目
    – スキルレベル など
  • ポートフォリオ
    – 作品
    – 作品の説明
    – 作成ツール
    – 作成時間
    – その他（苦労したこと、考慮したこと、学んだこと など）
  • 後書き

訓練の記録

学んだことの復習や忘れてしまったことを思い出す資料として訓練の記録を作成してください。

  • 訓練の1日単位で投稿ページを作成してください。
  • ページのタイトルは、訓練内容がわかるようにしてください。

参考サイト

WordPressサイト作成時の注意事項【再掲】

WordPressサイトの作成に当たっては、ポートフォリオとしての活用を中心に考えてサイト構成を考えてください。また、ポートフォリオの作成に当たっては、ポートフォリオを見る人の立場に立って考えてみましょう。

  • 採用担当者の立場になって作りましょう（採用担当者が何をみたいか考えてみましょう）
  • トップページは作品主体にしましょう（ポートフォリオとしてのトップページを意識してみましょう）
  • 操作性や導線を考慮しましょう（クリックの多すぎは見る気がしなくなります）
  • 未経験者の場合は「学校でこんな事を勉強してきました」、「私はこんなことができます」をわかるようにしましょう

本日の課題

オンラインは課題無しです。