カテゴリー: 学科 レイアウトデザイン基礎

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎④
パターン展開について

2限目
学科 レイアウトデザイン基礎④
デザインの3大要素について

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

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

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

本日のテーマ

パターン違いのデザインラフ(第2案目)を作成しましょう

ワンポイントアドバイス

いま一度デザインの3大要素を意識して、今あるデザインからのパターン展開を考えてみましょう。

【1】レイアウトデザイン

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

参考サイト

【2】文字デザイン

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

参考サイト

【3】配色デザイン

印刷物には「色」を欠かすことができません。白黒の単調なものよりも、いくつかの色を使ったものの方が魅力的ですし、理解を助けてくれることもしばしばあります。ですが、適当に色を選んだり、むやみにたくさんの色を使うことはよくありません。色の正しい使い方を覚えておくと、快適で見やすい発表資料ができます。

参考サイト

第4回成績考査

明日の4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※提出は1パターンで構いませんが、パターン展開ができた方は複数提出していただいても構いません。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎③
ボックスモデルの確認

2限目
学科 レイアウトデザイン基礎③
レスポンシブWEBデザインについて

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

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

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

本日のテーマ

コーディングの準備をしましょう②
ボックスモデルのおさらいが大事です！

Box model のおさらい

Web 開発では、CSS ボックス モデルは、HTML 要素がブラウザー エンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。 ウィキペディア（英語)

ワンポイントアドバイス

ボックスモデルで大切なことは、見た目では無くCSSのコードで記述した数値を頭でしっかり描く事が重要になります。
見た目だけ良ければという考えにならないように気を付けましょう。

参考サイト

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

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

資料・・・
Dropbox / 資料 /【4】コーディング /「マルチデバイス対応の教科書」

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

ワンポイントアドバイス

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

〜 デザインラフのおさらい 〜

デザインラフとは？

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

ワンポイントアドバイス

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

デザインラフの例

制作のポイント

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

参考サイト

第4回成績考査

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