CSS Nite in SENDAI, Vol.5 講師プロフィール

こもり まさあき

顔写真:こもり まさあきフリーランス

1972年生まれ。インターネット黎明期からWebサイト構築などに関わる。現在は、Web・携帯コンテンツ制作、サーバ管理などのネットワーク関連業務に加え、テクニカルライティング、セミナー講師、アーティストのライブ撮影など業種を限定せずに活動中。Twitter(@cipher)でたまに毒を吐く日々。CSS Nite をはじめ講演多数。近著に『Webデザイン 知らないと困る現場の新常識100(MdN・共著)』など。ソーシャル系のアカウント一覧はこちら(http://bit.ly/mynameis)。

Zen-Codingはみんなのもの

2010年初頭、巷で噂になった「Zen-Coding」。テンプレート設計などゼロからのマークアップに特化した印象が強いようですが、実は原稿ベースのマークアップでもその恩恵は受けられます。今回は、Zen-Codingの基本からいろいろな制作パターンにあわせて覚えておけば作業を数倍高速化できるZen-Codingの使い方を紹介します。

千貫 りこ(せんがん・りこ)

顔写真:千貫 りこKICKS Web

フリーランスのWebクリエイター。主な業務は小~中規模サイトの企画・制作。呉服、店舗、作家・タレント、NPO法人、大学などクライアントの業種は多岐に渡る。2009年春よりロクナナワークショップにてXHTML+CSS講座を担当。共著に『現場のプロから学ぶXHTML+CSS』(毎日コミュニケーションズ)ほか。

支給されたデータを効率よく利用するためのTIPS

クライアントから支給されたデータにちょっと手を加えることで、Webページの作成にかかる手間を省くことができます。Dreamweaverの検索・置換機能を使ってHTMLのソースをキレイにしたり、原稿となるMicrosoft Office書類を整形してHTMLに組み込みやすくする方法をご紹介します。

鷹野 雅弘(たかの・まさひろ)

顔写真:鷹野 雅弘株式会社スイッチ

Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、スクールなどのカリキュラム開発も手がける。テクニカルライターとして10冊以上の著書を持つほか、書籍の企画や編集なども行っている。
2005年からCSS Niteを主宰。

主な著書に『効率的なサイト制作のためのDreamweaverの教科書』(毎日コミュニケーションズ、『できるクリエーターDreamweaver独習ナビ』(インプレス)、共著に『Illustrator CS4 完全制覇パーフェクト』(翔泳社)、『Dreamweaverプロフェッショナル・スタイル[CS3 対応]』(毎日コミュニケーションズ)、企画編集を行った書籍に『現場のプロから学ぶXHTML+CSS』(毎日コミュニケーションズ)など。

効率的なサイト制作のために欠かせないDreamweaverテンプレートの使いどころ

Dreamweaverを単なるエディタとして使っていませんか?
Dreamweaverは、サイトを構築するという流れの中で、ライブラリ、テンプレートなどを使ってこそ、その恩恵に預かれます。

Dreamweaverテンプレートを使うことを自由度が減ると思う方もいるようですが、テンプレートを使うことで次に挙げることが可能になります。
「ロックされた領域をページごとに表示・非表示を切り替える」
「新着情報、FAQなど、項目のセットごとに挿入・削除したり、順番を入れ替える」
「title要素、h1要素、パンくずリストの文字列を一括で挿入する」

Dreamweaverをさらに使い倒し、改めてワークフローを見直しましょう。

赤井澤 聡史(あかいざわ・さとし)

顔写真:赤井澤 聡史polariot/デザイナー/CSS Nite in SENDAI 実行委員/dachas モデレーター

1981年生まれ。宮城県出身。グラフィックデザイン・建築デザインを経て2008年より制作会社にてWebデザイン、コーディング、ディレクションを担当し、多くのWebサイト制作に携わる。2010年2月に独立しフリーランスで活動中。
2009年よりCSS Nite in SENDAI 実行委員会に参加。平行してdachasの運営のお手伝いも。

From Photoshop to Fireworks
PhotoshopとFireworksを併用したワークフローに合わせたスライスの使い分け

日頃のデザインワークは全てPhotoshopを使用しています!という方もいらっしゃるのではないでしょうか。
手に馴染んだ勝手のわかるアプリケーションの使用は「いつも通り」という安心感は強いのですが、制作の工程も「いつも通り」の方法で行いますので、更なる効率化は見込みにくい面があります。
中でも顕著なのがスライスの書き出しに関する工程であり、現在のバージョンではより効率良く行える機能が実装されています。
今回は「PhotoshopとFireworksを併用したワークフローに合わせたスライスの使い分け」をご説明します。

佐藤 裕(さとう・ゆう)

顔写真:佐藤 裕Bluebeck/Webクリエイター/CSS Nite in SENDAI 実行委員会・dachas 代表

雑誌制作に携わっていた2000年、「Dreamweaver3/Fireworks3 Studio」に出会い、独学でWeb制作を学び始める。その後、雑誌のWebサイト制作を手掛け、2002年に独立。本格的にWeb制作業務を開始する。
Webコンテンツ制作・ディレクションを主に行うほか、大学の非常勤講師として情報論、Web制作演習の講義も行う。

From Fireworks to Dreamweaver
Web制作を加速させる「Fireworks」

Fireworksのページ機能やスライス機能などをうまく活用すれば、Dreamweaverをもっと活用できます。
Fireworksの機能を知ることで、Web制作を加速させましょう。

高田 次朗(たかだ・じろう)

顔写真:高田 次朗Miles Design and ADG/CSS Nite in SENDAI 実行委員/dachas モデレーター

10年ほど前からWeb制作に関わり、数社の制作会社を転々とした後、2007年に独立しフリーランスとなり現在に至る。ディレクション業務を中心として活動中。

もうひとつの選択肢、Contribute
DreamweaverテンプレートのContribute最適化

Contributeというソフト、CS*についてくるあのソフト、皆さん起動したことございますでしょうか?
このソフトはDreamweaverで制作し完成、納品となった後に、制作時に使用したDreamweaverテンプレートがクライアントサイドで再び利用できるソフトなんです。

サイト公開後、制作会社はDreamweaverを使いながらサイトの管理を行い、クライアント側ではContributeを使って更新することができます。
チェックインチェックアウト機能で同一ファイルを同時に編集すること無く、サーバ上のファイルをそれぞれ取り扱うことができます。
これを使えば自分で簡単に更新したいクライアントとトーン&マナーを壊されたくない制作会社がともに満足できるサイト運用が可能です。

今回はDreamweaverを使ってContributeで使いやすいテンプレートへのカスタマイズ方法などをご説明します。