フリーランスでフロントエンドのWeb制作をしている私の開発環境

こんにちは!今回は私がいつもWeb制作をしている環境を紹介したいと思います。

目次(読みたい所をクリック!!)

開発環境

まずはマシンの紹介

OSはWindows7です。この記事を書くにあたり他の方がどのような環境で制作しているのかブログ記事などを見てみましたが、やはりMacを使っている人の方が多い印象です。
クライアントの方などもMacが多い印象なのでいつかは私もMacで開発できるようになったほうが良いのかなあ、とも思っています。

今から始める方は断然Macの方がオススメです。
使い方的な部分ではわかりませんが確認などがしやすいので。

モニターは4枚使用していて、ワイドモニターで主にDreamweaver、右から二番目のモニターはブラウザを一番左はデザインを写しています。

やはりモニターは多い方がいいとおもいます。
後、29インチのワイドモニターは解像度もフルHDのものよりも高く広範囲を表示できるのでオススメです。
31インチモニターなどもありますが、結局は解像度が同じなので文字が大きくなるだけなので。

コントラストや明るさを最小値にしているのでデザインとの色彩の違いなどには要注意です。

メモリは16gです。
一番メモリを使用しているのはPhotoshopだと思います。
ただ、グラフィックボードの問題のような気もします。

マウスはトラックボール普通のマウスの2台を使い分けています。
トラックボールは細かい調整が必要な際に使うのは難しいですが、長時間普通のマウスを使っていると手首がすごい痛くなってくるので重宝しています。

マウスについている物理ボタンにはコピー&ペーストを割り当てています。
もっとボタンがあるマウスに変えて、エスケープなどのよく使用するキーを割り当てたいですね。

ソフト

開発は全てDreamweaverです。FTPもなんでもやってくれます。
これなしに開発できないです。多分。

デザインはPhotoshopFireworksを使用。
自分でデザインする場合はFireworksを使用します。軽いので。

Photoshopは主にスライスばっかしてます。でもFireworksの更新はなくなったし、今後も続けていくならPhotoshop一択です。

後はSassをコンパイルするためにKoalaとかスマホ表示の確認にBliskを使ったり使っていなかったり。
Sassを初めて使った時は便利さに感動しました笑

ブラウザは基本クロームを使用しています。

テスト環境

メインで使用しているブラウザはchoromeです。
IEFirefoxは最新のもののみしか確認できないです。
IEの古いバージョンはIEテスターで確認しています。

その他はPC環境の確認にはMacbookAir、特にsafariで確認しています。
ただ、OSによって表示も変わったりするので全てはカバーできないです。

スマホの実機確認にはAndroidはNexus5、iOSはiPhone4iPad2で確認できます。
Androidはブラウザで確認したときと大体同じ表示がされますが、iPhoneはかなり変わるので注意が必要です。

前まではBrowserStackを使っていたのですが月額料金が高いので現在は使用していないです。
IE8の確認やiPhoneの各シリーズの確認なども行うことができるのですごいツールですよね。
ただ動作が思いのでストレスが溜まります汗

サーバー

エックスサーバーを契約しています。
静的なサイトは問題ないのですがPHP×MySQLを使用するWordPressなどの開発の場合、Windowsだとローカルでの環境構築がめんどくさいので毎回サーバー上にアップロードして開発しています。

最後に

Adobeのバージョンやブラウザの違い、OSの違いなどで思わぬエラーがでることがあります。
そういったことが起こってもすぐに解決できるようにクライアント様との環境の違いをチェックしておくことはとても重要です。

ブログ一覧へ