Webデザイナーになるには？未経験からの学び方と将来性が高い制作会社一覧！！

実務未経験者には制作現場で出くわす、よくあるシーンを想定した学習が必要です。未経験からWebデザイナーなるには資格や免許が要らないかわりに、実際に手を動かして作った経験が必要になります。

筆者はWeb制作会社を3社経験し、事業会社を経て株式会社ARUTEGAという会社を経営しています。2016年から現在までCSS DESIGN AWARDの審査員を務めており、直近 3年間で350人以上の初学者のメンターとなりました。
その経験から、自社でWeb制作を行う傍ら、制作会社の外部アドバイザーとして採用やキャリアアップを行っています。

そこで本記事では、まだWeb制作会社で働いていなくても、いますぐできる学習方法をご紹介します。

実務を想定したリハーサルが必要

ただ闇雲に独学を進めるのではなく、実務を想定した学習を積み上げることが大切です。いざ転職ができた後も転職前とのギャップに悩むことは少なくなります。

ご紹介する方法を実務のリハーサルだと思って取り組んでみてください。

毎日サイトを観る

とにかくサイトを観ましょう。
見るではなく、観ます。
例えば、真似て使えそうな部分のスクリーンショットを撮り、パーツごとやテイストごとにフォルダ分けするといいです。そして、なぜそのデザインになったのか、背景までを考察します。これを繰り返すことによって、実務で悩む時間を減らすことができます。
毎日一つ、気に入ったサイトを見つけてください。そして、そのサイトへ遷移させるためのバナーを作ってみるといいです。

バナー制作

バナーは情報設計がとても難しいので練習の好材料になります。

・デザインツールの操作方法
・限られたサイズの情報設計
・どのシーン・タイミングで見られたかを想定する

バナー制作で初めてデザインの難しさを知ります。バナー制作だけをしたところで、Webデザイナーになれませんが、普段から目に映る物の捉え方が変わるのはまちがいないです。

デザインの言語化

先に紹介したバナー制作と合わせてやるといいのが、言語化です。どうしてそのサイトが見やすいのか、カッコいいのかを言葉にしていきます。具体的な練習方法は、ブラウザのプラグインを使って、ページの上から下までを一気にスクリーンショットを撮りましょう。

そのスクリーンショットに細部の感想を書き込んでいくといいです。

・欧文と日本語のジャンプ率が大きくて見やすい
・余白がしっかり取られていてわかりやすい
・整列を意図的に崩していて動きがあってなんか目線で追う

など、あなたが感じた印象を言語化することが大切です。改めて言語化するといろんな気づきを得ることができます。XDやaunを使えばブラウザにコメントを残すことができるので後から見返すこともできます。

このように、学習のプロセスを残しておくことで、ポートフォリオとは別の成果物として面接でアピールすることができます。

Twitterやnoteで学習プロセスを書いて発信してもいいかもしれません。自分の成果物を怖がらず発信できることも、デザイナーにとっては必須のスキルです。作るだけで満足しないでください。

ページ遷移を学ぶ

サイトとして統一感があり、使いやすいかを考えます。

・目線の流れを意識する
・操作性を意識する
・初めて見るのに迷わないのはなぜかを考える
・下層ページ間の横断をどのようにスムーズにするかを考える

Webデザインは使われることを前提に作られます。トップページから下層ページまで少ないクリック数で欲しい情報まで辿り着けるように設計しているかを考えるようにしましょう。

PSDデータやHTMLテンプレートを購入する

模範になる先輩がいない独学Webデザイナーは海外サイトからPSDやHTMLテンプレートを購入するといいです。
PSDデータを購入することで、プロが作ったデータを見ることができます。
マークアップエンジニアの場合はHTMLテンプレートも同じように購入してコードを見るといいです。

例えばPSDデータを買ってわかることは、
・レイヤーの整理方法
・フォントサイズのパターンを知る
・デザインモジュールを真似る
・レイアウト用のグリッド設定を盗もう
この辺りは会社に入らないのと得られない知識なので、特に実務未経験者にはありがたいはずです。
真似をすることで実務経験者のレベルを知ることができます。
Envatoでは優良なテンプレートを販売してます。

2,000円くらいからが相場なのでお手頃です。
無料で配布しているサイトもあるので、『HTML テンプレート』などで検索してみるといいでしょう。

一流になるために一流のWebデザインを知ろう

ただ、闇雲に経験を積むのではなく、一流のクリエイティブを知ることも重要です。
業界を代表するWeb制作会社をご紹介します。

STUDIO DETAILS Inc.

インタラクティブなものから、アナログの肌触りを感じさせたりと表現力は業界随一。
コーポレートサイトやECサイトなどを手がけながらも、ジャンルに偏りがない制作実績が多数あります。

mount inc.

グローバルクライアントの案件が多数。Webを軸にしたクリエイティブディレクションからデザインまでをプロデュースされています。

Webサイトがリリースされるたびに、圧巻のクオリティが話題になります。

Garden Eight

海外デザインアワードの常連。インタラクティブで、アーティスティックなサイトが特徴的です。動きとビジュアルで感情を揺さぶる表現がいつも魅力的な制作会社です。

東京の他、デンマークにも拠点があります。

SHIFTBRAIN

上流工程からのブランディングの実績が多数。Webサイトだけではなく、企業のコーポレートアイデンティティまでのデザインを得意としています。

また、海外Webデザインアワード獲得実績がとても多く、どのサイトも全く似ていないので制作実績を見ているだけで楽しくなります。

カンヌライオンズの記念サイトを作るなど、日本を代表するWeb制作会社。近年では、オフィスの出社を解散し、広島にリモートブランチを作ったことでも業界内で話題に。

INFOCUS

アパレルやファッションの実績多数。ブランドのコアバリューの策定をはじめとし、さまざまなデジタルコンテンツをデザインしています。

ビジュアル撮影からWebサイトに至るまで、一気通貫でブランドの価値を上げています。誰でも知ってるブランドやタレントのサイトを、アイデアたっぷりでありながらも超絶技巧のセンスで実現しています。

新しい制作会社

設立からはあまり日が立っていないにもかかわらず、すでに一目置かれている企業様をご紹介します。

Web制作に限らず、サービスやプロダクトを作る手段としてクリエイティブを活用している事例が近年は特に多いように思います。

株式会社GIG

メディアやポータルサイトなど、堅牢な設計のサイトが多数。開発目線で考えると、ページ数の多いサイトが多いので、技術者としての幅を試されそうです。

ondo inc.

目には見えないその想いをデザインし、“人を動かす熱量”に変えることをコンセプトにした制作会社。コーポレートアイデンティティ・ビジュアルアイデンティティからの長期的なデザインを得意とします。

株式会社philosophist

対話から始めるパートナーシップを大切にし、長期的なクリエイティブ戦略を策定します。

株式会社切札

設立当初から開発技術と表現力に特化した技術者集団で輝かしい実績が多数。Webの垣根を超えインタラクションデザインでアイデアを昇華させています。

求人の掲載はないが、紹介したい会社

ここからはMWでの求人の募集はありませんが、ベンチマークしてもらいたい知る人ぞ知る制作会社をご紹介します。

Super Crowds

どのクリエイティブも、うっとりする透明感と奥行きのあるビジュアル作りがとても印象的です。

THREE

全方位のデザインと隅々までデザインが息吹くアートディレクション。コンセプトメイクからアウトプットまでの一貫性が印象的です。

ANDMADE

特徴的なビジュアルデザインでWebデザインアワードの受賞歴多数。どのデザインディレクションにもインパクトがあります。

成長するデザイナーとは

まだまだ書ききれないほど、日本にはハイクオリティな制作会社があります。経験が浅い方から見れば、どの制作会社も魅力的で、同時に自分の実力で通用するのか不安になることだと思います。

成長するデザイナーの共通点は下記です。

・好きで没頭している
・インプットとアウトプットをセット行っている
・使われることを前提に作る
・言語化能力が高い

これらが一流の方達とご一緒して気づいたことです。

普段の日常からいろんなものを観ながら同時に、自分なりに真似たり工夫をしてアウトプットしましょう。そしてフィードバックをもらうようにしましょう。それが経験を最速で積む方法です。

Webデザイナーにもいろんなタイプがいます。ビジュアル表現に強いタイプや購買に強いタイプ、またはニッチな業界知識が豊富なタイプなど様々です。

たとえ現在は他業種や未経験であっても、今ある知識を捨てる必要はありません。

すでにある手札に"Webデザイン"というカードを加えることをイメージしてキャリアを積み上げましょう。

未経験や実務経験が浅くても、上記を意識してキャリアを積めば大活躍できる可能性はたくさんあります。

この記事にたどり着いたことが、キャリアを積み上げる気づきになればと思います。