マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

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ソフトの特徴その3~
———————————————————————————————-

-WEBデザイン, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

<WordPress>カスタムフィールドテンプレートのテキストエディター(TinyMCE Advanced)で プラグインの設定通り反映されないとき

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

前回構造疑似クラスについて便利な使い方をご紹介しましたが、 (知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】) 今回はCSS3の属性セレクタをご紹介します。 E[foo] fo …

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 今回は便利なjQueryプラグイン「imgLiqu …

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第二弾として「素敵な明朝英字フォント …

【Vol.5】優れたキャッチコピーを見て、閃き力を上げよう!【映画・アニメ編】

冬っ子のわたくし、この暑さもう限界です 皆様こんにちは。いかがお過ごしでしょうか? 真冬生まれのため連日の暑さに耐えきれず瀕死状態のAD&デザイナーMです。   明日から気温が落ち着くようで …

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

デザインを格好よくするためにシャドウを付けたりしますよね。 しかし、サイズが異なるたびに画像を背景に指定したりしなければならないのは大変です。 しかも、シャドウの幅の分だけはみ出ているということもあり …