セミナー・勉強会 2017年5月18日

【TAM勉強会】CSS Talk Vol.3 初のデザイナー・ディレクター向けの内容で開催!

CSS Talk Vol.03 会場入口

「CSS Talk」はCSSをテーマに話をする勉強会です。

「モダンなCSSの書き方を知りたい。」「こういう時はみんなどうしてる?」「いい方法がわかったので共有したい!」そういった疑問や考えを、エンジニア、デザイナー、ディレクターなどの職種を問わず、共有・コミュニケーションしていく場としてTAMが主催しているCSS Talk。今回が3回目の開催です。

これまでのCSS Talkはエンジニア向けの内容が多かったですが、今回のVol.3はデザイナー・ディレクター向けの内容でセッションを構成。

CSSはデザインを実際の閲覧環境に再現するために使われる技術で、デザイナーやディレクターも知っておくべきことがたくさんあるのでは!という趣旨で企画されました。

▼概要
日時:2017-04-22(土)14:00 – 18:00 イベントページ

▼セッション
以下がセッションタイトルと登壇者名です。TAMからは安田が登壇しました。
1.「グリッドレイアウト これまでとこれから」 森永哲平さん
2.「SC5 style guide generator の話」 後藤知宏さん
3.「エンジニアとデザイナーとの距離」 安田学

当日のセッションの概要と資料をご紹介します。

1.「グリッドレイアウト これまでとこれから」(森永哲平さん)

CSS Talk Vol.03 森永さん

森永さんからは、最近モダンブラウザでサポートされた「CSS Grid Layout」というCSSでグリッドを作るための仕様について発表していただきました。

今までは、CSSフレームワークのBootstrapにあるグリッドシステムなどを使ってグリッドレイアウトを使うことが多かったのですが、これからは「CSS Grid Layout」でグリッドを作る場面も増えてくると考えられます。

ですが、IEやEdgeといったブラウザでは古い仕様が採用されていることに注意が必要です。

今までになかった値や考え方があるので、指定方法の違いをブラウザで確認しながら発表をしていただきました。

2.「SC5 style guide generator の話」 (後藤知宏さん)

CSS Talk Vol.03 後藤さん

後藤さんからは、CSS設計やスタイルガイドについて発表していただきました。

CSS設計ってどんな案件でも必要なのでしょうか?どういったことに気をつけたらいいのでしょうか?という問いに対して後藤さんがおっしゃったのは「設計」の意義。

そもそも設計とは、その案件における「正しさ」を宣言することで、その正しさを全員が理解することができ、全体としてまとまりができる状態のことを指す、という考え方の話をされました。

また、CSS設計を誰の目にも見える形にするためのツールがスタイルガイド。

1ページあたりの予算を低く抑えたい、比較的大きなサイトで有効ですが、発注側も制作側もテンプレート化をしていることを理解して、例外的なデザインを作らないように努力することが必要になります。

スタイルガイドはサイトの公開後のメンテナンスがされなくなることが多いそうで、新しいデザインが追加されたときに負担の少ないワークフローをしっかりと考えておくことが大切とのこと。

このセッションでは、CSS設計が必要な条件から話が始まったのが印象的で、そういった前提を発注者と製作者の双方が共有すること自体が設計の第一歩なのだと改めて感じるお話でした。

3.「エンジニアとデザイナーとの距離」(安田学)

CSS Talk Vol.03 安田さん

こちらは3月に開催された「FRONTEND CONFERENCE 2017」でお話しした内容の再演で、デザインとコーディングを別の人でする「協業」における問題点の話でした。

デザイナーは表示しているページやサイト全体の流れを考えてデザインしていますが、エンジニアは小さなパーツを基準にコーディングをしていく傾向があります。

そのため、それぞれが好き勝手に仕事をしていては、デザインの変更や追加があるごとにコードに整合性が取れなくなってしまいがちです(右と左がからまったイヤホンのコードのよう)。

CSSはデザインを実現する手段なので、CSSの名前付けはデザインの意図と同じにしておくのがCSS設計のあるべき姿なのですが、そのためにはコミュニケーションが必須になります。

そこで、デザイナーとエンジニアの間にどんなときに問題が生まれやすいのか、どんなことを相手に伝えた方がいいのか、といったことが登壇者の安田本人の経験も踏まえて話されました。

全体としての感想

CSSの話は、技術的なことを含む内容になりがちなのですが、エンジニア以外の方でも真剣に聞いてくださる方が多くいらっしゃいました。

CSS Talk Vol.03 懇親会

質問コーナーや懇親会では、エンジニアよりもクライアントに近い立場で仕事をするディレクターやデザイナーだからこそ知りたい、聞きたい内容があることも分かったので、そのあたりもブラッシュアップして今後のセッションテーマに活かしていきたいと考えています。

次回Vol.4も絶賛企画中! 

次回のCSS Talkは7月か8月ごろを予定しています。内容はエンジニア向けか、スピンオフ的な参加型のものができればと考えています。

色々な立場からみた考えや疑問を積極的に取り入れた内容にしたいと考えていますので、登壇してみたいという方がいらっしゃれば「Doorkeper」のお問い合わせページにご連絡ください。

おすすめ記事