デイトラweb制作中級編 DAY10

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;
}

②「line-height」

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

↑ の画像の場合  /  = 1.2

CSSの記述

classを「.Text」としたとき

.Text{ 
  line-height: 1.2;
}

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

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

まとめ

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です