-本日のアジェンダ-
1限目
学科 スマートフォンサイト制作基礎
デバイスについて
・デバイス検証
①まずは、Chromeのデベロッパーツールを活用しましょう。
「Ctrl + Shift + i」または「F12」キー(Macの場合は「option
command + i」)でデベロッパーツールを表示
②実機のデバイスで確認を行って、確認作業をしましょう。
また、可能性のある実機は出来るだけ確認をしてみましょう。その上でクライアントさんと確認を行っていきましょう。
現在、スマートフォンやタブレットなどPC以外のWebのスマートデバイスへの対応は、「(Webの) マルチデバイス対応 」や「(Webの) マルチスクリーン対応 」と呼ばれます。
【作成(納品)の注意点】
・必要に応じてクライアントへ報告
・ポートフォリオサイトへの掲載も効果的です。
2限目
学科 スマートフォンサイト制作基礎
各デバイス検証について
まずワイヤーフレームでHTML組む
レスポンシブ対応する
デザイン要素を入れる
3限目
学科 スマートフォンサイト制作基礎
課題制作
4限目
学科 スマートフォンサイト制作基礎
課題制作
5限目
学科 スマートフォンサイト制作基礎
課題制作
本日のテーマ
デバイス検証は最後にしっかりと
ワンポイントアドバイス
サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。
本日の課題
提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。
本日学んだこと
マルチデバイス対応について手順
あくまでも検証ツールで見れるのはシミュレーション
実機での検証も大切
レスポンシブ対応には固定力の開放が大事
HTML/CSSを組む時まずワイヤーフレームから組むことを意識するとよい。
感想
本日はレスポンシブ対応の検証について学びました。
以前一度授業でレスポンシブ対応のやり方について学びましたがだいぶ忘れている部分もあったので改めてLPサイトを作成する際も意識しておきたいと思います。
一方でどちらかというと細かい部分が気になって手が止まってしまうタイプではあるので、頭の片隅にレスポンシブ対応のことを入れておきつつ、まずは大枠を作っていけるようにしたいです。
