サイトのデザインからコーディング作業に移る際に、どこにどのくらい余白が空いているかを確認するためのレイアウトのメモのような物を用意していますか？
私はしない派。デザインの段階では感覚で余白を取り、コーディングの際に確定させます。
ありがとうございます！
PSでデザインする際にガイドを使って余白は決めてます。
Photoshop で制作していますが、初期の段階は感覚で配置。css で float 等させることが明白な部分については、あらかじめ計算しておきます。なるべくコーディング作業で調節できるように工夫します。
追記です。最初から全体の幅とか、ナビゲーションの幅、余白の取り方などをイメージしながら作業を進めているので、メモを取らなくても覚えている場合が多いです。
コーダーなので、PSDとかもらってからが作業な為。とりかかる時に、ボックスサイズと余白のサイズを確認し…、そんでウチのデサイナーはわりと余白などは不統一なので、コーディング時にサイズ設計を再調整します。もちろん、デザイナーに最終確認は取りますけど。
デザインpsdを作成する段階で余白を確定、psdに忠実に再現（ピクセルを図って）します。
同じく余白はデザインする時点で決めます。余白の数値は付箋にメモ、コーディング作業中ディスプレイに貼っておきます。
そんなときのmonosashipixですよ！（ ＾ω＾）
ありがとうございます！今使っているパソコンがmacなので「ものさしpix」はインストールできなかったですが、「ものさしpix」の機能に似た「Pixel perfect」というmac対応のソフトがあったのでインストールしてみました！
FirebugのプラグインでPixelperfect（うろおぼえ）ってプラグインがあったと思うので、昔はそれ使ったりしてました。デザイン画像を半透明にして重ねれるツールです。
Expression Web SuperPreview使ってます。めちゃくちゃ便利だけどあんまり流行ってなさそう。
fireworkでガイド線を取り出してきて、shiftを押す。png形式なのでfireworkがなくても、見れるちゃ見れる。
みんなの回答 10 件
私はしない派。デザインの段階では感覚で余白を取り、コーディングの際に確定させます。
PSでデザインする際にガイドを使って余白は決めてます。
Photoshop で制作していますが、初期の段階は感覚で配置。css で float 等させることが明白な部分については、あらかじめ計算しておきます。なるべくコーディング作業で調節できるように工夫します。
コーダーなので、PSDとかもらってからが作業な為。とりかかる時に、ボックスサイズと余白のサイズを確認し…、そんでウチのデサイナーはわりと余白などは不統一なので、コーディング時にサイズ設計を再調整します。もちろん、デザイナーに最終確認は取りますけど。
デザインpsdを作成する段階で余白を確定、psdに忠実に再現（ピクセルを図って）します。
同じく余白はデザインする時点で決めます。余白の数値は付箋にメモ、コーディング作業中ディスプレイに貼っておきます。
そんなときのmonosashipixですよ！（ ＾ω＾）
ものさしpixのダウンロード : Vector ソフトを探す！
http://www.vector.co.jp/soft/dl/winnt/util/se282130.htmlFirebugのプラグインでPixelperfect（うろおぼえ）ってプラグインがあったと思うので、昔はそれ使ったりしてました。デザイン画像を半透明にして重ねれるツールです。
Expression Web SuperPreview使ってます。めちゃくちゃ便利だけどあんまり流行ってなさそう。
fireworkでガイド線を取り出してきて、shiftを押す。png形式なのでfireworkがなくても、見れるちゃ見れる。
関連するトピックス