もともと空間デザインを勉強していたのもあって、このブログでもデザイン面に異常にこだわっていた時期がありました。

ひどい時は一ヶ月に一本しか記事書いてないくせに、フォントとかボタンの色や位置が毎日変わってたり。

ブログとして色々と本末転倒な気もしますが、その頃にあれやこれやと勉強したことによって現在はフリーランスでWebデザインのお仕事をさせて頂くようにまでなりました。人生ってわかんないもんですマジで。

で、そんなぼくが実際にWebデザインのお仕事を受けるまでにどういう道筋を辿ってきたか、これからWebデザイナーを目指す人、あるいはフリーランスの一例として参考になるかもしれないと思い、ちょっとこれまでのことを振り返ってみました。

めっちゃ長いです。

はじめに:Webデザインとは

ここにおけるWebデザインとは、表向きのビジュアル的な部分だけではなくコーディングも含めた「Web製作」全般のことを指しています。

本来ならば「Web製作の〜」と書くのが正しいのでしょうが、”デザイナーでもある程度コーディングに関する知識を最低限備えておくべき”という個人的な感覚から、ぼくは”製作”をひっくるめて「Webデザイン」と呼んでいます。

実際のところは、表向き(外)の部分のデザイン…つまり”どこにどういうコンテンツを配置して、ここの色は何色にして、写真はこういうのをこういうところに入れて…”といったようなものを作るところまでが「デザイナー」。

そして、それをコーディングして構築し「Webサイト」として完成させる人を「(HTML)コーダー」や「フロントエンドエンジニア」などと呼ぶそうです。(厳密にはコーダーとフロントエンドエンジニアも細かい役割は違うらしいです。よくわかってない。参考＞フロントエンドエンジニアとは？HTMLコーダーとの違いや役割｜クロノドライブ)

いずれにしてもぼくの肌感覚では多くの人がこれらをまとめて「Webデザイン」とお呼びになるので、ぼくはこの呼称で統一しています。

フリーランスのWebデザイナーに必要な最低限の知識

これを踏まえると、ぼくが言う「Webデザイン」の仕事とは”外と中の両方ができる存在”。つまるところWebサイトを一人で全部作れる人のこと。

ということは、Webデザイナー+フロンドエンドエンジニアとしてのダブルの知識が必要になるのか、と思われそうですがそんなことはありません。

ぶっちゃけ超具体的に言えば必要なスキルは以下のみ:

• Photoshopなどを使ってレイアウトを作る力=完成品のイメージを作る
• HTMLとCSSでコーディングする能力=イメージ通りに実物を構築する

最低限これだけが出来ればWebサイトは一人で作れるし、それで仕事は受注することが出来ます。

もちろん、JavascriptとかRubyとか呼ばれる言語もできるに越したことはないのですが、とりあえず上記だけでお仕事はできます。本当に。

できることだけやってできないことはアウトソーシング(外注)してしまうのも一つですが、大抵駆け出しの頃はクライアントから掲示される予算も少ないので、全て一人でできなければなかなか利益に繋がりません。

特にぼくの場合、これまでWebにあまり注力してこなかった分野の方々が主なクライアント

しかし、逆に言えばこのおかげでそれほど高いクオリティのものを求められないため、ぼくレベルでも仕事ができたわけです。

逆にクライアントからしてみても、ちょうどいいレベルの知識しかもってないのでコスパのいい相手先ということですね。(笑)

クライアントから依頼される仕事のレベルによって必要な知識は様々ですが、とりあえず一人でデザイン&コーディングまで出来れば仕事を受けることは可能です。

仕事になるまで

前置きが長くなりました。
ここからは実際にぼくが仕事を受注するまでに至ったプロセスを紹介します。

きっかけはWordpressテーマのカスタマイズ

最初のきっかけは、WordPressのテーマカスタマイズでした。

元からWebデザインそのものをやろうと思っていたわけでは全くなく、せっかくスタートさせた自分のブログを自分の思い通りのデザインにしたかったのです。

最初はWordpress上でカスタマイザーを使った簡単な編集しか行っていなかったのですが、やっていくうちに徐々に「あれもこれも」と思うようになってきて、気がついたらCSSに手を出すようになりました。

学んだ順序はCSS→HTML→PHP

WordPressで構築したブログのカスタマイズに必要な知識は基本的に「HTML/CSS/PHP」の三つ。

知らない人のためにそれぞれ簡単に説明すると

• HTML – 骨格
• CSS – 装飾
• PHP – 内臓

…かなり雑な例えですが、なんとなくイメージをつかんでもらえると思います。

このうち、自作でHPなどを作る場合はHTMLから先に学びCSSに行くのがセオリーですが、Wordpressのカスタマイズの場合はどちらかというとCSSに先に触れることになると思います。

実際、「Wordpress テーマ カスタマイズ」などで検索するとおそらくは最初にCSSの編集にぶち当たります。

CSSというのはHTMLで書かれた内容の見た目を変えるものなのですが、これは先ほどの例でいうなら「飾り付け」を変えるということになります。

実際にどういう例かというと

• ブログの文字のサイズを変えたい
• 見出しのデザインを変えたい
• フッターの色を変えたい

というような外見的な部分。

見た目を変えるなら、体型や骨格変えるよりも服装変えるのが一番てっとり早いみたいな感じでしょうか。

というわけでぼくもCSSのいじり方をなんとなーく覚えて、ブログ内の文字とか色とかコンテンツの大きさとかをいじくり回していました。

そうしているうちに、次はコンテンツの表示の順番を変えたくなって、となると骨組みを入れ替えたりしなくちゃいけないのでHTMLをいじるようになり、もっと高度な動きを使えるようになるためにPHPを学んで…という流れでした。

(ビジュアル)デザインについて

たとえHTMLやCSSのコーディングができるようになったとしても、Webというのは人に見てもらうものである以上、包括的な「(ビジュアル)デザイン」の知識&センスが必要不可欠です。

故にPhotoshopやらIllustratorなどが使えるようになる必要もあるのですが、ぼくはそれらの基本的な使い方を大学で学んでいたのが幸運でした。

ちなみにぼくは動画の編集(Premier)やレイアウト関係(Indesign)も行うので、Adobeのすべてのソフトが使えるAdobe Cloud CCの月額会員に登録しています。月額の費用が高いですが、どうせ仕事で全然元取れるので、最初は投資！投資！

また、Webに適したPhotoshop/Illustratorの運用に関しては以下の書籍が役に立ちました。

また、元々空間デザインを勉強していたので基礎的な知識はあったのですが、「Webデザイン」という世界を理解するためにも先輩方に意見を聞いたり、関連書籍などを読んで勉強もしました。

特に参考になったのは以下の書籍。

デザインの基本中の基本については、以下に学生時代からの愛読書もまとめてあります。
＞「デザイン=見た目」じゃない。クリエイティビティを刺激する、日本のデザイン本8選。

ゴリゴリにカスタマイズしたサイトを作ってみた

これくらいまで知識を得ると、見た目だけならWordpressのテーマではほとんどやりたい放題になります。

そういう今までの独学の知識をフル活用して、本ブログにもともとあったニューヨーク関係の記事を切り出す形でBASIK NEW YORKというミニサイトを作ってみました。

＞ニューヨークの観光旅行情報サイト BASIK NEW YORK

こちらのサイトは、micata（ミカタ）というテンプレートをカスタマイズして作っているのですが、デモサイトと見比べていただければ分かる通り、原型を留めていません。

当時の付け焼刃的な知識で作ったものなのでアラも多く、修正しなくてはならない箇所もまだまだ多いのですが、なにはともあれ、最低限の知識があればこれくらいのことはできるようになることはお分かりいただけるかと。

ちなみにこの時のことは、以下の記事に詳しく書いています。
＞同じカテゴリの記事をスピンアウトして別にミニサイトを作る方法。BASIK NEW YORKができるまで

※逆に現在このブログ「metroglyph」は「Graphy」というテンプレートをほんの少しいじっている程度です。かつての気持ちから一周回った感じです。

仕事は斜め上から来た

この辺りまでできるようになった段階から、ちらほらとお仕事の話が来るようになりました。

特に自分で営業などをかけていたわけではないのですが、これまで全くウェブサイトなどを作ってこなかった、あるいはWebへ注力をしていなかった人たちに、たまたまぼくのことを知ってもらえたことがきっかけでした。

Aさん「このブログはどうやって作ってんの？」
ぼく「Wordpressっていうのを使ってテンプレートをいろいろとカスタマイズしてます」
Aさん「え、ウェブサイト作れんの？」
ぼく「ええ、まあ、一応？」

こんな感じで、「じゃあ作って」とお仕事がくるようになりました。

本当にぼくなんかでいいのか・・・と思いながら最初のクライアントさんにお話を伺ったところ

• 誰に頼んでいいかわからない
• Web製作会社に頼むと高い
• そんなハイクオリティは求めてない
• ただ、ある程度はかっこよくしたい
• 融通を利かせたい

みたいなご意見をもらい、むしろこのレベルだからこそやって欲しいし、そういうのを求めてる人はたくさんいる、とのことでした。

横のつながりが強い業界で一度お仕事をすると、そのまま人の紹介で次の仕事につながったり、ということが起こり得るのは良く聞く話ですが、実際ぼくの場合もこれが起こりました。

ぼくの場合、ブログを運営していてそこそこの結果をだしていたことから、だ「発信」という観点からも色々なお話が出来たのが大きかったようです。(多くの業界はまだ「発信」「デザイン」「Web」に関してのスキルが不足しており、そこへの助言を求めている人も多いです。)

WordPressを使わないサイト作りにも

ただこれまでは、元はブロガーであるという性質上、ブログ形式のサイト作りが主でしたが、Wordpressを介さないでサイトを構築する必要も出てきました。

故に今はWordpressなどのCMSを使わない、ゼロベースのウェブサイト作りもやり始めてます。(学びながらですが)

普通だとウェブサイト作りというのはHTML/CSSによって簡単なサイトを作るところから始めるので、ぼくの場合は完全に逆ですね(笑)

これからフリーランスのWebデザイナーになりたい人へ

とまぁ、こんな感じでぼくは独学でWebデザイナー(仮)みたいな感じになったわけなのですが、これからまじでWebデザイナーを目指すぞ！という方には、ぼくは全力で学校に行ったり講座を受けることをオススメします。

独学でもしっかり真面目に学べる人はいいですが、ちょっとでも自分がだらしないなぁとか思う人は、仕事できるようになるまでめっちゃ時間かかると思います。

なんだかんだぼくもやり始めてから仕事始めるまでに3年かかってますしね…。まぁ最初からWebデザイナーになろうとしてたわけでもないのですが。

ぼくが勉強してた頃と違い、今はオンラインで受けられる講座サービスがたくさんあって羨ましいです。

TechAcademy [テックアカデミー]なんかはコースタイプも充実しており評判も結構いいので、ぼくもまとまった時間が取れたらどこかのタイミング受講しようと思っています。

個別にメンターがついてくれるし、返金保証もあるから、最初のとっかかりとしてはとてもいいかもしれません。

また、プログラミングのオンラインスクールのCodeCamp
はビデオ通話によるマンツーマンレッスンを受けることが出来、教育訓練給付金を利用したり、無料体験ができたり、期間限定で入学金が0円だったりと色々とお得で、こちらも候補です。

内容はCodeCampのが良さそうなんですが、コスト的に受けるとしたらTechAcademyになるかなぁ。

—

あくまで独学でやろう、という人は「中と外」の両方を学ぶところから始めればいいと思います。

• 中=HTML/CSS
• 外=(ビジュアル)デザイン

中のHTML/CSSについてはネット上にもいろいろと情報が転がっていますし、書籍もたくさん出ています。

またビジュアルデザインに関してはソフトウェアの使い方を学ぶよりも前に、「そもそもデザインとは何なのか」ということと「レイアウトについての基礎」を学んだ方がいいと思います。

おすすめはこちらの二冊。

中でどういう仕組みになって外で表示されているのか？

どう表示することで見やすく、使いやすくなるのか？

そういうことをを理解しながら勉強していくと、説得力のあるデザインをすることができるようになり、現場でめちゃめちゃ役に立ちます。クライアントさんと話すときとか。

これからの展望

ここまで書いておいてなんですが、ぼくはWebデザイナーになりたいわけではありません。

どちらかといえば、Webを始め様々なデザインをするにあたってのコンセプト設計であったり指針を決めるディレクションをする側を目指しています。
実際今の仕事でも一応アートディレクターとしていくつかのプロジェクトに参加させていただき、チーム内におけるデザイン面や企画面のディレクションをさせていただいており、Web以外のデザインに関してはチームのデザイナーに製作をお願いするような形をとっています。

実際のところぼくはビジュアルデザインに関しては非常にセンスが乏しく、モノを作るのにはもっと適した人材が山ほどいます…。

ただ今はマンパワーも足りておらず、予算も少ない状態なのでいかんせんぼく自身が製作をせねばならず、しかしてクライアントさんもそれでご満足頂いているのが歯がゆいところ。

しかしゆくゆくは、クライアントのビジョンを形にするチームのディレクターとして適材適所をしっかりとできる存在になりたいなぁと思う所存であります。(何の話や)

というわけで一緒に仕事が出来るフリーのWebデザイナーの方、チームメイトを探してます。と言っても、根っこの部分で思いを共有出来る人でないと、難しいんですが。

ぼくの仕事に対する姿勢？理由？についてはこちらに書いてます。

我こそは、という人は、一度お声掛け下さい。まずは友達になりましょう。

まとめ

とりあえず実体験をもとに、一番シンプルなWebデザインを仕事にするために最低限必要な知識は以下。

• HTMLとCSS(とできればPHP)
• WordPressに関する一通りの知識
• Illustrator/Photoshop

で、経験者のアドバイスとしては独学は時間効率が悪いのでオススメしません。という結論。(笑)

そんな感じで。