WCAN 2017 Spring 参加レポート

今回のメインセッション

• 「WebデザインのトレンドとAdobe XDのススメ」アドビ システムズ 株式会社 轟 啓介さん
• 「最近のフロントエンド事情(2017年)」株式会社トゥーアール 西畑 一馬さん

WebデザインのトレンドとAdobe XDのススメ

Adobe XDは実はBeta版がリリースされた時にダウンロードしたまま触ったことがなかったのですが、轟さんのセッション内のデモですごく使いやすそうと感じて実際に触ってみました。 仕事でもプライベートでも最近はSketchを使用しているのですが、機能としても十分なくらいについていて、特にプロトタイプの機能がとても便利だと感じました。IllustratorやPhotoshopに慣れているので、ツールやツールのアイコンなどが見慣れているので使い方がわからない面がなくAdobe製品に慣れている人にはうってつけだと感じました。

内容メモ

• スマホのインターネット利用が2016年で47%に
• 2,560 × 1,440/564ppiディスプレイの高画質化
• ミニマムデザイン（シンプルデザイン。UI＜コンテンツを重視）
• マイクロインタラクション（直感的に分かるデザイン・可視的に自分の階層を示すなど）

プロトタイプについて

• プロトタイプは誰かからフィードバックを得るための成果物
• 考えを統一できるというメリットがある
• 早い段階で動くものができる

Adobe XD の特徴

• UI/UXデザインが制作が可能
• UIデザインやプロトタイプやシェアが簡単にできる
• とにかく軽く+とても簡単+すごく早い+楽しい
• Browserがあれば誰でも見れる

最近のフロントエンド事情(2017年)

今年のフロントエンドの状況をHTMLやSEOからCSS、JS、アクセシビリティまで網羅した解説でとても内容の濃くためになるお話でした。

Webの世界は使用技術などの移り変わりも多く追いつけていない部分もあるのでWebに関する様々なことが一気にしれてとても勉強になりました。 社会人になる前まではHTMLなどの技術のことばかりで、開発環境なんてほとんど覚える機会も考える機会もありませんでした。制作的には便利ではあるものの多様化が進んで覚えることがどんどん増えているような気がするなと思いつつお話を聞いてみました。 お話にでてきたことは知っているもの半分（社会人になってから知ったものが多い）知らないもの半分といった感じでまだまだ勉強不足だということをかんじました。

内容メモ

HTMLトレンド

• 最新仕様はHTML5.1である
• HTML5.2（2017年８月勧告）
• HTML5.2ではdialog要素が追加され、keygen要素が削除されるだけで大きな変化はない

SEO

• モバイルファーストインデックスが導入
• スマホの対応はレスポンスデザイン・動的配信・セパレートURL
• レスポンスの重要性が高くなって来ているが、工数がかかる・知識が必要といったマイナスな面も

パフォーマンス - 最適化の対処法

• リクエスト数の軽減
• ファイルサイズの軽減
• リクエストタイミングの調整
• WebPの利用
• ファイルを分ける（=スピードが早くなる）

CSS

• CSS3からモジュール化に
• cssnextは一部のcssの新要素が使えるようになったり、計算や最新機能が使える
• cssnext or Sass → Sassの方が実際は汎用性が高いため良い
• PostCSS or gulp → gulpの方が実際は汎用性が高いため良い
• ルール付けに便利なstyle lint
• styleのコンポーネント化

JSトレンド

• jQueryはオワコン臭がするものの、使われているところはとても多い
• Vue.jsが簡易的なのでそこから覚えると効果的
• リアル反映できるBabeやType scriptなどもある

アクセシビリティ

• 障害者差別解消法によりalt属性の重要性が増した
• main-aria（→aria-live）を活用で音声のとき内容も読み取られる