WEBデザイン WEB制作

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

投稿日:2014年12月16日 更新日:

皆様こんばんは。
今春に新卒で入社しました、ひよっこWEB制作者のMです。
お腹と背中に貼るカイロを装備し、なんとか寒さをしのいでおります。
先日誕生日を迎え、ついにハタチと言えなくなってしまいました。
これからは自称ハタチで行きたいと思っております。
どうぞ宜しくお願い致します。

 

adobe?フォトショ??イラレ???

今更だけど、adobe製品ってなにができるソフトなの?
フォトショとかイラレとかよく聞くけど・・・??カ、カタカナムズカシイ
そもそも、なんて読むんだ?『あどべ??』 (これは3年前の私ですね)

 

adobeとは

まず読み方ですが、『あどべ』ではありません。『あどび』と読みます。
adobeとは、コンピューター・ソフトウェア会社の社名です。
正式社名はアドビシステムズ(Adobe Systems Incorporated)。
ソフトウェアのみを開発・販売する企業としては、世界最大です。

そんな、めっちゃすごい会社『アドビシステムズ』の提供するソフトが、
フォトショやイラレといった、めっちゃすごいソフト『adobe製品』なわけです。
WEB制作に関わりの無い方にも馴染み深いのは、PDFデータ閲覧・印刷ソフト”Adobe Reader”などでしょうか。
(お手持ちのパソコンに、いるよーって方いらっしゃるハズです!)

アドビシステムズは一つの分野に特化しておらず、
WEBにおける様々な分野で我々技術者を強力にサポートしてくれます。
adobe製品は、WEB制作においてなくてはならないものたちです。
私はこの子たちのおかげで、今日もお仕事ができております。

 

とりあえず覚えておきたい8つのソフト

私が使っている主なソフトは、Photoshop、Illustrator、Fireworks、Dreamweaver。
というより恥ずかしながらこの4つ以外はほとんど触ったことがありません。
今回このブログを書くにあたってadobe製品の一覧を見ましたが、名前すら知らなかったソフトもありました。
・・・・・・ということで、自分の勉強も兼ねて、WEB制作において欠かせないadobe製品のそれぞれの特徴をお話しいたします。

全部紹介すると日が暮れそう&知恵熱が出そうなので、
とりあえず覚えておきたい主要8ソフトを並べてみました。

ご紹介する8つのadobe製品は大きく分けると、
①WEB、②デザイン、③写真・映像の3つに分類することが出来ます。

①WEB(主にWEBサイトの素材制作・サイト設計)
Fireworks  Dreamweaver  Flash

②デザイン(主に出版物のデザイン(DTP)・レイアウト・イラスト制作)
Illustrator  inDesign

③写真・映像(主に写真の加工・映像やビデオの制作・編集)
Photoshop  Photoshop Lightroom  After Effects

今日は①WEB(主にWEBサイトの素材制作・サイト設計)に属する
Fireworks、Dreamweaver、Flashについてご説明いたします。

 

Fireworks

fireworks_2x ウェブデザインに特化したデザインソフト
(1998年7月にver.1.0誕生、現在CS6)

Adobe Fireworks では、デザインツールや制作管理ツールを使用して、品質と画像サイズのバランスがとれた Web グラフィックスを作成することができます。
Fireworks を使えば、Web や様々な種類のデバイス(スマートフォンからキオスク端末、組み込みディスプレイまで)に対して高度に最適化された表現力豊かなグラフィックスを作成できます。ベクトルモードとビットマップモードの両方で編集可能な Web サイト、ユーザーインターフェイス、リッチプロトタイプを作成できます。

Fireworksの最大の特徴は、ウェブデザインに特化したデザインソフトだということ。
後述するIllustrator(ロゴやイラストの制作ソフト)とPhotoshop(高度な写真加工・編集ソフト)を合わせたようなソフトと表現されることが多いのですが、その表現ゆえに『じゃあいらなくない?』と思われ敬遠されがちなソフトでもあります。個人的にはより直観的で、より使い易いという印象です。例えばスライスのしやすさなど!ただ、体力があまりないようで『メモリ不足』になりがちなのが弱点です。
そんなFireworks、2013年5月にCS6以降のバージョン開発がされないことが発表されています。オーノー・・・。

 

こちらより製品の詳細を知る・体験版のダウンロードができます。

 

Dreamweaver

dreamweaver_2x デザインを形にする、デファクトスタンダードツール
(1997年12月にver.1.0誕生、現在CS6)

Adobe Dreamweaver では、オブジェクトスタイルなどのデザインツールや柔軟な制作管理ツールを使用して、クロスメディアにも対応した高品質なページをすばやく作成、出力することができます。
また、CSS インスペクトツールによるデザイン、コンテンツ管理システムによる開発、Adobe CS Live の新しいオンラインサービスである Adobe BrowserLab との連携による高速で正確なブラウザー互換性テストが可能です。

専門用語が多いので簡単に説明すると、DreamweaverはWEBサイトを制作するためのWEBページ構築・編集ソフトです。デザインしたものをWEBサイトで使えるように”実装”していくために必須なソフト。自由度の高いデザインができることが大きなメリットですが、逆を言えばすべで一から自分で作成しなければなりませんので、HTML・CSS初心者の方には難しいソフトかもしれません。しかしながら使い勝手はバツグンであり、業界では圧倒的なシェアを誇るデファクトスタンダードツールとして使われています。

 

こちらより製品の詳細を知る・体験版のダウンロードができます。

 

Flash

Adobe-Flash-Logo 魅力あふれる豊かなWeb体験を提供
(1996年ver.1.0誕生、現在CC13.0)

Adobe Flash Professional は、Web サイトや携帯電話など、デバイスのプラットフォーム向け Flash コンテンツを制作するためのオーサリング環境です。
Flash には、簡単かつ効率的なアニメーション作成を可能にするツールが多数搭載されています。また、最新のドローイング、アニメーション、インタラクティブデザインツールにより、さらに充実したプロジェクト製作が可能になりました。共通のツールやインターフェイスが備わっているため、他の Adobe ソフトウェアを用いて連携した作業が行えます。

こちらは動画やゲーム、アニメーションを制作するためのソフト。一昔前はWEBサイトのトレンドとして、非常に多くのサイトでFlashが使われていました。しかし、インターネットの携帯・スマホ人口が増えたいま、ガラケーやiOSから再生することができないFlashは存在意義が危ういのではとされています。HTML5などの台頭によりFlashへの風当たりの強さが増している昨今です。SEOに弱いのも致命傷ですね。

 

こちらより製品の詳細を知る・体験版のダウンロードができます。

 

 

ということで、adobe製品の中身を解剖!
~とりあえず覚えておきたい8ソフトの特徴その①~でした。

 

マーカーネットでは、このようなソフトを駆使して
日々WEB制作に励んでおります。
家族より、adobe製品といる時間の方が長いです。もはや家族です。

その②では、マーカーネットの専門分野ではないですが
②デザイン(主に出版物のデザイン(DTP)・レイアウト・イラスト制作)
に属するIllustrator、inDesignについてご説明いたします。

 

マーカーネットにホームページ制作・WEB制作の依頼をお願いしたい方は是非こちらからどうぞ!

 

———————————————————————————————-
adobeの基礎知識
①WEB(主にWEBサイトの素材制作・サイト設計)に属する
Fireworks、Dreamweaver、Flashについて
名称未設定-1
記事はこちら↓
【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~
———————————————————————————————-
②デザイン(主に出版物のデザイン(DTP)・レイアウト・イラスト制作)に属する
Illustrator、inDesignについて
2
記事はこちら↓
【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その2~

———————————————————————————————-
③写真・映像(主に写真の加工・映像やビデオの制作・編集)に属する
Photoshop、Lightroom、After Effectsについて
【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

記事はこちら↓
【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その3~
———————————————————————————————-

-WEBデザイン, WEB制作

関連記事

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

なるべく早く作ってほしい!! 今週末までに提出お願い!! ・・・・・・ヤバイ、時間がない。 こんな急ぎの依頼が来たときに、デザイナーさんの手助けをしてくれる素材サイト。 今回は、特定のジャンルに特化し …

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

こんにちは、デザイナーのAです。 今回は人物や動物が映った写真の背景だけを一瞬で切り抜いてくれる無料ツール「remove.bg」をご紹介します。 ※6月のアップデートデートでかなり対象の幅が広がったよ …

【Illustrator小技】PDFファイルを代替フォントでなくアウトライン化して開ける便利なワザ

【Illustrator小技】PDFファイルを代替フォントでなくアウトライン化して開ける便利なワザ

アウトライン化されていないPDFをIllustratorで開こうとする時、 Illustrator「このPDF、該当するフォントがないから代替しちゃいますね~」 デザイナー「うわぁぁフォント変わっちゃ …

ホームページ制作の流れを徹底解説!制作の注意点や外注する際のポイントもご紹介

ホームページ制作の流れを徹底解説!制作の注意点や外注する際のポイントもご紹介

企業のホームページ制作は、計画から公開まで一連の工程を適切に管理することが成功の鍵となります。本記事では、まず目的とKPIの設定から始まり、競合分析や市場調査、ターゲット定義といった事前準備の重要性を …

【Photoshopのすごいテキストエフェクト】クールなフォントでデザイン力アップ!

【Photoshopのすごいテキストエフェクト】クールなフォントでデザイン力アップ!

デザインをしている時に、最も人の目に触れるメインの処理について悩む事はありませんか? そんな時、フォントをPHOTOSHOPで少し凝ったエフェクトを使ってデザインすることで、デザインの質が2倍にも3倍 …