あんぷら屋 anpuraya

wdcp2018

WDCP2018行ってきました

記事更新日:2018-10-11

Web Design Creative Plus - 今とこれからのウェブデザイン」に行ってきました。最近のWebの情報をいろいろ勉強させていただいたので、復習がてらさらっとまとめます。自分用のメモを読みやすくしただけですが、驚いたことも多々あったので共感できるところがあるかもしれません。

AIで変わるこれからのWebデザイン - AI時代のデザイナーとエンジニアの役割とは?[基調講演]

「人間 VS AI」ではなく「人間 VS AIを使いこなす人間」の構図になる。パソコンが普及した時代と同様に結局使うのは人間、AIに対抗するのではなくて使いこなせるように。情報収集は常にしておく。

AIも得手不得手はある。数値解析や分析、テスト等で活躍していて、逆に、かっこいいとかキレイとか、個人の感性に基づいた判断はまだ発展途上の分野の様子。現状では、人間がプロトタイプを作ったらAIがそれを改善する、というサイクル。プロトタイピングの重要性が増している。

デザインの分野では、Adobe SparkのようにレイアウトパターンをAIで量産する技術はすでにある。クリエイターはそれをもとに検討できる、つまり、無駄な作業をAIに任せて、考えるところに労力を割けるようになってきている。デザインのプロが10パターン作るのと、AIが10パターン作るのでは、さほどラインナップに差が出ないらしい。

photoshopの機能としても、「ピントを合わせる」「景色から人物を除去する」「人物の表情を変える」など、AIで対応できるものはすでに数多く、実務でも使われている。精度100%ではないため、素人<AI<プロフェッショナル、というのが現状。プロとして扱う場合はAIをアシスタントにする感覚。

現状把握が最重要課題。

最新Webフォント極意 - フォントおじさん直伝 2018年度版

フォントおじさんこと関口浩之氏の講演。フォントのあれこれからWebフォントの導入まで。

フォントはUIUX。標識のゴシック体は記号として認識しやすいため。読み物の明朝体は言葉として認識しやすいため。やわらかい印象の丸ゴシックは病院の看板に9割以上使われている。高級感のあるFuturaをカーニング広くとって優雅な印象にしているのがルイ・ヴィトン。

視認性と可読性は真逆。記号としては見やすいけど読んでて疲れるのが視認性の高いゴシック体。記号としては見にくいけど読んでて楽なのが可読性の高い明朝体。

ここからWebフォントの話。

メリット。デバイスに依存しない=レイアウトが組みやすい。これまでのように、レイアウトのために画像にテキストを含める必要性がなくなる。altの悩みが消えるかも。

メリット2つめ。テキストデータになるため、エンドユーザーが文字をコピーできる=アクセシビリティの向上にもつながる。たとえば旅館のサイトで住所をメモしたいとき、旅館名と住所がセットで画像になっているサイトがまだまだある。

メリット3つめ。デバイスごとのローカルフォントを気にする必要がなくなる=UX設計がやりやすくなる。

デメリット。表示速度について。Webフォントは読み込みが重くて、UXを損ねる可能性がある、とか。これは、たとえばFONT PLUSでは、javascriptで解決済み。ページ読み込み時に、ページ内で使用されている文字を判別して、必要なフォントのみ取得することで、元のフォント全データの5%ほどの容量で済み、レンダリングだけなら0.1秒程度になる。

レンダリングは極論、LPとか1ページ単位での制作なら、あらかじめbase64に変換してcssに埋め込むことも。そもそもが、現状遅く感じる要因がjavascriptで最後に読み込まれているため。表示速度が~はWebフォントとはまた別の問題を抱えているかも。

講演にはありませんでしたが、Google Fontsの日本語フォントも正式サポートが始まり、フォントスライシングシステムという技術で転送速度が格段に向上しています。これもまた、表示速度的には問題ないですし、導入の手軽さもあります。
参考:「Google Fontsが日本語WEBフォントを正式サポート

デメリット2つめ。カーニングについて。これも、FONT PLUSでは「プロポーショナルメトリクス調整」と「字間余白の一括削除」の2種類の機能を持っていて解決済み。ヒーローイメージに使うような、デザイナーがこだわった調整が必要な要素以外は問題ないレベル。

デメリット3つめ。ローカル環境でデザインに使うフォントとの兼ね合い。これは単純な解決は難しそう。Web上で使うフォント=ローカルにインストールされているフォント、に限定してデザインする分には問題ない。あとは、いっそデザインカンプからWebページでやっちゃうのも手だけど、まだハードル高そう。

金額面でも、先に挙げた例で言えば、各種フォントを購入するのと同等かそれ以下でも実装は可能、技術的な問題もない。十分に検討の余地がありそう。

Bootstrapありきで考えるAdobe XDでのページレイアウト

Bootstrap。CSSフレームワークの1つ。12分割したgridをベースにレイアウトするための定義がまとめられていたり、一から構築するよりもだいぶ楽に組める。その分、「Bootstrap臭」がするサイトとかもあるけど、ヘッダーナビや一部のコンポーネントをリデザインすればいいだけなので、一から作りたい理由がなければ導入したほうがよさげ。

個人的には、無駄な記述がすごい量になるので使っていないです。また、運用とかではメンテナンスのルールを作る必要があるので、使いどころが難しいかも。wordpressで作れる規模の小さいサイトなどでは検討してもいいかもしれません。

Xd。Adobeのソフト。ワイヤーフレーム作ったりデザインカンプにも使えたりプロトタイプ作れたり、ディレクションに便利なやつ。Bootstrapを使う前提のプラグインもあるみたい。Xdについては後述。

BootstrapとXdを使う前提でワークフロー組めたらとてもやりやすい。ディレクター、デザイナー、コーダー、クライアントまで含めて。すごくやりやすくなりそうだけど、きれいなワークフロー組めたらやりやすいのは当たり前といえば当たり前。この話については、しいて言えば導入コストが低いことが付加価値としてあるかな、というのが個人的な感想。安価だし、学習コストも低め。

CCライブラリの活用について。Adobe製品の使用頻度を考えると、これは取り入れて損はなさそうだけど、ネットワーク上での管理になるためプロジェクトによっては不可かも。

SVG is on your side.

SVGの話。拡張可能なベクターデータグラフィック。xml形式でベクターデータの情報を詰め合わせたやつ。ロゴ、グラフ、アニメーション、フォントとかに使われてる。

DOM要素として使えるからcssやjsで制御できる、テキストデータも入れられるからアクセシビリティにもつながる、など、静止画像データやかつてのflashと比較するとかなりメリットの大きい形式。データのビジュアライズが得意で、たとえばgoogle analyticsでよく見るグラフもSVGで作られている。

鬼門はやはりというか、IEやEdgeでcssのtransformあたりがうまくいかない、というかほぼ使えないため、jsでの制御が現状ではベストになってるみたい。

jsでの制御なら、ライブラリは「TweenMax」がよさげ。データの加工ではなくて、単純にアニメーションさせたいだけならこれ一択。

個人的には「-=0.5」がぐっときました。タイムラインでマイナス秒を指定してチェーンできて、それを関数化しておけば、サイト上で何かしらのイベントにバインドさせて動作させることもやりやすそう。

SVGデータはIllustratorで1ファイル作れば、それをそのまま制御できるのも強み。レイヤー名をIDにして、タイムラインごとに動作を考えるだけ。複雑なjsの知識もないままでも表現できる幅が広い。

CSS Now! - 今とこれからのウェブデザインに必須のCSSを総チェック

flex、grid、vh、vw、box-sizing、background-sizeとか、ここ5年くらい?で扱い方が変わったりブラウザでの対応が進んだ要素について諸々。個人的に一番気になってたところだけど、まったく新しい情報、というのはなかった。

インターネット黎明期にはtableレイアウトから始まり、floatの時代があって、flexboxでのレイアウトが今は主流で、gridでのレイアウトもそろそろブラウザ対応率が業務に使えるレベルに。今後、gridでのレイアウトを必要とする機会も増えそうだし、今のうちに慣れておくといいかも。

gridは作り方がtableレイアウトに近いイメージ、デザインからコーディングへの落とし込みがflexよりもやりやすそう。その代わり、要素の増減があると書き換えるべきスタイルが多くて、レギュレーション化が難しそう。flexとgridで似た見た目でも挙動が異なるものもあるため、どちらを使うべきかは場合によって見極める必要がある。

ビューポートを基準にした単位のvh、vwは使いどころ次第でかなり便利。フォントの大きさの制御もこれでやってるサイトも。googleとか。あとは、box-sizingとbackground云々は、CSS3リファレンスとか熟読すれば困ることはないから割愛。

cssの主流は、結局のところブラウザが対応しているかで決まってきまる。ブラウザの動向を追う一番の目的が、cssのためっていうのも本末転倒な感じはするけど。Can I Useは必須。

ユーザーと歩むAdobe XDと今後の進化

Xdは昨年正式リリースされたばかりの新しいソフトだけど、その系譜はphotoshopやfireworksから受け継がれたもの。エクスペリエンスデザイン、の略なのかな。たぶん。

驚いたのはその機能改善速度。類似製品と比較して後発だったこともあり、機能の充実よりもソフトとしての品質を100%にすることから始まって、徐々に機能を追加している。毎月のように複数の機能が追加されていて、レスポンシブ対応にも使い勝手がよさそう。プロトタイプ作成には、今後の機能追加も含めて、これ以上に期待できるソフトはない。加えて、もともとのコミュニティの大きさから、プラグインが豊富にあるのも強み。ちらっと新機能の話も聞けて、プレゼンテーターの話術も相まって、会場が一番興奮していたのはこのセクションだった。

Design at the speed of thought. 思考の速度でデザインする。を信条としているプロジェクトとのことで、今後もより一層の改善・機能追加が進んでいくことに期待。

というかんじの6時間でした。実に盛り沢山。長々書きましたが、実際は6時間分もっとたくさんの話が聞けて大満足でした。AI、SVG、Xdのあたりが特に面白かったです。ちょこちょこリンクも貼ってますが、この詳細聞きたいとかあれば、連絡いただければわかる範囲で答えます。

関係ないけど、blenderを覚えたくなってきた今日この頃でした。

knowledge

Web関連の小ネタ・まとめ。ちまちま増やしてく予定。
カテゴリ分けせずに、件数増えたらタグでまとめます。

Contact

Web拍手的なコメント投稿機能:


Copyright(c) 2005-2018 Hazumi Otoya / Anpuraya - All Rights Reserved.