M
miki
デザインを考える上で必要になるコーディング知識②
2026年10月21日
要約
- Figmaの要素情報を基に、カラーや文字間隔を数値で管理してコーディングする。
- 文字間隔は計算しやすく誤差の少ない%表記にし、タイトル構成はSEOを意識して設計する。
- Webデザインでは、ユーザー導線やSEO、Web上で実現可能な機能・要件まで考慮する。
現在のワイヤーフレーム製作はfigmaが多い
figmaの右部分に要素が表示されるので、そこを読み取りコーディングをする。
コーディングの際は、カラーコード、文字の間なども
なんとなくではなくピクセルや%で数字として管理をする。
※web上で文字を表示させるには、画像で貼り付けするか
コーディングで入力する必要がある。
※文字の間は%表記を意識する。
→40、50などの数字のみの場合はコーダーが計算する必要があるため、
手間を省いたり誤差が出ないためにも%表記の方が良い。
(行間÷文字数×100%=%)
※デザインをする際はタイトル構成を意識する。
→SEOに弱くならないように
※webサイトのデザインは、ユーザーに対して導線のデザインやSEOで評価されやすいデザインにする
※web上で表現できるデザイン
→web上で機能や要件を設定することがwebデザインと言える
