Month: January 2018

CSS Nite LP54「Coder’s High 2017」に行ってきました!

CSS Niteってどんなイベント?

2017年11月4日(土)東京・ベルサール半蔵門で開催されたWeb制作者向けのイベント “CSS Nite LP54「Coder’s High 2017」” に参加してきました。

CSS NiteはWeb制作者を対象にしたイベントで、東京はもちろん、全国各地で開催されているセミナーです。今回の「Coder’s High」シリーズはとくにコーディング(マークアップ・フロントエンド)をテーマにトピックが絞られたものです。参加者はなんと320人(満席)でした。

6時間にもおよぶ長時間のセミナーでした。
Macbookのバッテリーがもたなかったため、休憩のわずか15分間のあいだに電源を借りて充電を繰り返し、セミナーを乗り切るといった工夫が必要でした。

「コーダーの前仕事・後仕事」

デザインからの画像書き出しや開発環境、シミュレーターなどの実際にコードを書く以外の作業まわりについて紹介されたセッションでした。

なかでも気になったものは…

Local by Flywheel
https://local.getflywheel.com/

WordPressのローカル開発環境。
Nginx/Apacheをすぐに切り替えられたりPHPのバージョンも選べるというところが魅力的ですが、フォローアップで紹介された記事も見てみると、セッションで紹介された以外にも様々な機能があって非常に便利そうです。
WordPressのローカル環境のためのGUIツールLocal by Flywheelが便利 – Capital P

ちなみにneccoのエンジニアたちは主にWockerを使用して開発を行なっています。もしかしたらLocalに移行するエンジニアも出てくるかも・・・?

「多様なユーザーニーズに応えるフロントエンドデザインパターン:ベーシック編」

書籍の内容をセミナー用にアレンジしたセッションでした。
インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

Webアクセシビリティ的に「こうしたらダメ」ではなく「どのように実装したら良いか」という観点でコーディング例が紹介されたのは非常に良かったと思います。また、スクリーンリーダーでの読み上げ方なども例に、どの要素を選択してマークアップすればよいのかを考えるヒントになるセッションでもあったと思います。

紹介された書籍も購入しました。さらに理解を深めるべく熟読したいと思います。

「テンプレートエンジンPugを使った、みんなでやるウェブ制作」

Pugです。

一度使うと、静的HTML納品のサイト制作ではテンプレートエンジンなしには実装できない…と思える存在です。neccoでも数十ページ規模のコーディング案件ではお世話になりました。
セッションでも触れられていましたが、インデント記法に「キモい…」となるのは最初だけで、我々も慣れました。

このセッションは主にPugの基本的な使い方にフォーカスされていましたが、PugファイルとSassファイルを同じ単位で分けて管理して、CSSとの関係性をわかりやすくするという考え方は「なるほど」と思いました。

「CSSをちゃんと書くためには?」

わかっていたつもりでちゃんとわかっていなかったようなCSSの仕様、性質の部分に触れたセッションでした。
CSS設計手法のテクニックを紹介したものはこれまでも多くあって、もちろん勉強にもなりましたが、視覚整形モデルなどの仕様を理解して無駄な宣言をしないようにCSSを書こうというセッションは逆に新鮮でした。

「宣言もCSS設計の重要な要素」というメッセージは特に突き刺さりました。

「 Grid Layoutがやってきた! Flexboxやfloatとの適切な使い分け方法」

正直に言って去年までは「Grid Layoutを使えるようになるのも数年先かな」と思っていましたが、意外とブラウザのサポートが進んでいた事実を知りました。
Grid Layoutについての基本だけではなく、タイトルにもあるようにFlexboxやFloatとの性質の違いもふまえてどう使い分けたらよいかわかりやすく説明してくれたセッションだったと思います。

しかし、まだまだGrid Layoutで実装されたサイトは少ないと思うので、もっと参考にできる実例がほしいところですね。

「ここまでのJavaScriptスタンダードと、これからのJavaScript ES6について」

ECMAScript6に関する説明のセッションかと思いましたが、主にJavaScriptのオブジェクトを理解するためのセッションでした。
普通のセッションとは違い、登壇者の方がリアルタイムでプログラミングをしていくという勇気のある内容にもなっていました。

ECMAScript6についてはBabelと一緒に簡単に紹介されました。

「Gitの入門とGitを利用した共同制作方法」

Gitの基本的な使い方(これは参加者のほとんどがすでに使用していました)の紹介、それとGitのブランチ運用のモデルとして有名なGit Flow, GitHub Flowについての紹介でした。

neccoでももちろんGitを使用して開発しています。ブランチについては現在はmasterブランチは本番サーバーと、 developブランチはテストサーバーと同期するようデプロイをする形で運用しています。

「CSS設計方法論とその先」

最新のオススメCSS設計手法やテクニックかと思いきや、そういう話ではありませんでした。

CSS設計で悩む問題はそもそもコーディングの段階だけで解決できないこともあります。それが問題として表面化するのがCSSを書く段階であって、コーディングの前の工程や後の工程も考慮して設計しないことには解決できないといった話で非常に共感できる内容でした。

終わりに

セミナー終了後の懇親会でも登壇者や他の参加者と技術的な話で盛り上がり、大変勉強になった1日となりました。
neccoメンバーはCSS Niteのような各種セミナー・イベントに数多く参加していますので、これをご覧のみなさん、どこか別の勉強会でお会いしましょう!

今回のセミナーに興味のある方は是非フォローアップでセッションをご覧ください。
http://cssnite.jp/lp/lp54/

イベントFacebookページより一部写真を拝借いたしました。

“作り手やこれから何かをつくりたい人”のためのイベント「CaT vol.1」を開催しました!

CaT Create and Think

各方面でものづくりに携わる4名の方々にお話を伺いました。


2018年1月16日(火)秋田市役所内にある秋田市民サービスセンターを会場に、necco主催イベント「CaT vol.1」を開催しました。

CaTとはデザイナーやエンジニア、webディレクター、学生さん、経営者、企業の広告担当者など“作り手やこれから何かをつくりたい人”のためのイベントです。
「Create and Think」(つくる、そして、かんがえる)をテーマに、試行錯誤を行う中で最適な解と思えるものをつくってきたみなさんに登壇していただき、お話を伺います。

※「CaT」というネーミングは、ソーンダイクの猫(猫の問題箱)にインスパイアされています。

過去のブログを見ていただくと分かるようにこれまで数々のイベントに参加・登壇してきたneccoスタッフですが、会社としてゼロから企画し運営まで全てを行うのはこれが初めて。

バタバタと準備をスタートし、告知期間は1週間もありませんでしたが、なんと当日参加を含め38名の方にお越しいただきました。誠にありがとうございます。

セッションについては、各方面で活躍する4名の方々に20分ずつお話を伺いました。

セッション1:Adobe XDって実際どうなの?「ウェブサイト制作現場におけるAdobe XD導入事例」

neccoスタッフが「Adobe Max Japan 2017」に参加した際に衝撃を受けた、Adobeの新UXデザインツールXD。
詳しくはこちら→クリエイターの未来は変わるのか?「Adobe Max Japan 2017」へ行ってきました!

秋田にも実際に使っている人がいらっしゃいました!株式会社トラパンツのデザイナー、雲雀一博さんです。

制作現場でどんな風にXDを使っているのか、実際にXDを動かしてもらいながらお話いただきました。

噂通り、軽くて速くてサクサク作業ができます!URLを発行すれば誰でも動きが確認できクライアントとのやりとりもスムーズになるため、作業からコミュニケーションまで“時短”になります。

メリットのほかにもデメリット、UXデザイン以外でXDを活用する方法なども教えていただきました。

今後の進化が期待されているXD。やはりneccoも導入しようかな…???

セッション2:地方でイラストの仕事をするには?「秋田在住イラストレーターの生き残り術」

銀座ソニービルの壁画、SONYのヘッドフォン製品のイラスト、アバハウスとのコラボバッグイラストをはじめ、国内外の広告や商品、文芸誌の装丁・挿画などを手がけるイラストレーターの宮原葉月さん。

2017年4月に大阪から秋田へやってきて、現在も精力的に仕事を続けていらっしゃいます。

そんな宮原さんに、イラストレーターの仕事方法、東京のクライアントとのやりとり、秋田にいながら仕事を続けていくためのポイントなどをお話いただきました。

印象的だったのは、“地方・秋田に住んでいることが強みになるかもしれない”という内容でした。

例えば地方の風景を描くとき、写真を見ただけの場合と、実際にその地を訪れたことのある場合とでは全く違ってきます。「地方・秋田にいるからこそ描けるイラストがあるのではないか」と宮原さんはおっしゃっていました。

秋田でものづくりをしている私たちには、とても心強い言葉です!

セッション3:音声スピーカーって便利?「ついに日本で発売!スマートスピーカー『Amazon Echo』は一体なにができるの?」

ここでneccoの代表・阿部が登壇。現在どんどん新しい製品が登場しているスマートスピーカーのなかでも、『Amazon Echo』についてお話させていただきました。

Amazon Echoは、「Alexa(アレクサ)」と話かけると答えてくれます。

「Alexa、Alexaの歌うたって」
→歌ってくれる。しかもハモり。Alexa何人いるの??

「Alexa、コーヒーの粉買って」
→amazonの購入履歴を調べて、声だけで購入できる!!

など、Alexaの多彩な機能を実演。自分で機能を追加することもできるんですよ。

Adobeにも音声を認識する人工知能「Adobe Sensei」が出てきていますし、将来、音声が私たちの生活でどんな役割を担っていくのか楽しみですね。

セッション4:ここでまさかの英語教室!?「短時間で飛躍的に英語力が向上する英語教室(特別編)」

最後は、株式会社スイッチの鷹野雅弘さんによる英語教室です。

鷹野さんはDTPやウェブサイト制作など、20年以上第一線で手を動かし続け、制作のほかに執筆や講演をこなしていらっしゃいます。2015年から大阪芸術大学客員教授。2017年からはAdobe Community Evangelistとして、あのAdobe Maxでも登壇されています。

Web制作者向けのセミナーイベントCSS Niteは2005年から継続。テクニカルライターとして30冊以上の著書を持ち、総販売数は18万部を超えるという、とにかくスゴイ人なんです!
今回たまたま秋田にいらっしゃる機会があり、光栄なことに「一緒に何かやりましょう」とお声がけくださりこのイベントが実現しました。

「そんな鷹野さんが、どうして英語教室!? 」

と思った方も少なくないでしょう。

Web制作において海外のリソースを読むことは必然ですし、カンファランスなどで海外の方のスピーチに接することもあります。
そんなとき、「あー、半分も理解できなかった!」と嘆いていませんか?

英語を勉強したいと思いながらも、なかなか時間がとれなかったり、何から始めたらいいのか分からないという方のために、海外生活歴が長い鷹野さんが「伝える発音」「効果的な練習方法」「ボキャブラリー増強法」などを伝授してくださいました。

学校では教えてくれない面白くてためになるお話は、まさに目からウロコ!最後には小テストもあり、みなさん戸惑いながらも(笑)問題に向き合っていました。

スピーカー・参加者のみなさん、誠にありがとうございました。次回も開催予定!

というわけで無事、CaT vol.1が終了。
至らない点が多々ある中ご協力いただいたスピーカーのみなさん、参加者のみなさん、本当にありがとうございました。

参加者のみなさんからのアンケートを一枚一枚じっくり読み、vol.2へと生かしていきたいと思います。
というわけで次回も開催します!
詳細が決まりましたらFacebookやTwitterで情報を発信いたしますので、ぜひフォローやいいねをよろしくお願いいたします。「次はこんな話が聞いてみたいな〜」など、ご要望がありましたらどんどんお寄せください!

CaT Create and Think

Facebook Page
https://www.facebook.com/create.and.think/

Twitter
https://twitter.com/create_n_think

Instagram
https://www.instagram.com/create.and.think/

イベントのビジュアルがとってもかわいいですね!このかわいさとビジュアルがお客さまがたくさん来て頂けた要因の一つかなとも思います!
デザイン、ブランドづくり、ウェブサイトづくりでご相談ある方も是非お声がけくださいませ!

お問い合わせフォーム
https://necco.co/contact

クリエイターの未来は変わるのか?「Adobe MAX Japan 2017」へ行ってきました!

約5,000名のクリエイターが参加!

私たちがいつもお世話になっているIllustratorやPhotoshop、InDesign。そんなAdobe製品の最新情報やテクニックを学べるクリエイターの祭典「Adobe MAX Japan 2017」が2017年11月28日に開催され、neccoから2名が参加してきました!

会場はパシフィコ横浜だったのですが、まず驚いたのが人の多さ!なんと5,000名が参加していたそうです。普段人の少ない秋田に住んでいる私たちには、とんでもない光景に見えました。そんな混雑ぶりに戸惑いながらも受付を済ませ、まずはKEYNOTEへ。

Adobe Senseiで私たちの未来が変わるかもしれない。

大迫力の映像と音楽からスタート。オープニングだけで圧倒されました。

ここではIllustrator・Photoshopの新機能や、正式リリースされたAdobe XDの情報、3Dデザインを行うAdobe Dimensionなどさまざまな発表がありましたが、最も気になったのがAI搭載の人口知能「Adobe Sensei」です。一言では説明できませんが、簡単に言うと本来なら人間がやる作業をSenseiがやってくれるというものです。
※Senseiというネーミングは日本語の「先生」が由来になっているそうです。

今回はSenseiを使った『未来のPhotoshop』のデモンストレーションがありました。これがまたすごい!例えば写真があったらSenseiがどんな写真かを認識・解析し、面倒な画像処理を自動で仕上げてくれるんです。ということは、これまでデザイナーがちまちまやっていた切り抜きとか、背景足したりとか、色塗りとか、そういういった細かい作業が大幅に楽になるかもしれないってことですよね、せんせいっ!

AIがここまでできちゃうと、(将来人間いらなくなるんじゃ…?)と若干恐ろしくなりましたが、Senseiの役割は「機械的なプロセスをAIが行うことで、人間にしかできない作業に集中する環境を提供する」ということだそうです。
Adobe Senseiは近い将来、クリエイターの働き方に大きな影響を与えるのではないかという予感がしました。

UXデザインツール「Adobe XD」が有能すぎる

KEYNOTEのあとはセッションに移ります。時間ごとに何種類にも分かれているので自分の興味のあるセッションを選び、参加することができます。いろいろ聞きましたが、一番感じたのは「XDがすごい!」ということ。

何がすごいかというとおおまかに3つあります。
1. 軽量でサクサク動く。よって作業時間が短縮でき、デザイナーは細かい作り込みに専念できる!

2. 普段IllustratorやPhotoshopを使っている人なら10分程で使えるようになる!

3. クライアントなど関係者への回覧がスムーズにでき、コミュニケーションの質が上がる!

neccoではWebデザインにSketchを使っているのですが、XDの有能さを目の当たりにして心が揺れ動いています…。

尚、現在AdobeのサイトでKEYNOTEやセッションの動画が配信されています。具体的な内容は以下URLからご覧ください。

クリエイターのための祭典から学ぶ(Adobe MAX JAPAN 2017<2017.11.28開催>のアーカイブ映像)

セッション以外にも楽しみがいっぱい

会場にはさまざまなブースがありました。Adobe Creative Cloudの製品が実際に体験できるコーナーやCreative Cloudのアプリを活用してオリジナルグッズが制作できる工房、Adobeグッズが購入できるMAX Storeなど、どのブースも大盛況。
私たちneccoスタッフは「Ai」や「Ps」などAdobeのロゴマーク入りクッションを狙っていたのですが、時すでに遅し…。大行列ができていました。

セッション後にはお酒やドリンクを飲みながらステージイベントを楽しむBEER BASHがありました。Adobeオリジナルカクテルが大人気で、1時間くらい並んでようやくゲットしました!

そんなこんなで、午前11時にスタートし終了したのは午後9時頃。
横浜のイルミネーションを眺めながらホテルへ戻った頃にはヘトヘトでした。

Adobe SenseiやXDなどの導入で、今後私たちクリエイターの働き方はどんな風に変わっていくのでしょうか。未来が少し楽しみになりました。