実技 スマートフォンサイト作成実習

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習
コーディングに向けて

2限目
実技 スマートフォンサイト作成実習
課題制作

3限目
実技 スマートフォンサイト作成実習
課題制作

4限目
実技 スマートフォンサイト作成実習
課題制作

5限目
実技 スマートフォンサイト作成実習
課題制作

本日のテーマ

デザインラフができたらコーディングを進めましょう。

WebサイトはPCで閲覧よりもスマートフォンで閲覧する割合が増加しています。
Webサイトを多くの人に見てもらうためにははスマートホン対応がされていることが重要です。
スマートフォンで閲覧しても快適に閲覧できるようにWebサイトを作成してください。
例えば、以下のようなサイトではスマートホンでの閲覧に不向きです。

  • 文字が小さすぎて拡大しないと読めない
  • 横スクロールしないと全体が読めない
  • 横幅が狭い場合にレイアウトが乱れて読みにくい
  • ボタンやバナーの大きさや間隔が小さくて指で押せない

スマートフォン対応(レスポンシブWebデザイン)の実施方法が明確でない人は「学科 CSS基礎⑥」の内容を再度確認しましょう。

【学科 CSS基礎⑥のカリキュラム再掲】

Box modelについて(RWD)

【資料】

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

下記のファイルをダウンロードしましょう。
マルチデバイス対応の教科書①.pdf」 

【動画】

RWD 対応のサイトについて

  • 幅広デザインでの Web ページ作成
  • viewport 定義の指定
  • 横幅変動時のコンテンツ幅を設定
  • Media Querie でデザインを整える
  • 画面サイズに合わせた表示部品の導入

本日の課題

今日できたところまでのサイトをサーバに仮アップしてみましょう。

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【資料】

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

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

動画

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

ユーザビリティとは?

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

アクセシビリティ

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

参考サイト

ワンポイントアドバイス

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

本日の課題

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