Author Archives: ake_nyanko

普段はDTPをメインにやっていて、たまにWebのデザインもするというデザイナーさんは、
IllustratorでWeb用のデザインカンプを作ることが多いと思います。
別にIllustratorからでもコーディングはできるのですが、後工程の人を困らせないために、
ちょっとだけ気に留めておいて欲しいことがあります。

１．色モードはRGBで。
普段DTPをやっているとついCMYKモードのままで作ってしまうことがあるかもしれません。
でもWebはRGBの世界です。変換すると意図した色にならなかったりしますので、
最初からRGBで作ってください。埋め込む画像も同じです。

２．どこがデバイスフォントなのか分かるように指示を。
紙の世界では文字は文字でしかありませんが、Webの世界では「テキストデータ」にするのか
「画像」にするのか決めなければなりません。本文は原則「テキストデータ」ですが、
判断に困るのは「見出し類」と「ナビゲーション・ボタン類」です。
見出し　　こんなのとか

見出し　　こんなのとか

メニュー | メニュー | メニュー |　　　こんなのとか

「テキストデータ＋CSS」で表現出来ちゃうような見出しをイラレで作られちゃうと、画像にしたいのかテキストでいいのか判断にとても迷うので、できれば最初から分かるようにしておいてもらえると助かります。
デバイスフォントだけ別レイヤーにしておくとか、赤字レイヤーで指示入れておくとか。手段は何でも構いません。画像なのか、テキストなのか、そんなことで頭を悩ませなくてもいいようにしておいて欲しいのです。

３．ロールオーバ時のデザインも作って下さい。
紙と違ってWebはユーザーさんが欲しい情報を見るためにコンテンツをクリックします。
そうしたクリック可能な部分をユーザーさんにはっきり示すために、カーソルが乗った時のデザインが必要です。
シンプルなテキストリンクから、ナビゲーションバーや凝ったボタン類まで、クリックできるものに関しては「通常時」のデザインと、「ロールオーバー時」のデザインを両方用意しておいてください。
ロールオーバー用の画像は、それだけをまとめて別レイヤーにしておいてもらえると助かります。

４．単位は「ピクセル」、すべて整数で。
Webデザインは「ピクセル」が基準単位です。是非、Webデザインを作るときにはピクセル単位で作成してください。そして、何か数字でサイズや位置を指定する時、小数点の数字は使わないでください。パソコンのモニタでは1pxより小さいドットは打てません。小数点で指定されたものはとなりのピクセルにまたがって滲んでしまいます。
数値は全て整数で指定してください。お願いします。

５．白でもボックスには「塗り」を設定してください。
紙なら「白」＝透明　ということで何も設定しなくていいところですが、Webは「白」≠「透明」です。
イラレで作ったデータをPhotoshopに持って行くと、塗りが設定されていないところは全部透明になってしまいます。塗りが無いとPhotoshop上で効果が付けられません。ナビゲーションパーツやボタン類の作り込みをする時に塗がないと結構困ったりします。

６．テキストデータは原則として文字組できません。
画像化するテキストは存分にツメでも組みでもやっていただいて構わないのですが、デバイステキストで表示する部分にイラレ上で細かい文字詰めなどの処理をしないでください。Webは紙のDTPと違って画面上での文字組処理がとっても苦手です。苦手というか、ほぼ出来ません。時間をかけて美しく文字詰めしてもらっても、ブラウザの上ではベタ組み成り行きでしか表示できないので、たぶんとてもがっかりします。禁則処理もジャスティファイもできません。諦めてください。ごめんなさい。

７．文字サイズも枠のサイズも「可変」だと意識してください。
DTPとWebのデザインで一番違うのは、多分ここだと思います。テキストデータ状態の文字のサイズは、ユーザー環境でいくらでも変わってしまいます。決まったサイズの枠の中にテキストを確実に収める手段は無いと思ってください。もし文字サイズが大きくなったり、コンテンツ量が増えたりした場合、それを収めているHTMLの枠は縦方向に自動的に伸縮します。作り方によっては横方向のサイズも可変にすることだってできます。DTPのように固定サイズの枠の中にギュウギュウに詰め込むことができない代わりに、Webでは枠のサイズそのものを無限に広げていくことができます。
何が言いたいかというと、「可変コンテンツ（テキスト等）が入る予定なのに、固定サイズを前提としたデザインをしないで欲しい」ということです。こればっかりはどうにも出来ません。HTMLもCSSも万能には程遠いので、出来ないことはできないのです。それ以外のことなら大抵のことは何とかします。でもこればっかりは勘弁してください。お願いします。

いろいろうるさく言いましたが、こういう細かいことにちょっと気を使ってもらえるだけで、コーダーはとってもハッピーになれます( ´∀｀)　お互いに気持ちよくお仕事するために、是非ご協力ください。

Web制作の現場というのはとにかく実力主義であって、
資格なんかはっきり言って何の役にも立たないのは重々承知なのですが、
ちょっと思うところあってAdobe公認エキスパート（ACE）の試験を受けてきました。
科目はDreamweaver。
この認定資格、とにかく情報がないのが特徴。
難易度も合格率も過去問も非公開。受験する時に「試験内容を口外しない」と制約させられるので
ここでも内容については言及できません。
Webスクールでも他の資格みたいにACEの資格取得コースみたいなのはほとんどやっておらず、
唯一の情報はAdobe公式の試験情報のみという状態。
というわけで、受験しようと思ったときにまず困るのは、
「何をどこまで勉強したらいいのか分からない」
ということです。私もかなりそこで困ったわけですが、結局「Adobeのオンラインヘルプを全部読んで触ってみる」という方法を取りました（苦笑）
まがりなりにもWeb制作にかかわって10年以上、Dreamweaverも6～7年は使ってます。
日々の業務をこなすには何の支障もない状態。今更スクールとか通うのもあり得ないし、模擬問題見る限り内容自体は「広く浅く」という感じなので、独学でなんとかなるかなと思ったのがその理由です。
で、３日くらいかけてザザッと試験範囲の機能をおさらいし、サクッと受験してきました。
結果は・・・・あと１問足りず惜敗！！！（＞＜）
Dreamweaver使っているとはいえ、
・基本的に手打ちコーディングなのでデザインビューはほとんど使わない
・一人で作業することがほとんどなので共同作業を前提とした機能は必要ない
・新規スポット案件が多く、作って納品して終わりなのでテンプレートやアセット管理もあまり使わない
とまぁ、「Dreamweaver使ってる意味あんの？」的な使い方しかしてなかったのがそのまま点数に反映されておりました(；´Д｀) ああ、、、もう少し時間かけてちゃんと復習してから受験しておけば・・・・・orz
ま、後悔しても仕方がないので、もう一度弱かったところをちゃんと復習して、今月中にリベンジしてきます。
これからもし受験してみようかなと思っている方にアドバイスできることがあるとしたら、
・全ての機能を隅から隅まで網羅して暗記している必要はない。
・さほど深い内容は聞かれない。
・しかし、ある程度ちゃんと日々の制作で使い込んでいないと分からない問題が多い。
ということでしょうかね。
単純にリファレンス本の機能を暗記するだけではなく、「その機能が何に役立つのか？」「制作上の様々なシーン・状況で、DWがどのような挙動をするか？」といった点に注意してよく観察する必要があるな、と感じました。そういうことはリファレンス本とかには基本的に載ってないので、やはり「とにかく使い倒す」<のが先決かと思います。実技試験を伴わない選択式の試験にしては、その人の製品に対する理解をよく判定できるようになってるな、と感じました。
しかし、、、あと１問。悔しい～～～！