AdobeCreative Cloud Illustrator iPhone Photoshop webデザイン wordpress デザイン

webデザインに必要な環境

投稿日:2017年7月22日 更新日:

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

スポンサーリンク

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

まとめ

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

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

理想の環境はMacでのハイブリッド環境
機種 CPU 解像度
Mac MacBookPro 2.3GHzデュアルコアIntel Core i5(Turbo Boost使用時最大3.6GHz) 2,560 x 1,600
MacBook 1.2GHzデュアルコアIntel Core m3(Turbo Boost使用時最大3.0GHz) 2,304 x 1,440
MacBookAir 1.8GHzデュアルコアIntel Core i5(Turbo Boost使用時最大2.9GHz) 1,440 x 900
surface

Surface Pro

Intel Core m3 2,736 x 1,824 (267 PPI)

Surface Laptop

 第7世代 Intel Core i5-7200U 2,256 x 1,504 (201 PPI)

Surface Book

 第6世代 Intel Core i5 / i7 プロセッサー  3,000 x 2,000 (267 PPI)
HP
15-au100
エントリーモデル
Intel Core i3-7100Uプロセッサー
(2.40GHz,インテル®スマート・キャッシュ3MB)
 1,920 x 1,080
Lenovo ideapad 710S Plus インテル Core i5-7200U プロセッサー ( 2.50GHz 2133MHz 3MB )  1,920 x 1,080

上記にMac、surface、HP、Lenovoを比較してみました。正直どれでも大丈夫なレベルです。あとは予算とブランドにこだわるか、利便性を追求するか。見た目と予算を考えるとSurface Proなどもなかな良いなと思ったりします。私は個人的にはMac派なのでMacBookをお勧めしたいところです。上記にはHDやメモリ容量は考慮していないので、この二点は、予算の許す限り多ければ多い方が良いとだけ覚えておきましょう。
Microsoft Public Affiliate Program (JP)(マイクロソフトアフィリエイトプログラム)
HP Directplus オンラインストア
デル株式会社
マウスコンピューター/G-Tune

アプリケーション

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

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

フォント

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

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

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

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

 

まとめ

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

スポンサーリンク

この記事が気に入ったら
いいね ! しよう

Twitter で

-AdobeCreative Cloud, Illustrator, iPhone, Photoshop, webデザイン, wordpress, デザイン
-

執筆者:


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

私のMacBook Proについて

私の所有しているMacBook Proについて書いていこうと思います。 MacBook Pro (13-inch, Early 2011) プロセッサ 2.3GHzデュアルコアIntel Core i …

no image

クリッピングパス

Photoshopのパスの機能。画像の切り抜きを指定するための輪郭線のこと。Adobe Photoshopでは、ベジェ曲線でパスを作成し、切り抜く範囲を指定する事が出来る。このデータをPSDやEPS形 …

webデザインも出来る様になりたい Part.1

普段はグラフィックメインで、主に紙媒体しかやってないけど、webのデザインも出来る様になりたいって方もいると思います。もしくは、webのデザインも必要に迫られている方とかいますよね。 私も10数年前に …

なぜ?光の位置が左上からの理由

先日、部下のデザインをチェックしていた際に、バクダンのグラデーションがおかしかったので修正を入れました。 何がおかしかったかと言うと、グラデーションの向きです。右上に光があり左下に影が落ちる向きでした …

次期iPhoneはiPhoneX!?

いろいろな情報が飛び交ってます、次期iPhoneですが、ここに来て次期iPhoneはiPhone8ではなく、10周年を記念してiPhoneXになる可能性が出て来ました。 しかし、またまだ色々なサイトの …

2018/07/30

オリジナルTシャツを簡単に作れるTシャツトリニティ

気軽にTシャツを作りたい!そんな思いを簡単に実現出来てしまうサイトがあります。 Tシャツトリニティ Tシャツトリニティ このTシャツトリニティは、パソコンやスマートフォンからでも画像を用意するだけで簡 …

2018/07/27

簡単!Photoshopで太陽を作る方法

猛暑が続くので、それにちなんで太陽のネタを書こうと思います。 以外と知らない!?Photoshopで太陽の作り方 晴れた写真を撮ると太陽の光が強すぎて、青空だったはずが、空が真っ白に飛んでしまうこと、 …

2018/07/20

ウォータープルーフ対応Bluetoothスピーカー JBL FLIP4を買ってみました

毎日、猛暑日が続きますね!そんな夏本番を楽しくする、便利なガジェットをご紹介します! どんなシーンでも使える便利なBluetoothスピーカー JBL FLIP4です。 ちなみに、なにかと話題のスマー …

2018/06/24

35mm版(さんじゅうごみりばん)

一般的なロールタイプの写真フィルムサイズ。35mmフィルムがかつてライカに採用され全世界に広まったことから、このサイズのフォーマット(縦3.6 cm×横2.4 cm)をライカ版と呼ぶこともある。1カッ …

2018/06/24

三原色(さんげんしょく)

割合を変えて混ぜ合わせることで、あらゆる色を表現出来る3つの基本的な色のこと。光の三原色は、RED(赤)、GREEN(緑)、BLUE(青)であり、全てを混ぜ合わせると白(本当は透明)になる。また、イン …

クリックしていただけると助かります


デザイナーランキングへ にほんブログ村 デザインブログへ
にほんブログ村

スポンサーリンク

    スポンサーリンク

    %d人のブロガーが「いいね」をつけました。