はじめまして、きくりんと申します！
社会人になってからデジハリとLIGが運営する「STUDIO 上野 by LIG」でWebデザインを学び、今年の4月にWebディレクターのアシスタントとしてLIGにジョインしました。
もともとWeb業界はまったくの未経験で、まだまだ勉強中ではありますが、LIGに入るまでにどのように勉強してきたのか、昔を振り返りつつまとめてみました。これからWeb業界を目指す方、まずは独学で勉強しようと思っている方々の参考になれば幸いです！
目次
きっかけは野球サークルのWebサイト
Webサイトを作りたいと一番最初に思い立ったのは、大学生の頃でした。当時は野球サークルに所属していたのですが、「サークルのサイトが全然イケてない！」「こんなサイトじゃ新入部員が入ってくれないかもしれない！」。
そこで一念発起、一から作り直そうと決意したのが最初のきっかけでした。
そもそもWebサイトってどうやって作るの？
リニューアルを決意するも、まったくの初心者の状態。「Webサイトってどうやって作るの？」「何かソフトを揃える必要があるの？」その答えを探すなかで、どうやらWebデザイナーという職業があるらしいということを知りました。
Webデザイナーってどんな仕事？
Webデザイナーというからには、Webサイトをデザインするのだろう。つまり、Webデザイナーの仕事内容がわかれば、自分でかっこいいサイトを作る方法もわかるはずだ！ というわけで、まずはWebデザイナーの仕事内容を知るところから始めました。
私が一番最初に読んだのが、「新人Webデザイナーの仕事」という本でした。2008年発売なので、ツールの情報などはどうしても古い部分があるのですが、Webデザイナーの仕事内容についてわかりやすく書かれています。
Webサイトがそもそもどんな技術で作られているのか。どういった流れで制作されているのか、全体の概要を最初に理解できたので、以降の学習も頭に入りやすかったです。
ちなみにWebサイト制作の大まかな流れは次のとおりです。
- 作るサイトを決める
- デザインする
- コーディングする
- 公開する
学習を始める上で用意したもの
学習を始めていく上で、下記のものを用意しました。
- PC
- デザインソフト（Illustrator、Photoshop）
- エディタ
- Webサーバー（必須ではない）
Illustrator、Photoshopは主にデザインの段階で使います。Adobeの公式サイトから1ヶ月無料で体験版を使用することができるので、まずはそれを使っていました。1ヶ月しかなかったので、けっこう死ぬ気で勉強していました。タイムリミットが決まっているとなんだか燃えます。
エディタはコーディングの段階で使います。「Sublime Text」や「atom」などは、無料で使える上に高機能です。それぞれ試してみて、自分が使いやすいものを探していくのが一番かなと思います。ちなみに私は「atom」をずっと使っていました。
そして、自分で作ったサイトをたくさんの人に見てもらうには、Webサーバーにアップロードする必要があります。Webサーバーは学習において必須ではないのですが、自分の制作物を実際に公開して、ほかの人に見てもらえるというのは大きなモチベーションになりました。
ちなみに基本的なところで、なぜサイトを公開する上でWebサーバーにアップロードする必要があるのか、Webサイトが表示される仕組みについては、こちらの記事にもわかりやすくまとめられています。
どうしてブラウザから世界中のWebページ（htmlファイル）を見られるの？【番外編】
木下雄策
デザインツールの使い方を勉強
デザインの現場で特によく使われているのが、IllustratorとPhotoshopです。まずはこのふたつのソフトを使いこなせるようになるべく、参考書を買って勉強していました。LIGのデザイナーもオススメしていたのがこちらの参考書です。
この2つのソフトが使えるようになると、Webデザインに限らず本当に色々なことができるようになります。
Illustratorを使えるようになると、イラストやアイコン、さらにはオリジナルの名刺なども作れるようになります。また、Photoshopを使うと、写真に写り込んだ余計なものを綺麗に消すことができたり、俗にいうコラ画像を作れるようになります。
勉強を進めるなかで感じたことなのですが、参考書に沿って学習しているだけだと、どうしても飽きてしまうんですよね。学んだことを活かして、オリジナルで何かしらを作ってみるのが大事かなと思っています。やっぱり自分で作ってみるのが楽しいです。
自分の名刺などもそうですし、プレゼン資料で使う図をIllustratorで作ってみたり、友達の写真を使って広告画像のオマージュを作ったりしていました。
ちなみにオマージュ広告の作成ですが、ツールをもっと使いこなせるようになるという点で、人物の切り抜きなど基本的な操作の確認にもなるし、「この文字組みはどうやって作るんだろう」といった疑問も自然と浮かぶため、個人的におすすめです。さらに友達に見せるとけっこう驚いてもらえて楽しいです。楽しみながら勉強するのが一番ですね。
HTMLとCSSの勉強
IllustratorやPhotoshopを使ってデザインが完了しても、サイトが完成したとは言えません。HTMLやCSSを使って、Webブラウザに表示されるようにコーディングしていく必要があります。
HTMLはWebサイトの構造や要素を組み上げるための言語、CSSはHTMLで作った要素に飾り付けをするための言語です。HTMLで作った体にCSSで服を着せていくイメージでしょうか。
そもそもHTMLって？Webデザイナーを目指すなら知っておくべき基礎知識【入門編】
Miya
そもそもCSSって？Webデザイナーを目指すなら知っておくべき基礎知識【入門編】
すーちゃん
参考にした本
HTMLとCSSも参考書を使って勉強していたのですが、その参考書にも大きく2つの種類があります。
入門書系
HTMLやCSSの書き方を基礎から丁寧に解説してくれます。「HTMLとはなんぞや」「CSSってどうやって書くんだ？」という、まったくの初心者状態だったので、入門書系の参考書でまずは基礎をおさえるようにしていました。
デザインレシピ系
ある程度HTML、CSSの基本がわかってきたところで、ふつふつと湧き出してきたのが「こんなパーツを作りたい」「ボタンのデザインの幅を増やしたい」という抑えきれない気持ち。そんなときに出番なのが、デザインレシピ系の参考書です。Webサイトでよく見かけるボタンやメニューなどのパーツをどうやって作るのか、サンプルをまじえて多く紹介されているので、コーディングの幅が広がります。
まずは入門書系の参考書で基礎・基本をおさえて、その上で自分のコーディングの幅を広げるためにデザインレシピ系の参考書を読む。そんな流れで勉強を進めていました。
オンライン学習サイトも活用
最近だとネット上で無料でコーディングを学べるサービスが多くあります。例えば「ドットインストール」は、各レッスンが3分程度でまとめられていて集中して勉強することができるので、まずはこういったサービスから始めてみるのもオススメです。
JavaScriptでサイトに動きを
最近は動きのあるサイトが本当に多いですよね。アニメーションをたくさん使ったサイトを作れるようになりたい！そんなサイトを作るためにはJavaScriptを勉強する必要がある！ということで、JavaScriptも勉強しました。
たとえばボタンを押すとページのトップにするするっと戻るような機能も、JavaScriptの技術を使って実装されていたりします。
いよいよサイト完成！しかし…
苦労の末に、ついにサイトが完成！しかし…… なんだかイケてない。かっこいいサイトをマネしつつ、参考にしつつ作ったはずなのに、なぜか微妙な印象に。
ここで重大な過ちに気づきます。確かにIllustratorやPhotoshopといったデザインツールの使い方は勉強しました。HTMLやCSSを用いてコーディングもできるようになりました。JavaScriptを使って動きもつけています。でも、根本的な問題として、デザインの原理原則に関する知識、デザインの概念に関する勉強が抜けていたのです。
デザインの原理原則を勉強
デザインはセンスだと思っていました。でもそれはちょっと違っていて、デザインには原理原則があり、Webサイトに限らず良いデザインはたいてい基本的なルールに沿っています。そんな原理原則を学べたのが「ノンデザイナーズ・デザインブック」です。
「コントラスト」「反復」「整列」「近接」という4つの基本原則に基づいて、デザインの基本がわかりやすく解説されています。私のような、「デザインを特に勉強したことはないけれどしっかりと身につけていきたい」「イケてるデザインができるようになりたい」という人にはぴったりの入門書です。
ノンデザイナーズ・デザインブックで基本原則を勉強した上で、「レイアウト」「配色」「文字組」についてより深く学ぶために、こちらの本を読みました。
いいデザインをたくさんインプットする
デザインの概念を勉強したことで、自分のデザイン力はもちろん上がるのですが、さらにほかのサイトを見るときの視点もだいぶ変わりました。「この要素を強調させたいから、このレイアウトなのか！」「こういう印象を与えたいからこの配色なのか！」と、デザイナーの意図に注目できるようになりました。
そんな視点を持ちつつ、「MUUUUU.ORG」や「ikesai.com」「81-web.com」「I/O 3000」など、Webデザインのまとめサイトを見て、いいデザインを多くインプットするようにしていました。
その際……
- どういった意図でデザインされたのかを考えてみる
- サイトを見て「かっこいい」や「かわいい」と思ったら、なぜそう思ったのかを考えてみる
- 見やすいサイトは、なぜ見やすいのかを考えてみる
- 逆に見づらいなと感じたら、その原因を考えてみる
- ボタンのアニメーションなど、細かい動きにも注目してみる
といった点を意識するようにしていました。デザイナーのインプットや勉強法については、こちらの記事でも詳しく書かれていて、非常に参考になります。
どんな勉強やインプットをしてる？LIGのデザイナーの方法をご紹介！
ずんこ
サイトが完成するとやっぱり嬉しい！
ツールがうまく使いこなせなかったり、コーディングがどうしてもうまくいかなかったりと、もちろん苦労することも多かったのですが、そのぶんサイトが完成したときの感動はひとしおでした。野球サークルのWebサイトが完成したときも、パソコンの前でひとりガッツポーズし、飛び跳ねるほど嬉しかったのを覚えています。
そして、完成した瞬間のさらに10倍くらい嬉しかったのが、ほかのサークル部員に「めっちゃカッコよくなってる！ すごい！」と褒めてもらえたときでした。
例えば料理だと、自分だけで食べるために作るよりも誰かのために作ったほうが「美味しいものを作ってあげたい」「喜んでもらいたい」とモチベーションが上がったりすると思います。私の場合は特にそうだったのですが、「他の部員にかっこいいと思ってもらいたい」「このサイトを見た大学の新入生にもかっこいいと思ってもらいたい」という目標があったからこそ、よりいっそう頑張って作れたと思っています。
やっぱり、学んだことを活かして何かサイトを実際に作ってみるのが一番楽しいです。自分のポートフォリオサイトなどももちろんですし、例えばサークルのサイト、ほかにも知り合いのお店のWebサイトなど、誰かのために作れるような機会があるのであれば、積極的に挑戦してみるとめちゃくちゃ勉強になります。
まとめ
勉強を進めるなかで感じていたことですが、Web業界・Webデザイナーを目指す上で学ぶべきことは本当に多いです。私自身、本当に何度も心が折れそうになりました。
- デザインの勉強
- IllustratorやPhotoshopといったツールを使いこなすための勉強
- HTMLやCSSといったコーディングのための勉強
- JavaScriptなどのプログラミング言語の勉強
すべてをひとつひとつ極めるのはけっこう難しいです。ただ、Webデザイナーが必ずしもこういったすべての業務を行うとは限らず、働く会社によって業務の範囲は異なる場合が多いです。
デザイナーはデザインだけを担当し、コーディングやJavaScriptによるプログラミングはエンジニアが行う場合もあれば、デザインからコーディングまでをWebデザイナーが行う場合もあります。
Web業界における具体的な職種として、「Webデザイナー」「フロントエンドエンジニア」「バックエンドエンジニア」「Webディレクター」など色々とあるのですが、技術の進化が早いのがWeb業界の特徴。それぞれの業種に求められるスキルも刻々と変化しています。ただ、どの職種を目指す場合でも今回ご紹介した内容に関しては学んでおいて絶対に損はないはずです。
私が野球を始めたばかりの頃、ピッチャーから外野手まで、すべての守備位置を一通りやってみた上で、「どこをやりたいか」「どこが向いているか」を踏まえつつポジションを決めていました。Web制作も一緒で、まずはそれぞれやってみて、「自分が何をやっているときが一番楽しいか」「どんな仕事をしたいか」考えてみるといいかなと思います。私に関していえば、Webデザイナーになるためのスキルを勉強しつつも、転職活動をする中でディレクション業務への興味関心が強くなり、今はWebディレクターのアシスタントとして日々現場での経験を積んでいるところです。
どうしてもモチベーションが下がってしまったときは
未経験で、しかも独学で勉強していると、モチベーションが下がってしまうときがあります。人間誰しも、どうしてもやる気が出ないときがあります。そんなときに私は、めちゃくちゃレベルの高い方々のポートフォリオサイトを見て自分を奮い立たせていました。
鳥肌200%！クリエイターポートフォリオ厳選集！
Shinya Okazawa
動きのあるサイトが好きだったので、「私もこんなサイトが作れるようになりたい！ そのために頑張らねば！」とテンションをあげていました。
日々の勉強の中でどうしてもやる気が起きないときは、Webデザイナーを目指すきっかけとなったような、「こんなサイトを作りたい」というお気に入りのサイトを眺めてモチベーションを復活させましょう！
実力をつける上ではスクールに通うという手も
Web業界を目指す上では、独学だけでなく、Webデザインが学べるスクールに通うという選択肢もあります。デジハリとLIGが運営する「STUDIO 上野 by LIG」というスクールがあり、私も実際に通っていた卒業生のひとりです。
スクールに通うことの大きなメリットは、
- わからないことを質問できる環境がある
- 周りにWebデザイナーを目指す同志がいることで、より集中して学習できる
- 実際にWeb制作の現場で働いている人から、生きた情報をもらえる
といったところかなと思います。
今までモチベーションの維持について何度か触れましたが、やはり同じ業界を目指す仲間が近くにいると心強いです。また、スクールに通うなかで、人とのつながりを得られるというのは、学習する上でも、就職・転職活動をする上でも大きなメリットでした。
キャリアアップ
「STUDIO上野でWebクリエイターを目指す！」
ただ、お金がかかるというデメリットももちろんあります。「実際にWeb制作の現場で働いている人から生きた情報をもらう」という観点では、Web業界で働く人が集まる交流会のようなイベントに参加してみるのもひとつの手です。それこそ、今現場で求められているのがどんなスキルかを知る機会にもなります。
最後に
私はもともと勉強が得意だったわけでもなく、何を理解するにも時間がかかる人でした。ただ、子供のころから、それこそ夏休みの「科学工夫工作」など、何かを作ることは大好きでした。私自身、Webデザインに関しての学ぶことの多さ、先の長さに挫折しかけたことは本当に何度もあります。それでも、やっぱり何かを作るのは楽しくて、完成したときはめちゃくちゃ嬉しくて、そんなことを繰り返していたらいつのまにかここまで来ることができました。
Web業界で働いてみたい、Webデザイナーになりたいと思ったら、まずはひとつずつ、一歩ずつ、トライしていくのが大事だと思います。「うまくデザインできた！」「ちゃんとブラウザに表示された！」と、作る楽しさに触れられたら、あとはもう怖いものなしです！
スキルアップという観点では、私は独学から始め、スクールに通い、現在LIGで働いているわけですが、Web業界で働くようになってからの学びの密度は段違いです。実際にクライアントからお金をいただいた上で仕事をしているわけですので、求められるデザインの精度の高さはもちろん、いかにブラウザへの表示速度を上げるかなど、今まであまり気にしていなかったことも意識する必要があります。正直現場に飛び込んでしまうのが一番手っ取り早いと、今は思います。
今回は私が未経験の状態からLIGにジョインするまで、どうやってWebデザインの勉強をしてきたかをまとめさせていただきました。次回は、実際にLIGに入社する際、面接などで意識したことについても書かせていただければと思っております。
ありがとうございました！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
