Webデザイン・マーケティング課 授業26日目

1-3時間目
プロトタイプwebデザイン

使用テキスト

Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

P187〜P222

■フッターのデザインを変更する

SP版のフッターのデザインを、PC版に変更する。特に注意する点はなく、コンポーネント内のオブジェクトの、幅の固定のチェックと、左右に固定のチェックを外すのを忘れなければOK。

■デスクトップ版のデザインを作る

キービジュアルを大きくし、コンセプトの文字を中央に配置する。

その後、よくある質問とオリジナルショップのデザインを変更する。

製品一覧は、リピートグリッドを維持したまま縦並びを横並びに変える。ここが少し手順的には難しいが、ゆっくりやれば問題ない。

以降、同じ要領で下層ページの分も作っていく。特に新しいことは無いので、ここでは割愛。

■画像の書き出し

デザインデータからコーディングに使う画像を書き出す。

まず、XDでデザインする前の、オリジナル画像を使える場合はそれを使う。

・書き出し対象を書き出し。

画像の比率などを変えたものは、XDから書き出す必要がある。
該当の画像を選択し、プロパティから書き出し対象にするをチェックする。

その後、「ファイルー＞書き出しー＞全書き出し対象」を選択し、2倍サイズのjpgで出力。

・画像を選択して書き出し

画像を選択して書き出すこともできる。

書き出したい画像を選択して、「ファイルー＞書き出しー＞選択したオブジェクト」をクリック。
サイズなどを設定して書き出せる。

■まとめ

デザイン部分に関しては、特に新しいことは全くなくなりました。

書き出しに関しては、特に選択して書き出せる機能が便利なので、覚えておきたいですね。