カテゴリ
本サイトはプロモーションを含みます。

紙(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デザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社することを強くオススメしています。

Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強い『ワークポート』『Webist』の2つです。
※コロナもほぼ収まりつつありますが、まだワークポートもWebistですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために、ポートフォリオを制作後に登録しておきましょう。

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

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

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

ほとんどの人がエンジニアにはなれないので、50〜60万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』のようなスクールに行きましょう。プログラマカレッジは、学校&就職支援の一体型サービスです。

他にも、PHPに特化した無料の『無料PHPスクール』もあります。PHPはがっつりプログラミングの言語である一方で、ECサイト構築やWordPressにも使われるWeb系と親和性が高い言語なので、Web系に進みたい人には無料PHPスクールはオススメです。23日間通学でけっこうハードなカリキュラムです。

この2つの学校のどれかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。

参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

コラム③:ポートフォリオのチェックリストをnoteで販売中!

「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました!27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう!

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

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。
こちらで承認後にコメントは表示されます。
* が付いている欄は必須項目です。

上への矢印