Monthly Archives: 2月 2022

学科 レイアウトデザイン基礎②

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎②
デザインラフについて

2限目
学科 レイアウトデザイン基礎②
HTML/CSSをイメージしたレイアウト考案について

3限目
学科 レイアウトデザイン基礎②
HTML/CSSをイメージしたレイアウト考案について

4限目
学科 レイアウトデザイン基礎②
課題制作

5限目
学科 レイアウトデザイン基礎②
課題制作

本日のテーマ

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

デザインラフとは？

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

ワンポイントアドバイス

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

デザインラフの例

制作のポイント

実務では・・・
デザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。

参考サイト

第4回成績考査

2月25日(金)の4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。

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

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習②
実機検証ついて

2限目
実技 スマートフォンサイト作成実習②
Webサイトの納品について

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

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

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

本日のテーマ

実機検証は最後にしっかりと

レスポンシブWEBデザイン（RWD）とは？

「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

サンプルページ（レスポンシブWebデザイン基礎）

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

実機検証 について

スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。

ワンポイントアドバイス

サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。

参考サイト

Webサイトの納品 について

サイトが完成したら後は納品です。納品方法は色々なパターンがありますので、ご依頼を頂いたお客様としっかりと確認をして納品を行いましょう。

ワンポイントアドバイス

FTPでサーバにUPして納品となるのが一般的ですが、データ納品となる場合もよくあります。ファイル名や無駄なファイルが残っていないように気を付けて納品を行いましょう。

参考サイト

練習課題

オンライン期間中のコーディング練習

Dropboxの練習用ファイルで力をつけましょう！
ファイル場所・・・資料 /【4】コーディング / 「コーディング練習 」
【練習①】「cording_saito_20201001.zip」
PDFにある問題を解いてみましょう。
【練習②】「cording_nakano_20210902.zip」
JPEGのデザインラフを目指して、CSSの「プロパティ」と「値」を組みましょう。

・完成したものは訓練中の成果としてポートフォリオに載せていただいて構いません。
・画像やバナーの入れ替えなど、自由にアレンジを加えていただいても構いません。
・提出課題ではありませんのでご自身のペースで挑戦してみて下さい。

本日の提出物はありません。