カテゴリー: SaCSS

jQueryハンズオン

jQueryを使用したリッチコンテンツを基本から解説。jQuery記述方法、CSSクラスやIDへの記述、色々な記述方法、特定箇所を開閉するアコーディオンの制御、アニメーションなど過去行った内容の復習から複雑な制御までの一通りを実演しながら分かりやすく説明されていました。 感想として、とてもタイムリーな内容だったと思います。現在スマートフォンが端末の中心になりつつあり、リッチコンテンツがFlashからjQueryへの移行が加速しています。そのため、確実に今年のコーディングは最低限JSを理解していないといけないと考えています。jQueryはここ数年の動きを見るに、JSのライブラリとしてデファクトスタンダードになると予想されます。 jQueryのプラグイン実装は当然として、オリジナル制作できるスキルがあればより自身の経験となりますし、開発の幅が広がりますので、覚えて損はないと思います。ただし、最後の方はプログラム思考が出来る人でないと、ついて行けないんじゃないかなーという不安も感じます。デザイナーとコーダーの垣根が曖昧なだけ、プログラムの難しさをどのように取り払えていけるかが今後の課題となりそうです。

SaCSS Vol.21で話しました、WEBデザイン制作3ソフトについてまとめたものをアップしました。興味ある方はご参考下さい。 WEBデザイン制作で使われるソフトはPhotoshop、Illustrator、そしてFireworksが主に使用されています。これら3ソフトでWEBデザインを行った場合、どのような特徴があるのかを調べました。

Fireworksの特徴

スライスはFireworksが一番機能に優れています。WEBデザインで重宝するのは次の機能でしょうか。

• スライス用レイヤーの存在
• スライスレイヤーの重ね順による書き出し優先
• シンプルロールオーバーによるロールオーバー画像の書き出し
• ピクセルスナップによるアンチエイリアスの削除（CS5）
• グラデーションディザによるバンディングの低減（CS5）
• HTMLテキストの太字設定が可能
• ピクセル単位での制作・移動・調整

ロールオーバー画像については現在ではCSSスプライトとjQueryを併用することが広まっているため、必要性は下がっています。 また、オブジェクト名の変更を行う場合、より簡単にできる「1 Slice Name Changer」というのがあります。Fireworks8、CS3、CS4のみの対応ですが、該当バージョンを持っている方は入れると作業が捗ります。 詳しくはURLをご確認下さい。http://d.hatena.ne.jp/zakira/20090612

Photoshopの特徴

WEBデザイン用途して重宝するのが画像やタイポグラフィの加工、制作です。

• スライスはスライスツール、ガイドによるスライス、レイヤーによる3種類
• グリッド指定可能（※グリッドがあってない場合があります）
• シェイプによる設置後の編集が可能
• スマートオブジェクト機能
• ロールオーバー画像は別途レイヤーかファイルを用意

PhotoshopCS4にはFireworksの様な疑似スライス機能を持ったプラグイン「スライスチップ作成パレット」があります。 詳しくはURLをご確認下さい。http://lovwar.com/blog/?p=216

Illustratorの特徴

IllustratorCS5になってWEB用途の新機能が追加され、WEBデザインの制作効率が上がっています。

• スライスはスライスツール、ガイド、選択範囲からスライス、スライス－作成の4種類
• ピクセル整合による正確なボケない画像制作が可能（CS5）
• テキストのアンチエイリアスが実装（CS5）
• ロールオーバー画像は別途制作が必要

IllustratorはDTPレイアウトが基本のため、下位バージョンだとピクセル太りなど細かい問題が生じます。 そのため、WEBデザインするためのルールを設定しておく必要があります。 http://kojika17.com/2011/01/how-to-slice-the-ai-data-for-illustrator.php 結論としてはFireworksを使うのが一番バランスが良いです。ただ、各ソフトで一長一短があり、現場で制作環境によりソフトが決まるかと思われます。