【2020年度版】 Webデザイナーを目指す人の為のスキルチェックシート
今回は、Webデザイナーを目指す方向けに、身につけるべき3つの重要なスキルをご紹介します。
Webの世界は新しい技術が次から次へと生まれていて、最新のテクニックを習得しないといけない印象があると思いますが、実はWebデザイナーに必要とされるスキルは15年前からほとんど変わっていません。
結論からお伝えすると、AdobeのPhotoshop/illustrator/Dreamweaverの3つのソフトを集中的に習得して下さい。
Web制作・デザイン関係の勉強はたくさんの事を覚える必要がありますので、「何を覚えるべきか」しっかりと把握し、ゴールを見据え逆算した上で、学習を進めましょう。
自分は何を勉強していて、今どこの位置にいるのか常に確認してWebデザインスキルを一つひとつ確実に身につけましょう。あとはポートフォリオサイトを作成し、自信を持って面接に挑んで下さい。
それでは2020年度最新の、Webデザイナーに必要とされるスキルをご紹介します。この記事を就職活動の際にスキルチェックシートとしてご活用いただければ幸いです。
この記事の目次
Webデザイナーが普段使っている基本ソフトはPhotoshop/illustrator/Dreamweaverの3つだけ
前述の通り、Webデザイナーと聞くとたくさんの最新Webスキルを習得しなければいけないというイメージをお持ちの方もいらっしゃると思いますが、Webデザイナーとして就職する為に必要なスキル(ソフト)はたったの3つだけ。これは私がWeb業界に入った15年前から何も変わっていません。
Photoshop/illustrator/Dreamweaverを使ってWebデザインとコーディングが出来れば、いろいろな就業先を選ぶ事が出来るでしょう。
それでは各ソフトの役割と必要なスキルについて解説していきます。
【優先順位1】Photoshopを使って写真加工/バナー/ページデザインが出来る
Webデザイナーが使うデザインソフトとして最も多く使われているのは間違いなくAdobe Photoshopです。Web業界ではPhotoshopがWebデザインの標準ソフトとして採用されています。
私が東京で最初のWebデザイン制作会社に勤めていた時、先輩デザイナー全員がPhotoshopを使ってページデザインをしていました。その後、2社ほど他のデザイン会社に転職しましたが、やはりWebデザインソフトはPhotoshopでした。WebデザイナーにとってPhotoshopは必須のソフトです。
illustratorでバナーを作成する方やページデザインを行う方もいますが、illustratorは写真加工や切り抜きに弱い為、Photoshopでデザインした方が効率的に作業を進める事が出来ます。
Webデザイナーを目指す以上、Photoshopの習得だけは避けることは出来ませんので、Webデザインの勉強はHTML5+CSS3から勉強するのではなく、Photoshopを使って自由自在にデザイン出来るように基本操作と画像作成スキルを習得していきましょう。
それではPhotoshopを使ってどのようなスキルが必要なのかをわかりやすく解説していきます。
写真加工/切り抜き/色調補正のスキル
Webデザインでは写真を多く使います。写真が最も美しく見えるように写真の補正と切り抜きが出来るようにテクニックを身につけましょう。
Webサイトの中で第一印象を決めるの重要なパーツは写真です。写真こそがユーザーにとってのアイキャッチになりますので、ユーザーを惹きつける魅力的な写真の加工が出来るように練習しましょう。
Webサイトのバナーデザインスキル
Webサイトで最も重要な役割を担っているのが、バナーです。バナーはアクセスを促したいページへ誘導する為のイメージ画像です。バナー画像は小さい限られたスペースですが、バランスと要素の優先順位を考えてユーザーに情報が伝わるようにデザインする必要があります。
バナーデザイン制作の工程にはPhotoshopの基本操作が詰まっていて、勉強の際にとても良い題材となります。いろいろなデザインのバナーを作ってPhotoshopの操作に慣れましょう。
Webページのデザインスキル
バナーデザインのスキルを習得出来れば、Photoshopの基本操作はすぐに覚えることが出来ます。バナー制作の練習の後は、Webサイトのページをデザインする練習を行ってみましょう。
Webページデザインで最も大変なのは、PC / タブレット / スマートフォン3サイズのデザインを作成する必要があることです。近年のデバイスの多様化によってWebサイトのデザインは最も大変な作業となりました。
すべてのデバイスでユーザビリティ(使いやすさ)を意識したデザインが出来るように練習してみましょう。
【優先順位2】Dreamweaverを使ってHTML5+CSS3レスポンシブデザインのコーディングが出来る
Photoshopの基本操作と写真加工、基本的なデザインを習得することが出来た後は、Photoshopで作成したページデザインを元に、Dreamweaver上でHTML5+CSS3を使ってのレスポンシブに対応したコーディングが出来るように学習を進めましょう。
WebデザイナーはPhotoshopでページデザインを完成させた後は、作成したPhotoshopのデザインから画像を切り出して画像をパーツとして書き出します。そして、それらの画像をHTML5+CSS3を使ってコードに落とし込んでWebページに変換していきます。
PC / タブレット / スマートフォンそれぞれのデバイスに対応したHTML5+CSS3でコーディングする事をレスポンシブデザインと言います。
現在は大規模サイトでない限り、基本的にレスポンシブデザインでのコーディングがどの会社でも求められますので、各デバイスに対応したコーディングが出来るように練習をしましょう。
ポートフォリオサイトもレスポンシブデザインで行うと良いでしょう。
【優先順位3】illustratorを使ってアイコンやロゴを作成出来る
illustratorはベクターデータという画像を作成出来るデザインソフトです。名前の通りイラストを作る事も出来ますし、ロゴデータやアイコンなども作成する事が出来ます。Webデザイナーとしてillustratorを実用的に使う場面はアイコン作成とロゴデータを作る時です。
ベクターデータとは、サイズを引き伸ばしても劣化しないデータの事を言います。ロゴデータは、Web/名刺/看板/封筒/ステッカー/アパレル/製品など様々な媒体に使用する可能性があります。
街の巨大看板などでは、ロゴデータを引き伸ばして使う場合もあります。その際に、ロゴデータを引き伸ばしても高画質のまま引き伸ばしてくれるのがillustratorのベクターデータであり、これが最大のメリットです。
イラスト作成の出来るWebデザイナーはもちろん歓迎されますが、Webデザイン会社は外部のイラストレーターに仕事を依頼することがほとんどです。illustratorでイラストが書けるのは必要スキルの条件ではありません。
illustratorを使ってロゴとアイコンデザインが出来るようになれば十分です。
その他に歓迎されるスキル一覧
ここからは前述させていただいたスキルに加えて歓迎されるスキルをご紹介します。これらのスキルは絶対条件ではありませんのでご安心下さい。Webデザイン会社で勤務されてから勉強をスタートしても全く遅くありません。
今後も需要が増えていくスキルですので、時間的に余裕が出て来た時に学習を進めてみましょう。
動画編集スキル
これからは通信回線が5G(第5世代移動通信)に移行していきます。それに付随して動画を見る人がもっと増えていくでしょう。動画を見る人がこれまでよりも増えるということは、今後動画を制作する仕事も比例して増えるということです。
動画編集はAdobeのPremiere ProまたはAppleのFinal Cut Proなどで編集されている事が多く、これからの時代に動画編集スキルを身につけておくと有利になるでしょう。
動画編集といってもそんなに難しくはないので、動画を撮って楽しく編集しながら学んでいくと良いと思います。
WordPressをオリジナルデザインでサイトをカスタマイズできる
世界のWebサイトの3分の1はWordPressサイトで作成されています。WordPressとはWebサイトを更新しやすく運用する為のブログシステムです。WordPressベースでWebサイトを作る事によってSEO効果も高く、世界中で評価されているシステムです。
WordPressのようにユーザー側でコンテンツの更新などが出来る仕組みのことをCMS(コンテンツマネジメントシステム)と言います。
WordPressを使ったオリジナルデザインのカスタマイズ案件の依頼はとても多くなっていますので、WordPressの仕組みを理解しオリジナルデザインでカスタマイズ出来る人をWebデザイン会社は求めています。
WordPress自体は、書籍を1冊、2冊読み込めばすぐに理解出来ますので、時間の空いた時にぜひ学習を進めてみましょう。
jQueryを使って、スライダー、フェード、パララックス効果などのエフェクトをつけることが出来る
jQueryはJavaScriptをベースに作成されたプログラムのライブラリです。ライブラリファイルを読み込んで実行プログラムを数行書くことによって、Webサイトに動きやエフェクトをかんたんに加える事が出来ます。
Webサイトのメインにある画像切替スライダー、画像にマウスが乗った時にフェード効果を与えるエフェクト、他にも画像を遅延して表示させたりと、様々なエフェクトを加える事が可能です。動きのあるWebサイトはユーザーの目を惹くので、クライアントからの制作の依頼はとても多いです。こちらも時間的に余裕がある方はぜひ学習をしてみて下さい。
jQueryはゼロからコードを書く必要は全くありません。インターネットで検索して、HTMLとCSSを理解出来ていれば誰でも実装する事が出来ます。現場のプロデザイナーも、インターネットでその都度調べながらjQueryエフェクトの実装を行っています。
コミュニケーションスキルを高めよう
クライアントとのヒアリング、サイト立案、進捗状況の確認などWebデザイナーはコミュニケーション職と言っても過言ではありません。コミュニケーションが苦手だからWebデザイナーを目指したいです。という方をよくお聞きしますが、厳しいアドバイスとなりますがそのような方は、Webデザイナーにはなれません。デザインはコミュニケーションを通して生まれるからです。
まとめ
今回は、Webデザイナーを目指す方向けのスキルチェックシート2020年度版を解説させていただきました。これからWebデザイナーを目指す人は以下の3つのスキルに集中して学習を進めてみて下さい。
- Photoshopを使って写真加工・補正・切り抜き/Webデザイン/Webバナーデザインが出来る
- Dreamweaverを使ってHTML5+CSS3のレスポンシブコーディングが出来る
- illustratorを使ってロゴデザインが出来る
大阪・東京などの都心部では、Webデザイナーが常に人材不足となっていますので、この3つのスキルを身につける事が出来れば、多くの就業先を見つける事が出来るはずです。
もしあなたが今、Webデザインの独学でつまづいているならこのページで紹介させていただいている優先順位に従って学習を進めてみてください。常にゴールから逆算して一日一日を大切に、確実にスキルを積み上げて形にしていきましょう。
最新記事 by 石原 誠之 (全て見る)
- お問い合わせフォームがスマホで拡大されてしまうのを防ぐ為のCSS - 2024年4月10日
- スマホで横スクロールが出た場合の解決方法 - 2024年4月3日
- Contact Form 7でお問合せ後にサンクスページにリダイレクトさせる方法 - 2024年2月10日
- inputボタンがiPhoneでダサいグラデーションになってしまう問題を解決するCSS - 2024年2月9日
- Webデザインの独学に必要な期間は6ヶ月に設定しよう - 2023年10月11日
この記事へのコメントはありません。