webデザインに必要な環境

Tweet

Pocket

webデザインをする為に必要な環境って！？

デザインやDTPに必要な環境について以前お伝えしました。最近はwebの案件が多く、自身もこうしてブログやサイトを運営しています。そんな中で、webデザインをやる為の環境はどうしたらいいかなと考え、こちらもまとめておこうと思います。

パソコン

まずは無くてはならないのがPC環境。DTPにおいてはとにかくMacを推奨してきました。ことwebに関してはどうかと言えば、むしろwindows環境をお勧めします。ですので、あえてパソコンと書きました。

webデザインって？

さて、ひとえにwebデザインと言って、一体全体何処までを指し示すのでしょうか？

ひと昔前まではIllustratorやPhotoshopでグラフィックを作成して、画像としてスライスし、コーディング作業でimg要素として挿入したり、背景画像として貼ったりしていました。画像の割合が大半を占めるのがwebの一つのカタチした。さらにFlashなどを用いて、いかにインタラクティブに表現するか、リッチなコンテンツを作るかが求められていました。

今でも画像をスライスし、img要素として挿入したり背景に適用したりという事は基本的に変わらないのですが、HTML5とCSS3の登場により少しづつ役割が変わって来ている様に感じています。

あくまでもグラフィックとしてのwebデザインは必要不可欠なのですが、ある程度固まってしまえばコーディングでHTMLとCSSで再現していく方が効率的かつ本当の意味でのwebデザインの様な気がしています。

私的には、ブラウザで見てこそwebデザインだと思っています。

しかし、クライアントがいて、デザイナーがいて、コーダーがいてという感じで分業しながら作業をしたり、人員をアサインしたりしなければならない環境の場合、無駄な工数がかかってしまうとお金が発生してしまいます。

それを阻止する為に、デザインが確定するまではIllustratorやPhotoshopによる、見た目が近しいデザインでwebのデザインを進めていく事がほとんどです。

話を戻すと、じゃあwebデザインって何処までを指し示すのって事ですね。

見た目なのか、機能性を含むのか。

私的には後者です。つまり、見た目だけを組むにしても機能性を考慮出来てない事にはデザインとは言いません。つまり、webにおけるデザインとは、HTML、PHP、CMS、CSS、JavaScript、さらにはSEOなどの後工程も踏まえて、理解して考えてが出来てこそ成立する難易度の高いデザインになります。

この点が印刷製版との大きな違いになります。まずは最低でもHTMLとCSSを学ぶ事から始まります。それから、SEOやGoogleのアルゴリズムも考慮して、ベースのデザインを決めていきます。いわゆるフレームワークってやつですね。そこから初めてIllustratorやPhotoshopによる見た目を決めていきます。

この見た目もブラウザやデバイス（PCなのかタブレットなのかスマホなのか）を意識しなければなりません。ですので、最初に要件定義を決めます。どのブラウザのどのバージョンまで対象にするか、それによりデザインも大きく変わる場合もあります。

ざっくりですがwebデザインについての概要でした。

webの見た目を作る為に

webの見た目を作るためには、先にも上げたIllustratorやPhotoshopが必要になってきます。これはDTP（印刷、紙媒体）と同じですね。webの場合、何故かPhotoshop派がほとんどです。なぜかといえば、Illustratorは元々、webを作成する機能は全くなく、ビットマップすら扱えないアプリケーションだったからです。webはビットマップしか扱わないので（Flashをのぞく）習慣的にPhotoshopが多く使われてきたからです。

今現在、Illustrator、Photoshopを手に入れる為には、AdobeCreativeCloudを利用するしかありません。AdobeCreativeCloudを導入すれば、コーディングする為のDreamwaveやFlashアニメーションを作成する為のAnimateも同梱されているので必要不可欠です。

さて、以上を踏まえてパソコンの話に戻ります。先程はwindows環境をお勧めしました。何故かと言えば、

1. 安いから
2. 世の中の環境がwindowsが9割を占めるから
3. webは解像度が72dpiな為、ハイスペックである必要性がない
4. 最低でもAdobeCreativeCloudが動けば良い
5. InternetExplorerとEDGEでの確認は必須

以上の点でwindowsで充分と言う事になります。とにかくすぐにでもwebデザインを始めたいという場合は、安くて良さげなPCやラップトップを用意すれば良いと思います。

ブラウザシェアの割合

しかし、もう少し違う角度からwebについてみていきましょう。

日本でのブラウザシェア割合（2017/07/22現在） StatCounter Global Stats参照

1位 Chrome 36.7%

2位 Safari 24.77%

3位 IE（InternetExplorer）17.53%

4位 Firefox 11.68%

5位 Edge 4.06%

6位 Android 1.57%

となっています。

世界的にみると1位はChrome53.91%で2位のSafariは14.41%。3位はUC Browser8.57%。4位Firefoxは5.94%。5位がIE（InternetExplorer）3.93%となっています。

数年前はIE（InternetExplorer）が60%近いシェア率を誇っていましたが、この２年くらいの間にクロームが圧倒的にシェアが伸び世界的にも日本だけを見ても１位になっています。次いでシェアを誇るのがSafari。これはiPhoneにおけるインターネットの割合が増加したためという見方ができます。そして日本では3位にIE（InternetExplorer）が未だにシェアがありますが、世界的には5位で約4%にまで減少していますね。

ここから考えると、webデザインにおける動作確認をとるためにはSafariも重要視しなければいけなくなってきているということ。数年前であればIE（InternetExplorer）がほとんどであった為、制作する側も閲覧する側もwindowsで行うことが重要視されていましたが、現在Googleのアルゴリズムがスマートフォンファーストを提唱している以上、iPhoneにおけるSafariの使用率とそれを動作確認する環境も無視できない状況ということです。１位のChromeに関しては、win、Mac共に動作の確認はできますので、Webデザインにおける理想の環境とは、MacにParallelsなどをインストールしてMacとWinの双方の環境を用意する事なのかもしれません。

まとめ

いろいろな方面から見てみましたが、結局のところWebデザインではどのようなPCが向いているかという話ですね。

デザインという観点から言うとAdobeCreativeCloudが動作出来る環境ならなんでもOKです。安価なPCやラップトップでも可能です。但し、PCでの閲覧を考慮するとピクセル数の問題が出てきますので、高解像度を表示可能なモニターまたは液晶を搭載した機器が望ましいです。

理想の環境はMacでのハイブリッド環境

上記にMac、surface、HP、Lenovoを比較してみました。正直どれでも大丈夫なレベルです。あとは予算とブランドにこだわるか、利便性を追求するか。見た目と予算を考えるとSurface Proなどもなかな良いなと思ったりします。私は個人的にはMac派なのでMacBookをお勧めしたいところです。上記にはHDやメモリ容量は考慮していないので、この二点は、予算の許す限り多ければ多い方が良いとだけ覚えておきましょう。

アプリケーション

先にも述べたように、見た目のグラフィックをデザインするには、IllustratorやPhotoshopが必須になります。迷わずAdobeCreativeCloudを導入しましょう。AdobeCreativeCloudを導入すれば、コーディングする為のDreamwaveやFlashアニメーションを作成する為のAnimateも同梱されています。さらにコードを書かなくてもWebを構築出来るAdobe Museなどのアプリケーションも同梱されています。１から10まですべて完結できる製品群です。

実はコードは最悪、テキストソフトさえあれば書くことが出来ます。HTMLやCSSもテキストソフト一つで何でも出来てしまします。しかし、グラフィック面はそうはいきません。さすがに最低でもPhotoshopもしくはそれに近いビットマップ編集が出来るアプリケーションは必要です。以前は10万もするPhotoshopでしたが、月額980円から導入可能になっているので、これを利用しないてはないです。

フォント

フォントはwebデザインの場合、デバイスフォントといって、ブラウザに依存したフォントを使用する分には、深く考えなくてよいのですが、どうしてもロゴや、メニューにこだわった書体を使用したいという場合は、やはりDTPと同じモリサワの書体を利用する事が望ましいです。

モリサワパスポートはちょっと高価です。PC1台につき、年間49,800円（税抜）がかかります。しかし、これなしには日本語のデザインは成立しないです。すべてデバイスフォントでという場合を除いては、必ずぶち当たるので、導入しておくことがデザイナーへの第一歩です。

たまにwebデザイナーで導入していない方がいるのですが、いろいろと困ってしまします。

それから欧文書体。こちらはほとんどの場合、PCにプリインストールされている書体で何とかなります。しかし、ちょっと変わった書体を使用したいと考える場合は、その都度購入をするようにしましょう。

まとめ

そこそこのPC環境、AdobeCreativeCloud、出来ればモリサワパスポートこの3点があれあば、Webデザインをする上で特に問題はないかと思います。