Illustrator CC、Dreamweaver CCの新機能とバグまとめ

先日、Stocker.jp / Space にて Adobe CC検証会 を開いたのですが、主に Illustrator CC と Dreamweaver CC の話をしました。

Illustrator CC

厳密には私が Photoshop CC の話もしたのですが、話した内容は以下の記事にまとめていますのでここでは省略します。

Adobe Photoshop CCファーストインプレッション | Stocker.jp / diary

なお、Illustrator CC の新機能とバグについては、主に Illustrator Mania というサイトの管理人であり、Illustrator のお祭り dot-ai にも出演された鈴木さん( @suzukisan__ )にお話いただきました。

※この記事で使用している画像サンプルは、鈴木さんが勉強会で使われていたものではなく、私が作成したものです。

Illustrator CCの新機能

文字ツール

文字ツールでアートボードをクリックし、テキストを入力し、Ctrl+Enterキーで確定すると、テキストオブジェクトの右に丸いものが出ています。
ここをダブルクリックすると、エリア内文字への変換が可能です。

テキスト

エリア内文字の状態でダブルクリックすると、通常の文字へ変換も可能です。

文字タッチツール

文字タッチツールは Illustrator CC の目玉機能ですので、ご存じの方も多いと思います。
文字オブジェクトのまま、一部の文字のサイズを変えたり、移動することが可能です。

テキスト: 夏の風物詩

文字タッチツールのバウンディングボックスは、なぜか Illustrator 標準のバウンディングボックスとは挙動が異なります。
(バウンディングボックスの右下は横方向の伸縮のみ、左上は縦方向の伸縮のみなど)

詳しくは、下記ページに書いてあります。
文字タッチツールだけじゃない、Illustrator CC のタッチ対応

これはタッチパネルを意識したUIらしいのですが、個人的には普通のバウンディングと同じ挙動にして欲しかったです。

また、文字を上下方向に移動した時に他の文字の位置に影響を与えてしまうなどの問題があるので、個人的には文字タッチツールはあまり使わないかな(文字をバラバラに配置して変形・移動した方が早いかな)と思ったのですが、鈴木さんは文字タッチツールは使っていきたいそうです。

画像ブラシ

Illustrator CS6 までは、写真を「ブラシ」パネルにドラッグすると、このようにエラーが表示されていましたが…

エラー画面

Illustrator CC では、写真を「ブラシ」パネルにドラッグすると、どのようなブラシ(散布ブラシ)にするかダイアログで選択できるようになりました。
例えば、散布ブラシを選択するとこのような画面になります。

散布ブラシオプション

画像を散布ブラシとした場合、例えばこのように使用することができます。

花

角の部分を自動生成する新機能も付いたため、画像によっては角の部分を自分で制作する手間を省ける場合もあります(直角などが不自然になる場合もあります)。

アートブラシ: 鎖

アートブラシオプション

指定したガイドの間の部分のみ伸縮させることができるようになりました。
例えば、鉛筆の写真を画像ブラシにした場合、全体が伸びてしまうと不自然ですが、削れた部分とキャップの部分を固定して伸ばせば自然になります。そのような場合に使用すると便利だと思います。

パスの自由変形

長方形などのオブジェクトを選択後、「自由変形」ツールを選択すると、オプションが表示されるようになりました。

自由変形

バウンディングボックスの右下などを Ctrl(command)+ドラッグすると個別に変形することもできます。

Illustrator CCのバグ

90度回転させると微妙に斜めになる

これは有名なバグですが、Illustrator CC で長方形や直線などを90度回転させると、微妙に斜めになっています。
(拡大しないとわからないこともあります)

詳細は、こちらの記事で触れられています。

Illustrator CCの回転が雑な件について – saucer

対処方法としては、CS6形式で保存し、Illustrator CS6 で開くと修正されているようです。

ワープ効果が-1%ずつ数値がずれる

メニューの「効果>ワープ」を選択した場合でも、「オブジェクト>エンベロープ>ワープ」を選択した場合でも、アピアランスパネルで「fx」アイコンをダブルクリックして修正しようとするたびに「カーブ」の値が -1% ずつ減ってしまいます。

しかし、数値によっては減らないこともあります。
具体的にどの数値では減らないかなどは、鈴木さんの Illustrator Mania に書いてあります。

Illustratorのワープ効果で特定の数字を入力した場合に発生するバグ

Webコーディングスクール 体験レッスン受付中

小ネタ: Illustratorでフォントを丸文字にする

これは、特に Illustrator CC の新機能というわけではないのですが、検証会の時に話題になっていたので書きます。

丸文字が必要なとき、Mac であれば「ヒラギノ丸ゴ ProN W4」が入っていますが、もっと太い丸文字がほしいということもあります。
あるいは「小塚ゴシック Pr6N の字形で丸文字がほしいんだ!」ということもあるかもしれません。

そんな時に、Illustrator の「効果>パス>パスのオフセット」で「-5px」「ラウンド」のパスのオフセットを追加し、さらに「効果>パス>パスのオフセット」で「5px」「ラウンド」のパスのオフセットを追加します。
(フォントサイズに応じて数値を変更してください。順序を間違えないようご注意ください)

すると、このように丸文字になります。濁点など、一部細くなってしまう場合もあります。

小塚ゴシック 丸文字

Dreamweaver CCの新機能

Sass/LESS/Scss対応

Sass などは、CSS をより効率的に記述できるよう CSS を拡張したもので、例えば CSS をネスト(階層化)して記述することができます。
早速、Sass に対応した Dreamweaver CC で Sass ファイルを新規作成し、ネストした CSS を書いてみましょう。

Sass Document

「#header」と「h1」はどちらもセレクターなので同じカラーリングになるはずですが…あれ…?
しかも、「}」のカラーリングが明らかにおかしいです…

Dreamweaver CCのバグ

HTMLを書いている途中で消える

HTMLを書いている途中で、command+Z キーを押すと、なぜかその下の行が消滅したことがあります。
もちろん、command+Z キーでは戻りません。

追記: アップデートで修正されたようです。

CSSを書いている途中で消える

HTMLを書いている途中で、別のCSSファイルをドラッグ&ドロップで開いたところ、なぜか CSS が下から30行ほど消えました。
もちろん、command+Z キーでは戻りません。

追記: アップデートで修正されたようです。

デザインビューとコードビューを行き来していると…

ツールバーの「コード」と「デザイン」ボタンをクリックして行き来していたところ、以下のような画面になりました。

Dreamweaver CC: デザインビューとコードビュー

これは「デザインビュー」のはずですが、なぜかデザインビューとコードビューが重なって表示されています。
このまま、デザインビュー(?)を上下にスクロールすると、画面がぐちゃぐちゃになりました。

追記: アップデートで修正されたようです。

Dreamweaver CS6時代のバグも健在

  • よく落ちる(強制終了する)
  • Mac版で謎の下線が出る

など、Dreamweaver CS6時代のバグも修正されることなく健在でした。

OZPAさん
写真提供: ぱくたそ-WEB制作向けの無料写真素材

正直 Dreamweaver CC に関しては、激おこぷんぷん丸を通り越してこの写真のような心境です…

私個人としてはだいぶ前から HTML/CSS コーディングには Coda 2 + Emmet プラグインを使用しているのですが、Coda 2 はMac版しかないため、Windowsをお使いの受講生の方もいる 社会人のためのWebデザインスクール では Dreamweaver CS6 を使用しています。

プロになるためのWebデザイン入門講座 という書籍でも、Windowsユーザーの方のことを考えて Dreamweaver CS6 ベースで書いています。

しかしこの先どうしたものでしょうか… Adobe は Edge Code への乗り換えを推奨しているのですかね?
Edge Code や、開発版の Brackets も個人的に時々試しているのですが、まだまだバグが多いし仕事で使うにはちょっと早い気がしています。

最近利用者の増えている Sublime Text 2 は Windows版もMac版もありますが、初心者の方におすすめするにはちょっと難しいですし、OSによって全くキーボードショートカットが違いますし…どうしたものでしょうね。

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index