CSS Nite Shift12「Webデザイン行く年来る年」に参加してきました
12月22日、浅草橋にて年末恒例のCSS Nite Shift12「Webデザイン行く年来る年」に参加してきました！
1年最後のCSS Nite、今年のWebについての総まとめとなる大規模講演会として「これに参加しないと一年が終わらないぜ！」な方もいるのではないでしょうか！
わたし自身は、前回参加が2015年のShift9でしたので、3年ぶりの参加となりました。
この記事の目次
CSS Nite Shiftとは
CSS NiteはWeb制作にかかわる様々なテーマで開催されているセミナーイベントです。
デザイン、コーディング、制作ツール等の技術的なテーマや、ワークフロー、ディレクション、Web業界トレンドなどのテーマまでWebに関することなら多岐に渡っており、各地方でも開催されていたり、年間を通して各地で開催されています。
Shiftシリーズは毎年年末に開催される、その年のWeb業界を振り返る、年間のCSS Niteの中でもっとも大きいイベントです。
今年のトレンドを振り返ったり、来年以降のWebってこうなるんじゃない？といった「一年の総決算」をして年の瀬を迎える、そんな大ボリュームイベントになります。
今年のShiftはこんな傾向でした
今年はデザイン、構築、ディレクションなどの具体的なテクニックに関する話よりも、「世界・日本のITを取り巻く環境変化と、その中でもWeb業界はこの先どうなっていくのか、我々はどう働いていくのか」という、マインド寄りのお話が強かったです。
技術進歩が高速化していく中で、コンピュータ、ネットワークに直結した仕事である我々Web業は、自分のスキル等の狭い次元じゃなく、これからの働き方ってどう変わっていくのかという広い次元でも考えていかないと、どんどん社会が、環境が先に行ってしまうなぁと。もちろんスキルを上げてくことも必要だけど、社会を俯瞰で見つめていかんとなりませんね。
頻出ワード：「AI」と「自動化」
Webやデザイン業界でもAdobe SenseiをはじめとしたAI技術というのがどんどん成長してきていますね。
話題になった手書きWFをHTMLに変換する「Sketch2Code」など、Web制作でもいちいち人の手でやらずともAIがやってくれる部分というのが増えてきて、その精度も今後急速に上がってくるのは明白です。
マウスを動かしキーボードを叩かずとも、簡単になにかを作り上げることができるようになってきたし、
一般ユーザーは機械操作が苦手でも音声だけであらゆる操作をすることができるようになってきていますね。
SiriからGoogle Home、Alexa等のスマートスピーカーのみならず、家電や自動車も音声操作がもっと広がっていくでしょう。
基調講演の中で紹介されてた、総務省の5G時代のイメージムービー
内閣府のソサエティ5.0のイメージムービー（Youtubeでは公式アップされてないみたい？）
空から宅配の荷物を届けてくれるドローン！？
今ある食材からメニューを提案してくれるAI家電！？
自宅に居ながら受けられる遠隔診療！？
そんなソサエティ5.0の世界をご覧ください。#ソサエティ5.0 pic.twitter.com/Dc5sPdHoHR— 内閣府政府広報オンライン (@gov_online) 2017年12月25日
音声で多くの家電を操作したり、その「場」にいかなくても診療したりできるようになる未来が、そう遠くない未来になる。無人配達や無人農業など、人手不足な分野を完全自動化していき、人口が減っていく地方のインフラもかなりAIの助けによって改善されていくことになりそうです。
そうなると、ゆくゆくは「じゃあ人間でなくてはならない部分ってなに？」「人間だから生み出せる価値ってなに？」というところがビジネスのキーになってくるはずですし、それを考えずにただただ今と同じように目の前にある案件だけをこなしていると、気付いた時には本当に人間は淘汰されてしまうのだろうなと思います。
いわゆる「AIは人間の仕事を奪うか？」という話については、わたしは単純にAIが人間の雇用を奪うということは考えてなくて、
人間がやんなくてもいいところはAIで自動化すればいい、そこに人間の労働力を割かなくていいと思うし、その代わり人間は人間にしかできないことに価値を見出して次の段階へ移るべきだと思います。
それって具体的に何？というのはそれぞれが模索していかねばならないですがね。
AIは暮らしや仕事を便利にするものであり、それによって今まで使えなかった時間が使えるようになるならAI大歓迎ですよ。
遅かれ早かれWeb制作者も直面するAI、自動化問題、いざその時が来るまでに考えて置きたい問題ですね。
いきなりWebという枠組みを完全にとっぱらった基調講演に、かなり考えさせられました。
これからのデザインツールはやっぱりAdobeが優勢か
ツールセッションはデザインツール何使うか問題。
わたしはほぼAdobe勢ですね〜すっかりXDメインでPhotoshop、Illustrator、Typekit（現Adobe Fonts）等々、Adobeに集約してる感があります。（コーディングはDreamweaverでなくSublime Textを使ってますが）
Adobe以外ではSketchを使っている会社も結構多いようなのですが、やはりMacでしか使えないこともあり、SketchよりXD、Photoshopのほうが優勢でした。アメリカではSketchがかなり優勢でしたね。ということはアメリカではMacで制作している会社が多いっていうことなんでしょうね…日本はWin環境が多いのでそのせいでツールに制約が出るっていうのは往往にしてあると思います。
今年、6月にCSS NiteのXD特集に参加したこともあり、XDをきちんとサイトデザインのメインツールとして使い始めたら個人的にはもうPhotoshopでデザインはきついな、と思います。
ただ、LPのようにグラフィック重視なページ、他のページとの共通パーツの整合性等を考えなくていいページのデザインの場合は逆にXDだとやりにくいところもあるので、そこはPhotoshopがいいのかなと思います。
XDはプラグインが多数公開されるようになりましたし、イケイケなアプデによって利便性は今後もますます高まりそうですね。
もはやXDはWebデザインの覇権アプリケーションといっても過言ではないでしょう。
毎度楽しみなフォントのセッション
鷹野さんとフォントおじさんこと関口さんのフォントのお話は本当面白いので、今回も楽しかったです。
フォント周りの今年の動向のお話でした。
あ、そうそう、会場のマーケットプレイスで新作フォントおじさんトートバッグをゲットして来ました〜！
生地しっかりで使い勝手がよさそうです。やった〜。
フォント、わたしも筑紫シリーズが大好きで、オシャレながらにすこし懐かしさもありつつ個性的なフォルムが、どの書体でもキュン…とくるポイントがあっていいですよね〜。
フォントセッションで気になった話題は、コーポレートフォントですかね。
大企業が自社のオリジナルフォントを作ってブランディングに使用しているという流れが流行ってるっぽい。
要するにフォントライセンス料を払い続けるより自社でフォントを作ったほうがコスト削減になるっていう狙いと、独自のフォントでブランディングしているっていう狙いがあるようですね。
・株式会社デンソー
・MINI
・LEXUS
あたりがコーポレートフォントの例として紹介されていました。ブラウザで要素検証するとフォント名が見れますが、「DENSO_TP_2017」だとか「MINIRegular」、「レクサスロダン」など社名をフォント名に含めているのがコーポレートフォントの特徴です。既存書体をベースに少しアレンジしていることが多いのかな（レクサスロダンは名前のとおりロダンがベース）
フォントを作るってだけで結構な費用がかかってそうと思うんですが、ライセンス料を払う方が高くつくっていうレベルの企業じゃないとなかなかコーポレートフォントは難しそうな気も…、他にもコーポレートフォントをやってる企業を探してみたら面白いかも！
ロゴタイプ以外でもサイト上のフォントに独自色を出していくサイトが増えて、ますますサイトのブランディングにフォントは欠かせない存在になってきているなぁと思いました。
アクセシビリティは色のコントラストにも気を配ろう
アクセシビリティについてもShiftでは毎年のテーマです。
以前参加した3年前は、目が不自由な方がサイトを音声読み上げで閲覧すると、どんなかんじなのかといったお話をされていたのを覚えています。
今回はチャットワークのデザイナーさんをゲストに迎え、「色のコントラスト」という面をメインにアクセシビリティを考える内容でした。
マシンリーダブルなマークアップに比べると、色の配慮はまだまだ深まってないですよね。
色覚異常（色覚多様性）の人からどのように見えてるかというところまで考えている人となると、そこまでは考えてない人のほうが多いのではないかと思います。
色覚も、赤が見えづらい人（P型）、緑が見えづらい人（D型）、青が見えづらい人（T型）と、人によってタイプが異なるので全方向に配慮するとなると大変です。
試しにわたしのカラフルなイラストがそれぞれの色覚でどう見えてるかをシミュレーションしてみました。
うーんまだこれはコントラストがマシってかんじですかね！？
色覚多様性の人がどういう点で見えづらさを感じているのかというのをチャットワークの実例で挙げていましたが、
たとえば「赤文字で強調しても、赤が見えづらいのでほぼ黒文字と変わらない」というのは、なかなか驚きでした。普段わたしたちも、サイトの中で注意書きの強調に赤を使いがちですもんね…
仕事で使うコミュニケーションツールであるチャットワークのようなアプリケーションでは、あらゆる色覚の方、全盲で音声読み上げを使う方等、どんな人でも使えないといけないため、非常に難しいでしょうね…
色に関するアクセシビリティについて大事なのは、何色に見えてるかどうかというより、「他の要素と区別があることがわかる」＝情報がしっかり伝わることです。
また、色のコントラストは、差があればあるほどくっきりするからいいのかと思ってましたが、逆に、コントラストが強すぎると眩しくて視覚障害の人の中にはキビシイので、真っ白と真っ黒、にするより、白の代わりに薄めのグレーにするなどコントラスト差が激しくなりすぎないようにする必要があるとのことです。
いやー難しい…
でも普段何気なく色を選択していたけどアクセシビリティ配慮は全然してこなかったからちょっち反省です。
色覚のシミュレータは色々あるみたいですが、
ブラウザではChrome拡張機能の「Spectrum」は簡単に様々な色覚の見え方がチェックできます。
Photoshop、Illustratorでも「表示＞校正設定」からP型とD型の色覚がチェックできます。
そうえば、あの有名な「いらすとや」さんはあらゆる色覚でも見やすい、かなり計算されたユニバーサルデザインで描かれているという記事も見ました。
イラストでここまで色覚に配慮できるのはすごいですよね。
Web制作会社このままでいいのか問題
このセッションが自分的にはもっとも現在の自分の状況と照らし合わせてぶっ刺さったセッションでした。
株式会社デスクトップワークスの田口さんが、「受託制作オンリーではクライアントの依頼依存になってしまう危機感から自分たちならではの価値って何？を追求し、受託依存しないマネタイズをどう創出していったか」をお話されました。
これ。
これめっちゃまさに自分がそうなんですよ…
クライアントからの依頼でもって制作し、お金を得ているわけですが、反面依頼が少ない月や案件が長引いた月などは思ったように収入が得られないという状況に陥りがちです。そもそも依頼がなければ自分たちは食っていけないという、他者依存であることに危機感があります。
まだまだ毎月十分に案件がある…というわけでもなく（というか常になんらかの案件はやってるんですが、受注から納品までスムーズにいくことばかりではないため）自転車操業的な働き方になっているなという自覚があるので、どうにかしないとこの状況から抜け出せないぞ…というのをずっと今年は考えていたような感じがします。
受託は受託で、それがやりたくてWeb業界に入った面もあるので、受託は続けていきたいですが、受託以外での収入源をつくるっていうことは真剣に考えていかないとならない自分の課題です。
価値の創出と受託以外のマネタイズ、2019も取り組んでいきたいですね…。
2018のデザイントレンドを振り返る
これも毎年恒例、トリのセッションですね。海外サイト、グローバル企業、日本の上場企業、自治体のサイトをものすごい数調査して見せてくれます。
数千ものサイトを見るってどれだけ大変なんだ…毎度頭が下がります。
普段見ないようなサイトをたくさん紹介され、こんなデザインありなの〜！？笑 と楽しく面白いコーナーです！
全体的に感じたのは、「今年のデザイン、トガってきてる」ってかんじでした。。
なんていうか、ブームの循環みたいなものかもしれないですが、シンプルが飽和したら今度はガツンとした色使いやクソデカタイポが出てきたり、大胆なデザイン、大胆なレイアウトが台頭し…みたいな。
その前にアクセシビリティのセッションがありましたけど、アクセシビリティどころじゃねえというような激しい色があったりと…（特に海外サイト）
このセッションはあくまで1年の振り返りで、「これがトレンドだからこれをやりなさい」という意味ではないですし、「これがイケてる！これがオシャレ！」という意味ではないので「マジで〜？」というのも結構出てくるのですが、そういうのを見るのも面白いです笑
もちろんこれはよくできてるな〜！というサイトとの出会いもあります。個人的に気に入ったのは「プリマハム」のスライダーのページャーがハム、見出しの区切り線？がソーセージになってるのです。かわいい。矢印がわりのフォークもかわいい。
懇親会も参加しました
結論からいうとちょこっとしかごはん食べれなかったのですが（またか！）
周囲の方や登壇者の方々とお話させていただきました。
前述の、株式会社デスクトップワークスの田口さんのセッションがかなり刺さったんで、直接いろいろ伺いたかったのでワークフローやマネタイズにまつわるところを掘り下げてお聞きして、その場で一緒にお話した方々との会話を通じて、もしかしたらこれが自分にとっても打開策かもしれない…と思えた点がいくつか発見できた…気がします！ありがとうございました🙏
それにしても、ここ数年まったく講演や勉強会に足を運ばなかったのにも関わらず、今年は足繁くWeb等の講演におもむき懇親会で知り合った方々も多くできたおかげで、行った先で知り合いに出会う！という楽しさがありましたね。ちょっぴり度胸も出てきたかな笑
これからフォローアップメールを読んで復習してきます！楽しみに取っておいたのだ。
CSS Nite公式サイト
いい一年のしめくくりになりました。来年もShift行きた〜い！
また来年もたくさん学んで考えて前進していきたいと思います！まとまらなくてめちゃくちゃ長くなりました…以上です！
2019はデザインやコーディングっていう技術系セミナー以外にも、ワークフロー改善やウェブ戦略といったあたりのテーマのセミナーに参加していきたいですね！
