MENU
グラフィック・Webデザインを学んでいる学生に向けた、基礎から就活に関するお役立ちサイト
  1. ホーム
  2. Web制作支援
  3. MacでWEB制作する時のお助けアプリ8

MacでWEB制作する時のお助けアプリ8

Web制作支援

Macを使用してWEBサイトのデザインをされているデザイナーさんって日本のWEBデザイナーの何割を占めているんだろう。。実は作者もその中の1人、MacオンリーでWEBサイトのデザインをするWEBデザイナーです。
もちろんブラウザチェックでWINDOWSの確認はしますが、WINDOWSですらMacの中のBOOTCAMPでやっているので本当にMac人間な作者です。

さて、今回はMacのみを使って、しかもADOBE系のソフト【Illustrator・Photoshop・Dreamweaver】の代行をしてくれそうな便利アプリをいくつか紹介したいと思います。

GIMPGIMPキャプチャ画面

こちらは言わずとしれた有名なPhotoshopの代行をしてくれるソフトですね。レイヤー構造・フィルタ・テキストなどなどPhotoshopより機能は劣るモノのサイト制作では全く問題のない画像処理・編集ができるソフトです。
≫ http://www.gimp.org/

 

 

 

InkScapeinkscapeキャプチャ画面

こちらは知名度としてはGIMPよりは知られていない気がします、でもすごいソフトなんです。あのIllustratorのベクターデータの編集ができてしまうんです！これは馬鹿にできないですね、作者も色々と探した事がありますが、ベクターデータを編集できて使いやすいのはInkScape以外は見あたりませんでした。
≫ http://wiki.inkscape.org/

 

 

 

KompoZerkompozerキャプチャ画面

こちらのソフトは意外と耳にする人も多いかもしれません。Adobe Dreamweaverの簡易代行ができてしまうソフトです。ただのテキストエディターと違うところは、コードの色分けはもちろんのこと、CSSをフルサポートしてくれているので、プロパティ・セレクタのど忘れもカバーしてくれそうです、タブの切り替え機能・ライブプレビューなど様々な機能を搭載し、なんとW3CのHTMLマークアップチェックまでできるという優れものです！
≫ http://kompozer.net/

 

 

Simple CSSSimple CSS 2.1キャプチャ画面

上記のソフトよりもっと簡易的にスタイルシートのど忘れをカバーしてくれそうなのが、このソフト。0の状態からCSSの構築をサポートして、ちゃんとエクスポートできます。インターフェイス的にもかなりスタイリッシュな作りとなっているので、操作もしやすいです。
≫ ≫http://www.apple.com/downloads…

 

 

 

Firebugfirebugキャプチャ画面

これはソフトではなく、Mac版FIREFOXにインストールするアドオンなのですが、結構有名なアドオンですよね。作者はWEBデベロッパーツールを使用していますが、こちらのアドオンもかなり高機能ですね！HTML・CSSのプレビューができ、リアルタイム編集も可能。Javascriptのライブコード閲覧可能。このアドオン一つでWEB制作の細々した作業が一気に片づきそうですね。WORDPRESSのサイトテーマを変更したい場合なども、リアルタイムでどこのCSSなのかを探ってくれたりもするので、作業効率がかなりアップします。

 

 

Adobe BrowserLabAdobe_browserlabキャプチャ画面

こちらは、Macだけではなくブラウザからアクセスして使用できるADOBEのWEBサービスなのですが。驚きました。自分のサイトもしくはクライアントのサイトがWINDOWS・Macの各ブラウザのプレビュー状況を表示してくれる機能を持っています。静止画なのでクリックなどはできませんが、簡易的に今IE6でどういう風に見えているのかを知りたいときなどは、かなり使えるアイテムですね！Adobeのユーザー登録は必要ですが、無料ですぐに登録できます、登録後はすぐにBrowserLabを使用できるようになります。
また、閲覧したいブラウザをセットにしておけば、URLを入力するだけで一括でプレビュー作業を始めてくれます。
緊急の時に重宝しそうですね！
Adobeユーザー登録≫ ≫https://www.adobe.com/cfusion/…
BrowserLab≫ https://browserlab.adobe.com/

 

 

 

Cyberduckcyberduckキャプチャ画面

こちらのソフトはもう定番中の定番かもしれませんね、MacでFTP接続したい場合にはこのソフト。ブックマーク機能や簡易接続など、インターフェイスも使いやすく、作者も長年愛用させていただいております。
FTP接続・SFTP接続など接続形式も色々と用意されていて、もちろんファイルのパーミッション等も変えられます。
≫ http://cyberduck.ch/

 

 

 

Colorscolorsキャプチャ画面

このソフトは本当にミニアプリケーションですが、常備しておくといざというときには便利かもしれません。スタイルシートやHTMLの構築中に#7af89bなどのように16進法カラー設定で『あの色の数値いくつだっけ…』っていうときに使えそうです。カラーパレットから色を選択すると16進法表記で表示してくれます。
一見地味なんですけどね、、ちょっとしたときにどうぞ。
≫ http://mattpatenaude.com/

 

 

 

如何でしょうか、オープンソースとは言えこんなにまで開発が進んでいるモノなんですね！洗練されたインターフェイスや機能に作者も驚きました。画像処理・ベクター編集・HTML,CSS編集・アップロード・ブラウザチェックこの5点が上記のアプリケーションで代行でき、WEB制作の一通りの作業がカバーできるというのは非常にうれしいことですね！
是非ご参考ください。

※記載されている画像は、作者の作成された画像を使用させていただいている場合がございます。
※基本的にフリー素材となっておりますが、作者様の著作権を保護するために、ダウンロードする際は作者様の利用規約などもご一読ください。
Web制作支援
mac WEB知識 アプリケーション
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

デザイン系のスキルを身につけるサポートをしてくれるオススメサービス

Adobeをお得に自分のペースで学びたい方にオススメ

Adobe Creative Cloudをお得に始めたい方へ。
アドバンスクールオンラインは、Adobe公認のプラチナスクールパートナー。通信講座を受講することで誰でも学生扱いとなり、社会人の方でも学割価格【68,800円（税込）】でフル機能のCreative Cloudを利用できます。IllustratorやPhotoshop、Premiere Proなど人気ソフト11講座がセットになり、質問し放題で1年間じっくり学習可能。学習ノルマはなく、好きなタイミングで受講できるので、デザイン・動画制作・イラスト・ゲーム開発など幅広いクリエイティブに挑戦できます。個人での商用利用も可能なライセンス。今こそ学割価格でAdobeを活用し、スキルアップを実現しませんか？

未経験からWebデザインを学んで手に職をつけたい方にオススメ

『Fullme』は、100万部以上のデザイン本を手掛けたingectar-eが講師を務めるオンラインデザインスクールです。「けっきょく、よはく」など人気書籍のノウハウをもとに、分かりやすく実践的なカリキュラムを提供。バナーやLP制作から、UI/UXやコーポレートサイト制作まで幅広く学べ、プロによる添削で実務力を磨けます。レッスンはビデオオンデマンド形式なので、仕事や子育てと両立しながら自分のペースで受講可能。デザイン初心者からキャリアアップを目指す方まで、スキルと表現力を同時に伸ばし、転職・副業・フリーランスへの一歩を後押しします。

未経験からWebマーケ転職を実現できる!デザインとマーケで手に職を!!

業界TOP1％のWeb広告代理店が運営する、未経験からでも安心して学べるWebマーケティングスクールです。講師はすべて現役のWebマーケターで、最新のノウハウをもとに完全個別指導を実施。生徒一人ひとりの目的やレベルに合わせて最適なカリキュラムを提案します。単なる知識の習得にとどまらず、実際のマーケティング業務を体験できる「実践講座」も用意しており、現場で即戦力として活躍できるスキルが身につきます。500社以上のマーケティング支援実績を通じて蓄積したノウハウを凝縮した独自の学習プログラムで、転職・副業・フリーランスなど多様なキャリアをサポート。さらに、転職支援コースでは、紹介企業への入社で受講料が「実質0円」になるキャンペーンも実施中です。未経験から新しいキャリアを築きたい方、自分の市場価値を高めたい方に最適なスクールです。

関連記事

目次