アカウント
メニュー
designer

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

  • 更新日 : 2023/01/31

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

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

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

directordirector

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

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

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

毎日サイトを観る

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

バナー制作

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

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

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

デザインの言語化

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

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

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

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

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

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

ページ遷移を学ぶ

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

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

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

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

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

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

https://elements.envato.com/web-templates
https://elements.envato.com/web-templates

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

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

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

STUDIO DETAILS Inc.

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

養老ミート株式会社
養老ミート株式会社

mount inc.

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

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

Yamauchi No.10 Family Office
Yamauchi No.10 Family Office

Garden Eight

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

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

UTOPIA AGRICULTURE | 株式会社ユートピアアグリカルチャー
UTOPIA AGRICULTURE | 株式会社ユートピアアグリカルチャー

SHIFTBRAIN

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

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

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

LIONS GOOD NEWS 2020
LIONS GOOD NEWS 2020

INFOCUS

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

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

hueLe Museum |ヒューエルミュージアム
hueLe Museum |ヒューエルミュージアム

新しい制作会社

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

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

株式会社GIG

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

chatworkサービスサイト
chatworkサービスサイト

ondo inc.

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

SUKUSUKU BALL 商品ブランディング
SUKUSUKU BALL 商品ブランディング

株式会社philosophist

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

ORBIS CLEAR(オルビス クリア)ブランドサイトデザイン制作
ORBIS CLEAR(オルビス クリア)ブランドサイトデザイン制作

株式会社切札

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

UNLOCK YOU | WW | WIRED
UNLOCK YOU | WW | WIRED

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

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

Super Crowds

https://supercrowds.co/
https://supercrowds.co/

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

ANRI
ANRI

THREE

https://three-inc.jp/
https://three-inc.jp/

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

燕三条製包丁の藤次郎株式会社
燕三条製包丁の藤次郎株式会社

ANDMADE

https://andmade.jp/
https://andmade.jp/

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

株式会社CIRCUS
株式会社CIRCUS

成長するデザイナーとは

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

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

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

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

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

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

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

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

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

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

designerdesigner

人気のデザイナー求人

Webデザインからブランディングまで、クリエイティブの力で心を動かすデザイナー募集

株式会社マスクマン株式会社マスクマン

MASKMANは、クライアントの課題と徹底的に向き合い、見た人、触れた人が行動したり、笑ったり感動したりする「心が動くデジタルクリエイティブ」を大切にしています。 ディレクターは主にキャンペーンの企画制作、実行、Webサイトの制作進行などをお任せします。 またWebだけでなく、リアルイベントの企画やブランドの立ち上げ、商品パッケージの制作などもあり、 あなたのご経験やスキル、挑戦していきたいことを踏まえ担当いただく業務を相談できればと思います。 <特徴> ▼心が動くデジタルクリエイティブ クライアントの課題に対して、ビジュアルが良いだけでなく「見る人の心に働きかけるクリエイティブづくり」を目指しています。デジタルはただのツールにしか過ぎません。技術を行使するのは人であり、そこには必ず「心」が存在します。 ▼クライアントも制作メンバーも笑顔に MASKMANは「関わる人みんなが幸せになれる場所」を目指して立ち上げた会社です。 制作に関わるすべての人の、心と身体の健康を第一に考えています。 ▼幅広い制作内容 Webサイト制作に限らず、イベント企画から印刷物、ブランド立ち上げや地方創生プロジェクトなど様々な案件のご依頼があるので多彩な経験ができる環境です。希望される方は積極的に興味のある業務にも挑戦することが可能です。

  • 東京
  • 新卒 / 中途
  • 350万~550万

【3名同時募集】若手中途Webデザイナー募集(未経験応相談)

cellinteractive co.,ltd.cellinteractive co.,ltd.

私たちセルインタラクティブは、お客さんと同じ目線に立って 企画提案・デザイン・開発の全てを自分たちで手がけ、お客さんと一緒にアイデアを形にするクリエイティブカンパニーです。 すべての仕事において共通している思いは、 “価値を見つけ、つくり、高め、つなげる。そして、ファンを増やす。” ということ。 お客さんの依頼や問題の根本から見つめて最適なクリエイティブで解決することで、 最終的にはお客さんのファン・私たちのファンを、一人でも多く増やしていくことを目指しています。 中小企業〜大手企業のWebサイトをはじめ、展示施設のインタラクティブコンテンツ等変化の激しいデジタル領域での表現を強みとしつつ、 アーティストのMV制作、VI/CIやグラフィック制作など、 若い会社でありながら徐々に領域を広げ、 幅広いクリエティブで、クオリティを追求し、進化し続けています。 そんな私たちの考えに共感し、デザインやクリエイティブの力を信じる仲間を募集します。 ■業務内容 企画提案から納品まで、裁量を持って担当していただきます。 お客さんの顔が見え、仕事の上流から関わることができるため、 クリエイティブによる本質的な課題解決にコミットしていただけます。 ・調査、企画提案 ・見積もり&スケジュール作成 ・打ち合わせ ・クリエイティブワーク(Webデザイン、映像、アプリケーションetc) ・ディレクション業務(コーディング、撮影、コピーライティングetc) 上記の他にも、あなた自身のスキルや、興味、経験、志向を業務に活かしていただけます。 ・映像撮影、編集 ・モーショングラフィック ・イラストレーション ・コピーライティング ・3DCG 等

  • 神奈川
  • 新卒 / 中途
  • 320万~500万

“デザイン”が生み出す価値で 世界をよりよくする。 WEBデザイナー募集 !

株式会社プラスディー株式会社プラスディー

【具体的な業務内容】 クライアントのコーポレートサイトやキャンペーンサイト、採用サイトのデザインをディレクターと協業しながらおこなっていただきます。 プロジェクトによっては企画段階から参加していただくものもあるため、プロジェクト全体を見ながら職種の枠にとらわれない自由な発想でご活躍いただけます。 ご入社直後はデザイン業務をお任せしますが、将来的にはアートディレクターへのキャリアアップやメンバーのマネジメントに携わることも可能です。 ご経験や方向性によっては、印刷物のデザインや動画編集等、デジタル以外のデザインに携わっていただく場合もございます。

  • 東京
  • 中途
  • 340万~570万