デイトラweb制作中級編 DAY11

作成したWebカンプ(スマホ版)

※基本的にはWeb版と作り方は同じ
①グループ化

②書き出し
デザイナーの方から元の画像を頂ける場合
→ そのまま使う
そうでない場合
→ デザインカンプから書き出す


JPGとPNGの使い分け
JPG ・・・ 写真、四角形
PNG ・・・ イラスト(色数少)、丸形など、透明な部分有り
丸形の写真の場合(JPG?PNG?)

→「JPG」
元の画像(四角形)を書き出して、CSSで丸くする!

③解像度の高い画像を表示
1. 書き出すときにサイズを「Web」にする

2. 「2x」と書かれた画像の方を使用する

④Webカンプの共有(ブラウザ上で)

手順
①「共有」ボタンを押す
②「開発」に変更
③チェックボックスにレ点をつける
④ボタンを押して「作成」または「更新」
共有のメリット
・相手方がxdと契約してなくても共有できる
・パーツが動かないため、要素の確認でラクできる
まとめ
今回はスマホ版のWebカンプを作成しました。
PC版のWebカンプとほとんど作り方は変わらず、そこまで躓くところはなかったです。
しかしDay11ではWebカンプの作成方法だけでなく、
書き出しや共有方法について学習したので、それをつかって後で遊んでみたいと思います!