Webの最新トピックを配信中!

紙(DTP)のデザイナーさんがとんでもないWebデザインをしないためのメモ


紙のデザイナーさんがWebデザインをする時に、大事故を起こさないためのメモを残しておきます。
このメモを、Webに慣れていない紙のデザイナーさんにデザイン作業前に送ってあげてください。

最近、WebサイトのデザインがはじめてのDTPのデザイナーさんと一緒にお仕事をして、大炎上しそうになりました。
悪い予感はしていました。僕はコーディングとWordPress構築が担当なのですが、紙のデザイナーさんは当然のようにCMYKでデザインを作成、pxは無視、フォントサイズは小数点付き、なぜかサイトの横幅が600px程度のデータを送ってきたのです……。

短気なコーダーだったら、もうブチ切れてますが、悪気はないので許してあげましょう。
フォトショじゃなくてイラレでデザインを作ってくるのも我慢します。最近はSVGの普及でイラレでデザインを作るのがちょっぴりオシャレみたいになってる現状があります(本当は超イラレやだ…….)。

なお、無理やりフォトショを使わせると、紙のデザイナーさんのタスクに「フォトショを覚える」という項目が追加され、デザインがいつまで経っても完成せず、結局は炎上する場合があるので、イラレを使わせてあげてください。

以下、「Webデザインするならゼッタイ守ってくださいお願いだから」メモです。

  • RGBで制作(CMYKは不可)
  • 解像度は「72dpi」で制作
  • 単位は「px」を使用(「mm」は不可)
  • フォントは基本的には「ヒラギノ」「游書体」「メイリオ」のどれかを使う(フォントを画像化する場合はどんなフォントでも良い・どうしても使いたいフォントがある場合はWebフォントの使用も検討)
  • フォントサイズの単位は「pt」で必ず整数(本文のテキストサイズは14〜16ptが一般的)
  • ブラウザで再現できる最小のフォントサイズは10pxまでである
  • 長体はできない(カーニングはCSSで実現できるのでOKだが多用はしない)
  • 背景にパターンの画像を敷く場合は、リピート画像を用意してあげる
  • Webデザイン制作はコーディングに必要な画像素材を作るという意識で行う(デザインデータからコーディングに必要な画像を切り出すため)
  • 画面幅に応じてデザインが切り替わるレスポンシブデザインの場合は、過度な装飾は行わず、PCとスマホで限りなく近い構造でデザインを制作する
  • デザインをする際に「この部分ってコーディングで実現できるかな?」と常に自問しながらデザインを制作する
  • favicon(ブラウザのタブに表示されるアイコン)とogイメージ(SNSでシェアされる際に表示される画像)も忘れずに制作する

とりあえず、このメモを送っておけば大丈夫!!……だと思う。

コラム:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『エンジニアカレッジ』の詳細を読む

質問や感想などお気軽にどうぞ!

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    > 僕の20代まるごと黒歴史ストーリー

  • なんでもWebの質問受け付け中 (^o^) /♪

  • Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ