食このブログは2019.10.07紙媒体DTPデザイナーがウェブデザインをするための10の心得タグウェブを勉強する今まで紙媒体のデザインを中心にやってきたけど、最近お客様からウェブサイトも作ってほしい、という要望が増えてきていて......というデザイナーさん。私の周りでもそういう方、最近多いです。紙媒体のデザインもウェブデザインもそんなに変わんないでしょ?って思っているとしたら、それは違うよ。考え方を中心にまとめてみました。イラレでやっていいよまずはじめに、デザインカンプを何で作るか?イラレでやっていいよ!もしあなたがイラレが好きなら。レイアウトを組むのにはイラレのほうが便利で間違いない。そのためのツールなんだから。ウェブは絶対にPhotoshopで作るべき!とかって非難してくる人たちはど素人だからほっといていいよ。どっちでもだいたい同じようなことができます。単位px、色RGB、ピクセルを滲ませるなイラレでもフォトショでもいいけど、次のことだけは必ず守るようにしてください。これはググればいっぱい出てくることだから簡潔に。単位はpxで(mm、ptになっていないか?ドキュメント設定を確認)色はRGBで(ドキュメント設定、配置画像も)オブジェクトの位置、サイズはぴったりのpx数で表されるようにする。pxに小数点以下の値をつけない(画像ボケの原因。スナップ機能やカーソル移動値を使う。アートボードの位置&サイズもチェック)文字サイズは13〜16pxが標準。11pxを下回るサイズは使わないpxというのはモニタの一個の点を指す単位なんで、0.5pxなんてものはそもそも存在しません。アプリケーション上では入力できちゃうけど。イラレの「変形」パネルをいつもチェックしておこう。レティーナディスプレイのことを忘れるなめっちゃかんたんに言いますと「スマホ表示用に、2倍のサイズの画像が要る」って覚えておいてください。対応してない画像をiPhoneなどのレティーナディスプレイで見ると、な〜んか解像度低いぼやけた感じになりますので、コーディング担当はそのへんはちゃんと考えて作業するはずです。デザインカンプじたいは、そのままのサイズ(例えばスマホなら幅480pxとか)で組んで大丈夫です。ウェブ用に画像を書き出すときにイラレの場合は「アセットの書き出し」パネルを使います。これで1倍と2倍の書き出しを一度にできます。紙は印刷してしまえば固定の大きさです。ウェブは、ありとあらゆる端末でアクセスされます。見ている人がどんな大きさで見ているか、作る側はまったく把握できないしコントロールできない。それを知っておくこと。320px......スマホ用768px......タブレット端末用1280px......Mac,PC用みっつも作るの?って感じだけどポイントは、同じ内容を違う画面サイズで見たときどう見えるか、なのでそこまで手間にはならないはずです。逆に色が大幅に変わったり劇的に形が変わったりしたらおかしいからね。CSSでできることを知れCSS(カスケーディングスタイルシート)は、見た目の制御をする記述です。あなたの作ったデザインカンプを、ウェブ上に再現するべくコーディング担当者が書くのがそれです。CSSは、じつはかなりのことを表現できます。グラデーションカラーの角丸ボタン、なんていうのも昔は画像を用意しなくては再現できなかったのが、今はCSSだけでできたり。CSSだけで再現できると何が嬉しいかというと、書き出す画像が少なくて済む。逆に、見出しやちょっとしたあしらいを何でもかんでも画像で再現させようとすると、後が面倒くさいのです。複数の画面に対応させなければならなかったり、ちょっとだけ色を変えたくてもそのために新たに画像を書き出す必要があるからです。画像を作らなくてもいいところはそうしましょう。すればあなたもコーディング担当者もラクだし、ウェブサイトの容量も軽くできてお客様も万々歳です。そのために、どういうのならCSSで作れるのかを知っておこう。コーディング担当にデザインファイルを渡すとき「ここはCSSでやって」って伝えよう。画像やオブジェクトを半透明にする背景にグラデーションを使う四角形の塗りをグラデーションにするいくつかの要素をレイヤーのように重ねる(3,4つ)CSSでできないこと次の例なんかはDTPデザイナーさんが自然に使ってしまいそうな表現じゃないでしょうか。これらはCSSではとても再現しにくい(今のところ)ので画像で置き換えるしかない。罫線で囲った吹き出し透明は透明でも「乗算」「オーバーレイ」など(イラレフォトショでいうところの「通常」しか使えない)無理ではないんだけど、一部のブラウザが対応してないので実質使えなかったり、CSSではかえって面倒だったり、てのもあります。デザイン上どうしても外せないものは仕方ないですが、本当に必要か検討しましょう。フォントが限られていることを知れ紙もののデザインではMacに入っているフォントをどれでも自由に使えるけど、ウェブではそうはいかない。持っているフォントの種類は見ている人のコンピュータによって違うから、基本はシステムフォントしか使えないと思ってください。基本じゃないフォントを使いたい場合は、そのフォントのデータそのものを組み合わせてウェブ上に提供してあげないと、見ている人が再現できません。ウェブフォントとして使えるフォントは限られているし、ウェブサイトの動作も重くなる。覚悟(と相談)の上で使ってください。詰め込むな「縦30mm、横50mmの中に文字を全部収める」ようなことを常日頃やっていた人は、ウェブではもうちょっとゆったりしていいよ。「この中身はここまでに収めたほうがいいな」みたいなこともあるんですが、より余白を持たせること、ゆったりさせることを意識したほうがうまくいきやすいと思います。横書き文章の行送りも、印刷では135%くらいが標準ですが、ウェブでは160%とかときには200%くらいがふつうです。それと、画面全体が縦に長くなってしまうことはほとんどの場合、全く気にしなくて大丈夫です。長いことはいいことだ的なセオリーも場合によってはあるくらいで。してもこの枠内に収めないと!ぎゅうぎゅう!文字めっちゃ小さくしよ!......という考え方はウェブではNGです。Googleボットもそういうところチェックしに来るしね。文字の折り返し位置は制御不能と知れ読みやすいように、文章に合わせて改行を入れていくのは印刷のデザイナーさんがナチュラルにやることですが、ウェブではそれは基本、NG行為って思ってください。文章やコピーが中途半端なところで折り返されても、それはそういうものとして受け入れます。折り返しても変じゃない文章にします。文字の大きさ、フォントによる幅の違い、どちらも制作側はコントロールできないからです。文字の大きさなんて、訪問者がブラウザで自由に変えられるしね。そもそも誰がどんな端末で読むかなんてわからないしね。気を遣って細かく改行を入れた結果、たぶんどれかの端末ではめっちゃ読みづらい見た目になってます。いうのウェブではめっちゃ嫌われるんです。お客様が「ここで折り返して欲しい」みたいな指摘をしてくることもあるけど、できかねますってちゃんと言ってね。長体、字詰め、均等配置を使うなウェブでは、フォントの細かい制御はできないと思ってください。えもできないので使わないでください。いちおう字間の調整はCSSの機能でありますけど、前述の文字折り返しとかサイズとか、あるいはブラウザごとの解釈の違いなどいろんな事情があって完全制御は難しいので、できるけどあんまり使いたくないもの、って感じです。デザインと設計は別モノと知れ「ウェブデザインってのはデザイナーが考えるかっこいい表現をいくらでも自由に作って良くて、それを何とかして再現するのがコーディング担当の仕事」みたいな考えは捨てましょう。それやるとだいたい、クソサイトができあがります。ウェブにおいては、デザイナーらしい「自由にクリエイティブに表現する」みたいな態度はあまり喜ばれません。なんでかっていうと次のとおりです。ウェブサイトってそのほとんど全てが、何かしらの広告的役割を期待して生み出されます。そこでのひとつのゴールは、閲覧者がアクションを起こしてくれる(商品を買ってくれるとか、問い合わせをしてくれるとか)ことです。かっこいいデザインを作ったからって、閲覧者がアクションしてくれる=売上が向上するかというと、別にそんなことないんです。かっこよさにこだわればこだわるほど余計なコードが増えるので、閲覧者から見ると重い・遅い・うっとおしいサイトになりがちです。見た目はかっこいいけど集客効果が全くなくてしかもウザいウェブサイトなんて、誰も望んでません。したらありがたがられるサイトを作れるのかというと、戦略を考えなきゃいけません。閲覧者がアクションを起こすのにはこういうコンテンツをこう配置すべし、という心理作戦ですね。誰が見て触っても問題なく使える設計も必要です。紙中心の経験しかないデザイナーさんに戦略や構造まで考えろというのはコクだと思います。できれば、ウェブに精通したディレクター的立場の人に素案を書いてもらって(ワイヤーフレームって言います)、それに味付けをする感じでデザインを考えてください。お客様は素人考えで「ウェブでもチラシでもそんな変わんないでしょ、とりあえずデザイナーに頼めばいいんでしょ」って適当に思っていらっしゃることが多いです。いうか悲しいことにデザイナーさん自身もそう思ってたりしますが、ナメんといてください。そこにはウェブ独特のセオリーがたくさんあります。周りに全くウェブ経験者がいないのにウェブデザインを引き受けることになった場合、そしてそれが続きそうな場合は、腹をくくってウェブの考え方を勉強したほうがいいよ。[独学?スクール?資格?]ウェブデザインスクールの選び方。[独学?スクール?資格?]関連記事クリエイター丙についてこんにちは、鯛のマークのクリエイターブログです。クリエイターさんやフリーランサーさんに向けて書いています。IllustratorのTipsです。そのほかウェブのこと、WordPress、仕事術、旅行やゲームや趣味の話も雑多に取り扱っています。あなたのお役に立てれば嬉しいです。@creatorHeyこのブログについてこんなこと聞きたい。著書「Illustratorおいしいネタ事典」、イラストレーターさんの仕事を増やすウェブサイト制作サービス「いしつく!」代表など。[アウトドア料理]40代で運転免許取得してみた。[独学?スクール?資格?]フリーランスは全てが自己責任、何かあってからじゃ遅いから。「フリーナンス」に登録だけでもしておきなよフリーランスで仕事がない......って不安ならエージェント登録してみればいいのにホームサイトマッププライバシーポリシーお問い合わせコンテンツの無断使用は固くお断りします。