第31回 WordBench神戸勉強会WordPressの開発環境：デザイナー・コーダー編

@yasuo1981

酒井 康雄

株式会社 カイロス

フロントエンド・エンジニア

主に、HTML・CSS・Javascript・Flashなどを、使ったWebコンテンツ。

稀にデザインをしています。

性格は、ミーハーで、飽き性。

Flash大好きなので、Flash＋Wordpressのサイトを、現在計画中！！

自己紹介

Wordpressでの、作業フローについて

ラフデザイン・ワイヤーフレーム、デザインカンプ、ローカル環境で、コーディング、サーバ

にアップし、Wordpressを導入します。

という、流れで作業を行ってます。

Wordpressのサイトを作る際の、流れの図

あれ、レスポンシブWebデザインでも、この作業フローなの！？

そうです！！

レスポンシブWebデザイン専用の作業フローを取らない理由

以前、プロトタイプ設計での作業フローを、試みたのですが…。

• クライアントにデザインが伝わりにくい。

• レガシーブラウザ対応で、コーディングを調整し直す。

そういった経緯から、レスポンシブWebデザインでも同じ作業フローなんです。

ちなみに、IEのサポート期間について

余談ですが、IEのサポート期間を掲載しているサイトです。

http://www.tama200x.com/blog/?p=1776#more-1776

レスポンシブWebデザインでの、作業フロー改善策について

そうはいっても、PCサイトを作るだけよりは、大変です。

手を速く動かすとか、睡眠時間を削るとか根性論で、カバーするみたいな…。

体力勝負も年齢的に厳しくなってきました…。

そこで、ツールや、新しいプログラム言語、ジェネレータなどを使って、

効率よくレスポンシブWebデザインでも、楽に作業ができる環境をご紹介したいと思います。

ラフデザイン・ワイヤーフレームでの作業環境について

ラフデザイン・ワイヤーフレームでの作業は、

Illustrator、PowerPointなど、

使い慣れているツールを使えばいいと思います。

会社のデザイナーの話では、Fireworksでワイヤーフレームを作ったら、

そのままのレイアウトで、デザインカンプが作れるので、Fireworksで作ります。

という意見もあるように、個々で使いやすいツールで良いと思います。

デザインカンプでの作業環境について

大体のWeb制作会社が、PhotoshopとFireworksを使っているのではないでしょうか。

2011年頃から、SVG画像が主要ブラウザで、ネイティブサポートされていることもあり、

某有名Web制作会社で勤めている知人の話では、

IllustratorがメインでWebデザインを行っている制作会社もあるそうです。

ただ、Illustratorだと書き出しが大変です。

（※もしかしたら、いい方法があるかもしれませんが…。）

画像書き出し・スライスでの作業効率化について

Fireworksは、スライスに関しては、かなり優秀なツールの一つです。

Photoshopも新しくアップデートされた画像書き出しを使えば、容易に書き出しができる

ようになりました。

Fireworksの画像書き出しについて

Fireworksだと、書き出しは楽にできます。

スライスツールで、スライスしたい箇所を選択して、「選択したスライスの書き出し」を使います。

Photoshopの画像書き出しについて

PhotoshopCCの14.1から、アップデートされた「画像アセット」使えば、

画像書き出しは、以前より格段に書き出しやすくなりました。

［ファイル］ → ［生成］ → ［画像アセット］

コーディングでの、作業環境について

以前は、Dreamweaverを使用していましたが…。

補完機能の

数の少なさ

タイピングでの

レスポンスが遅いそこで、エディタにシフトチェンジを！！

エディタについて

まず、Adobe製品のコーダー用に開発された「EdgeCode」と、

同じくAdobe社から、無料で提供されている「Brackets」を試してみたのですが、

Dreamweaverと一緒で、絶対パスで管理をする仕様になってて使いにくかったです。

※2013年６月のリリース当初の話のため、先週、会社のパソコンで試したら、改善されていました。

そこで、噂になっていた「SublimeText2」を使う事にしました。

もっと、HTML・CSSをより効率的に書く方法

昨今、HTMLとCSSを効率的に書くことが出来る中間言語が登場しました。

中でも、CSSのメタ言語は強力で、習得すれば効率的に書けます。

CSSメタ言語 検索キーワード人気ランキング

http://www.buildinsider.net/web/popularjslib/2014#snsBar1st

中間言語のデメリットについて

効率的に書けるので、非常にメリットがあるのですが、

毎回、コンパイルしてやらないと、使えません。

ターミナル使って、コンパイルする方法

1. Compass使って、コンパイルする方法

2. ジェネレータ使って、コンパイルする方法

ジェネレータ使った方が、コーディングは早い！！

Middleman 公式サイト

http://middlemanapp.com/jp/

その他にも、ジェネレータや自動化できる技術が増えてきました。

これを気に、中間言語と自動化をしてみては、いかがでしょうか。

Middlemanの導入方法は、Slideshareにアップしています。

http://www.slideshare.net/yasuosakai/middleman-30925787

コーディングが出来れば、後はWordpressのタグを入れるだけ！！

開発サーバか、本番サーバにアップして、作業します。

Google検索で、記事みたり、WordpressCodex見たりで、オリジナルを作ります。

主観的意見ですが、なるべく、プラグイン使わないようにした方が、

後で、使い回しが効くので、追々、効率は上がります。

まとめ

フロント側の効率は、上がりましたが、

サーバ側の効率は、今後の課題です。

Thank you

http://www.kairos.co.jp

@yasuo1981