Webデザイナーの制作環境｜ソフトウェア

デザインの仕事をしていると言うと「Macユーザー？」と聞かれますが、当方は根っからのWindowsユーザーです。
はじめて出会ったパソコンがWindowsでしたので、一途を貫いております（笑）

近年、WEBデザイナーになる前にグラフィックのお仕事をされていた人とは別に、純粋なWEBデザイナーがMacBookAirなどに機種変をしているので寂しくもあります。

基本的にホームページは、一般家庭のユーザーを中心にWindowsのIEで見るのが多く、一般ユーザーの環境にできる限り合わせ作りたいというのもポリシーに持っております。しかし当方ではIE6,7には対応いたしませんが（笑）
しかも、メインブラウザはChromeを利用していたりします（笑）

さて、ここではプロのWEBデザイナーが普段お仕事で使い倒しているソフトウェアの紹介をしたいと思います。
Webデザイナーは、使うソフトがたくさんあり覚える事がいっぱい！

これからWEBデザイナーになりたい！って人は、ソフトの機能や操作を覚える事がいっぱいって事だけで挫折しないように！
会社など組織で分業をしている人は、扱うソフトは少なくなるかも知れませんが、フリーランスの万能WEBデザイナーやWEBディレクターは、大まかにでもどのような機能がありどのような物が作れるかは認知しておいた方が良いです。

Adobe Fireworks CS6 Windows版

以前（2008年以前）はホームページのデザインをする時はPhotoshopを利用しておりましたが、何かのお仕事で思い切ってFireworksでの作成にチェンジ致しました。それからというものずっとFireworksでホームページのデザインしております。
当時のPhotoshopでは、画像のスライスがやりにくく効率が悪かったのを記憶しております。
ピクセルデザインが好きな私にとって、凄く使いやすく作りやすく可愛いFireworksです。

//♪注目機能////////////////
新しいjQuery Mobile Theme Skinningのサポート
モバイル向けのWebサイトおよびアプリケーション用のjQueryテーマを作成、修正、更新できます。CSSスプライト画像の作業にも対応しています。
デザインおよびWebページから体裁の良いCSSコードを抽出
新しいCSSプロパティパネルを使用して、CSS要素と値（カラー、フォント、グラデーション、角丸の半径など）をクリーンに抽出することで、時間を節約しながらデザインの完全性を維持できます。コードを取得したら、Adobe Dreamweaver® CS6などのHTMLエディターに直接コピー＆ペーストします。
複数のデバイス向け制作を一度にデザイン
Webサイト、リッチメディアアプリケーション、モバイルデバイス用のデザインをすばやく最適化できます。Adobe Flashファミリー製品のアプリケーションに書き出して、インタラクティブ機能を追加することが可能。他のグラフィックスプログラムによるアセットを Fireworksで編集して広範囲のターゲットに展開できます。
よりすばやくカラーにアクセス
べた塗り、グラデーション、パターンのカラーエフェクトをすばやく切り替えながら作業に集中できます。不透明度コントロールを塗りまたは線ダイアログボックスに個別に適用できるため、より詳細な制御と正確さが確保されます。カラースウォッチの改善により、カラーをすばやく変更できます。

Adobe Dreamweaver CS6 Windows版

web業界では圧倒的なシェアを誇るWebオーサリングソフトです。
手打ちにこだわるコーダーさんでもすんなり移行できる程汎用性が高いです。
HTML5、CSS3、jQuery Mobileなど、WEBの最新トレンドを集めたホームページの作成を、パソコンは勿論、スマートフォンやタブレットなど多様なデバイスに向けた構築もサポートしてくれます。
コーディングしたホームページデータは、直接サーバー上にアップロードすることができます。
//♪注目機能////////////////
応答性の良い可変グリッドレイアウト
応答性の良いCSS3ベースの可変グリッドレイアウトシステムを使用すると、クロスプラットフォームおよびクロスブラウザーに対応したWebデザインを作成できます。様々なデバイスおよびコンピューター向けに業界標準のきれいなコードを使用しながら、より迅速かつ効率的にプロジェクトを開発できます。コードに埋もれることなく、複雑なWebデザインおよびページレイアウトを視覚的に構成できます。
jQueryモバイルのサポート強化
アップデートされたjQueryモバイルフレームワークのサポートを使用して、iOSおよびAndroidプラットフォーム用のネイティブモバイルアプリケーションを構築できます。モバイル開発ワークフローを合理化しながら、モバイルユーザーを対象としたアプリケーションを構築できます。
アップデートされたマルチスクリーンプレビューパネル
アップデートされたマルチスクリーンプレビューパネルにより、スマートフォンやタブレット、デスクトップ向けに構築したプロジェクトの表示を確認できます。この強化されたパネルでは、HTML5コンテンツのレンダリングを確認できるようになりました。

Adobe Photoshop CS6 Windows版

イラストを描いたり、写真の加工をする画像処理ソフトです。
//♪注目機能////////////////
コンテンツに応じたパッチ
パッチツールに「コンテンツに応じる」オプションが追加され、選択した範囲を移動先の背景で違和感なく、高い精度で塗りつぶすことができます。
切り抜きツールの強化
「切り抜きツール」が大幅に改良され、切り抜き範囲の指定と角度補正をカンバス上で直感的かつインタラクティブに行えます。切り抜きを実行した後も、元画像はレイヤーに保持されるので、いつでも再編集が可能です。
広角補正フィルター
パノラマ写真、あるいは魚眼レンズや広角レンズで撮影した写真の湾曲した画像のゆがみを、カンバス上で数回クリックでするだけで、垂直／水平方向をまっすぐに補正できます。
自動補正の機能向上
手作業でレタッチされた何千もの画像から人間の技を採り入れ、トーンカーブ、レベル、明るさ／コントラストの自動補正機能がパワーアップ。微調整を加えれば、短時間で画像を編集できます。
アドビのモバイルアプリとの互換性
Photoshop CS6に留まらず、Adobe Touch AppsやPhotoshopコンパニオンアプリ（別売）でも創造性を発揮できます。直感的なタッチスクリーン機能を利用して、簡単かつ正確にコントロールしながら様々な制作作業を行えます。

画像の横幅縦幅を変えたり、フィルタを掛けたりと簡単な作業で、Photoshopと同じようなUI・機能を持った無料のWEBサービスがあります。資金のない人は参考までに下記をチェック。
Photo editor

Adobe Illustrator CS6 Windows版

イラスト、図形、ロゴ、印刷物（チラシや小冊子）などを作成するグラフィックソフトです。
Illustratorの一番の特徴はベジェ曲線で、これを操作する事で簡単かつ強力な描画を作れます。
私個人としては、ベジェ曲線は苦手です…線を描いていくというより、面を重ねていくという手法だし、アンカーポイントの操作が細々していて神経が破裂しそうで（笑）
腐らずに精進致します。
//♪注目機能////////////////
新しい画像トレース
新しいトレーシングエンジンにより、ラスター画像を編集可能なベクトル画像に変換できます。複雑な操作なしで、美しいライン、正確な配置、確かな仕上がりが得られます。
線にグラデーションを適用
配置や不透明度をきめ細かく調整しながら、線の長さ方向、幅方向、あるいは線の内側にグラデーションを適用できます。
進化したぼかし（ガウス）
ドロップシャドウや光彩などのぼかし（ガウス）効果を、以前とは比べ物にならないほどすばやく適用できます。 ダイアログボックス内ではなく、アートボード上で直接プレビューすることで、精度が上がります。
インターフェイスがより効率的かつ柔軟に
インターフェイスが効率化され、レイヤー名のインライン編集や正確なカラーサンプリングなどの日常作業をより少ない手順で行えるようになりました。UIの明るさを他のアドビ製品に合わせてスムーズに調整することも可能です。

Adobe Flash Professional CS6 Windows版

アニメーション制作ソフト。再生させるためには大抵Flash Playerが必要になります。
基本的にはiPhoneやiPad等では閲覧不可です。
ホームページを構築するオーサリングソフトとしても機能し、インタラクティブ性の高いサイトにすることも可能となる。検索エンジン対策には、まだ向いていないと思うので、知名度の無い企業などでは、全面FLASHによるホームページ作成は控えた方が良いでしょう。物凄く人を惹くアイデアの詰まったホームページなら別でしょうが。
HTML5の対等により、FLASHの出番の減少が浮き彫りになってくると予想しております。
アニメーションを作るのはそう時間はかからないと思いますが、インタラクティブなホームページを作るには、アクションスクリプトの習得に時間と労力がかかると思います。未来を信じることと根気と。
//♪注目機能////////////////
新しいHTML5サポート
（個別に入手可能な）新しい拡張を活用して、Flash Professionalの中心的なアニメーションおよび描画機能を基礎としたインタラクティブなHTML5コンテンツを作成できます。JavaScriptに書き出すことでオープンソースのCreateJSフレームワークにも対応できます。
あらかじめパッケージ化されたAdobe AIRアプリケーションの作成
あらかじめパッケージ化されたAdobe AIRキャプティブランタイムとともにアプリケーションを作成して配布できます。アプリケーションのテストを効率化して、エンドユーザーが追加ダウンロードなしでコンテンツを実行できるようにします。
Stage 3Dのターゲティング
ハードウェアアクセラレーションが有効である2Dコンテンツに対し、直接モードを使用してオープンソースのStarling Frameworkを活用することによって、レンダリングパフォーマンスを向上させることができます。

Adobe Creative Suite 6 Design & Web Premium Windows版

上記のソフトウェアがセットになった製品です。上記で紹介したソフト以外にも色々備わっております。
単品ではなくこちらを導入した方が総合的にお得かつ、一つのファイルを各ソフトで扱え連携が取れるので、作業効率も上がるし、機能のいい所を集結したアイデアも湧き出てくると思います。

パッケージ版もですがAdobe Creative Cloudも要チェック！
http://www.adobe.com/jp/products/creativecloud.html

紙とペン

まぁ何より必要なものは、頭の中に思い描いているアイデアを吐き出すツール、紙とペンでしょうか！？