様々なデザインソフトがあり、これからWebデザインを学ぶのであれば、このような疑問があるでしょう。いえ、主流は決まっています。それをマスターすれば、プロのWebデザイナーとしても通用するというソフトがあるんです。このページでは、実際にWebデザイナーとして制作会社で働く私が、Webデザインに必要な主流ソフトを紹介します。3位:レバテックキャリアWebサイトを公開するまでの流れただ羅列しただけでは、分かりにくいので、実際にWebサイトを制作して、公開するまでの流れに沿ってみていきましょう。一般的には、以下のような流れになります。(1)企画・サイト設計→(2)コンテンツ制作・原稿確認→(3)Webデザイン→(4)コーディング(HTML、CSS)→(5)ブラウザで確認→(6)サーバーにアップロード(公開)Webデザイナーといえど、企画やサイト設計から関わることもありますし、HTMLコーディングまでの仕事をすることもあります。会社の体制によりますが、プロジェクトを進めるにおいて、全体像を知っておいた方がよいデザインにつながります。いいので、おさえておきましょう。それぞれの工程で必要となるソフトが異なりますが、ここさえおさえておけば、プロの現場でも通用します。次項からは、具体的にソフトを紹介していきます。(1&2)企画・サイト設計〜コンテンツ制作・原稿確認デザインに入るまでの工程です。ここでは、Office系のソフトを使います。MicrosoftOfficeビジネスにおいては定番ですね。これはどんな職種でも当たり前のように使います。最低でもExcel、Word、PowerPointを開ける環境は整えておきましょう。クライアントからくる原稿は、ほとんどOffice系ソフトで作られているため、やりとりがスムーズになります。制作においても企画書や見積書、スケジュール表、サイトマップ、コピーライティングといった場面でよく使います。これらをWebデザイナーが作成することもよくありますよ。バージョンやファイル形式の違いでファイルを開けないときがあり、緊急を要するときはすごく困ります。OpenOfficeやGoogleドキュメントが便利。無料で利用できますし、テキストだけでも抽出できると思います。OpenOfficeでも事足ります。いえ、業界標準ですので、買うにこしたことはないです。PDFソフトやOSの差異によりどうしてもファイルが開けないことがあります。他にも機密書類にパスワードをかけたり、Webサイトからダウンロードする文書をPDFにしたりと、活躍の場は多いです。そこで必要になるソフトは2つです。DCは、PDFを開くためのソフト。無料でダウンロードできます。PDFの保護やファイルの統合、リンクの埋め込みなど高精度の編集ができます。カタログやチラシといった印刷物をWeb用の原稿として使うことも多くあり、重宝します。2015-04-17Amazonで探す楽天市場で探す(3)WebデザインWebデザイナーの肝となるデザインを作成するソフトを紹介します。レイアウトやイラスト作成、写真補整など用途に応じて使い分けましょう。フォトショップ)です。多くのWebデザイナーがメインで使用しており、私もその一人。使わない日はありません。本来、Photoshopは、画像編集ソフトなのですが、Webデザインと非常に相性がいいのです。Webデザインは、最終的に画像として書き出され、HTMLにでコーディングされます。そのため、画像の取扱いに優れているPhotoshopでの作業は効率がいいのです。ブラシやグラデーションを使ってクリエイティブなこともできますし、スライスや書き出しといった作業もしやすいです。写真の補整もできるため、デザインが効率よくできます。2014-08-04Amazonで探すしかし、Photoshopは高価です。Elements」がおすすめ。Elementsは、Photoshopの機能の一部が使えるライトモデルです。特殊なことをやらないのであれば、十分に使えるソフトです。それでいて価格は、1万円前後と安いです。2015-10-02Amazonで探す楽天市場で探すフリーソフトであればGIMPも有名。無料で使えるわりに高機能なため、Photoshopの代替ソフトとしてよく名前が上がります。個人利用であれば問題ないでしょう。FireworksというソフトもかつてはPhotoshopと肩を並べるほどの人気でした。今でも使用しているWebデザイナーは多いかもしれません。残念ながら2013年に開発が終了してしまいました。そのため、これからWebデザイナーを目指す人はPhotoshopを勉強しておくのがよいでしょう。イラストレーター)です。ベクターデータとは拡大・縮小しても劣化しないデータのこと。イラストやロゴのようなオブジェクトの制作に適しています。印刷物(名刺やチラシ、ポスター)も得意でDTPデザインでは最もスタンダードなソフトです。Webデザインにおいては、ベースはPhotoshopで、イラストのような部分的なオブジェクトはIllustratorで作るといった使い分けをします。両者は相性がよく、コピー&ペーストで移動できるのです。DTP出身のデザイナーは、IllustratorでWebデザインする人もいますが、データの変換やスライス、画像の書き出しのことを考えるとPhotoshopの方がおすすめです。別のデザイン会社で制作したデザインをHTMLコーディングすることもありますが、Illustratorのデータだと面倒なのですごく嫌です笑。先程書いたような使い分けをするといいですよ。覚えておいて絶対に損はありません。InDesign」です。Flashの方は、その名の通りFlashを制作できるソフト。一時期、流行しましたが、スマホで見られないという理由で、徐々に姿を消しています。代わりにJavaScriptやjQueryといったプログラミング言語が使われており、スキルとして身につけたいならこちらのほうが、役立つと思います。いえ完全に消えたわけではないので、過去データの修正やFlashが適している制作物で、使う可能性もあります。InDesignページデザインとレイアウトに適しているソフト。パンフレットやカタログのような冊子デザインでよく使われます。Webデザインでは使いませんが、ごくたまに、原稿として支給されたデータを開くことがあります。Dreamweaverがセットになっていてお得です。Webデザイナーを目指すなら持っていても損はありません。スキルを身につけておけば、どんな制作会社に入っても必ず役に立つでしょう。2013-10-01Amazonで探す(4)コーディング(HTML、CSS)Webデザイナーでもコーディングをすることがあります。明確な役割分担がされていたり、カリスマデザイナーでなければ、兼任することのほうが多いでしょう。ドリームウィーバー)です。コードヒントやあらゆるツールのおかげで、コーディングが素早く、楽にできます。私も長年メインで使用しています。WordPressのPHPファイルやJavaScriptといったプログラミング言語でも使えます。無理に使わなくてもコーディングは、メモ帳やテキストエディターでも可能です。Eve(無料)やTeraPad(無料)、秀丸(有料)、Macでは、mi(無料)やCotEditor(無料)が有名です。コーダーやプログラマーは各々好きなものを使っていますね。Dreamweaverは使う機会があれば、触っておく程度で大丈夫です。それよりもHTMLやCSSで「コードを書く」ということを勉強しておきましょう。(5)ブラウザで確認コーディングが終わったWebデザインは必ずブラウザで確認します。ブラウザとは、Webサイトのコードを解析して表示してくれるソフトのこと。ブラウザによって、表示方法が微妙に異なるため、表示崩れやプログラムが動作しないこともあるのです。Explorer・Safariの4つ。すべて無料ですのでインストールしておきましょう。ExplorerはWindowsのみ)また、スマホやタブレット用のWebデザインであれば、必ず実機のブラウザで確認するようにしましょう。文字の詰め幅や大きさなどの見た目が、Photoshopでデザインしたものと異なって見えることがありますよ。(6)サーバーにアップロード(公開)コーディングが完了したらいよいよ公開です。公開するには、FTPソフトを使って、データをサーバーにアップロードします。FTPソフト有名なソフトは、以下の4つです。・FileZilla(Windows、Mac)・WinSCP・Cyberduck(Windows、Mac)・Fetch(Mac)特殊な使い方を想定していなければ、どれも性能はほとんど同じです。画面の見やすさや操作性で選んでみましょう。ここにあげているものでは、Fetchのみ試用期間を過ぎれば有料になります。どれかと言われればFileZillaが最も多く使われている印象があります。まとめここで紹介したWebデザインに必要なソフトと優先度をまとめます。Explorer、Safari(必須)・FileZilla(必須)これだけあればプロの仕事ができます。Adobe製品は、高価ですが、今のところ業界標準ですね。月額払いになったので、以前よりは買いやすくなってますし、学生であればアカデミック版が安く買えます。体験版や代替えソフトで試してみてもよいですね。ソフトだけでなくパソコンのOSについての疑問もあるでしょう。それに関しては以下ページを参考にしてみてください。関連記事Webデザイナーを目指すならMacがいいの?Windowsがいいの?一歩踏み込んで、ソフトの使い方を勉強したい人は、以下の記事も参考にしてください。関連記事Webデザイナーになるためのスキルが学べるオンラインスクール5選Webデザイナーに強いおすすめの転職サイトランキングWebデザイナーに転職するには、転職サイトや、キャリアコンサルタントがサポートしてくれる転職エージントに登録するのが一般的です。しましながら、転職エージェントだけでも1万社以上もあるといわれており、何を基準に選べばいいか分からないですよね。そこで、求人数、実績、サービス内容、評判などを総合的に判断して、Webデザイナーに強いおすすめの転職サイトをランキング形式で紹介します。未経験でWebデザイナーを目指すなら「現役が教えます!未経験でもWebデザイナーになる方法」も合わせて参考にしてみてください。1位:ワークポートワークポートは、IT・インターネット業界専門の人材紹介会社。12年間で1万人もの転職支援実績があります。業界に詳しい専門のコンサルタントは、その知識に加えスピード感があると評判。無料セミナーや転職に役立つ管理ツールも充実しています。IT業界を目指すなら、登録必須といえる転職エージェントです。Webデザイナーにおいては、クリエイター専用のページがあり、デザイナーからディレクターまで、細かく分類されていて、求人を探しやすいです。詳細ページ↓公式サイトはこちら↓ワークポート2位:リクルートエージェント日本最大の転職エージェント。1977年の創業以来、30万人以上の転職成功実績、10万件越えの求人数があり、質、量ともに圧倒的な強さです。リクルートエージェントでは、営業職についでWeb系の求人が多いです。そのバックボーンを活かして、企業のWeb担当者から制作会社まで幅広い職種を取り扱っているのが強み。詳細ページ↓公式サイトはこちら↓リクルートエージェント3位:レバテックキャリアIT・Web業界に特化した転職専門サービス。質の高いキャリアコンサルタントと転職先で活躍するエンジニアのネットワークが強み。顧客の目的を叶えるための徹底したサービスで、業界内でも評判がよく、快進撃を続けています。専門だからこそ、業界の傾向と実績を考慮して、Webデザイナーとしてのあなたのスキルを引き出してくれるでしょう。PhotoshopやIllustratorといったソフト別、プログラム言語別でも求人が分類されています。詳細ページ↓公式サイトはこちら↓レバテックキャリアさらに詳しくは「Webデザイナーに強い転職エージェントランキング」もご覧ください。Webデザイナーだけではなく、Web/IT業界全般の職種に関わる求人なら「IT・Web業界に強い転職エージェントランキング」も参考にしていただけます。転職活動TwitterLINEはてブFacebook当サイト厳選!転職エージェントの比較|転職を成功させるパートナーはここだ!女性が転職を成功させるためのノウハウを徹底紹介!口コミ募集中!当サイトでは、ユーザーの利便性向上のため、実際に転職エージェントや転職サイトを利用した方の口コミを募集しています。投稿していただいた口コミは、内容を確認のうえ、当サイトに掲載させたいただきます。...【2017年】大阪の転職フェアの開催予定まとめ大阪で開催される転職フェアの情報をまとめました。...【2017年】福岡の転職フェアの開催予定まとめ福岡で開催される転職フェアの情報をまとめました。...IT・Web業界への転職に最低限必要な武器とは?あなたは、これまでにどのような実績を作ってきたでしょうか。「Webデザイナーになりたいけど未経験。