カテゴリー: その他

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

-本日のアジェンダ-

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サイトを制作できます。

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

【資料】

Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP3】/Webページの理解/「マルチデバイス対応の教科書①.pdf」・・・資料①【STEP4】/Webページの制作/「マルチデバイス対応の教科書②.pdf」・・・資料②

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

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

ワンポイントアドバイス

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

参考サイト

Viewport とは？

viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。

ワンポイントアドバイス

viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。

参考サイト

Media Queries とは？

メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。

ワンポイントアドバイス

メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。

参考サイト

本日の課題

ワイヤーフレームから「デザインラフ」の作成に進み、
5限目終了時にポートフォリオサイトにUPしておきましょう。

学科 安全衛生 学科 就職支援

–本日のアジェンダ–

1限目
学科 安全衛生
データの管理方法と取り扱いについて

2限目
学科 就職支援
自己紹介について

3限目
学科 就職支援
自己紹介について

4限目
学科 就職支援
自己紹介の準備

5限目
学科 就職支援
自己紹介の準備

本日のポイント

ご挨拶について考えてみましょう

最初の準備として

【授業が終わったら…】PCは必ずシャットダウンをして「電源が切れたのを確認してから」モニターを閉じてください。

ジョブカードについて

ジョブ・カードとは、以下のとおり、「生涯を通じたキャリア・プランニング」及び「職業能力証明」の機能を担うツールであり、個人のキャリアアップや、多様な人材の円滑な就職等を促進するため、労働市場インフラとして、キャリアコンサルティング等の個人への相談支援のもと、求職活動、職業能力開発などの各場面において活用するものです。

様式1－1の作り方・考え方

価値観、興味、関心事項等
（大事にしたい価値観、興味・関心を持っていることなどを記入)

Webサイトを作れるようになった時の、過去の自分自身の武器やを考えてみましょう。

強み等
（自分の強み、弱みを克服するために努力していることなどを記入）

Webサイトを作れるようになる為の、現在の取り組みを考えてみましょう。

将来取り組みたい仕事や働き方等
（今後やってみたい仕事（職種）や働き方、仕事で達成したいことなどを記入）

Webサイトを作れるようになった時の、未来の目標を考えてみましょう。

これから取り組むこと等
（今後向上・習得すべき職業能力や、その方法などを記入）

Webサイトを作れるようになった時の、未来への課題を考えてみましょう。

その他
（以上から、自己ＰＲやキャリアコンサルティングで相談したいことなどを自由記入）

以上の「過去」「現在」「未来」を自己分析し1％でも不安とイメージが出来ない事をその他に挙げてみてください。

ジョブカードについて

第1回キャリアコンサルティングの日までに作成し持参してください。

・様式1-1.xlsx　キャリア・プランシート(表面)（裏面）
・様式2.xlsx　職務経歴シート
・様式3-1.xlsx　職業能力証明（免許・資格）シート
・様式3-2.xlsx　職業能力証明（学習歴・訓練歴）シート

※データで作成しご自身で印刷して持参してもOKです。
※持参していない場合はキャリアコンサルティングを行えないのでご注意ください。

参考サイト

履歴書とは？

履歴書とは、学業や職業の経歴など人物の状況を記した書類のことで、就職や転職時に選考用の資料として用いられる。また、学歴や職歴によって給与や資格などを決定する手続きにおいて、それを証明する各種の書類とともに提出する。 ウィキペディア

参考サイト

職務経歴書とは？

職務経歴書は、当人が過去に従事した職務・職業上の地位、および当該職務の具体的内容を、当人の職歴として時系列的またはキャリア、プロジェクトタイプなどをベースに記載した書面のことで、第三者に提示するために使用され、時として履歴書とともに使用される。 ウィキペディア

参考サイト

自己紹介

自己紹介とは、初めて会う人などに、姓名・職業などを述べ自分が何者であるかを説明すること。 普通は“よろしく”という挨拶の意を兼ねる。その方法は大勢の前での口頭によるもの、名刺を差し出して行うもの、電話で自分の所属・地位・名前を述べるものなど様々である。 ウィキペディア

ワンポイントアドバイス！

自己紹介（他己紹介）では、冒頭で簡潔に「現在」「過去」「未来」を入れてみましょう。