Photoshopと言えばデザイン業界の定番中の定番アプリですよね。

でも、うちのチームはWebデザインを制作する時にPhotoshopを使うことを辞めました。

その理由を挙げてみます。

1. Photoshopはラスター画像にしか使えない

フォトショの宿命かなと思うんですが、制作当初のカンバスサイズを間違えて小さく指定すると、プロジェクト後半戦になって高解像度な画像が必要になった時に対応しづらく、画像が荒れてしまいがちなんですよね。

最初から高解像度で制作スタートすれば良いんですが、これがなかなか予想しづらい。

例えばiPhoneがRetinaディスプレイを発表した時、ディスプレイ解像度がいきなり倍になってしまい、苦労して作ったデザインが粗々になってしまいました。

タレントさんの写真をレタッチして、はみ出た髪の毛を消すとか、ラスター画像ならではの作業ならともかく、Webデザインのメインツールとしてラスター専門のPhotoshopを使うこと自体、将来のリスクになってしまいます。

2. ベクター画像(SVG)の最盛期

2018年はいよいよベクター画像の時代になっている気がします。

例えばアイコン画像というのはPhotoshopで大きめに作って高解像度対応するか、アイコンフォントを使ってスケールさせるか、くらいしか選択肢が無かったのですが、2016年頃から急速にSVG画像が流行りだしました。

ちょっと時代を遡ってみると。。SVG自体は大昔の2001年に正式発表された画像規格で、当初からベクターなので伸縮自在で滑らかな画像を提供するために生まれたんですが、当時のIE (IE6!) は対応していなかったので、制作陣には全く見向きされていなかったと思います。

その後、滑らかでインタラクティブでサウンドまで付いちゃう新体験を提供するなら。。Flashでしょ!という時代が続き、やはりSVGは相手にされていませんでした。

ただ、ブラウザ各社の対応は粛々と進んでいました。Google Chrome、Mozilla Firefoxはかなりの初期バージョンから、MicrosoftはIE9から、スマホは当たり前のようにSVG対応して、どのブラウザでもSVGを表示できる環境が整備されていました。

それでも制作会社はSVGに手を出しませんでした。誰も使っていなかったから不安だったし、Retinaやレスポンシブ対応もクライアントから要求されなかったので、伸縮自在な画像なんて使う必要が無かったんですよね。しかし、スマホが登場してからというもの、制作会社は高解像度の波に飲まれていきました。

そんな時に流行ったのがアイコンフォントです。マークアップ感覚で使えて伸縮自在、スマホやRetinaディスプレイの高解像度対応もノープロブレム、という良いトコ取りな奴でした。

そんなこんなでアイコンフォント全盛だった2016年、突然Githubが「アイコンフォント辞めてSVGにするわ」というブログ記事を出したんです。彼らが言うには、アイコンフォントは取り回しが難しくて、特にフォントをダウンロードしてからレンダリングするまでに瞬間的にガタつくよねと。今でもWebフォントを多用しているサイトはフォントが反映されるまでにタイムラグがありますが、そんな感じのイメージです。

Githubは当時からエンジニア界で圧倒的な認知度があったので、SVGが一気に注目を浴び、これまでアイコンフォントとPNG画像を提供していたFont AwesomeなどのベンダーがSVGも同梱するようになったのが2017年でした。規格化されてから16年間、売れない芸人のような生活をしていたSVGがいきなり世界中から注目された瞬間です。

実際にSVGを触ってみると、普通に使えるんですよね。 <img src="*">としても指定できるし、マークアップとしてベタ貼りもできるし。クセはあるんですが、Githubがやってるならウチも、という流れで導入した制作会社は多いんじゃないんでしょうか。

でも、SVGアイコンはさておき、SVGベースのWebデザインとなると、制作ツールはAdobe Illustratorの一択でした。イラレはポスターからWebまでオールオッケー的なベクター編集ツールなので、あまりイラレを使っていないとプリント用の初期設定のままWebデザインをやってしまい、結局手戻りかよ。。という状況があり、Web専門の制作会社にとっては色々なストレスがあったのも事実です。

3. そしてAdobe XDの登場

このブログはAdobe XD中心なので、結局ここに行き着くのですが(笑)

Adobe XDはベクター編集ツールで、Webデザインとプロトタイピングに特化しているピュアなWebっ子なので、イラレのような万能型ベクター編集ツールのストレスが一切ありません。

さらにテンプレ素材が充実し始めていて、ヘッダとフッタを光速納品したり、フォームをサクッと設計したり、見ているだけでデザインのインスピレーションになる高品質なテンプレートがドンドン増えていたり、いま一番勢いのあるツールだと思います。

もちろん新しいツールなので多少の学習コストがかかりますが、フォトショやイラレの画面左側にあるような謎アイコンだらけのアレや、画面右側にあるタブだらけのソレがほとんど無いので、いきなりプロジェクトに投入しても大丈夫な気がします。

ちなみにAdobeとは思えないほどサクサク動きます！

ついでにチェック