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

-本日のアジェンダ-

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サイト制作の流れ

ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング

デザインラフとは?

Webサイトの完成見本のことを指します。
ワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていきます。

ワイヤーフレーム製作前の手書きスケッチ(ラフ)とは別もので、デザインカンプと呼ばれることもあります。

ワンポイントアドバイス

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

【資料】

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

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

【動画】 


本日の課題

課題提出はありません。
今後のデザインラフ制作とコーディングに向けて、レイアウトのブラッシュアップや掲載内容(細かい文言など)を考え、まとめておきましょう。
メモ帳で構いませんので、必要な文言を全て書き起こしたテキストファイルを作成しておくといいでしょう。