新型コロナウイルス感染拡大にともない、社会や環境が目まぐるしい変化を遂げている昨今。
在宅ワークやリモートワークなどのテレワーク化が一層進み、「以前のような日常が戻ってくるのだろうか」という不安や、未経験でもスキルを取得すれば転職できるという観点から、今Webデザイナーへの転職が注目されています。
そんななか、現在デジタルハリウッドSTUDIOでは「将来を見据え、今からWeb業界に入って働き方を変えたい」「でも本当にWEB業界で大丈夫なのかわからない」など多数のお問い合わせを受けています。
そこで今回は、現場で働いているクリエイターをお呼びして、本音でお話しいただく『”この先どうなる？”現役Webデザイナーによる本音トークショー「Web業界のミライ予想図」』をオンライン形式で3週連続開催いたしました。
第1回目となる今回は、「これからのデザイナーに求められるデザインスキルのハナシ」と題して、現役Web/UIデザイナーである松下絵梨さんとイラストレーターの山下光恵さんをゲストにお招きし、お話を伺いました！
【目次】
１．イベント概要
２．ゲストのご紹介
４．Adobe Senseiの精度向上でさらに使いやすく！Adobe Photoshop
５．編集可能なロゴデータを作るならAdobe Illustrator
８．まとめ
イベント概要
まとめるとこのようになりますが、一つひとつのスキルについてもっと詳しく見ていきましょう。
ゲスト：松下絵梨さん
大阪のWeb/DTPデザイナー・講師。
通信機器メーカーで開発・サポート業務に従事したのち、DTPデザイン・ 広報秘書業務に転身。 デジタルハリウッドでWebを学び、2010年よりフリーランスとして独立。
ロゴや印刷物のデザイン、Webデザイン、Webディレクションのほか、最近ではセミナー活動・登壇にも力を入れている。
デジタルハリウッド大阪校 主幹講師/CSS Nite in Osaka 代表/Adobe XD ユーザーグループ大阪主宰。
ゲスト：山下光恵さん
イラストレーター／京都芸術大学常勤講師
キャラクターデザイン・４コマ漫画・イラストカット・TV番組美術ペイント・書籍・広告・工作付録・WEB等様々なメディアで幅広く活動中。
イラストレーションやグラフィックデザインの講師も務める。
Webデザインするなら絶対に外せない！Adobe XD
松下さん：
今日はさまざまなAdobe製品を紹介していきたいと思います。まずはAdobe XD。
こちらはプロトタイプ（試作品）が作成できるAdobe初のソフトと言われています。アートボードをつないで画面遷移を作成することができるんですね。
Adobe XDは他のAdobeソフトと比べてツールが少ないのが特徴です。シンプル設計なんですね。
Webデザインでは本格的なデザインに入る前に、どこに画像やロゴが入るのかをわかりやすく示す「ワイヤーフレーム」を作っていきます。
Webデザインでは制作過程で繰り返しをすることが多いのですが、Adobe XDは繰り返しに特化していて、「リピートグリッド」という機能を使えば、あっという間に同じエレメントを複製することができるのが特徴です。
また、写真やイラストを挿入する際も、ファインダーから直接ドラッグでマスクされた状態で配置できます。
複数の写真を一気にまとめて設定することもできますし、文章もテキストファイルをそのままドラッグして流し込むことができます。とても速いですよね！
また、アセットパネルを使うと、作成後でもフォントや色、レイアウトなどを一気に変えることができます。Adobe XDを覚えたら、もう他のソフトでデザインしたくないですね…（笑）
続いてプロトタイプのモードに切り替えてみます。これまでは、デザインでOKをもらってからコーディングをしたものを見せると、「ここからこのページに飛ぶとは思わなかった」と出来上がってからクライアントと齟齬が起きるケースが多かったんです。
それが、Adobe XDでは、ページ遷移をすべてプレビュー表示することができ、実際に完成品のような形でお客様に触ってもらえるんですね。
実際にデザインが終わったら、共有に切り替えて、デザインレビューでリンクを作成すると、データが自分のCreative Cloudにアップロードされるので、あとはURLを共有するだけ。
クライアントがXDを持っていなくてもブラウザ上でデータを確認できるようになり、コメント機能で修正ポイントを指示することができます。
これからWebデザイナーになるのであれば、Adobe XDは絶対に外せないと思いますね！
＜Adobe XDまとめ＞
・「繰り返し」に強く、ワイヤーフレームを簡単に作成できる
・アセットパネルでデザインを一括変更できる
・遷移先を設定し、完成品に近い形で作成できる
・URL発行でブラウザ上で共有できる
Adobe Senseiの精度向上でさらに使いやすく！Adobe Photoshop
山下さん：
私はイラストレーターなので、出来上がったイラストをさらに良くするために、Photoshopでいろいろ触って、さらなる可能性を模索するのに使っています。
たとえば、暗いところをより暗くしてメリハリを出したり、文字を入れたり。
Photoshopにはセピアや明るさキューブなど、いろんな効果がついていて、オン/オフをしたり、やり直しが効くのが良いところです。
松下：
私が最近気に入っているのは「オブジェクト選択ツール」ですね。ドラッグをするだけで、Adobe SenseiというAI（人工知能）が、綺麗に切り抜きをしてくれるんです。
たとえばこちらの画像。髪の毛がふわふわだし背景と色が近いし、今まで切り抜くのに苦労したんですけど、「選択範囲＞被写体を選択」を使うと、AIが予測して綺麗にマスクをかけてくれます。
「背景を削除」ボタンでワンクリックでこの通り。人物の切り抜きにより特化しました。
色を変えるだけでもそれっぽいのができてしまう。こんなアレンジも早くできるようになりましたよ！
編集可能なロゴデータを作るならAdobe Illustrator
山下：
続いて、Illustratorです。私のお気に入りは「シェイプ形成ツール」。
こんなふうにざっくりと影の部分を鉛筆ツールで描いて塗りつぶし、「シェイプ形成ツール」を使うと…
重なっている部分だけを残して切り取ってくれるので、簡単に影を作ることができるんですね。
次によく使うのが「文字タッチツール」。これは、フォントを1文字ずつ動かして簡単なロゴを作れる機能です。
これまでは文字をアウトライン化する必要があったので、文字情報を失っていたのですが、この機能では文字を変更することもできます。
また、文字を歪める場合も、「アピアランス」から「ワープ」で作成すると、あたかも見た目が変わったように見せているだけなので、文字を編集することができます。
松下さん：
IllustratorもPhotoshopもそうですけど、あとから編集可能な状態で作っているかどうかが大事ですよね。
結果は同じだとしても、クライアントから言われたときに元に戻せないと困るので、そういうデータを作るように意識しています。
最近のアップデートでは、なんと50㎡のサイズのものまで作れるようになり、大きなパネルでも原寸大で作れるようになりました。これも嬉しいアップデートだと思います。
ちょっとしたアイキャッチ作成に！Adobe Spark
松下さん：
Adobe SparkはAdobeのIDさえ持っていればブラウザで使えます。ブログのアイキャッチ画像を作るのにPhotoshopを開くのが面倒なときなどは、こちらでさくっと作っています。
テンプレートを選んだら、あとは画像や文字を変えるだけでちょっとしたアイキャッチ画像が作れます。普段デザインをしないディレクターさんなどに活用していただければと思います。
Adobe Dimension
山下さん：
Adobe Dimensionはデザイナー向けの3Dデザインソフトです。専門的に3Dをやっていなくても簡単に3Dを作成することができるので、デザインカンプや自分のキャラクターグッズを作るのに使っています。
アイテムの色や、背景の色なんかも変えられます。面白いのが、背景を設定すると、パースがぴったり合って、ライティングも自動で変わってくれるんです！
松下さん：
これまではPhotoshopで苦労して合成していたんですけどね。お客さんが実際に使ったところをイメージしやすいですよね。
マテリアルから素材を選べば、質感を変えることもできます。そしてこれをAdobeのiOS対応アプリ・Aero用に書き出してみると…。
先ほど作ったものを、実際の場所に置いたり、運んだりすることができます。これがDimensionとAeroの連携プレイでした！
Q. デザイナーに求められる具体的な画力は？
山下さん：
デザインとイラストが一緒に描けると、時間がないときもすごく助かるので描けるに越したことはないです。
松下さん：
私はイラストはほぼ描けないので、自分よりも手早く作ってくれる人に依頼するようにしています。ただ、Webデザイナーは「プラスアルファ」ができたほうが良いので、たとえば写真やライティングができると、次の仕事につながりやすいですね。
私はワイヤーフレームの段階で文章を入れて「良かったら使ってください」と提案したりしていました。
Q. 仕事はどこからいただくことが多いのか？
松下さん：
私はちゃんと営業したことがないですね。デジハリ生だったので、先生から仕事をもらったり、フリーランス仲間で仕事を振り合うことが多いです。
また、UIデザイナーに関する勉強会によく顔を出していました。それで繋がりができたし、そこからちょっとずつUIの仕事が増えていったので勉強会やセミナーはオススメです！
Q. UIデザイナーとWEBデザイナーはどう違う？
松下さん：
Webデザイナーは広くて、デザインに加えてディレクションやコーディングもできないといけないんですけど、UIデザイナーはもっと分業がはっきりしています。
アプリのデザインはできてもコーディングはできないから、最初からいろんな人が絡み合っています。いかに他の人とやりとりしていくかがキモなので、コミュニケーション能力がすごく大事です。
Q. デザインを仕事として受けたら個性はどこで出すのか？
松下さん：
私はまったく出しません。デザイナーは表現者ではなく代弁者で、クライアントがユーザーに伝えたいことをデザインするだけなので、ガーリーなものを作るときもあれば、堅いページを作るときもあります。
山下さん：
イラストレーターもやはり代弁者なので、ユーザーさんが使いやすいものを描きます。私は教材が多いので子供が見やすい色や線を使うことはもちろん、視力に障害がある子でもわかって、先生が白黒コピーをとってもはっきりと写ることを意識しています。
Webデザインを簡単に作れるツールがたくさんあるなか、どうやって生き残っていくか？
松下さん：
仕事がなくなる人もぶっちゃけいるとは思います。アシスタント的な業務でマスクばかりやりますとか、DTPオペレーター的な役割の人は、仕事をAIに奪われる可能性があるかもしれません。
でも、クライアントから真意を聞き出して形にしていくことや、フィードバックをもらって修正をすることは、我々しかできないこと。
それをちゃんとしているクリエイター仲間はずっと忙しいですね。自分で考えて、選んで、ちゃんとコミュニケーションをとって進めていくという考えがあれば食いっぱぐれないと思います。
山下さん：
たとえば、フリーのイラストをみんなよく使っているじゃないですか。でも、やっぱりみんなが使っていくと、だんだん区別が付かなくなってきますよね。みんなが使っているものを作っているとお客さんが迷ってくる。どちらがいい悪いではなくて、お客さんのことを思って作っていればきっと残っていけるし、結局人を大事にできる人が強いと思います。
「この人とまた仕事をしたい」と思ってもらえる人になることが大事なんじゃないかなと思いますね。
まとめ
定番であるPhotoshopやIllustratorはもちろん、あまり馴染みのないDimensionやAeroまでじっくり解説してもらえた本イベント。
Webデザイナーになるためのスキルセットはもちろん、マインドや仕事への取り組み方も現役のリアルな視点からお話してもらえ、Webデザイナーとして働くビジョンがより明確となったイベントでした。
就職・転職を目指す方におすすめのコースはこちら！
デジタルハリウッドSTUDIOは 忙しい社会人の方でも 仕事と両立し、 好きなときに好きな場所で学ぶ学習スタイルです。 目的別に選べるコースラインナップで、 就職・転職やフリーランス、パラレルワーク、副業 など、 一人ひとりに合った「オーダーメイドの」学びが可能となっています。
動画教材とアウトプットですぐに実践できる知識とスキルを身に着けられ、現役クリエイターからの指導を受けることができる個別トレーニングで、現場で使われる最新スキルが身につくカリキュラムです！
専科Webデザイナー専攻
未経験から6か月間でスキル習得可能なコースです。Adobe illustratorやPhotoshop、HTML5・CSS3、JavaScript、jQueryなどを使った制作スキルはもちろん、最新のデザイン、コーディング、 マーケティング等、Webデザイナーとしての仕事に欠かすことの出来ないスキルを身に付けます。
カリキュラムには作品制作が組み込まれているため、卒業時にはポートフォリオに載せられる作品が完成するカリキュラムです。コース詳細はこちら。
未経験から就職・転職を目指す方にオススメ
実践アウトプットクライアントワーク付き
Webデザイナー専攻 超実践型 就職・転職プラン
「超」がつく3つの理由
・最大3つのお仕事にトライ
・『推薦シート』で自分に合った企業を目指せる
・あなたに合った最適な会社と職種をご紹介！
専科Webデザイナー専攻 主婦・ママクラス
Webデザイナーは、自宅で仕事ができ、自分で仕事の量・時間・休日も決められ、年齢・資格に関係なく働きやすい仕事です。
未経験から6か月間でスキル習得可能なコースです。子育て、家事と仕事が両立できる次世代主婦・ママWebデザイナーを目指すカリキュラムです。実際の仕事に挑戦する「お仕事トライアル ライブ授業」つきで、在宅ワーク・フリーランス、再就職が適いやすい！
平日昼のクラス制授業、シッターサポートなどでで、忙しい主婦・ママが学びやすい学習環境を整えています。詳細はこちら。
専科ネット動画ディレクター専攻
Adobe Premiere ProやAdobe After Effectsなどのソフトの操作スキルはもちろん、最新の動画マーケティングの情報、動画制作におけるPDCAの回し方、 企画やシナリオの作り方などのディレクションに必要な知識も学びます。
現役ビデオグラファーから教わる撮影・編集のコツ、 動画制作のクオリティを上げる方法などの制作スキルを上げるための授業もあり、 現場ですぐに活用できる知識とスキルの習得を目指します。詳細はこちら。
オンライン説明会も開催中！
スクール説明会（無料）では、業界に精通する専門カウンセラーがご案内！ご自身の目的にあった会社・職種・必要なスキルを一緒に探しましょう。
現在、STUDIOなんばではご来校での説明会と合わせ、オンライン説明会も開催しております。詳細はこちらをご覧ください。
