出演者のプロフィール

プロフィールは、本セミナーイベント開催時のものです。
順不同です(=掲載順には意図はありません)。

セッション

実装、運用、プロトタイピングにも!Dreamweaverテンプレート徹底活用術

見たままに編集でき、その編集機能も高いレベルで実現しているDreamweaverテンプレート。ただページの量産だけに使うのはもったいない!CMSと組み合わせたり、Contributeを効果的に活用して、実装・運用・プロトタイプ作成など、制作フローの各フェーズでDreamweaverテンプレートを活躍させる方法をご紹介します。

写真:伊原 力也伊原 力也(いはら・りきや)

株式会社ビジネス・アーキテクツ

マークアップデザインエンジニア、インフォメーションアーキテクト。大規模プロジェクトのCSSサイト構築・製品プロモーションサイトの設計・モバイルコンテンツ構築も手がけるデバイス非依存実装のスペシャリスト。クリエイティブ集団mokuva所属。

  • twitter

Dreamweaverの最新バージョンの機能は
現場のワークフローにどこまで溶け込むのか?(仮)

Dreamweaver CS4で搭載されたライブビュー、Subversion連携、コードナビゲータなどの新機能は、どの程度、現場に定着したのか? 今後のDreamweaverの方向性は?などについて、Dreamweaverを知り尽くす2人が掛け合い形式で掘り下げます(Dreamweaver CS5の新機能についても取り上げます)。

写真:神森 勉神森 勉(かみもり・つとむ)

アンカーテクノロジー株式会社
制作部 統括マネージャー

総合商社の営業マン、DTPオペレーターを経て、Webサイト制作業務に携わる。現在は、アンカーテクノロジーにて、ディレクター、プロデューサーとして多くの案件に関わっている。

中央職業能力開発協会主催の第三回、第四回若年者ものづくり競技大会ウェブデザイン部門競技委員を務める。 また、デジタルスケープ、ロクナナワークショップなどで不定期にWebサイト制作やDreamweaver関連の講師を務めており、昨年10月より、社会福祉法人プロップステーションのICTセミナーの講師を行っている。

共著に『Dreamweaverプロフェッショナル・スタイル[CS3 対応]』(毎日コミュニケーションズ)、『Dreamweaver 逆引きデザイン事典』(翔泳社)、『XHTML&CSSデザイン | 基本原則、これだけ。』(MdN)がある。

Dreamweaverは初期の頃から愛用し、Dreamweaverを使ったサイト制作の効率化などを早くから実現。DreamweaverやContributeを使ったサイト運営などのノウハウを数多く持つ。

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

株式会社スイッチ

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

2005年からCSSNiteを主宰。

著書に『できるクリエーターDreamweaver独習ナビ』(インプレス)、共著に『Dreamweaverプロフェッショナル・スタイル[CS3 対応]』(毎日コミュニケーションズ)、『Illustrator CS4 完全制覇パーフェクト』(翔泳社)
編著書に『1ランク上の技を身につけるFlashの強化書』(毎日コミュニケーションズ)など。

大喜利(持ち時間7分のミニセッション)

Dreamweaverで管理するMovable Typeテンプレート

MovableTypeをサイトに組み込むには、その独自タグをHTMLのソースコードへ 加え、デザインテンプレートを作成します。この時間のかかるカスタマイズ作業を日 頃使い慣れたDreamweaverを使って効率よく組み込む手順やコツをご紹介します。

デモムービーをご用意しました。Movable Typeに詳しくない方は、予備知識として、ぜひ、事前に視聴ください。

写真:森 和恵森 和恵(もり・かずえ)

r360studio

フリーランスで活動する関西のWeb屋さん。現在は主にWeb系のセミナー講師として活動中です [Dreamweaver CS4 ACI(Adobe認定トレーナー)] 。「難しいことでも、わかり易く伝える」がモットー。今年は、オンラインでのWeb制作の教育コンテンツ制作を画策中です。

著書に『DreamweaverとMovable Typeで作る テンプレート カスタマイズレッスン』(技術評論社)など。Ver3からのDreamweaverユーザーと、 意外に歴史は古いです。

  • twitter

DreamweaverでPhotoshop & Fireworksとさらに連携する!

事前に書き出しておかなくても、PhotoshopやFireworksからコピー&ペーストでDreamweaverに画像を貼り付けることができるようになっています(ダイアログボックスでGIF/JPEG/PNGなどの形式を選択したり、圧縮率などを調整)。さらに、元データのPSDデータ/Fireworks PNGに変更が生じたら、Dreamweaver側で自動的に更新してくれます。FireworksからはCSSの書き出しもできます。

これらをうまく使って作業の効率化をはかりましょう!

写真:石嶋 未来石嶋 未来(いしじま・みき)

ウープスデザイン

行動力だけが取り柄の熱血デザイナー。グラフィックだけでなく企画提案やライティングなど、とりあえずなんでもやっちゃう幅広い守備範囲が武器。デザイン事務所・IT企業を経て2009年に「燃えるココロをデザインに。」とウープスデザインという屋号で独立。コニュケーションデザイナーに転職すべくレベル上げしてます。デザイン勉強会主催してます。趣味はバンドTシャツ集め。アダ名はまめこ。

講演実績に、PAGE2010 「DTPプロフェッショナルにおくる効率的web制作ワークフローとは」、デザイン勉強会 「ノン・デザイナーのための、それっぽいパーツ作成講座」、DTP Booster「現場でスグに使える人物合成」など。

5分で作る WordPressテーマ

WordPressのオリジナルテーマは、HTMLと少しのPHPの知識があれば簡単に作れます。 Dreamweaverの力を借りて、自分だけのWordPressテーマをスピーディに作る方法を紹介します。

写真:たにぐち まことたにぐち まこと

株式会社エイチツーオー・スペース
代表取締役

東京世田谷区のWeb制作ユニット。 Dreamweaver 4 + UltraDeveloperの頃から PHP開発に Dreamweaverを活用し、 Mac + Dreamweaver Town Meeting in Tokyoで行う、効率よい、デザイナーとの相性もよい開発作業を提唱している。

主な著書に『Dreamweaver PHPスターティングガイド』、『基本からしっかりわかる Adobe Spryプログラミングブック』(毎日コミュニケーションズ)、共著に『Dreamweaverプロフェッショナル・スタイル』(毎日コミュニケーションズ)など

  • twitter

ソースコードをキレイにする

クライアントから支給されたHTMLソースをベースにしなくてはいけない更新案件。しかし、支給されたソースが汚くて、そのまま使用するのがはばかられる...。

そんなときに、Dreamweaverの検索・置換機能などを使ってさくっとキレイにする方法をご紹介します。

写真:千貫 りこ千貫 りこ(せんがん・りこ)

KICKS Web

フリーランスのWebクリエイター。主な業務は小~中規模サイトの企画・制作。出版、呉服、店舗、作家、NPO法人などクライアントの業種は多岐に渡る。書籍・雑誌記事の執筆、セミナー講師なども手掛ける。ロクナナワークショップにて「千貫りこのXHTML/CSS入門講座」を開講中。

共著に『現場のプロから学ぶXHTML+CSS』(毎日コミュニケーションズ)、『Webデザイン 知らないと困る現場の新常識100』(MdN)。

Dreamweaver de HTML5

今話題のHTML5。Dreamweaverな人は手打ちでコードを書くのを強いられていました。そんな歯がゆさを払拭するために、コーディング環境を古いバージョン(Dreamweaver 8以降)でも実現する機能拡張を作成しましたので紹介します

写真:丸山さん丸山 章(まるやま・あきら)

フリーランス

1970年岡山生まれ。鳥取県在住。

鳥取大学農学部大学院中退後、鳥取市内のデザイン会社に約10年間勤務。そこでいきなり自社Webページの作成を命じられ、以後Webの世界へ。その後派遣等を経て、現在フリーで細々と活動中。長年使っているFireworksやDreamweaverの機能拡張などを時々作成してブログにて公開中。

共著に『Dreamweaver プロフェッショナル・スタイル』(毎日コミュニケーション)。

デザインビューと上手にお付き合いする方法

レンダリングに難がある、モダンブラウザの表示とだいぶ異なる、ソースビューだけで十分、そんな理由でデザインビューの使用を避けてはいませんか? 実は、ちょっとした工夫で、そんなデザインビューを使いこなすことができるのです。

今回は、そんなデザインビューとの「上手な付き合い方」から、デザインビューだからこそできる作業の効率化まで、キーボードショートカットの活用と合わせてご紹介します。

写真:宮内 純人宮内 純人(みやうち・すみと)

株式会社マックグラフィックアーツ
マークアップエンジニア

1980年 愛媛県生まれ。 大手制作会社、テレビ局勤務を経て、2006年 株式会社マックグラフィックアーツ入社。 中~大規模サイトの設計・構築をメインに担当。
コーディングに留まらず、進行管理からサイトマップ・仕様書の作成、勉強会の主催、 打ち合わせの議事進行、お茶汲み、皿洗いまで幅広く対応中。
CSSNiteアフターイベントで1回、SwapSkillsで過去3回スピーカーを担当。

POLYSICSの熱狂的なファンで、好きが興じて2009年には雑誌の企画でインタビュアーを担当し持てる運を使い果たしてしまう。 座右の銘は「好きこそものの上手なれ」と「リアクション芸人、他に芸は無し」。

コードヒントをカスタマイズして、スタイル定義を効率化しよう!

Dreamweaverのコードビューで、先頭の数文字を入力しただけで入力候補を一覧化してくれる、コードヒント。 とても便利なこの機能ですが、使用頻度の低いCSS プロパティが羅列されるのは、かえって邪魔だと感じてしまいますよね? そこで、コードヒントが定義されているXMLファイルを自分なりにアレンジして、CSSコーディングを効率化する方法をご紹介します。

写真:國分 亨國分 亨(こくぶん・とおる)

dreamseeker

2001年に独立後、地元郡山市を拠点にフリーランスでWebサイト制作などを手掛ける。 クリエイティブワーク以外にも、地元大学での講師や執筆活動などを行う。 CSS Nite in FUKUSHIMA 実行委員長。過去2回、スピーカーを担当。

2009年より、クリエイティブユニット「gabs」として、おしゃべりを開始。 また、地元有志のスキルアップや交流を兼ねた「遊部(あそぶ)」を不定期にて開催。 ネタとスピーカーは随時募集中ですので、Twitterアカウント @BUNまで、ご連絡ください!

  • twitter

Fireworksではじめる快適CSS Spriteライフ

「CSS Sprite」は、画像の枚数を減らすことで表示スピードアップやサーバーの負荷軽減できるとしてYouTubeやAmazonをはじめとして使われているテクニックです。しかし、いざ、導入しようとすると、画像とCSSをつくるのが大変ですし、メンテナンスにも手間がかかります。そんな悩みをFireworksで解決する「CSS Sprite Extension」とDreamweaverとの連携について紹介します。

写真:湯口 りさ湯口 りさ(ゆぐち・りさ)

RsStudio

2000年からいくつかの企業に在籍し、Webサイト制作、運営、ディレクションを経験し、制作を中心に活動したくなり2005年にフリーランスとして開業。小規模のコーポレートサイトを中心に、企画・デザイン・HTML/CSS・Flash(ActionScript1〜3、Flash Lite)と制作全般に携わっている。

ちょっとした工夫で作業効率アップなツールを作っては不定期に自身のWebサイトに掲載。最近はCSS SpriteをFireworksを使って書き出す機能拡張をつくり、ちょっとだけFireworks界(?)で話題になった。

Dreamweaver x Zen-coding

Dreamweaverには元々、基本的な入力補完が備わっていますが、その入力補完とは別の入力補完を追加する拡張機能「Zen-coding」を導入することによって、その双方の利点を使用したコーディングが可能になります。 このZen-codingの基本・発展、業務における実例などをデモを交えてご紹介します。

写真:岡部 和昌岡部 和昌(おかべ・かずまさ)

ヤフー株式会社
マークアップエンジニア

1983年 埼玉県の田舎出身。大学で応用化学を学んだ後、現在は何故か畑違いのヤフー株式会社に所属。

Yahoo! JAPANトップページ・オフィス版、My Yahoo!などのマークアップをメインで担当。表示速度の高速化、マークアップの効率化、技術開発時における実装を含めての構築が得意分野。

座右の銘は「なんとかなる、ではなく、なんとかする」。「皆に優しいマークアップ」をモットーにブラウザに対するスペシャリス トを目指して日々奮闘中。

Microsoft OfficeからのデータコンバートTIPS

クライアントからデータを受け取る時に一般的なのがMicrosoft Officeファイル。素直に「HTMLで保存」して仰天した人も多いと思います。「もっと綺麗にコンバートができないかしら…。」そんな悩みを、初期段階でのちょっとした工夫で解決する方法をご紹介します。

写真:山田 恵理子山田 恵理子(やまだ・えりこ)

Webridge Kagawa
Webデザイナー

香川県生まれ。何でもできるWeb制作者を目指してシステム開発会社でプログラミングを学び、2006年にWeb制作会社「株式会社ゴーフィールド」に転職。現在はWebデザイナーとして主に企業・ECサイトのデザイン、CMS構築、コーディング等を担当している。

2009年より香川県のWeb制作者コミュニティ「Webridge Kagawa(ウェブリッジかがわ)」にて CSS Nite in TAKAMATSUなど各種セミナーイベントやワークショップを開催している。自身の登壇経験もあり。

家業の「桃」を愛する農業系Web制作者。

Dreamweaverの拡張機能を作ってみる(入門編)

Dreamweaverの拡張機能は自分で作ることができます。 自分用の拡張機能を作れば作業を効率化できるかもしれません。 今回は その基礎知識をコンパクトにご紹介します。

写真:渕上 伸吾渕上 伸吾(ふちがみ・しんご)

面白法人カヤック
意匠部所属

2009年度新卒ピチピチギャル男(23)。

HTMLにCSSをサイケデリックにキかせて、 DreamをWeavesするために生まれてきた 伊達ワルイリュージョニストがついに君臨!

制御不能の限界ギリギリOVERコーディングを武器に、 自社サービスから受託サービスまで数多くのマークアップを担当。 この1年で作ったサイトの数は まさにクレイジー! 「パねぇ」って言葉はもはやこのギャル男のためのもの。

  • twitter

コーディングツールバーのカスタマイズ

コードビューに搭載されているコーディングツールバー。便利なようで、実際はボタンが多すぎて、使いやすさは今一歩。必要不可欠なボタンだけが表示されるコーディングツールバーへカスタマイズする方法をご紹介します。

写真:茂木葉子茂木 葉子(もてぎ・ようこ)

Aqua Design Studio

Aqua Design Studio代表。書籍の執筆&編集、Webサイトの構築、Dreamweaverビギナー向けのトレーニング、編集デザイン系(InDesign+Photoshop+Illustrator)のトレーニング、文章デザイン講座などを中心に行う。ブザン公認マインドマップインストラクター。

著書に『Webプロフェッショナルのための黄金則 Dreamweaver虎の巻』(毎日コミュニケーションズ)、『Acrobat+PDFビジネス徹底活用』『10日でおぼえるDreamweaver CS3入門教室』(以上 翔泳社)などがある。