Environmentimworksの対応ソフトと制作環境

imworksの制作環境

imworksの伊沢です。この度はimworksのホームページをご覧いただきありがとうございます。

このページをご覧頂いているという事は、webデザイナー・コーダーの方、グラフィックデザイナーの方、そして、ホームページの制作環境ってどんなだろう?と気になっている方。様々かと思います。

クライアント様との会話で、やっぱり「Macなんですか?」などと聞かれる事も多々ありますが、プロがどういった環境で制作をしているのかは興味深い話題なのでしょう。例外ではなく私も他の制作会社様や、第一線で活躍されているデザイナーの方々がどのような環境で仕事をされているのかすご~く興味があります♪

ちなみに、私のメインは「Windows」です。

主なパソコンと周辺機器

メインのパソコン

私の作業用メインPCは自作のWindows機です。自作と言っても自分で組み立てた訳ではないのですがね…。右の写真の邪魔なくらい大きなPCケースに、i7、nvidia quadro K4200、HHDはM.2 SSDをメインに、intel等のSSDが5枚程入った、そこそこのハイスペックPC。

DELL製の27インチモニター2枚に24インチワイドモニターが1枚のトリプルモニター。iMacもありますが、どうもすぐ壊れるのでホコリかぶった状態で放置されています (> <;

周辺機器

キーボードはmac用のテンキー付きキーボード。

数々のキーボードを壊してきましたが、mac用のキーボードのタッチが好きで長いこと使ってます。

マウスはlogicoolのG700。マウスにファンクションキーやマクロが割り当てられるので、キーボードで右手が必要なショートカットも、マウスのボタン一つで完了!キーボードがmac用なので、「winボタン」を割り当てたり、「Num Enter」を割り当てたりして使ってます。

excelなんかで上下左右の移動もマウスから操作できますよ!

後は、wacomのペンタブレット。これは最近surface pro 4を購入してから出番が減ってます。

その他、バックアップを兼ねたファイルサーバー2機が足元でゴーゴー鳴ってます。

使用するソフト

Photoshop(グラフィックソフト)

webデザインも、紙のデザインでも絶対に欠かせないグラフィックソフトです。最近は、簡単な動画編集もPhotoshopを使ってます。Photoshopはバージョン5.5から使ってますが、ここ最近新しいバージョンのCCが登場し、よりwebデザインに適したツールとなり、無料・有料・自作のプラグインにより更に使いやすくなっています。

Illustrator(グラフィックソフト)

illustratorもデザインには欠かせないグラフィックソフトです。ブームとなったフラットデザインでも使用していましたが、主にロゴの制作や紙関係のグラフィックデザインで使用しています。また、資料作成・報告書作成などの仕事でも、Illustratorで作成しPDFで出力するなどの使い方もしています。IllustratorはPhotoshopに比べてレイアウトの操作は格段に良いので、もう少しwebに適した機能にバージョンアップすると良いな~なんて思ってます。

Dreamweaver(テキストエディッタ)

Photoshop、Illustratorと並んで無くてはならない三種の神器の一つの「Dreamweaver」。

やたらと重く、macでは使い物にならない程で「windows」に戻した原因の一つでもあります。

Dreamweaverはテキストエディッタとしては少々動作が重いのですが、コーディングを補完してくれる機能が素晴らしいのです。FTP(サーバーにデータをアップする機能)も付いてるので、基本的にホームページ制作はDreamweaver一つで完結してしまいます。

Sublime text(テキストエディッタ)

今まで使ったテキストエディッタの中では最高峰に位置するソフトですが、いろいろと難ありでして…。

macでは主にSubline textを使っています。Sassなんかもショートカットキー一発で済んでしまうので楽ちんです♪

ただ、最近DreamweaverでもSass等に対応した事から、出番がめっきり減ったソフトです。

Brackets(テキストエディッタ)

adobe製のフリーテキストエディッタ「Brackets」豊富なプラグインが魅力で、Photoshop等との連携もあり、非常に軽量なソフトで愛用しています。ソフトを閉じても次に開くと前に開いていたファイルがそのまま残っているので、ホームページ制作の中で様々な用途で使用しています。レスポンシブサイトの制作でも「Brackets」を使用していましたが、やはりDreamweaverが力をつけてきた結果、コーディングとは別の用途で使用する結果となっています。

Edge Animate(HTML5アニメーション)

ここ数年前に登場したHTML5によるアニメーション制作ツール。もともとはFlashを使っていましたが、iPhoneが…appleがFlashを完全拒絶してる事からEdge Animateに乗り換えました。乗り換えたといっても、Flashとはちょっと用途が違いますが、基本的には同じような事は出来ます。まだ広くは普及していない様子ですが、スマートフォンサイト制作時にFlashを入れたいというご要望を頂いた際に活用しています。最近ですと、iPhone向けのアプリなどでも使用されているようですね!

xampp(ローカル環境開発)

ホームページ制作時に活用するローカル環境開発ツール。静的なホームページの場合は直接サーバーにアップしながら制作する事も多々ありましが、phpやwordpress等を取り入れたサイト制作には必須となっています。

このxamppは、自分のパソコンの中でデータベースやアパッチ等を仮想的に利用できるようになるソフトで、いちいちサーバーにデータをアップしなくても、ローカル環境でphp等の制作ができます。

Microsoft office

言わずと知れたoffice。クライアントからの資料や、請求書、見積書なんかもofficeで制作しています。

imworksではpowerpointでの資料作りも行っているので、グラフィックソフトと同じ位重要なのです。

ちょっと変わった使い方としては、ホームページ制作にexcelを使う事も…。

excelでレイアウト組みは行いませんが、ドラッグコピーで数字が1,2,3,4…って加算されるのうまく利用して…

オンラインストレージ

imworksでは主にDropBoxを、ビジネスプラン?1TBにして使ってます。ひと昔前は、SkyDrive(One Drive)、Google Driveなどをいろいろ試していましたが、DropBoxが一番同期速度が速いのと安定しているので愛用しています。

先ほど出たGoogle Driveには苦い思い出が…。

まだGoogle Driveが登場間もないころの話ですが、デザインでMac、コーディングでWindowsの頃。

Windowsでクライアントの会社案内を作成してGoogle Driveへ同期したのですが、ひょんな事からWindowsがクラッシュ。

その後です。Windowsを修理してデータを吸い出し復活♪

と、ルンルンしてた矢先「あれ?Google Driveが空っぽ・・・。」チーン(涙

原因は不明ですが、恐らくWindowsのHDDがクラッシュし、データが消えてしまい、その状態でGoogle Driveが同期してしまったのでしょう。クラウド側も空っぽになってしまった苦い経験があります。会社案内の納品まであと2日。

ほぼ徹夜で作り直しました。

その後は、個人には痛い出費でしたがファイルサーバーを導入し、バックアップ体制をしっかりと整えました~

制作会社ではなくとも、バックアップ体制はしっかりしておきましょう!笑

その他

モバイルデバイス

ホームページ制作では、スマートフォンやタブレット対応のサイトも制作しているので、新旧iPhone、android携帯が必須です。

基本的には全てPCで制作を進めますが、最終的な確認ではやはり実機が必要なのです。

また、最近はめっきり減ったフューチャーフォンサイト。とは言うもののまだ少数ですが需要があるので、フューチャーフォンも一応まだ持っています。後は、タブレット、iPad・iPad miniもスタンバイしています。

ホームページの確認用という名目上で、youtubeやhuluの観覧用と化しています(笑

長々と書いてしまいましたが、これが私の制作環境です。長いことPhotoshop、IllustratorでのDTP業務やDreamweaverを使ったホームページ業務を行っていますが、実際に他のデザイナーさんやコーダーさんはどのような環境で仕事をされているのでしょうか?

使用するソフトは差ほど変わらないかと思いますが、それを取り巻く環境は知りたいところですね~

© 2013 - 2017 imworks.