「Webクリエイターボックス Manaさんによる特別セミナー」に参加してきました。

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さんは笑顔がとっても素敵なかたでしたよ!

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project


この記事をかいた人

ドレッド Webクリエイター、ライター

Webクリエイター&フリーライターのドレッドのブログです。インターネットの力で自由に生きている私のライフログやちょっとしたメモを記録しています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! note始めました!

Web制作 | Posted on 2017/12/10 02:54

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。