デイトラweb制作中級編　DAY10

2022年5月17日 2022年6月7日

nakano

Webカンプとは

Webカンプ ・・・「コーディングの設計図」のような役割を持つ。

作り方は、AdobeIllustrator・photoshop・AdobeXD・figmaなど様々

Webカンプからのコーディングをする時、

・どんなことに気をつけるべきか

・コーディングに必要な数値や素材の取得方法

を理解することが目的！

作成したWebカンプ（PC版）

※Windowsの場合、fontの「Hiragino Kaku Gothic ProN」は「Arial」

AdobeXDの便利な機能（Windows）

使用したショートカットキー

・つかむ　→　V

・四角形　→　R

・アートボード　→　A

・テキスト　→　T

・もどる　→　Ctrl + Z

・グループ化　→　Ctrl + G

・bold（太字）　→　Ctrl + B

①要素間の距離を測る

↓ の場合、黒色の四角をクリックしてから、Altキー

②コンポーネント

左上のひし形が緑　→　親コンポーネント

親コンポーネントを変更すると、子コンポーネントも変更される
_{→　まとめて変更したいときに便利}

③リピートグリッド

④スポイト

注意点

① 「letter-spacing」の計算方法

XDのAV項目の数値　/　1,000

単位は em

CSSの記述

classを「.Text」としたとき

.Text{ 
  letter-spacing: 0.1em;
}

参考記事

・【XD】 letter-spacingの計算方法ご存知ですか？練習問題とともに解説

②「line-height」

行送り　/　文字サイズ　=　line-heightの値

↑　の画像の場合　①　/　②　=　1.2

CSSの記述

classを「.Text」としたとき

.Text{ 
  line-height: 1.2;
}

どんな文字サイズでも、希望するline-heightの値にしたいとき（式を変形するだけ）

文字サイズ　*　希望するline-heightの値　=　行送り

参考記事

・【XD】 line-heightの計算方法ご存知ですか？練習問題とともに解説

まとめ

今回はAdobeXDを使ってWebカンプを作りました。

独学ではHTNL、CSS、JavaScriptまでしか学習してなかったため、

初めてAdobeXDというものに触れました。

デザインを動かしたり、大きさを変えたりするのが簡単で全体的にとても使いやすいです。

Day10でまとめた機能のほかにも、便利な機能はたくさんあると思うので今度調べてみたいと思います！

カテゴリー: 中級編

デイトラweb制作中級編　DAY10

Webカンプとは