これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方

デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン

[coliss]

WebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方。

[gomentic]

こんな丁寧に作る工数をもらってない

[kijtra]

複数行のテキストで長い場合は省略って簡単に言いますけどね…レスポンシブじゃ難しいんすよw

[aoiasaba]

仕様書

[anfangd]

わかりやすそう

[sippo_des]

工数次第よねー

[misarine3]

自分で作れても自分で作ったら現場が動かないんよ。繰り返すことで指示だしを以下に効率的に的確に行う必要がある。

[xprxcsgwj]

SketchからZeplinに、そしてFigmaに

[fujibay1975]

もはや自分で書けと

[oyssi]

コレめっちゃいいな。レスポンシブの表現上手いからマネしよ

[spark7]

ここまで分かってるなら自分で作れるな。デザイナーからコーダーへの指示って事なのかね。

[Shinwiki]

仕様書作る手間で自分で書いた方がはやいくらいになってる気がする。

[miguchi]

“Figma”