-本日のアジェンダ-
1限目
実技 ECサイトデザイン実習⑤
デザインラフ制作に向けて
●復習XDについて
・デザイン
・プロトタイプ
・共有
タブで切り替えられる
左下には
・ライブラリ（アセット）
・レイヤー
・プラグイン
がある
・マスク
四角など作って写真をフォルダからドラッグドロップ→マスクできる
・リピートグリッド
リピートしたい画像をクリック→右上のリピートグリッド→リピートしたい方向へ伸ばす
ピンクの隙間を操作し隙間を一気に変更もできる
グリッドをグループ解除でリピート終えられる
・グリッドの出し方
アートボードWクリック→右のパネルに出てきたレイアウトにチェック
列 12
段落幅 自動
列の幅 自動
マージン 計算
横幅-コンテンツ幅=a
a÷2=計算結果
例：1280-960=320
320÷2=160
・フォトショファイルをXDで開く
ファイルを開く→psdファイルを選べばよい。
・XDでローカルに保存
通常の保存ボタンやCtrl Sからだとクラウドに保存しか出てこない。
→ファイルからローカルに保存を押すか、shift ctrl alt sでローカルコンピュータに保存できる。
2限目
実技 ECサイトデザイン実習⑤
XD実践
3限目
実技 ECサイトデザイン実習⑤
XD実践
4限目
実技 ECサイトデザイン実習⑤
課題制作
5限目
実技 ECサイトデザイン実習⑤
課題制作
本日のテーマ
コーディングの準備をしましょう。
Web用画像について
「jpg」「gif」「png」「svg」について
まず悩んだら「jpg」、透過表現を必要とするなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」＝複雑な画像は重たくなるので条件次第で使う。
と良いでしょう。
本日の課題
デザインラフを製作しましょう。
できたところまでのデザインラフをポートフォリオサイトに投稿しましょう。
本日学んだこと
XDの基本の使い方
デザインカンプについて
感想
本日はデザインカンプの作成を行いました。
ワイヤーフレームに比べて圧倒的に時間がかかりました。
なんとか今日の授業内で完成してよかったものの、このあとHTMLやCSSで再現するのが大変そうだなとも思っています。
なんといっても配置が難しいなと思いました。
ワイヤーフレームの段階でざっくりとした並びは決めていたのですが、実際に載せてみるとうまく整列ができず少し違う配置になってしまい苦戦しました。
ワイヤーフレームの段階から内容量にあった配置を考えられるようにしたいです。