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つの働き方
1.分析・調査(市場調査、顧客分析、情報整理)
2.提案(インタビュー、解決策の提案、プレゼン)
3.プロトタイプ(情報設計、試作品、動作の検証)
4.インターフェースデザイン(各パーツのデザイン、スタイルガイドの作成)→コンポーネント化
5.フロントエンドコーディング(フレームワークの利用、HTML/CSSの調整)→カスタマイズの能力が必要
6.CMSカスタマイズ(CMS設定、プラグイン設定)→別にWordPressでなくてもいいものもあるかも?
7.テスト(ユーザビリティテスト、アクセシビリティテスト、改善点の洗い出し)
★これからの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つのスマートオブジェクトを編集するとそのコピーも変わる
・スマートオブジェクトを使おう
1.サイズの違う広告バナー
2.外部ファイルをスマートオブジェクトとしてリンク
まとめ:とにかく管理しやすい
■CSS最新テクニック集
1.Flexboxでレイアウト組
display:flex;
・ボックスの上下中央や画像とテキストを互い違いに
polyfill
・flexibility.js
2.画像のトリミング
object-fit:cove;
object-position:left top;
余白を表示させる場合
object-fit:contain;
polyfill
・object-fit-images
・Polyfill for CSS objectfit
3.スクロールすると要素を固定
position:sticky;
親要素が終わるところまでスティッキー
polyfill
・StickyBits
・Stickyfill
4.縦書き
-ms-wiriting-mode:tb-rl;
writeing-mode:vertical-rl;
このままではアンカーの線が左になるので
→text-decoration:overline;
をつかう
■Polyfillの是非
・主要ブラウザーに対応
・手間が増える
・負荷が増える可能性も
感想
Manaさんは海外での制作経験が豊富なので、海外のWeb制作事情にとても詳しい印象を持ちました。あとプレゼンもとっても上手! 実物のManaさんは笑顔がとっても素敵なかたでしたよ!