2018年フリーランスwebデザイナーの条件【実体験】

フリーランス

フリーランスWebデザイナーになりたい、どうやったらなれるの?ということを知りたい方に向けて、フリーランスWebデザイナーになる最低限必要な条件をピックアップしました。

私は15年、Webデザイナーとして生業にさせていただいてクラウドワークスを中心に多いときで月収100万円以上いただいてます。

その詳細は以下でご確認ください。

クラウドワークスで稼ぐ方法を実体験からお伝えします。これですぐに稼げます!

2018年8月12日

私はWebデザインのクオリティーはそこまで高くないですが、いろんな方と仕事させてもらった経験上、2018年、Webデザイナーとして生きるためにどういうことが必要なのかは理解してますので、このチェックポイントを参考にしてみてください。えらそうなこといってすみませんが自分への戒めも含めてお送りします。

今回は、コーディングを自分でするというところは含まず、デザインのみにフォーカスしています。
(ただ、デザインだけでもコーディングへの考慮は必要なので、そのためのチェックポイントはあります。)

webデザイナーになるための条件とは?

条件0は、もっとも最低限ラインです、また条件1-3は、仕事としては同列で優先順位が高いですが、デザイナーとしてわかりやすい順番?で並べました。
条件4も優先順位高いですが、1-3のほうが重要かなと思います。でも4の優先順位が高い案件もあります(システム系会社のデザイン組み込みとか)ので、どれも最低限は必要で、そのスキルをレベルアップさせていく、という日々なのかと思います。

条件0-1 Webデザイン制作のツールが使えますか?

超基本です。これできないと話になりません。以下チェックポイントになります。

photoshop、illustratorがある程度使いこなせますか。
(+XD連携案件も最近は増えてきましたが、XDはフォトショ・イラレが使えれば1日戦えばなんとかなります)

  • レイヤーを理解していますか?
  • 髪の毛などのパスがかけられますか?
  • アイコン作れますか?改変できますか?
  • マスクすぐかけられますか?外せますか?
  • パスの変更すぐできますか?
  • 写真補正がある程度できますか?
  • スマートオブジェクト理解していますか?
  • スタイル・CCライブラリ使えますか?

以下、私が対応していてだめだこりゃ、と思ったデザイナーです。画像のパス切りを含めてお願いしているので、レベルは低いです。

クリッピングマスクどうやるの?と聞かれた
レイヤーのコピーってどうやるの?と聞かれた
パスでマスクかけてなくてレイヤーを削除しちゃっているので修正ができなかった
画像がスマートオブジェクト化されてなくて拡縮繰り返してるから画像がぼやってぼけてるんだけど!
写真、暗くないですか?素材そのまま使ってないですか?

上記の方は、どうしようもないので、もう少しこれくらいは勉強する必要があると思いますが、
勉強しはじめあるあるとして、表面上はできているようにみえても、修正に弱いデザイナーさんは多いと思います。
修正対応の基本である、スタイル、CCライブラリ、スマートオブジェクト、マスク は、必須の技術です。あと経験なので、徐々に覚えるとよいと思います。
まあ、あと2年くらいでsenseiがやってくれる未来がくるかもしれませんが、2018年のデザイナーは自分でやるのが一般的です。

条件0-2 Webデザイン制作のフローを知っていますか?

これも超基本です。これを知らないとフリーランスWebデザイナーとしては話になりません。以下チェックポイントになります。

  • ワイヤーフレームが何かを知っている
  • Web制作の一般的なスケジュールを知っている
  • Webサイトの構築がどういう考え方・フローで構成されるか知っている

条件1 コーディングを想定したサイトデザインができる

これもフリーランスWebデザイナーとしては基本的なところですが、DTPデザインだけをごりごりやってられる方だとデザインは知っているが、この辺知らない、という方は多いです。この条件その1とその3は、Webの特性になるので、その辺を勉強されてからWebデザイン制作に取り組む必要があります。知らないとしんどいことが多いです。

  • h1.h2.h3がどのデザインでaはどのデザイン、などのマークアップを想定したデザインができますか?
  • グリッドレイアウト(もちろんあえてのブロークングリッドレイアウトはありです)ができていますか?
  • マージン、パディングがそろえられていますか?
  • レスポンシブサイトを想定したデザインができますか?(スマホレイアウトは作るとしてタブレットはどうするの?)
  • 画像でなくなるべくcssで構成できるようなデザインになっていますか?

以下、私が対応していてコーダーさんからつっこみをもらった言葉です。

このデザインどうやって組むの?
タブレットのときのこのデザインどうするんですか?
乗算はコーディングでは表現できませんよ?
マージンがそろってないんですけどー。

条件2 クライアントが望む(かっこいい、きれいな、シンプルな)デザインができる

Webデザインを始めるにあたって、どのようなデザインにするか?はすごく重要ですよね。
カラー・雰囲気・トンマナ、などは、手を動かす前のクライアントへの質問事項としてよく上がってくる項目かと思います。
ただ、クライアントとやり取りする前に自分の知識の前提条件で、以下のような知識があるか、勉強できているか、というのも重要です。

  • クライアントの業界、競合サイト、類似サイトがどのようなトーンのサイトかを知っていますか?
  • 競合、類似サイトの調査ができていますか?
  • クライアントの「かっこいい」「きれいな」「シンプルな」サイトが、どのようなサイトなのか理解できていますか?
  • 配色のセオリーを理解していますか?色相・彩度・明度の違いを知っていますか?
  • 写真やコンテンツのサイズ感、配置のセオリーを理解していますか?

以下、私が対応していて先輩デザイナーさんやクライアントからつっこみをもらった言葉です。

色が強すぎないか?
もう少しコンテンツ小さくしてくれない?
ここ、縮めてくれない?

この辺は、理解を深めてもらうためには、もう少し詳細に記事にしないといけない部分です。
デザイナーとして超絶重要な部分で、私自身もっと勉強していきたい部分です。

条件3 サイト構築の目的をくみ取ったデザインができる

サイト構築は、デザインをみせるため、ではなく、企業などが何かの目的をもってサイト訪問者にメッセージやコンテンツを送ったり、アクションさせるためのものです。
その点で、デザインはサイトの目的を遂行するために機能する必要があります。言葉が硬くなってしまいましたが、「お!」とか「いいね!」で次につながる何かができればOKだと思います。そのための前提として、以下知識が必要です。これはディレクションの分野であることが多いですが、ここを抑えられていないフリーランスWebデザイナーは、やっぱり厳しいのではないかな、と思います。

  1. 今回のサイトのリニューアルの課題感・目的はなにか想定できますか?
  2. サイトのリニューアルの目的に沿ったユーザー導線を情報設計できていますか?
  3. 情報設計をもとにデザインを設計できますか?

以下、私が対応していてクライアントからつっこみをもらった言葉です。

文字が小さすぎるんだけど
このボタンを一番目立たせたいんだけどなー、この辺ごちゃごちゃしてませんか
こんなに大きく写真使うと、この記事読んでくれますか?

条件4 スライスや画像アセット生成できますか?できなくてもそれを想定したファイル管理ができていますか?

ご存知だと思いますが、Webが、デザインしたpsdやaiのファイルからそれぞれの画像をパーツ化してWebページとして組み込みます。
画像のパーツ化作業が入るために、それを想定したデザインファイルのファイル管理(グループ化、グループの順番)が望ましいです。

画像アセットの場合は、pngで書きだされます。
jpgはスライスか、個別で書き出しをしないといけません。
その辺、画像の特性をみて、書き出しを別にすることを理解できていますか?

psdの整理もデザイン業務の一環です。(>耳が痛い・・)
_header,_footer,_contents
などでグループ化することは、必須です。

フリーランスwebデザイナーになれる最低限必要な条件 まとめ

いかがでしょうか。さらっと書いてしまいましたが、デザイナーとして配慮しないといけないことは手を動かすこと、それ以外にも沢山あり、また1つ1つが奥深く、長年かけて築き上げていく必要があるものではないでしょうか。だからWebデザインって苦しくも楽しいもの!ご参考ください!