段組み設定を使った、ワイヤーフレームの作成

いよいよ今年も残すところ、あと一週間!
一年あっというまでした。

今回は、Illustratorの「段組み機能」を使用した、ワイヤーフレームの作り方です。

サイトデザインをする前に、ページのレイアウトの目安として作るワイヤーフレーム。
以前の記事でもふれましたが、CSSniteで「段組み設定」を使った、ワイヤーフレームの作り方を紹介されていました。
それを参考に、940グリッドシステムに沿ったワイヤーフレームを実際に作ってみました。

1、長方形ツール

長方形ツールで、幅940pxの長方形を作成します。
(高さは任意ですが、キリよくできる1500pxで作りました)

長方形作成

2、段組み設定でパスを分割

オブジェクトメニュー>パス>段組み設定を選択します。

段落設定

今回は1カラム60pxとしたいので、
下図のように設定しました。

分割

すると、このように60px角のカラムに分割されます。

分割後

あとで変更するときのために、これをまるまる別レイヤーにコピーしておきます。

3、カラムを結合させる

任意のカラムを複数選択し、オブジェクトメニュー>パス>段組み設定を選択します。
列数・行数ともに「1」にすると、カラムが結合されます。

結合

 

あとは、写真や文章のダミーを作り込んで完成です。

完成

有料ですがwireMagicがダミー画像の作成に便利だそうです。
カラムを選択して、ダウンロードしたグラフィックスタイルを適用するだけなので、さらにお手軽にできますね!

 

段組み設定を使うと、マージンやカラムのサイズを計算せずに、感覚的にワイヤーフレームを作ることができます。
別レイヤーに保存していた、分割前のカラムを使えば、あとからの修正もカンタン。
ワイヤーフレーム作りが、ちょっと面倒だなと感じている方はぜひお試しください。


新潟グラム x CSS Nite「Webで使うIllustrator」に参加してきました

先日11月6日に、新潟グラム x CSS Niteに参加してきました。

テーマは「Webで使うIllustrator」

「WebデザインといえばまずはPhotoshop!」って入口からきて、今までPhotoshopメインでデザインしてきました。
が、もとはIllustratorを使う方が多かった自分(パスいじっているのが好き…)。
できたら、IllustratorでもWebデザインするのに、もっと活用できたらいいなってことで、今回初めて参加してみました。

気になったこと・使っていきたい機能などを、忘れない内にメモします。

新潟グラム/CSS Niteについて

【新潟グラムとは】
新潟でデザイン業務に関わる方に向けたセミナーを主催されています。

【CSS Niteとは】
株式会社スイッチの鷹野雅弘さんが主催するセミナー。CSSに限らずweb制作に関する知識を発信するセミナーです。
今回は鷹野さんが講師もされていました。

 

Web制作の動向

いままでビットマップベースで行っていたパーツの作成を
SVGWebフォントアイコンフォントなどのベクター表現や、CSS3を活用することで
マルチデバイスに対応したWebデザインをしていく。

ベクター表現が得意なIllustratorでWeb制作

Illustratorの便利な機能

時間をかけずに、編集しやすいデータをつくれるIllustratorの機能をいくつか紹介されてましたので、その中でも特に気になったものをいくつかピックアップしました。

1 ライブカラーで再配色

ハーモニーカラーをリンク。あとはホイールをぐるぐるまわすだけで簡単にカラーバリエーションができます。
別々に配色する必要のあった「塗り」と「線」も、これで一度に変更が可能に!
配色に悩んでいるときも、これで気軽に別の雰囲気の色が試せますね。

2 文字タッチツール

文字のアウトライン化をすることなく、一文字単位で文字の移動・回転ができます。
今まで文字パレットの数値でいじっていたのを、感覚的にできるのでいいですね!
しかも下位バージョンでデータを開くこともできるそう。
でも残念ながら、こちらはCCのみ対応の機能となっています。

3 段組み設定を使ったgrid対応のワイヤーフレーム作成

段組み設定でグリッド分割し、さらにその分割したオブジェクトを段組み設定で結合。
結合したオブジェクトに、ダミーの画像やテキストをアピアランスで適応
…と、ものの数分でサクサクとワイヤーフレームができあがっていく様は圧巻でした…!
段組み設定にこんな使い方があったんだなーと、一番印象に残った項目でした。

6 Layer Exporterや画像アセット(Photoshop)を使ったPNG/SVG/JPEGの書き出し

スライスを使用せず、レイヤーやフォルダ単位で画像を書き出すことができます。
しかも、レイヤー名(フォルダ名)を対応する名前に変えると、それにあわせた形式や解像度で書き出してくれるそうです!
面倒だったスライス作業がなくなると、相当な時間短縮になるのではないでしょうか。

しかしこちら、CCから対応の機能です…。本当に残念です…。

参加してみての雑感

・Illustratorのこと以外にも、「Webデザイン」制作の動向も知れて、大変ためになりました。

・鷹野さんのスライドの構成・デザインもわかりやすく、かつ遊びがあって素敵でした。
・視点誘導に使用されていたスポットライト機能(Mouseposéというそうです)も、わかりやすかったです。

Mouseposé
人前でデモしたりするときにやっておくといいこと(Mac OS編) – DTP Transit(Mac OS X, セミナー, イベント, 展示会, プレゼンテーション, ユーティリティ)

・CCの機能っていろいろあるんだなーと、新機能を試すのが今から楽しみです。

・使い慣れているつもりになっているソフトでも、知らない機能・活用方法がたくさん。まだまだ勉強しないとですね。

・次回開催されるときには、またぜひとも参加したいです。


Illustratorで効率よく表組作成

はじめまして。AGN WebチームでWebデザインを担当しているsakaiといいます。

Webやデザインのことはもちろん、ソフトの使い方もまだまだ覚えることが沢山で、勉強の日々です。

Webデザインのカンプ作成ではPhotoshopを、アイコンや表などのパーツはIllustratorを使用して作業していますので、
それらを使っていて気づいたこと・便利な機能などを、こちらでご紹介できたらと思っています。よろしくお願いします。

今回はIllustratorのお話です。

Illustratorで効率よく表組作成

Illustratorで効率よく表作成

Illustratorでの表組作成の機能はCCの時点でまだサポートされていません。
Webデザインには表組を利用したデザインが多くありますので(会社概要や料金表、プランの比較などなど…)
作成にけっこう手間がかかってしまいます。

なにか効率のいい方法はないものかと、いろいろ調べたものを以下まとめてみました。

※IllustratorCS6を基準としてます

1 パスの段組み設定を利用する

  1.  外枠となる長方形を作成
  2. メニューから「オブジェクト>パス>段組み設定」

    saka1_1saka1_2

あらかじめセルが個々にわかれた状態で作成されますので、セルの結合が「パスファインダー>合体」で簡単にできます。
saka1_7

ただ、こちらの方法だと、列や行が増えてしまったときの修正がけっこう大変です。
列や行数があらかじめ決まっている時に、この方法はいいかもしれません。

2 長方形グリッドツールを利用する

  1. ツールバーから長方形グリッドツールを選択
    saka1_4
  2. 任意の場所でクリックし、設定
    saka1_5

こちらはセルが個々にわかれてない、ラインで構成された表になります。
(「外枠長方形を使用」にチェックを入れた場合は外枠+ライン)

なので、列や行数の変更も「パスの段組み設定の利用」したものに比べると、グッと作業がラクになります。

以下、表作成後の編集方法をまとめました。

2-1列・行数の変更

  1. 長方形グリッドツールオプションで「外枠長方形を使用」のチェックをはずして表を作成。
    saka1_10
  2. 表のグループ設定を解除し、中のラインを削除。
  3. ツールバーのブレンドツールをダブルクリックし、ブレンドオプションを表示。
  4. 間隔を「ステップ数」に変更。ステップ数に「列数(または行数)-1」の数を入力。
    saka1_8
  5. 2辺をブレンドツールでクリックし、ブレンド作成
    saka1_9

2-2セルを個々に分割・結合する

  1. 外枠のライン同士を結合させ、1つのパスにする。
  2. 外枠を「塗り・線あり」にした状態で全てを選択し、パスファインダー>分割
  3. 結合したいセルを選択し、パスファインダー>合体

番外編 InDesignを利用する

saka1_6

InDesignでは表組機能が搭載されていますので、セルの結合やセル内の文字組など編集が簡単に行えます。
EPS書き出しもできるので、Illustratorでも編集することが可能です。

InDesignが手元にあってもあまり使用されてなかった方は、試しに活用してみるのも1つの手かもしれません。

 

こちらのサイトを参考にさせていただきました。