マークアップからWebデザイナーへ５つのお願い
NEW
こんにちは。マークアップの胡夢です。
わたしが個人で請けている、外部のWebデザイナーさんから送られてくるデザインデータで、「これだけはやめて欲しい」って事をつらつらと書いてみます(´・ω・｀)ｷﾋﾞｼﾒ
基本的にPSD（Photoshopデータです、一応念のため）を頂いて、そこからマークアップに必要な画像を切り出して使うのですが、毎回苦労する羽目になっておりまして、同じように苦労しているマークアップさんの声をTwitter等で見かけるので、「Webデザインをやるなら、これくらいは知って置いて欲しいなぁ」という内容をまとめてみましたので、記憶に留めてもらえると非常に有り難いです。
お願い【１】レイヤーについて
●レイヤーの結合はホントにヤメテ！
わたしが対応するマークアップ案件はこういったことはほとんど無いのですが、コーディングをしたことがないデザイナーさんでこれをやっちゃう方が居るようです。
Photoshopで「レイヤーの結合」をされちゃうと、例えば「背景用の画像」を切り出したい時に必要なサイズを切り出せなくなったりします。
他にも、psdからテキストデータをコピーして使いたい時、フォント情報を確認したい時などに非常に困ってしまいます。
基本的にWEBデザインは、動かすことを前提に制作して欲しいのです。パーツごとに切り出したり、微調整で動かす場面がコーディング段階で発生するので、これをやられちゃうと一番困るので、レイヤーの結合はホントに辞めてくださいね(TOT)ｵﾈｶﾞｲ
●レイヤーをグループ化して！
最低限「ヘッダ」「フッタ」「グローバルナビゲーション」「メインビジュアル」「メインコンテンツ」この5つくらいには、レイヤーをまとめていただきたいです。出来る事なら、パーツごとにグループ化してもらえると非常に助かります！(・ω・)
少なくとも、デザインする時はある程度領域ごとにまとめてデザインをすると思うのですが、レイヤーが凄く多くなった時に、そのレイヤーがバラバラに羅列されてしまうと、どこのどのパーツなのかを探らなきゃならず、正直、相当、時間のロスになるので、ある程度グループ化してくれているとマークアップに着手しやすいので、お願いしたいと思いますねぇ(TOT)ｵﾈｶﾞｲ
レイヤーのグループ化
お願い【２】ガイドの有効利用
●ピクセルのズレはマジ勘弁！
Photoshopのガイド機能を使っているデザイナーさんが多いのは非常に有り難い。有り難いのですが、せっかくガイドを使っているにも拘らず、ガイドを無視して1ピクセル、ズレてデザインされる方も結構に多いです(´・ω・｀)ｶﾞｲﾄﾞﾅﾉﾆ
例えば、メインコンテンツが「幅：960px」で決められている（らしい）のに、何故か1px大きく作られているとか、パーツが1～2px飛び出しているとか、肝心のガイド自体が0.5pxずれているとかホントに・・・orz ﾔﾒﾃｸﾚ
そして中途半端にshadowが「はみ出して」入っていると、さらに困った事に…。
特にIE7から対応しているマークアップさんは、「これはヤメテ～！」と叫んじゃいますよねぇ(-_-;)
だいたい修正しながら、グチグチ言いながらもマークアップしますけど、あまりに酷い時はデザイナーに差し戻しますので、ガイドと構成案（WF）に忠実にお願いしたいと思いますねぇ(>_<)ｵﾈｶﾞｲ
お願い【３】フォントについて
●フォントサイズの小数点付けないで！
DTPなど紙畑の方とか、Macでデザインされる方、イラレでデザインされる方が、これをされる方が結構多いんじゃないかと思うのですが、フォントサイズに小数点が付いている時があります。
Webでは小数点のフォントサイズに対応してないので、12.18pxなんてフォントサイズでデザインせず、「12px」か「13px」にして欲しいです(´・ω・｀)ｵﾈｶﾞｲ
●フォントサイズはpxで！
point(pt)で設定しているデザイナーさんは特に気を付けてください。
見た目で何とか設定しちゃいますけども、PhotoshopでのフォントサイズとWebでのフォントサイズに差違があるようで、デザイン上でのテキスト表示をWebフォントで設定すると、文章の折り返し位置が全然違う！と言う事が結構あります。
同じpxでサイズ設定していても微妙に違うし、ブラウザによってもピクセル解釈に違いがあるので、さらに注意が必要かも。
●テキスト表示したい文章は基本フォントを。
凝ったフォントでデザインされるのは良いのですが、テキスト表示させたい文章のフォントは、ブラウザ標準装備のフォントで指定してください。重要な文章は特に。
小塚フォントを使われると、画像で切り出すしか対応出来ないです。ヒラギノフォントはMacにしか標準装備されていません。閲覧されるユーザーは、圧倒的にWindowsユーザーが多いので、Windowsにヒラギノフォントは入っていませんから「MS Pゴシック」か、あるいはメイリオでテキスト入力をお願いします(・ω・)ｵﾈｶﾞｲ
お願い【４】幅ぎっちりデザイン
●カラム落ちの原因
2カラム, 3カラムでデザインされる時に注意して欲しいのですが、各カラムを最低限幅10px、できれば20pxはカラムの間を空けて欲しいです。
カラム落ちの簡単な説明
ブラウザによってはクセが有りますので、どうしても隙間を空けないとカラム落ちが発生することがあります。
マークアップで何とか出来る範囲は何とかしてますけど、無理矢理詰め込まれたデザインはかなり厳しいです(;O;)
カラム落ちしそうなデザイン
見た目的にもそれぞれ10px以上空けている方が美しい気もしますし、Webデザインに慣れていない方はデザイン構成時にガイドをある程度引いておくと良いかもしれません。
お願い【５】デザインチェックをきっちりと！
最後に、お願いですからデザイン段階で拡大表示してズレや滲みなど確認してください m(__)m ﾀﾉﾝﾏｽ
出来れば3,200pxくらいに拡大して！
カスタムシェイプで滲みが出来ていると、画像の書き出しに手間がかかってしまいます。
最低限、以上のことをデザイナーさんに気を付けてデザインしてもらえるだけで、マークアップとしては物凄く助かります(*´ω｀*)
これには理由があります。
時間的余裕がある時はいいのです。制作は持ちつ持たれつ。多くのマークアップさんたちも同じ思いでしょう。ですが、実際、多くの案件では大抵、コーディング前の制作過程でスケジュール通り進行せず、そのくせ、納期はそのままで、マークアップにデータが回ってくる頃には納期が迫っているため、少しでも早くマークアップ作業に着手し、集中するためにも、レイヤーの整理整頓やマークアップがデザイン修正をするようなことが無いように、デザイナーさんたちにはお願いしたいと思うのです。
この原因の根源はクライアントの甘いスケジュール感覚や見通しが立てられないディレクター、安請け合いをする営業など、制作の前段階であることは言うまでもありませんが、プロとして請けてしまった以上、それぞれの役割はキッチリ果たさないと、良いサイトにはならないと思うのです。
勿論、Qriousではこんなことはありませんよ<(｀^´)>ｷｯﾊﾟﾘ
ディレクター陣はキッチリ、スケジュールや進捗管理をしますし、クライアント側が原因でスケジュールが遅れる場合は、納期交渉を行いますし、構成が割とキッチリしていますし、事前相談がありますので制作内容はある程度、共有されています。デザインの仕上がりも見事です。
以上、マークアップからのお願いでした(´・ω・｀)ｵﾈｶﾞｲ