2/22に渋谷のGMO Yoursで開催された「WP-D Fes #03」に参加してきました。共同ブログで有名なWebクリエイター集団「WP-D」が主催のこのイベント。WP-Dメンバーのセッションをちゃんと聞くのは初めてだったので、楽しみにしていたのですが、各登壇者の個性が活かされた充実した内容でした。
「Web制作の現場をアップデート」というのが今回のテーマでしたが、最新のツールや技術を分かりやすく解説しつつ、さらにその先を踏まえた『深い話』を聞かせてくれたので、色々と参考になりました。
目次
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
まず初めはメガネさん（大串肇さん）によるコマンドラインツールのセッション。最近よく聞くWeb制作系のツール群を、ざっくり分かりやすく解説するという、メガネさんならではのまとめ力の高いセッションでした。
gemもnpmも、「パッケージ管理ツール」という意味では同じ。Gruntもgulpも、「タスクランナー」としての基本的な使い方はほとんど同じ・・。こんな風に何度も復唱してくれると、コマンドライン系のツールに対する抵抗感もだんだん軽減されてくるから不思議です。
特に、パッケージ管理ツールとプラグインの関係を『AppStoreとアプリ』の関係に例えたり、タスクランナーを『EXCELのマクロ』になぞらえる下りは、とても分かりやすく、秀逸な例えだなと感心させられました。
自分も含め、SassやCompassを始めるのにgemを使い始めたり、Gruntやgulpを使うためにnpmを導入したりする人が多いと思うので、どうしても知識が断片的になりがちですが、ざっくりと一連の流れを理解しておくと、ツールが移り変わっても困らないと思います。
この辺は、以前も紹介したこもりさんの環境構築本と合わせて復習しておきたいですね。
プロトタイプとWebサイト設計のワークフロー
続いて後藤賢司さんによるプロトタイプのセッション。最近のWebサイトのトレンドから始まり、ワークフローの抜本的な改善まで話が展開される、かなり奥の深いセッションでした。
モバイルファーストや、コンテンツファーストと言われる時代だからこそ、Webサイトの構成やアピールポイントも十人十色・・。そんなユーザー側の変化に対応するには、制作手法も柔軟に変えていかなければならない、という主張には強く共感させられます。
特にマルチデバイス対応や、動きを伴うサイトの構築に、プロトタイプを活用する事例を、デモを交えて紹介されていました。ドラッグ＆ドロップでWebサイトのモックが作れる「BLOCKS」や、「Beaver Builder」プラグインなどは、実際に目にするとかなり革新的で、自分も使ってみたくなりました。
プロトタイプの活用で制作時間が短縮された分、余った時間を『コンテンツ設計』に使おう、という考え方はちょっと真面目すぎるだろう、とも思ったのですが、クライアントの付き合い方や、お金のいただき方も今後は変わってくる、という話と合わせて聞くと、より一層深みが感じられるのでした。
フレームワーク関連で言えば、後藤さんは近々共著で「これからのWebサイト設計の新しい教科書」という書籍を出されるそうなので、こちらもぜひ発売を楽しみにしたいと思います。
High Performance Gulp
続いて井村圭介さんによるgulpのセッション。こちらは、フロントエンド寄りの実践的な内容だったのですが、サンプルファイルを交えて親切に解説してくれたので、すごく勉強になりました
gulpの基礎概念は、入力→処理→出力。処理させるものは、gulpのプラグインの他に、Node.js プラグインや、オリジナルタスクなど、何でも自動化の対象にすることができるとのこと。
井村さん自身が自作されたFoundationのスターターキットを元に、活用例を紹介してくれたのですが、かなり色々と便利な処理をまとめられていたので、「実行手順を一元化する」というgulpのメリットがよく伝わりました。
プラグインなども自分でいきなり書こうとするのではなく、先人が作った優れたものを使った方がいい、というアドバイスも、なるほどと思わせられました。私もFoundationを本格的に使う時が来たら、井村さんのスターターキットを使わせていただこうと思います。
デザイナーのワークフローを変えるAdobeモバイルアプリの実力。
北村崇さんからはAdobeモバイルアプリのセッション。最近出揃ったAdobeのアプリ群の基本機能と、Web制作の現場で使える活用例をデモを中心に紹介していました。
北村さんがアプリを使ってイラストを描かれているのは知っていたので、イラストが上手な人には便利なんだろうな、ぐらいには思っていたのですが、Adobe CCのクラウドとリアルタイムで連携する様子は、実際に見ると結構衝撃的なものがありました。
スマホのカメラで撮影した色が、Photoshopのカラーパレットに瞬時に読み込まれたり、カメラから取り込んだ手描きの線画を、いい感じに加工してIllustratorのブラシに登録することもできるそうです。
後半は、さらに実践的なTIPSということで、アプリで取り込んだ動画をその場でWebのバックグラウンドにしたり、カメラで撮影した画像をアイコンフォントにして埋め込む過程を、リアルタイムで実演・・。
こういった使い方もほんの一例なのだと思いますが、モバイルアプリがWebデザインの道具として十分活用できる時代になったんだ、ということを実感させられるセッションでした。
2015年のサバイバル学習術 「Web開発技術の税引後利益」を最大化しよう！
高橋文樹さんのセッションは、「Web開発技術の税引後利益」という、ちょっと聞き慣れないワードがタイトルに入っているので、ひときわ興味を惹かれます。文樹さんが少し前に「Gulp学習の費用対効果」というツールを公開されていたので、今回も「gulpを勉強しよう」みたいなお話かな、と思っていたのですが、実際はほとんどがFlashに関する内容でした。
最近、CodeKitをやめてGruntを勉強したのに、あっという間にgulpの時代が来てしまった、という話から始まり、文樹さんがどうして小説家からWeb制作の道に入ったかという所まで話は遡ります。
自分の作りたいものを作るためだけに、独力でFlashとCMSの連携を極めてしまった、という過去の偉業が壮絶過ぎるのですが、Flashの時代が終わったのと同時に失ったものリストがまた衝撃的でした。
個々のツールに関する知識だけを追っていると、いつか使えなくなってしまうかもしれないけど、より上位レイヤーのスキルとして身に付けたり、周辺技術をしっかり習得していくのが重要、というのがこのセッションのポイントだったかと思います。
この辺りが、最初のメガネさんのセッションの『ざっくり理解する』という話ともリンクしているのが面白いですよね。
今度こそ失敗しない。プロジェクトを円滑に進めるタスク管理とGitの連携の方法
最後は再びメガネさんによるセッションで、タスク管理ツールとGitに関するお話。Webプロジェクトでの『あるある』話から、実務での経験を通したタスク管理のコツや、Git導入のメリットなどを解説していたのですが、ディレクター目線でのリアルな話が聞けたのが興味深かったです。
Backlogなどでの課題管理は、なるべく細かく課題を設定することと、常に課題を見直し続けることが重要とのこと。私も業務でRedmineを使っているのですが、ついつい課題が放置気味になってしまうことが多かったので、確かにフレッシュに保ち続けるのは大事だな、と再認識させられました。
また、プロジェクトを円滑に進めるために、ディレクターが実作業をお手伝いする、という話がリアルで面白かったのですが、そうやって色んな人がソースに触れるからこそ、Gitでログを残す意味が生きてくる、という話はなかなか説得力がありますよね。
私はプライベートでは一人Gitしていることの方が多いのですが、この話を聞いてもっと色々な場面でGitやタスク管理ツールを活用してみたいと思いました。というわけで、早速日常のタスク管理にBacklogを使ってみたりもしています。
まとめ
そんなわけで、盛りだくさんのテーマで充実したセッションが聞けた「WP-D Fes #03」だったのですが、懇親会でのLT大会も独特なテンションで盛り上がり、楽しい時間を過ごすことができました。
そんなセッションやLTも、自分にとって為になるものが多かったのですが、今回のイベントで一番印象的だったのは、『スポンサーセッションが面白かった』という点ではないでしょうか？
字数の関係で、ここでは詳しく触れられないのですが、WaltiやConoHa、universionsなど、日頃から気になっているツールは多いものの、なかなか中の人の話を聞く機会はないので、かなり貴重な体験だと思います。
どのサービスも、今回のイベントのテーマと関連が深いので、また興味が惹かれるのですが、そんな風にWeb制作の現場をアップデートしてくれるサービスと、数多く出会える企画を、ぜひ次回もプロデュースして欲しいところですね。
また、東京会場のLTでは、当日のサプライズとしてWP-Dの姉妹サイト「WP-E（仮）」が、装いも新たに「EXP」としてリニューアルするシーンがお披露目されました。こちらもWeb制作や勉強会が好きな人にはお勧めのブログなので、ぜひ皆さんもWP-Dと合わせてチェックしてみてはいかがでしょうか？