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

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎②
Web用画像について

2限目
学科 レイアウトデザイン基礎②
Web画像の解像度について

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

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

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

本日のテーマ

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

デザインラフとは？

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

ワンポイントアドバイス

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

制作のポイント

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

参考サイト

Web用画像とは？

Web用画像には、 主に「jpg」「gif」「png」「svg」が昨今のWebサイトで使われます。 その特徴と違いを確認しておきましょう。

制作のポイント

ファイル名の命名規則は管理しやすいようにしっかりと考えて付けましょう。

ワンポイントアドバイス

「jpg」「gif」「png」「svg」について、まず悩んだら「jpg」透過表現を必要とすなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」複雑な画像は重たくなるので、条件次第で使う。と良い出よう。

参考サイト

第4回成績考査

8月13日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

近年、Webサイトの重要性と必要性は年々増えています。またそのWebサイトを制作する技術者も増えていますが、技術は多様化して情報は様々な内容が飛び交っています。HTMLの基本文法とCSSの基本文法を理解したら、後は使い方です。当然、この使い方が人によって異なります。
デザインをやるのかコードを書くのか、前職などのキャリアをどう活用するのか？働き始めても常に学ぶことが必要とされる為、自己学習能力や自己解決能力、自己の管理責任能力などを求められます。
ここから約1月の訓練はWEBサイト制作をするのみです。
それによって、当然皆さまそれぞれ必要となる技術と活動が異なるでしょう。まずは就職に向けての行動して、ご自身の宿題を見つけていきましょう。