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

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【資料】

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

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

【動画】

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

ユーザビリティとは？

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

アクセシビリティ

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

参考サイト

ワンポイントアドバイス

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

本日の課題

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

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

-本日のアジェンダ-

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

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

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

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

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

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

本日のテーマ

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

【資料】

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

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

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

名刺作成

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

名刺作成の参考サイト

今後の日程

  • 10月1日（火）名刺制作

本日の基本操作

  • トリムマーク
  • パスのオフセット
  • 配置
  • Adobe Fonts（Typekit)

トリムマーク

トリムマーク（トンボ）とは トリムマークとは、印刷時や、断裁位置を明確にするために必要不可欠な「しるし」のことです。 … 内トンボは仕上がり線を示しており、内トンボから外トンボの間は裁ち落としのための”塗り足し”部分を示しています。

参考サイト

パスのオフセット

「オフセット」という言葉にあまり馴染みはないでしょう。しかし、この機能を覚えておくと、イラレの使い方の幅が広がる可能性があります。 

参考サイト

配置

Illustratorの画像配置 リンク画像と埋め込み画像の違いと正しい使い方. Illustratorに画像を配置する場合、「リンク配置」と「埋め込み」配置の、二つの方法があります。

参考サイト

Adobe Fonts （Typekit ）

Adobe Creative Cloudユーザーが利用できるサービスの一つです。
Webフォントとしてはもちろん、PC上のデスクトップフォントとしても使用可能です。
（Photoshopやllustratorはもちろん、Microsoft OfficeなどAdobe以外のソフトにも対応しています。）

参考サイト

名刺制作で使える基本操作

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

文字デザインのポイントとして

文字や文章の｢読みやすさ｣は、可読性、視認性、判読性という３つの要素から成ります。「可読性」とは文章が読みやすいか、「視認性」とはパッと見た瞬間の認識しやすさ、「判読性」とは誤読がないか、という指標です。書体（≒フォント）の種類や文字のサイズを変えたり、行間や字間を調節することで、これらの要素を高めることができます。ただし、どの要素を優先させるかは資料の目的や状況によって変わります。プレゼンのPowerPointsスライドなどでは視認性と判読性を、申請書などのWord文書などでは可読性を重視します。

参考サイト

レイアウトデザインのポイントとして(復習)

作成した作品を改めてみた時、「 配置した内容のグループ化 」「縦横の整列」「表現のルール化」「表現の差別化」「余白」を改めて見てみましょう。

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

参考サイト

本日の課題

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