ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

時代はモバイルファーストからAIファーストへ!CSS Nite Shift12 「Webデザイン行く年来る年」に参加してきました

f:id:kotomin624:20190128115459p:plain
CSS Nite Shift12

こんにちは、デザイナーのコトミグ( id:kotomin624 ) です。 去年の12月22日(土)に開催された、CSS Nite Shift12 「Webデザイン行く年来る年」に参加しました。CSS Nite Shiftは毎年欠かさず参加していて、これに行かないと年を締めくくれません!去年もしっかり締めくくってきました。
毎回とても勉強になるセッションばかり。全部は書ききれないので私が個人的に気になった所をまとめていきたいと思います。

CSS Nite Shift とは?

Shift12:Webデザイン行く年来る年(CSS Nite LP59)

CSS Niteは web制作に関する様々なテーマで開催されるセミナーイベントです。そしてCSS Nite Shiftは、毎年年末にその年のWeb制作シーンを振り返り、知識やスキルの棚卸しをする目的で開催されているイベントです。

今年はこれまでと少し違っていて、出演者の方の顔ぶれやセッション内容に変化がありました。これまでは割とマークアップ寄りの内容が多く、新しいコーディング技術が中心でライブコーディングなどもありました。しかし今回は「web業界の今後の動向」や「これからの時代で生きぬくには」みたいなお話が多かった印象です。

モバイルファーストからAIファースト

基調講演:「産業や社会、そして人の行動の変化、2020年に向けて何を見据えるべきか?!」

これからは農業や産業、ありとあらゆるものにAIが搭載される時代になり、自動運転、遠隔医療や無人の小売店、多言語同時通訳などができる時代になるそうです。
たしかに「話しかけるだけ」で操作ができるなんて、ほんの10年前まではドラえもんの未来道具のような、現実的なモノではありませんでしたが、今私たちはあたりまえの様にプロダクトに話しかけますよね。

今がちょうど転換期。どういう未来が創造されようとしているかを知り、私たちWeb製作者はどう参入していけばいいのか、そんな未来を生き抜くヒントが散りばめられていました。

紹介されていたムービー

【イメージムービー】Connect future ~5Gでつながる世界~(3分ver)

Webクリエイターのための情報交換所

「Webクリエイターのための情報交換所」はWeb業界のトレンドやニュースを投稿できるFacebookのコミュニティです。お恥ずかしながら私ははじめて知りましたのでさっそく参加申請を出しました。

このセッションでは2018年の反響が高かった投稿を紹介。
気になる方は「Webクリエイターのための情報交換所」をのぞいてみてください。

www.facebook.com

ツール

多様化するデザインツール。キーワードは連携。

このセッションでは普段デザイナーが何のツールを使っているか、アンケートの回答を元に紹介されていてとても興味深かったです。今って本当にツールが沢山あるので本当に迷います。それにデザイナーといってもいろいろありますから、他のデザイナーさんがどういうものを使い、どういう風に仕事をされているか興味津々でした。
便利なものはどんどん取り入れて行きたいです。

Q. 普段仕事で制作するもの

  1. (回答者数 143)
    43% 入力操作を伴う動的なWEBサイト
    40% リッチなグラフィックのWEBサイト
    36% 静的ページ多めの読み物系WEBサイト
    15% その他

Q. 2018年 Webデザイナーが使ったツールは?

  1. (回答者数 143 / 複数回答可)
    85% Photoshop
    70% Adobe XD
    66% Illustrator
    29% Sketch

ツールで多いのはやはりPhotoshopでした。私も基本的にはAdobe製品で統一しています。理由は連携しやすく使い慣れているから。あと、Adobeは会社でライセンス契約をしているので取り入れやすいからということが大きいかもしれません。 Sketchは興味ありますが、有料なのでプロジェクトで使うには少しハードルが高いですね。

アンケートだけではなく、ツールの便利な使い方の紹介もありましたので詳しくは動画やスライドでご覧ください。

セッション内で紹介されたツール

(フォローアップより抜粋)
1)iPadで利用できるPhotoshop CCの告知ページ
https://news.adobe.com/press-release/creative-cloud/adobe-announces-next-generation-creative-cloud-max-2018
2).aiに対応しているハンドオフツール「Avocode」の紹介ページ
https://avocode.com/adobe-illustrator
3).sketchファイルをバージョン管理できるサービス「Abstract」
https://www.goabstract.com/
4)要素間の距離を保ったままデザイン可能なSketchのプラグイン「Anima」
https://animaapp.github.io/docs/
5)Google謹製ハンドオフツール「Gallery」
https://material.io/tools/gallery/
6)Adobe XDの詳細アップデート情報。動画での使い方紹介などもあります。
https://blogs.adobe.com/japan/serialization/adobe-xd-update/
7)Googleのスプレッドシートを.xdファイルに連携できるプラグイン「Google Sheets for Adobe XD」
https://googlesheetsforadobexd.impekable.com/
8)写真配布サイト「Unsplash」の画像を簡単に.xdファイルに取り込めるプラグイン「PhotoSplash Pro」
https://www.qooqee.com/adobe-xd/plugins/photosplash/
9).xdや.sketchから画面遷移図を作成することができる「Overflow」にを連携させるプラグイン
https://blog.overflow.io/adobe-xd-overflow-a-divine-connection-ba6908043dcf
10)ブラウザからログインして利用でき、複数人で同時編集可能なデザインツール「Figma」
https://www.figma.com/
11)インタラクションをコードで制御できるデザインツール「Framer」
https://framer.com/
12).xdや.sketchを取り込んでリッチなUIアニメーションを作成できるツール「Kite Compositor」
https://kiteapp.co/

アクセシビリティ

デザイナー視点から考えるアクセシビリティ

毎回楽しみにしているセッションの一つです。アクセシビリティの話はもちろんですが、他ではない小ネタが満載なんですよ〜。今回は笑っていいとも!のパロディで進行されていました(笑)
途中に挟まるCMも面白い!これも含め、動画で見て欲しいです。

今回はデザイナー目線。W3Cのガイドラインに新たに追加された「4.5:1 コントラスト比」や、視覚的なアクセシビリティの考え方はかなり勉強になりました。

weba11y.jp

フォント

抑えておきたいフォントまわりのトレンド

毎度おなじみ高野さんとフォントおじさんこと関口さんとのセッション。相変わらず面白い。冒頭で紹介されていた「フォントかるた」が欲しくて、探してみるとAmazonに売ってました。

f:id:kotomin624:20190128120935p:plain
フォントかるた

Amazon CAPTCHA

今年も沢山のステキなフォントがピックアップされていましたがここでは「今年の文字2018」をご紹介します。 他のフォントはスライドをご覧ください。(ページ下部にリンクがあります)

今年の文字2018

  • 筑紫Q明朝L
  • 貂明朝カラー化
  • NPGクナド
  • 高輪ゲートウェイ

高輪ゲートウェイと虎ノ門ヒルズのフォントは市販されているものではないですが、Twitterで話題になっていたものです。
とても素敵ですよね!使われればいいのにな〜!(笑)

また、2018年はコーポレートフォントがWebサイトに導入されているケースが目立ったようです。ブランドに合ったフォントをアリモノから使うのではなく作ってしまう。そうすることで世界感を統一しやすく、またフォントは使用料がかかりますので結果的に費用を抑えることができるからだと思います。
今年はどうなって行くのでしょうね。注目していたいと思います。

制作会社として抱く「このままでいいのか」問題

デスクトップワークスの田口さんのセッションでは、制作会社における仕事内容の現状と不安、マネタイズのお話しがありました。受け身(受注案件)だけでこれから先やっていけるのか、そういった不安の解消のために行なった「自分たちならではの価値」の追求のお話は、私自身も考えていたことなのでかなり刺さりました。

2018のデザイントレンド

CSS Nite Shiftの目玉セッションです!これを見に来た!!って人も多いと思います。毎回ものすごい数のWEBサイトをピックアップされていて本当に圧倒されます・・・。
これだけでもデザインの参考になりますので、是非是非動画で確認してください!

おまけ

f:id:kotomin624:20190128121610p:plain
adobe Illustrator / Photoshop クリアファイル
会場でAdobeのクリアファイルをいただきました!かわいい!

CSS Nite Shift12 スライドと動画

CSS Niteの有料版は、およそ90日後に、スライド/音声などを参加されていない方にも公開されます。 このイベントはチェックしてご覧ください。

cssnite.jp