カテゴリー: 学科 ユーザーインターフェイス基礎

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

-本日のアジェンダ-

1限目
学科 ユーザーインターフェイス基礎④
様々なWebコンテンツについて

2限目
学科 ユーザーインターフェイス基礎④
ユーザビリティーとアクセシビリティー

3限目
学科 ユーザーインターフェイス基礎④
課題制作

4限目
学科 ユーザーインターフェイス基礎④
課題制作

5限目
学科 ユーザーインターフェイス基礎④
課題制作

本日のテーマ

Webサイトビジネスについて

【資料】

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

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

【動画】

「ユーザビリティー」と「アクセシビリティー」

ユーザビリティとは？

ユーザビリティは、一般的には「使いやすさ」を示す言葉だが、国際規格のISO 9241-11では、「ある製品を、特定の利用者が、特定の目的を達成しようとするにあたって、特定の状況で、いかに効果的に、効率的に、満足できるように使えるかの度合い」としている。

アクセシビリティ

アクセシビリティは、英語では“Accessibility”で、「近づきやすさ」、「利用のしやすさ」、「便利であること」などと訳されています。 一般的には、「利用者が機器・サービスを円滑に利用できること」という場合に使われています。

参考サイト

ワンポイントアドバイス

Webコンテンツは様々は状況や条件、目的に合わせて利用されています。
その様々な要件定義に合わせた「デザイン」ができる人を目指し、成長に努めましょう。

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

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

-本日のアジェンダ-

1限目
学科 ユーザーインターフェイス基礎③
デザインラフについて

2限目
学科 ユーザーインターフェイス基礎③
HTML/CSSをイメージしたレイアウト考案について

3限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

4限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

5限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

本日のテーマ

コーディングの準備をしましょう

デザインラフとは？

ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。

【資料】

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

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

【動画】　

ワンポイントアドバイス

ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成しましょう。

本日の課題

課題提出はありません。
今後のデザインラフ制作とコーディングに向けて、レイアウトのブラッシュアップや掲載内容（細かい文言など）を考え、まとめておきましょう。

実技 イラストロゴ作成実習③

-本日のアジェンダ-

1限目
実技 イラストロゴ作成実習③
アクセスマップ制作に向けて

2限目
実技 イラストロゴ作成実習③
アクセスマップ制作

3限目
実技 イラストロゴ作成実習③
アクセスマップ制作

4限目
実技 イラストロゴ作成実習③
アクセスマップ制作

5限目
実技 イラストロゴ作成実習③
アクセスマップ講評

本日のテーマ

アクセスマップを作成してみましょう

アクセスマップ制作のポイント

まず目的地を中心に配置し、レイアウトを考えてみると良いです。
また、土地勘のない場合はストリートビューなどを利用すると便利です。

レイアウトデザインのポイントとして

作成した作品を改めてみた時、「 配置した内容のグループ化 」「縦横の整列」「表現のルール化」「表現の差別化」「余白」を改めて見てみましょう。
これら5つを踏まえて、2提案目（ブラッシュアップ）した作品を作成してみましょう。

レイアウトデザイン

見やすいレイアウト、わかりやすいレイアウトを作るときの重要なポイントは、ただ闇雲に文字や絵を配置するのではなく、発表者の頭の中にある「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置することです。関係性の強いもの同士は、近くに配置したり、同じ色を使ったり、線で結んだり、大切な事項を目立つ色にしたり、目立つ場所においたり、という簡単なことです。「理論やストーリーをレイアウトする」ことが大切であるということを忘れないでください。

参考サイト

本日の基本操作

  • 線パネル
  • アピアランスパネル
  • スタイライズ
  • クリッピングマスク
  • アウトライン
  • アピアランスの分割

線パネル

 線パネルでは、線の太さを設定するだけでなく、線の両端の形や、角の形を変える事ができます。また点線や矢印も作る事ができます。

参考サイト

アピアランスパネル

Adobe Illustrator で効果、アピアランスパネルおよびグラフィックスタイルパネルを使用すると、オブジェクト、グループまたは、レイヤーのアピアランスを変えることができます。また、1 つのオブジェクトを複数の必須部分に分割して、オブジェクト要素を個別に修正することもできます。

参考サイト

スタイライズ

【illustrator】オブジェクトに「スタイライズ」効果で影やぼかしをつける 「スタイライズ」効果で、選択したオブジェクトに影や角を丸くするなどができます。

参考サイト

クリッピングマスク

クリッピングマスクは、その形状によってほかのアートワークをマスクするオブジェクトです。クリッピングマスクの内側にあるエリアのみが見えるように、アートワークをマスクの形状にクリップします。クリッピングマスクとマスクされたオブジェクトは、クリッピングセットと呼ばれます。

参考サイト

アウトライン

イラレで基本的に入力する文字フォントツールがありますが、そのフォントツールをアウトライン化することでオブジェクトにすることができます。
何が違うのかというと、フォントは文字情報、アウトライン化したのはオブジェクト(図形)情報ということです。
このアウトライン化をすれば、インストールしたフォントで別のパソコンで開く場合置き換わってしまうということを防ぐことができます。

Illustrator「アウトライン」という言葉で
覚えておく３つ！

「オブジェクト」＞「パス」＞「パスのアウトライン」
「書式」＞「アウトラインの作成」
「表示」＞「アウトライン（Ctrl+Ｙ）」

参考サイト

参考サイト

アピアランスの分割

 1つのオブジェクトには塗り、線、効果、不透明度の4つのアピアランス属性があります。例えば”1つのオブジェクトに4つのアピアランス属性”を”1つのアピアランス属性で1つのオブジェクト”にしてくれるのがアピアランスを分割する機能

参考サイト

本日の課題

アクセスマップを作成し
ご自身のポートフォリオサイトに投稿しましょう。
5限目に講評を行います。

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【資料】

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

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

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

アクセスマップ とは？

一般的な地図とは違い、アクセスマップは「ある特定の目的地へのアクセス」に特化した地図です。 曲がり角や交差点など、ポイントとなるところを大きく目立たせたり、逆に必要でない情報はバッサリ削ってしまうなど、「見せたいもの」「いらないもの」の見極めが重要です。

参考サイト

名刺作成

「名刺」は、名前や住所、連絡先などを印刷したクレジットカードほどの大きさの紙(主に91×55mm)です。名刺の主な役割は「自己紹介ツール」であり、 初対面の相手に自分の名前や連絡先、所属などのプロフィール情報を伝えます。
名刺デザインは、「レイアウトデザイン」「文字デザイン」「配色デザイン」の全てを意識し て制作しましょう。まずは、「レイアウト」91x55mmの中で、面積比率を意識しながら、見せたい順番を 作ってレイアウトしましょう。

名刺作成の参考サイト

今後の日程

  • 10月6日（金）アクセスマップ制作
  • 10月7日（土）名刺制作

本日の課題

手書きでいいので、「アクセスマップ」「名刺」のイメージを作りましょう。
それぞれの作品の方向性をしっかりとイメージし、制作を進めていきましょう。

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

バックアップは消さない！

普段からバックアップの意識を高めておきましょう！生産性の向上に必要不可欠だと考えましょう！！

これから、もっと様々なファイルを管理して作業をしていく事になります。
しっかりとバックアップを取っておきましょう。
また、ファイル管理を徹底する事で、自身の作業の進行やスケジュールの管理に気を付けて、より生産性を上げていきましょう。
では皆さん多くの作品を作って行きましょう！

【資料】

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

下記のファイルをダウンロードしましょう。
「バックアップについて.pdf」　

【動画】

データ管理とバックアップについて考えてみましょう(9:35)
https://youtu.be/S143gCacqCw

「生産性」について考えてみましょう(18:10)
https://youtu.be/HOCds3VnBUw

生産性を上げることもスキルとして身につけましょう(12:22)
https://youtu.be/UvxkEU7i4No

バックアップの具体的な方法(8:22)
https://youtu.be/-VPFqvfqxYA

コピーしたデータの保存機器① USBメモリー(13:08)
https://youtu.be/iI-FMRY2AMI

コピーしたデータの保存機器② SDカード・外付けHDD(8:43)
https://youtu.be/HlYLjRT6En4

コピーしたデータの保存機器③ NAS (4:43)
https://youtu.be/7CTDqDst3Rc

コピーしたデータの保存機器④ M-DISC (3:45)
https://youtu.be/CWpjXGhBkUM

遠隔地のバックアップにはクラウドがおすすめ(18:11)
https://youtu.be/IZ0dhnpoe-k

バックアップ保存の小技 (13:58)
https://youtu.be/ncXhQSfZtUU

企業で『バックアップ＋作業管理』を徹底すること！(11:09)
https://youtu.be/kBIO__njJdk

おまけとまとめ(3:27)
https://youtu.be/gpQZr2SOY68

参考サイト