Web Design Creative Plus － 今とこれからのウェブデザイン

10月6日（土）
Web Design Creative Plus － 今とこれからのウェブデザイン
と題して開かれた
日々変化し続けるウェブデザインの今とこれからについて
講演やセッションを通して学べるウェブクリエーターさん向けのイベント。

以前Schooの授業でご一緒したご縁で、
株式会社エイチツーオー・スペースの谷口 允（たにぐちまこと）さん　と
司会を担当させていただきました。
（ありがたい・・・）

Webデザイン素人なのですが、
貴重なお話たくさん聞けたので、まとめておきます。

会場は　COFFICE門前仲町　

普段はカフェとして営業しているそうですが、
機材の貸し出しも可能な、おしゃれなイベントスペース！
駅から徒歩1分の好立地で、
今回はスタッフ含め100人前後が着席可でした。広い。

（登壇者の皆さんも一緒に準備中）

開始前、5分前に着席していた皆さんにプレゼント！
クリエイターのための権利の本をめぐって
ということで共著者の齋木弘樹さんとのじゃんけん大会が行われました。

開始前に会場を盛り上げていただきました。
ありがとうございましたー！！

さて、開始時刻になり、いよいよセッションです。
まずはAdobe Community Evangelist 境 祐司さんの
「AIで変わるこれからのWebデザイン
　　　　　　　―AI時代のデザイナーとエンジニアの役割とは？」

セッションでは、
現在発表されているAIの定義に注意が必要で
実装されているもの、準備中のもの、空想のものなど
段階を冷静に見極めていきましょうねというところから始まり

AIで省力化されるもの
（デザインのテストや分析、サイトの情報設計など）と
AIの省力化が難しいとされるもの
（人の情動に訴えかける見た目のデザイン）や

AIが普及しても人間の忙しさは変わらないという話に。

Adobe SENSEIなどによってAIはデザイン分野でも一般化してきていて
たとえばPhotoshopで被写体を切り抜くことができる
（これまではペンツールでいちいち切り抜いていた）
→人間はより高度なクリエイティブな部分（バリエーション展開など）に
　時間を割けるようになる
＝仕事は高度化していく

なので…これから先は
人間 vs AI　（AIで仕事が奪われるのではなく）ではなく
人間 vs AIを使いこなす人間　という構図になっていくそう。

AIってpepperくんみたいに会話して学んでいく
みたいなイメージがあったけど
こうした地味な作業に割いていた時間が短縮されると考えると
すごく便利だし、
絞り込んで高度なデータのみでの学習もできるんだな～。
SF好きとしては、思っていたような未来がかなり近づいているのでは？と、
わくわくしました。
あと、ロケットでいうエネルギーはAIにとってはデータなんだよ、という
たとえがわかりやすかったです。

続いては、
ソフトバンク・テクノロジー株式会社 ／FONTPLUS　関口浩之さん の
「最新Webフォント極意 － フォントおじさん直伝 2018年度版」。

Webフォントの話の前に、
身近なフォントについてのお話から。
「止まれ」の標識は丸ゴシック
（手書き看板職人にとっては角ゴシックよりも
丸ゴシックのほうが書きやすい？早く書けるらしい！）
病院の看板などは丸ゴシック体が9割
（優しさを感じる？）

案内などは、情報がスッと入ってくるゴシック、
小説などは読みたくなる明朝。

などこれから街中の文字をぐるっと見回したくなりました。

そして、Webフォントの話へ。
画像ではなく文字にすることのメリットはたくさん。
google翻訳で外国語になってくれるとか
CSSにフォントを入れれば表示が早いとか。
あとは検索かけたいときとか、文字としておいてあると便利！
確かに私自身も使ってるな～。
友達に住所コピペして送ろうと思ったら
選択できない～なんて、あるあるですよね。

紹介されたサイトたちも素敵でした。
鬼怒川金谷ホテル（筑紫オールド明朝・cinzel等）
まるまるもりもりプロジェクト（丸丸Gothic）
金沢の坂道（丸明オールド）

そして、印象に残っているのが、色気はあるが上品な筑紫明朝。
鈴乃屋オリジナルコレクション　衣のいのち Vol.38｜きもの鈴乃屋
関口さんが、女性の話をするように筑紫明朝体の
色気について語っている姿がとても輝いていました。ｗ


FONTPLUSのアンケートによる
フォントランキングもなるほど。

会場の皆さんのコメント見ても、
予算の面でWebフォント導入が出来なかった…なんて話もありましたが
長い目で見たら、ブランディングの観点から見たら、
絶対導入した方が良いなあ……
と、皆さん前向きでした。

そしてここでもプレゼント企画。
じゃんけん大会で「フォントかるた」と、
すてきなフォントがたくさん載っている見本帳が！

そして3つめのセッションへ。
r360studio森和恵さん による
「Bootstrapありきで考えるAdobe XDでのページレイアウト」

森さん曰く
BootstrapをベースにWebサイト制作するメリットは
急なレイアウト変更（カラム変更など）にもすぐ対応しやすい
Bootstrapを共通言語にして
デザイナー、エンジニア、ディレクターなどでチームとの会話できる
ワイヤーフレームの時点でコーディングへ進める
（デザインの仕様を確認しながら同時進行）
など、様々。

しかもXDを導入しておくと
これまでいちいちメールでファイルを添付して共有していた素材も
CCライブラリで共有が簡単。

作業画面を見せながらわかりやすく説明してくださった…！
ちなみに、当日に質問で出ていた
「bootstrap臭」の回避には、
bootstrap っぽい要素を使いすぎないようにするのがよくて、
グリッドだけ使ってもいい、とのことでした。

要所要所で使うことで
作業効率も上がるし言った言わない問題も起こりにくくなる。
これはチームで作業している人は特におすすめなのでは……

森さんからも
著書「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」のプレゼントが＾＾


じゃんけん大会の後は４つめのセッションへ。

株式会社まぼろし松田直樹さん による
「SVG is on your side.」

ぺーぺーの私はjpgやpngほど耳慣れれていないこともあり
「SVGってきいたことあるけど実際どうやって使われてるんだろ？」
と思っていたら、すっごく身近なところで使われていました。
googleアナリティクスのグラフや、グーグルのなど企業のロゴ。
毎日目にしていた……。

そもそもSVG自体以外と歴史が長く
16～7年前から出てきていたとか。

特徴としては
データとの相性がよい、アニメーションの実装方法が豊富、
HTML内に直接含めることができる、など。
拡大縮小繰り返しても綺麗なままのデータはありがたいですね……
ひとつひとつのオブジェクトだけでなく
一枚絵の「中身」を動かせるというのも、驚き。
アニメーション向きなんですね。
しかも松田さんによると
「HTMLの勉強していたらSVGの勉強の半分は出来ている」そうで、
そう聞くとデザイナーの皆さんが導入するハードルも低そう。

アイコン画像も色違いごとに作る必要が無くて、
フィルタも簡単にかけられる……？
（ここまで聞くと使わない理由がない）

フィルター編集に便利なサイトも紹介してくださいました
SVGFilterBuilder

重くなっちゃうのが玉に瑕のSVG
かつてのフルFLASHサイトのようにフルSVGサイトってあるんですか？
と聞いたら
SVGガール というサイトを紹介してくださいました。
カヤックさんが2011年に作った（IE9の頃）サイトらしい。
（参考：SVG Girlの公開と内部実装　）


これまでSVG元年だ、と言い続けてきたけど
最近は言うのをやめたと話す松田さん。
さいごのまとめは

Super
Very
Good!

お後がよろしいようで・・・


この日5番目のセッションは
AZM Design 代表　アートディレクターの生明義秀さん  による
「CSS Now! － 今とこれからのウェブデザインに必須のCSSを総チェック」

cssはかなり進化しているのに、認識が、人によって大きな差がある。
そんな中で、デザイナーはどんなところを気にして見たらいいのか。
実演を交えてお話がありました。
基礎的な話もありましたが、cssについて勉強したのが3年半以上前なので
改めて聞くことや新しいことばかり。

ざっくりまとめると
各ブラウザのシェアについて、毎月までは確認しなくて良いので
半年に一回くらいはシェア率やCan I use（ https://caniuse.com/ ）を
見ておきましょうねって話と
bootstrap4はflexboxでできているので
flexboxを学ぶ→触る　と理解が深まるよって話と
pxに依存しないデザインが出来るといいよねって話でした。


さいごはアドビ システムズ 株式会社 轟啓介さん で
「ユーザーと歩むAdobe XDと今後の進化」

毎月新しい機能がリリースされるAdobe XDについて
制作秘話をお話ししてくださいました。

XD自体がまだ1年しか経っておらず、
それなのにこんなに機能が増えているの？！と驚きました。
どんなことが出来るのか実演しているときの
参加者の皆さんのきらきらした目。
轟さん自身も携わっていて楽しいと話していた姿が印象的でした。
納得いくクオリティのものだけに絞ってリリースすることで
一定の水準を保ち続けているXD。
このタイミングだとバズるだろうな～とおもっても
水準に満たないものは出さないで後から機能追加する、を徹底。

Design at the speed of thought
「(デザイナーの)考えるスピードでデザインする」をモットーに
どんどん追加される機能たちが楽しみになりました＾＾

そして参加者の皆さんにアドビシールとノートのプレゼントが！
いいないいな！


……と、気づいたらあっという間に
最後のセッションが終わってしまいました。
参加者の皆さんも真剣にメモをとったり
ツイートでまとめを投稿してくださっていて、
いいセッションだったなあ。。。

セッションごとに会場内からのコメントや質問なども
取り上げさせてもらい、
高度な話の時は谷口さんが質問してくださったり
登壇者の皆さんが先回りで解説してくださったりと
たのしかったです。
なんとか無事に司会を終えることも出来、一安心。
谷口さんが隣にいる安心感はスクーの時から変わらないな……
本当にありがとうございました……

そして、イベント後は懇親会。
ケータリングは　九州料理居酒屋バクバク 　のお料理で
特に唐揚げが絶品。
会場内では「おにぎり3コ食べました！」なんて方も。

時間ぎりぎりまで参加者の皆さんが登壇者と交流していて
リアルイベントならではのあたたかさを感じました。

余談ですが、スクー時代の受講生の方にお声がけいただいたり
現スクーの方にお会いできたりうれしかったなあ。
Web系の授業、知らないことばっかりで、
たくさん勉強したな～と、ふと昔を思い出しました。
当時と今とでは環境も全く違うけど
こんなに進化しているツール見たらわくわくしますね。

また機会があったら皆さんとご一緒できたらうれしいな～～
本当にありがとうございました＾＾