CSS Nite LP, Disk 28 「直視しない人が多いけど、軽視できない仕事とお金の話」Pt.1 に参加しました


2013年7月6日に東京・ベルサール九段で開催された、CSS Nite LP, Disk 28 「直視しない人が多いけど、軽視できない仕事とお金の話」Pt.1 に参加しました。東京で行われるCSS Niteでは、主にWeb制作・運営に関する技術的なトピックが多く、「仕事とお金」というテーマで開催されたのは初めてではないかと思います。

「仕事とお金」の話しとは言いますが…

当初はノーツイート、フォローアップもなし、と告知されていました。それだけに、見積りの話や資金繰り、未払金回収など、普段は聞けないことを赤裸々に聞けるかも…と、ちょっと期待していました。もちろん一部には近い話もありました。しかし基本的には「仕事観」「組織論」「パーソナル(企業)・ブランディング」など、そこまで機微な話はなかったように思います。

とは言え、学ぶことの多いセミナーでした(むしろ、生々しい話は面白いでしょうが、学びは少なかったかもしれません)。10月に開催されるpt.2も楽しみです。


CSS Nite in SHIZUOKA, Vol.4 の開催によてせ(後編)


2013年6月15日(土)にグランシップ(静岡市)にて、 CSS Nite in SHIZUOKA, Vol.4 というセミナーイベントが開催されます。私も実行委員をやらせていただいています。本セミナーについて、企画の持ち込みをした立場から、企画意図や想いをご説明できればと思います。本エントリーはその後編です。

※ このブログは、あくまでも私個人の考えです。CSS Nite 及び CSS Nite in SHIZUOKA の考えを代表するものではありません。

「Webデザインの未来」のために

前のエントリーで、現在のWeb制作現場が抱えている悩み・問題の一端を紹介しました。そこから前に進むために、本セミナーのセッションがどんな話になりそうなのかをご紹介します。

大まかに言いますと、こういったイメージです。
・秋葉さん → デザイナー向けに、新技術との向き合い方
・小山田さん → 実装担当向けに、新技術との向き合い方
・鷹野さん → すべての方に…もうちょっと待ってね
・中川さん → すべての方に、デザインやWebが提供する価値・キャリアプランについて


CSS Nite in SHIZUOKA, Vol.4 の開催によてせ(前編)


2013年6月15日(土)にグランシップ(静岡市)にて、 CSS Nite in SHIZUOKA, Vol.4 というセミナーイベントが開催されます。私も実行委員をやらせていただいています。本セミナーについて、企画の持ち込みをした立場から、企画意図や想いをご説明できればと思います。

※ このブログは、あくまでも私個人の考えです。CSS Nite 及び CSS Nite in SHIZUOKA の考えを代表するものではありません。

「Webデザインの過去・現在」 〜 Webサイト制作は大変革期

セミナーのテーマが「Webデザインの未来」ですので、話はWeb制作現場の過去・現在からスタートします。

ここ数年で、ユーザーサイド・制作サイドともに、これまでとは違う環境・作法が求められれています。大きな環境変化(デバイス・技術仕様・制作ツールなど)が幾重にも重なって押し寄せており、特に制作サイドの疲弊が大きいようです。製作者からは「10年後もこの仕事を続けてられるだろうか…」「新しい技術のキャッチアップが大変」「労力のわりに儲からない」という声が聞こえてくる昨今です。


TalkNote第7回に参加しました


2013年3月16日に静岡市クリエーター支援センター(静岡市)で開催された、「TalkNote第7回」に参加しました。「Talknote」は富士市のWeb制作会社データファームさんが主催しているWeb制作者向けのセミナーイベントです。

2013年、これからのWeb戦略

トップバッターは藤田 拓さん(コトトイ・ファクトリー)からWeb戦略の話。Web(主にWebサイト)が普及・一般化しするなかで、データは膨大になり溢れている昨今。これからのWeb戦略には、その膨大なデータのなかから、いかに個々人に最適なカタチで届けられるかがキモになるかも、というお話でした。

プラットフォーム(データのインプットという私的解釈)はグローバルで普遍的なものになり、ターゲティング(ターゲットごとのアウトプット)はよりローカルに、よりパーソナルに多様化するという視点は示唆に富んでいますね。先日の長谷川恭久さんのコンテンツの話(より細かい単位で情報を持ち、ターゲットに応じて最適なアウトプットを作成する)という方法論にも通じるように感じました。

事例で解説。FireworksでのWeb制作

2番目のセッションは、岡田 陽一さん・狭間 句美さん(ふわっと)によるFireworksの話。だったんですが…、FireworksならではのTips的なセッションではありませんでした。どちらかと言うと、ふわっとさんのワークフローの紹介で、そこで「Fireworksも使ってるよ」という流れでした。

ふわっとさんのワークフローでは、デザインワーク(意匠デザイン)よりもCMSによるコンテンツ作成が先行するケースがあるようです。そうすることで、コンテンツにデザインが寄り添うことができる(サイトの空気感など)とのこと。現状のワークフローではデザインが先行することが多く、純粋なデザインの良し悪し(好き嫌い)がコンテンツとのマッチに優先するところがあります。そういう手法もありですよね。

フォトグラファーが教える素材撮影時に気をつけておくべきポイント

最後のセッションは岡田 陽一さん(ふわっと)による写真撮影のTips。このお話は「CSS Nite LP22」に続いて2回目。CSS Niteベスト・セッション2012にも選出されています。写真撮影のTipsと言っても、「素人でもちょっと気をつけるだけでワンランク上の写真が撮れる」というのがいいですよね。

細かいTipsの話ももちろん参考になります。8つのポイントを箇条書きにして、カメラに貼っておきたい(その場でその都度確認できますから)くらいです。さらに岡田さんの「空気感」がいいのです。「どのあたり」とか具体的に説明できないですが、みんな岡田さんのファンになるんじゃいかと思います。



全体を通しての感想など


今回もいろいろと気づきの多いセミナーでした。主催者の勝又さん、スピーカーのみなさん、参加されたみなさん、ありがとうございました&お疲れさまでした。

最後にちょっとだけ。静岡の人はおとなしいというか、控えめな方が多いように思います。それがいいところでもあります。ですが、セミナーとかではもっとガツガツ食いついてもいいように思います。うまく「講師をノセる」とオマケがでたり、ここだけの話が聞けることがあります。と、ちょっと思いました。


FireworksはPSDファイルのスライスデータを読み込めます

Fireworks Lover Advent Calendar 2012の9日目の記事です。

こんにちは。hamnalyの矢部と申します。静岡県在住、個人でWeb制作を行なっています。主にフロントエンドの実装(下請け、約60%)と、地元の企業や個人商店さんのサイト構築(直受け、約30%)が業務です。以上、「Fireworks Lover Advent Calendar 2012」向けの自己紹介でした。


Fireworksの「スライス」「書き出し」機能は非常に便利


いきなりぶっちゃけますが、あんまりFireworksが得意じゃないです。ですのでデザインをFireworksで行うことはまずありません。そんな私ですが、スライスと書き出しはFireworksで行なっています。PhotoshopやIllustratorにはないメリットがあると感じているからです。こんな感じです。

  • スライスを重ねることができる(あまり使わないけど)。
  • ページ機能が便利。背景用・ホバー画像用など、ステート的に使ってます。
  • ホットスポットを目的外利用して、余白のサイズを測る・データに残せる。
  • 書き出し時の最適化が、PSなどよりも若干細かい設定ができる。

実際のデータをお見せできないが残念ですが、スライスほかにホットスポットの水色の枠がいっぱいできるのが特徴です。

しかし、支給されるデザインデータはPSDファイル…

残念なことに多くの場合、デザインはPhotoshopで行われています。前述の通り下請けの仕事も多いなかで、支給されるデータのほとんどはPSDファイル(Photoshop)です。

Photoshopのスライスにも便利な機能があります。「レイヤーに基づく新規スライス」です。レイヤー単位で簡単にスライス領域を生成できます。この時にレイヤー効果も含めてエリアを計算してくれます。光彩(外側)やドロップシャドウといった、エフェクトの終端がわかりにくいときに、特に効果的です。

FireworksはPSDファイルのスライスデータを認識できます

さて、デザインデータがPSDファイルで支給された場合、スライスをどうするかは悩みどころです。Photoshop・Fireworksそれぞれに良さがあります。可能なら「合わせ技」をしたいとこです。Fireworksは賢いので、Photoshopで設定したスライスを含むPSDを読み込み、スライスを引き継ぐことができます。

そんなわけで、最近の私のワークフローは「まずPhotoshop上でざっくりスライス → PSDファイルをFireworksで開く → スライスの調整・最適化設定 → 書き出し」という流れで行なっています。PSDファイルをFireworksで開く際に「Photoshopレイヤーを1つの画像に統合」を選びます。あまり複雑なPSDデータはFireworks上で再現されないためです。

ちなみに、CSS3の値で取り出したい時は…

Fireworks CS6は「CSS プロパティ」パネルが非常に便利です。オブジェクトの状態(色やサイズ、枠線、シャドウなど)をCSSの値として書き出せます。もちろんCSS3にも対応しています。これだけでもFireworksっていいなぁと思うわけです。

ではPhotoshopでは…。CSS Hatというプラグインがあります。29.99US$です。こちらはLESSやSaSSなどのCSSプリプロセッサーにも対応しているのがポイントです。

まとめ

Fireworksはスライス以降の作業のためだけに使っても便利です。また、PSDファイルのスライスデータを読み込めるのもポイント高いです。ぜひ使ってみてください。


(2012.12.10 追記)
Fireworks Lover Jの丸山 章さんから、下記のご報告をいただきました。ありがとうございます。

CS5.1のpsdからFireworks CS6で試してみましたが、各スライスの属性は取り込まれなかったので、あくまで範囲選択のみようです。

こちらでもPhotoshop CS6 → Fireworks CS6で検証しました。Photoshopの「スライスオプション」で設定した内容は引き継がれます(「メッセージテキスト」のみ不明…)。しかし「Web用に保存」で設定した書き出しの設定は引き継がれませんでした。

ご参考になれば幸いです。


プロフィール

矢部 靖人(hamnaly)

いくつかの制作会社でWeb制作やDTPから営業まで経験し、2010年に独立。現在はhamnaly(ハンナリィ)という屋号で、Web制作を中心に地元企業のWeb活用を応援する事業を模索中。理想は高く現実は厳しく、下請け制作を中心に生きています。Knock! Knock! 主催。

エントリーリスト

カテゴリーリスト

タグ