TAM

Blog TAM TOP →

広報ブログ

【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」のお問い合わせページにご連絡ください。

 

ページトップへ

TAM動画チーム「TENT SAUNA PARTY」の動きがますます加速中!

TAMにはソーシャルチーム、広告チーム、UXデザインチームなど各分野の専門チームがいくつも存在します。その中でも、最近とくに活発な動きを見せているのが「TENT SAUNA PARTY(テントサウナパーティ)」。名称はちょっと変わっていますが、TAMの動画チームです。

テントサウナパーティ・サイトTOP

構成メンバーは、デザイナー、映像作家、イラストレーター、プログラマーとさまざま。

テントサウナパーティ・メンバー

チーム発足のきっかけは、“自然の中で蒸気浴をする”というプロジェクトイベントを企画したことでした。そう。実は、最初は動画とまったく関係のないところからスタートしています。

プロジェクトの活動目的は「本物のサウナ(※)を日本に広めること」です。ですが大きな問題のひとつは、多くの人が抱いている「サウナ」のイメージ。日本で「サウナ」と聞いて連想されるのは「熱くて苦しい」とか「汗だくのオジサン」といったもの…。メンバーが広めたいサウナとはまったく違います。

※サウナ発祥の地とされるフィンランドで愛されているサウナスタイル

テントサウナパーティ・風景01

テントサウナパーティ・風景02

 

そこでアレコレ策を考えて辿り着いたのが、映像表現という選択肢でした。

今あるサウナのイメージを完全に覆し、「本当のサウナ」の魅力をより印象的に、そして直感的に伝えるにはどんな表現をすればよいのか?その結論が映像だったというわけです。

メディアがWebでも紙でも、文字と写真で構成されたものは受け手に「見よう」「読もう」という意識がないと、なかなか内容が入って行きにくいのに対し、映像はあまり意識をしていなくても、目や耳から自然と入ってきます。

さらに、画と一緒に文字や音を組み合わせることもでき、一度に多くの情報量が伝えられます。人の表情や声のトーン、その場の雰囲気や時間の流れといったものを表現するのにも向いています。

そんな理由から、映像で「本当のサウナ」を伝えようとしたことが、動画チーム「TENT SAUNA PARTY」に発展しました。メンバーの1人に映像制作経験者がいたこともチーム発足を加速させました。

 

「TENT SAUNA PARTY」は、だいたい月に一回、蒸気浴パーティを開催していますが、その活動報告も動画です。大切にしているのは「見ているだけで気持ちいい」という感覚。これはもう、まさに「百聞は一見にしかず」で、見てもらうと分かるのですが本当にサウナのイメージが変わると思います!

第2回日本サウナ祭り「サウナトースターとウィスキング。」 from Tent Sauna Party on Vimeo.

TENT SAUNA PARTY #6 Biwako SHIGA JPN from Tent Sauna Party on Vimeo.

 

もちろん活動報告だけでなく、クライアント様からオーダーを受け制作を行ったプロモーション動画やチュートリアル動画もありますので、興味を持たれた方はぜひ実績紹介をご覧ください!蒸気浴により研ぎ澄まされた感性が制作に遺憾なく発揮されています。

映像の可能性を身をもって実感しているチームなだけに、創作意欲はますます加熱中でTAMの社内の様子やサービス内容の紹介動画もどんどん増えています!最近はドローン撮影にも凝っているのだとか。この先の活動から目が離せない「TENT SAUNA PARTY」です。

 

ページトップへ

アジャイル/スクラム体感ワークショップを開催しました

TAM大阪にて、アジャイルやスクラム開発を体感する社内ワークショップを行いました。
スクラムの特徴のひとつである、繰り返し型の開発サイクル(計画→実施→ふりかえり)を疑似体験するものです。

お題はシンプルで、「紙飛行機をどれだけたくさん飛ばせるか!?」

まずはチームで紙飛行機の作り方を計画。そして実際に作って飛ばしてみます。時間制限もあるので、なかなかドタバタです。

最初のうちは、あまり思うように数を増やせません。
ふりかえりの時間で、何が良くて何が悪かったか、次のターンではどのように改善したいか、を話し合います。

そして再度計画を練り、作って、またふりかえり。これを繰り返していきます。アジャイルらしく、計画の見直しも柔軟に…

どのチームも、だんだん飛ぶ飛行機の数が増えていきました!

短時間のワークショップでしたが、アジャイルにおける計画やふりかえりの重要性、繰り返すことによる改善の効果などを感じられるワークショップとなりました。

また、えがこう!の日高によるグラフィックレコーディングも行われました。

ページトップへ

TAMの安田が “フロントエンドカンファレンス 2017” に登壇しました。

関西最大級のフロントエンドイベント「フロントエンドカンファレンス 2017」が3月18日(土)に開催され、TAMの安田がセッションに登壇しました。

イベント概要

フロントエンドカンファレンス

2017年 3月 18日(土) 10:00~18:00 @ 大阪新梅田研修センター

現場に活きる様々なWeb制作のあり方を、セッションやハンズオン企画を通じて紹介するこちらのイベント。今年のテーマは「つながる」でした。日々変化する技術の中から、必要なものを紡ぎ、1つのWebページに「つないでいく」という意味が込められています。

そんなテーマのもと、安田が登壇したセッションのタイトルは「エンジニアとデザイナーとの距離」。

スライド

 

技術面の話というよりも、フロントエンドエンジニアから見たコミュニケーションの話が中心で、デザイナーとの適切なコミュニケーションや、距離を縮めるためのアプローチについて、自身がCSSの設計を実践する中で感じたこと、考えたことをお話ししました。

また技術面では、デザイナーとフロントエンドエンジニアのデザインに対する認識のズレを少なくするCSS 設計手法として、コンテキストを重視する”ECSS” を紹介。メリットとデメリットの両面について触れ、それらをどう活かし、どう解決しようと考えているかもお伝えしました。

セミナー後の質疑応答では、デザイナー側からコミュニケーションに関する質問が飛び、相互の職域を越えて「つながる」ことに意識や感心を高めた参加者が多かったようでした。

 

なお、来月4月22日(土)にCSSをテーマにした勉強会「CSS Talk Vol.3」がTAMコワーキング大阪で開催され、こちらにも安田が登壇します。詳しい情報はイベントページをご覧ください!

イベントページ

https://taminc.doorkeeper.jp/events/58976

 

ページトップへ

次ページへ »