デザインワークフローの転換」に参加しました。第1回はスピーカーとして参加したのですが、今回は一参加者としての参加です。動くサイトにプログラムが必要な時代は終わった。最初のセッションは、第1回でもスピーカーとして登場された京都のWebデザイナー完山さんです。前回は、IllustratorでレイアウトしてProttでプロトタイプ作成という話をされたはずですが、なんと、前回のD2Dのあとで主催の杉山さんに感化されてツールを「Sketch」に乗り換えたのだそうです。同じイラレ使いだと思っていたのに、いきなりの裏切りかよ!(笑)完山さんが個人的に必須と考えられているWebデザインツールの機能は下記の3つです。意識しない自動保存といった部分が優れていることが、乗り換えの理由になったそうです。Illustratorも自動保存機能や最新のバージョンで加わったアセット機能があるわけですが、最も違いが出るのは「軽さ」でしょう。これは、機能がWebに特化されていることによるプログラム動作の軽さと共に、機能が絞り込まれていることで制作時に余計な機能に気を取られない気分的な軽さもあると思います。制作ワークフローは、斎1回の時にお話しされたワークフローに対して、一見「Illustrator+Photoshop」の部分が「Sketch」に置き換わったような感じに見えますが、私の感覚としては従来「Fireworks」が担っていた部分を「Sketch」に置き換えているというふうにとれました。Fireworksが忘れられない私にとっては、非常に魅力的なツールだと言えます。CRAFTプラグインによる効率的なダミーコンテンツの制作、プロトタイピングツールProttとの連携といった、Sketchを中心としたワークフローも非常に使いやすそうです。残念なことにSketchはWindows版がリリースされていません。どんなに魅力をアピールされても現状では導入できないということで、非常に悔しい思いが募ったセッションでした。それだけ、完山さんによるSketchアピールが魅力的だったとも言えますけれど。完山さんのスライドはこちらをご覧ください。https://dl.dropboxusercontent.com/u/22613663/d2d/d2d_designworkflow_vol2_motoyama.pdf10年前から変化ナシ?!新技術を使えなくてもなんとかなるさ!基本の制作ワークフロー2つ目のセッションは高橋(飯田)美幸さん。Photoshopを駆使してランディングページやキャンペーンページなどを制作する際のワークフローを紹介していただきました。一般的にこういう勉強会でのセッションって新しいツールやテクニックを紹介されるようなものが多いのですが、高橋さんのセッションは、あえて新しいことをせずに慣れたツールを使い、クリエイティブ自体に力を集中されているようでした。高橋さんのワークフローは、華麗な包丁さばきで見た目も味も素晴らしい和食を創っていく料理人をみているようで、私の普段のやり方はなんだか、平野レミさんとか家事えもんみたいに思えました。(私は平野レミさん好きですよ、念のため)これは、どちらが良いということではなくて、CMSなどを用いてテキスト中心で多ページのサイトを構築するような場合と、美しいグラフィックで目を引くようなサイトを構築する場合は、おのずとベストな手法が違ってくるということだと思います。多くのページを効率よく制作していくとか、多くのデバイスに対応させるとかといった目的がある場合は、ツールやワークフローが制作物のクオリティを上げることにつながることも多いのですが、グラフィックデザイン自体のクオリティを上げるのは、その前の「リサーチ」とか普段からの「インプット」などツール以前の問題なのかなぁと感じました。Bridge」を多用されていました。私も手持ちの材料を整理したり一括処理をするときに使うのですが、一般的にはあまり活用されていない印象があります。BridgeはPSDファイルやAiファイルがプレビューできたり作成バージョンなどの情報もわかりますし、直接アクションが使えたりとか効率化の面から見ても、Adobeのアプリ同士をつなぐツールとして非常に使い勝手が良いので、みなさんもぜひ使ってほしいです。個人的には、Windows使いなところに親近感を覚えました。いえば当日の参加者も、意外にWindows率が高かったように思います。高橋さんのスライドはこちらをご覧ください。http://www.pictron.net/d2d/20160723/all.pdf動くサイトにプログラムが必要な時代は終わった。CCとSpineの紹介3つ目のセッションは、宇都宮ウエブ制作所の宇都宮頼子さん。おなじといっしょという子育てブログをご存知の方も多いかもしれませんね。宇都宮さんのセッションはAnimateCC、かつてFlashと呼ばれて一世を風靡したアニメーションツールを駆使したサイト制作のお話です。私のサイトを以前からご覧になっていただいている方や、昔からの知り合いの方はご存知かもしれませんが、私は「Flash2」からFlashを使っていたんです。東京にいたころはFlashのコミュニティ「F-SITE」に毎回参加していましたし、今の私があるのもFlashのおかげと言っても過言ではないと思っています。名前こそAnimateCCに変わってしまいましたが、いわゆるFlashの話をしてくれる方がいらっしゃるというだけで嬉しいのです。Flashムービー(swf)は、iOSだけでなく最近はChromeでもデフォルトでは動作しなくなってしまいましたが、少し前のバージョンからAnimateCC(FlashCC)は、HTML5のCanvasとCreateJSでの書き出しに対応しているので、新規に作成する場合は特に問題になることはありません。IEでもよほど古いバージョンでなければ動作しますし、特に「ブラウザ間の差異がない」というのは、制作者としては非常にありがたい環境です。今回ご紹介いただいた宇都宮さんのワークフローは、PhotoshopやIllustratorでイラストを作成Spineでアニメーションパーツを作成AnimateCCでアニメーションを仕上げHTML・CSSを整形という流れになっています。Flashをお絵かきツールとして使っていた私の感覚とは違い、AnimateCC(Flash)は動きをつけるためのツールとして使用されています。ここでポイントになるのが「Spine」というツールです。このツールは、画像をメッシュで分割し、ボーン(骨組み)を追加して動かすことができる機能を持っています。Photoshopのパペットワープのようなものですが、パペットワープは変形させるだけなのに対し、Spineはその変形過程がアニメーションになります。実際に制作されたサイトを見ていただいたほうがわかりやすいですね。こちらのサイトのメインになっているアニメーションをご覧になってください。AKIKO手は静止画で描かれています。これを、Spineを使ってメッシュとボーンで丸めたり広げたりするアニメーションにします。書き出してAnimateCCに取り込み、細かな動きをつけておられるそうです。ベクターのイラストを作成してアニメーションにするという従来の手法ではなく、アナログタッチのイラストや写真などをアニメーションにできるというのが魅力的だし、実際に作ってみると非常に面白いです。昔のFlashもそうでしたが、アニメーション制作において非常に直感的に動きをつけることができるのがAnimateCCの魅力です。したアニメーションを作るのに、grantやgulpなどで仮想環境を用意してJavaScriptのライブラリを入れてスクリプトを書いて・・・みたいな本質的ではない作業や、ちょっとした動きの変化を数値で指定するといったことなどを、ツールが自動化してくれるというのは誰にとってもメリットだと思います。セッション中、私は、しばらく忘れていた「Flashで初めて絵が動いた時の感動」を思い出して、とてもワクワクしました。いえば・・・セッションタイトルには「動くサイトにプログラムが必要な時代は終わった」とありますが、Flashが出てきた当時は動くサイトにプログラムは必要なかったんですよね。Flashというツールで、デザイナーが画面上で絵を描いて、マウスで動かしたり変形したりして、直感的にアニメーションが作れたんです。ベクターグラフィックですから多様な画面サイズに対応でき、フォントが埋め込めるので文字の表現力とアクセシビリティを同時に実現でき、ブラウザ間での差異も無い。今のWebが求めていることをすでに何年も前に実現していたのがFlashアニメーションだったのに・・・そう思うと、残念でなりません。宇都宮さんのスライドは、こちらをご覧ください。動くサイトにプログラムが必要な時代は終わった。Skecth新機能、デザイン制作ワークフローのこれから最後のセッションは、今回の勉強会の言い出しっぺである、ピクトロンウェブプランニングの杉山敦さんです。第1回でも同様のテーマで様々なサービスやツールをご紹介いただき、非常に面白かったセッションでしたが、今回は第1回のダイジェストを基本に、そこからさらに進化したサービスやツール、特にSketchの新機能を中心にお話ししていただきました。Resizing」が非常に魅力的でした。Gitプラグインはちょっと・・・という感じでしたが、CRAFTプラグイン、コラボレーションツールなども面白そうです。・・・Windows版がない(リリース予定も無さそう)のは私にとっては致命的です。XD」についてもご紹介いただきました。開発途中のものですから機能不足ですが、注目度も高く、かなりの頻度で新機能が追加されています。XDも現在Windows版はありませんが、2016年中のWindows10対応が予定されているので、こちらは非常に興味があります。第1回から杉山さんが通して話をされているのはアプリを所有していなくてもコマンドラインからデータやレイヤーにアクセスできる方向に向かっているだからといってデザイナーもコマンドラインを使えというのではなく、この流れに対応したアプリやサービスをうまく使っていけばいいコラボレーション・プロトタイピング・バージョニングとといったところです。杉山さんのスライドはこちらです。杉山さんのスライドの中で「AdobeCCのWebサービスにおいて、Extractが2016年6月に終了」と書かれていますが、ユーザーからの要望に応えて2016年8月に復活しました。Adobeによれば、利用者が少ないから終了させたらしいので、否定的な意見ばかりでなく、肯定的な意見を言うのもユーザーとしては大事なんだなと思いました。それいけ!フロントエンドまとめSketchとAdobeXDを中心に、Webデザインワークフローの進化はますます進んでいるように思います。今回のセッション全体を通して思ったのは、新しいものを追いかけるだけでなく、自分の価値を高めるワークフローを手に入れることが重要なのだなと言うことです。完山さん、高橋さん、宇都宮さん、それぞれの方のアプローチの違いは、それぞれに興味深く、大変刺激になりました。それらを俯瞰して考察し、わかりやすく解説できる杉山さんは、やはり凄いというか、私と同年代なだけに「この歳で本当によく勉強しておられるな」と感心するばかりでした。Dreamweaverの動向です。新機能が盛り込まれたバージョンが正式リリースされれば、非常に大きなインパクトを与えることは間違いないと思っています。デザイナー目線でデザインワークフローについて語られるこの勉強会、第3回の開催は未定ですが、開催されたら、ぜひ参加したいと思っています。〜アナログからデジタルへの変遷〜2019年9月2日技術記事WordPressでは、なぜ固定ページの内容をテンプレートファイルに書いてはいけないのか?2019年6月24日技術記事「WordPressのやさしい教科書。20年以上の制作会社での経験を活かし、Web制作・DTP制作を行っています。制作の上流から下流まで、企画・制作から運用までまた、制作会社でのチームリーダー経験を活かし、制作会社様の現場のスキルアップや効率改善などのコンサルタントもさせていただいています。お気軽にお問い合わせください。