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

学科 レイアウトデザイン基礎④【オンライン】

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎④
デバイスについて

2限目
学科 レイアウトデザイン基礎④
各デバイス検証について

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

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

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

本日のテーマ

デバイス検証は最後にしっかりと

デバイスとは？

ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。

【資料】

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

下記のファイルをダウンロードしましょう。
「各デバイス検証.pdf」　

【動画】「各デバイス検証」

実機検証 について

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

ワンポイントアドバイス

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

参考サイト

本日の課題

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

学科 レイアウトデザイン基礎③【オンライン】

-本日のアジェンダ-

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

2限目
学科 レイアウトデザイン基礎③
各ブラウザ検証について

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

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

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

本日のテーマ

ブラウザ検証についてです

ブラウザとは？

ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。

【資料】

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

下記のファイルをダウンロードしましょう。
「各ブラウザ検証.pdf」　

【動画】

ワンポイントアドバイス

サイトが一通り形になったら特に使用する可能性の高いブラウザは必ず確認しましょう。

参考サイト

本日の課題

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

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

これからの時代マーケティング能力は必須！

デザイナーだけではなく様々なお仕事でマーケティング能力が高い、意識が高いというのはどんなビジネスにおいても求められる能力です。
就職活動は、努力や苦労した分だけ、一歩踏み出した分だけその後のお仕事と未来への自分へ帰ってくるでしょう。
やっぱり就職活動は大変です！！
ですがこれを乗り越えたら次の未来が待っています。
自分のペースで良いと思います。焦らず、少しでも前に進んでいきましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
「マーケティング「結局マーケティングって」.pdf」　

【動画】

学科 レイアウトデザイン基礎②【オンライン】

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎②
RWDの歴史・基本設定Viewportについて

2限目
学科 レイアウトデザイン基礎②
Media Queries・UI/UXについて

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

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

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

本日のテーマ

スマホ対応はCSSの延長線です。

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

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

【資料】

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

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

【動画】「マルチデバイス対応の教科書②」

ワンポイントアドバイス

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

参考サイト

本日の課題

ワイヤーフレームからデザインラフの作成に向け、世の中のサイトを参考に情報収集しながらレイアウトやキャッチコピー、文書を考えておきましょう。
手書きでメモしておくと良いです。

学科 レイアウトデザイン基礎①【オンライン】

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎①
Webサイト・LPについて

2限目
学科 レイアウトデザイン基礎①
ワイヤーフレームについて

3限目
学科 レイアウトデザイン基礎①
レイアウトのポイントについて

4限目
学科 レイアウトデザイン基礎①
制作に向けての準備

5限目
学科 レイアウトデザイン基礎①
制作に向けての準備

本日のテーマ

Webサイト制作にあたり、まずはワイヤーフレームの制作のコツを学びましょう。

【資料】

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

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

【動画】

LP（ランディングページ）とは？

ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 ウィキペディア

参考サイト

ワンポイントアドバイス

未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。

ワイヤーフレームとは？

ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。単に「ワイヤー」と呼ぶことも多いです。

参考サイト

ワンポイントアドバイス

ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。

制作のポイント

・使用ソフトはPhotoshopです。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・まずは色を入れず、白黒で制作しましょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える 手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。

本日の課題

ワイヤーフレーム作成に向けての準備

白黒のワイヤーフレーム作成に向け、世の中のサイトを参考に情報収集しながらレイアウトを考えましょう。
手書きでメモしておくと良いです。
明日のWEBデザイン実習①から実際に作成します。

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

ここからは応募する企業を意識してとにかく作りましょう！

◆デザインスキル向上のコツ
1.自分なりに作る（価値観）
2.徹底的に真似る（理解度）
3.オリジナルに昇華する（応用力）
◆面接に通るポートフォリオの特徴
・顔を出しましょう！
・とにかく強みをアピールしましょう！
・経験を徹底的にアピールしよう！
◆人材力をアピールすべきポイント
・はやい「速い」「早い」
・やすい「安い」「易い」
・うまい「旨い」「上手い」

【資料】

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

下記のファイルをダウンロードしましょう。
「ポートフォリオ「応募編」について.pdf」　

【動画】

ポートフォリオ「応募編」について (6:10)
応募する企業に合わせてポートフォリオを仕上げていきましょう
https://youtu.be/0rB1IFmouuI

「Webデザイナー2名募集」の例 (2:50)
https://youtu.be/tcoeEJcOl5o

選考通過率から考える目標応募数 (2:53)
https://youtu.be/CMnY449kSmo

面接に進むポートフォリオが必ずやっているポイント (12:21)
https://youtu.be/7GVXn3kAeEs

ポートフォリオ構成のポイント (6:40)
https://youtu.be/3W-bgoXSi3M

企業が求めている人材 (12:41)
https://youtu.be/pDXSMMmAIs4

デザイナーというお仕事の先にあるもの (5:30)
https://youtu.be/JjAKXUPgbss

まとめ (4:52)
応募企業を意識したポートフォリオ制作を！
https://youtu.be/_0kLzZrW49k