Webクリエイターボックスのmanaさんによるセミナーに参加してきました。とりあえずセミナーの内容をざっと紹介します。
※個人的なメモを参照して書いているので、ちょっと不完全かもしれませんがご容赦を
目次
第1部 これからWebデザイナーに必要なもの
■これまでのWebデザイナーの仕事
・デザイン（Photoshop）
・コーディング（HTML/CSS）
・CMS（WordPressなど）
■Webサイトの現状
・高品質なテンプレートの存在
→Theme forest、Template Monster
→CSSフレームワーク（BootStrap、Foundation、Material Design Lite）
・人口知能によるデザイン
→WIX ADI（いくつかの質問に答えるとサイトができる）
→Tailor Brands（ロゴに特化した人工知能）
こういったものを使うと誰でもそれっぽいものを作れる
→それではWebデザイナーは必要ないのでは？
・海外に外注する
→コスト削減/高い技術力がある/コンテンツに注力できる（進行管理、マーケティング）
★海外のクラウドソーシング
→freelancer、Upwork、crowdSPRING
海外のクリエイターは仕事に貪欲！（日本人には仕事に対する貪欲さがあるか？）
■これからのWebデザイナーのすることはコーディングとデザインだけじゃない
・7つの働き方
１．分析・調査（市場調査、顧客分析、情報整理）
２．提案（インタビュー、解決策の提案、プレゼン）
３．プロトタイプ（情報設計、試作品、動作の検証）
４．インターフェースデザイン（各パーツのデザイン、スタイルガイドの作成）→コンポーネント化
５．フロントエンドコーディング（フレームワークの利用、HTML/CSSの調整）→カスタマイズの能力が必要
６．CMSカスタマイズ（CMS設定、プラグイン設定）→別にWordPressでなくてもいいものもあるかも？
７．テスト（ユーザビリティテスト、アクセシビリティテスト、改善点の洗い出し）
★これからのWebデザイナーは・・・
→「UXデザイナー」に
画面だけのデザインからユーザーが体験するものをデザインする
海外の学校では「Webデザイナー科」はなくなりつつあり、代わりに「UXデザイン科」が増えている
新しいものを作るだけでなく、既存のものの改善も
→制作会社（外部）から企業のWeb担当に
社内だけでやる・社内で専属チームをつくる
つまり、Webデザイナーの就職先は制作会社だけではない！
★今すぐできること
・コミュニケーション能力
自分から積極的に話す
（Manaさんは1日1回知らない人と話す訓練をしたそうです）
・デザイン思考
問題を調査・分析、ビジュアルデザイン
日常の問題点から解決策を考える
・プレゼンテーション
プレゼンする、勉強会やライトニングトークで練習
これからのデザイナーは「よりよい生活を提供する」
★こんなWebデザイナーは成長しない
・情報収集しない
→情報収集の時間をつくる
→RSSやSNSを利用する
・人の意見を聞かない
→柔軟に意見を取り入れる
→聞く事を恐れない
・新しいことにチャレンジしない
→新しい技術を取り入れる（CSSでグラデーション、SVG、ウェブフォントなどからでも）
→一度に全てを理解しようとしない
・上司やクライアントに提案できない
→注文の奥を読む
→デザイナーとしての意見をいう
→ユーザー目線に立つ
→否定はしない、依頼通りにするとどうなるか説明する
・デザインの理由を説明できない
→クライアントの求めるイメージを理解する
→各デザイン要素のもつ意味を理解する
→他のサイトを見て分析する
・予定を立てない
→仕事を分析、細かいタスクに分ける
→時間を考える
→優先準備を決める
→実際に時間を測る（HARVESTアプリ）
第2部 最新のWeb制作のトレンドとその実装方法
■プロトタイプ制作のススメ
・これまではワイヤーフレームだった
※ワイヤーフレームの問題点
→操作性が不明確（アニメーションするか？タップできるか？わからない）
→共有しずらい
→手間がかかる（こともある）
UIキットを使えば少しはましかも
・プロトタイプのいいところ
→操作性が視覚的に説明できる
→共有しやすい
→手間が省ける（こともある）
慣れるまでは時間ががかる
・プロトタイプ作成ツール
→Adobe XD（日本製）
→Prott（日本製）
→invision
まとめ：プロトタイプはコミュニケーションの補助ツール
■補色色相配色に挑戦
インパクトのある配色
・補色ってなに
→12色相環で対角線上にある色
・コツ
→明度を調整
→彩度を調整
→グラデーションにする
→一部だけに使う
・やってはいけないこと
背景色の上に補色の文字を重ねると読めない
まとめ：難易度は高いがインパクト大
■Photoshopのスマートオブジェクトを使いこなせてるか？
・スマートオブジェクトの特徴
→画像を劣化させることなく変形できる
→1つのスマートオブジェクトを編集するとそのコピーも変わる
・スマートオブジェクトを使おう
１．サイズの違う広告バナー
２．外部ファイルをスマートオブジェクトとしてリンク
まとめ：とにかく管理しやすい
■CSS最新テクニック集
１．Flexboxでレイアウト組
display:flex;
・ボックスの上下中央や画像とテキストを互い違いに
polyfill
・flexibility.js
２．画像のトリミング
object-fit:cove;
object-position:left top;
余白を表示させる場合
object-fit:contain;
polyfill
・object-fit-images
・Polyfill for CSS objectfit
３．スクロールすると要素を固定
position:sticky;
親要素が終わるところまでスティッキー
polyfill
・StickyBits
・Stickyfill
４．縦書き
-ms-wiriting-mode:tb-rl;
writeing-mode:vertical-rl;
このままではアンカーの線が左になるので
→text-decoration:overline;
をつかう
■Polyfillの是非
・主要ブラウザーに対応
・手間が増える
・負荷が増える可能性も
感想
Manaさんは海外での制作経験が豊富なので、海外のWeb制作事情にとても詳しい印象を持ちました。あとプレゼンもとっても上手！ 実物のManaさんは笑顔がとっても素敵なかたでしたよ！
