エディトリアル・グラフィックデザイナーがWebデザイナーになるまで　Vol2 UX/UIやアプリケーションに慣れる

Webデザイナー/ディレクターのヤスハラタカユキです。

前回はグラフィックからのwebデザインへのジョブチェンジにする際に悩んだことを書きましたが、今回はUX/UIやアプリケーションなどについて書きたいと思います。

目次

• エディトリアルデザインにはない概念、UX/UIを身につける
• 使いやすいアプリケーションを探せ
• 文字周りのデザインが許せない問題
• 今回のまとめ

エディトリアルデザインにはない概念、UX/UIを身につける

エディトリアルデザインは、基本的に紙面を構成するデザインです。

全体の内容を構成するのは編集の仕事であって、デザイナーは編集の意図を汲み取って、より読者に伝わるようにデザインをする役割です。

しかしwebの場合は、そのサイトを使った場合に得られる「体験」をデザインする必要があります。

それがユーザーエクスペリエンス、通称UXと呼ばれるものです。UXをより直感的に分かりやすくするための仕掛けを、ユーザーインターフェイス、UIと呼びます。

実際にユーザーとしてサイトを利用した場合に、欲しい機能や使いやすい導線をデザインし、ユーザーの欲求を適切に解決へと導き、より良い体験を持ってもらうことがUX/UIデザインといえます。

ただこれにエディトリアルデザインが全く役に立たないかといえば、そうでもないかも。

本を一冊作るにあたり、索引のしやすさだったり目次の使いやすさだったり、読者の目線で考えてデザインをしたことは、UX/UIを考えるときに活かせました。

そのサイトを利用する人はどういった人物像で、どういったことに困っていて、どのような手段で訪れて、どのように課題を解決させるかということを仮定して、その人物に応えるべくサイトの導線やインターフェイスを整え、サービスを体験してもらう。

webディレクションの領域になりますが、そういったことを考えることで、徐々にUX/UIを身につけることができました。

使いやすいアプリケーション探し

UX/UIのようなwebデザイン独自の概念に悩まされつつも、実際に手を動かすことにおいてもまた悩まされることがありました。

それが前回もちらっと触れた、フォトショップが地獄すぎる問題です。

フォトショップといえば、グラフィックデザイナー的には画像の修正や色調整、合成などをするためのソフトであり、これでレイアウトしようとはほとんど思いません。

しかしweb業界ではデザインアプリの事実上のスタンダードとして君臨しています。

実際、私の師匠であるYちゃん（22歳女子）も、ショートカットを駆使してさくさくとデザインをこなしていました。

その姿を見て「し、新人類！」などと思ったものです。

イラストレータとインデザインでデザインしていた人間にはとてもじゃないけど使いにくくてムリ。

最初はイラストレータでwebデザインをしていたのですが、当時のイラストレータ（CS6）はオブジェクトや文字がピクセルに対して微妙に端数を出すため、画像にするとボケるという弱点がありました。

結局イラストレータもしっくりと来ず、どうするか焦っていたところに

「海外だとsketchっていうアプリがけっこう使われているみたいですよ」

というYちゃん情報により、sketchを導入しました。

これはイラストレータやインデザインのように、数値でオブジェクトのサイズや位置を決めることができ、書き出した画像もピクセルパーフェクトかつベクターなので拡大縮小自由自在と、まさに紙媒体toデジタルのデザイナーにもってこいのアプリです。

めちゃ使いやすい。

かつて存在したファイヤーワークスというwebデザインのアプリに近い操作感らしいです。ファイヤーワークス知らんけど。

サブスクで年額1万円ほどですが、十分その価値はあると思いました。

↑この記事のタイトルのグラフィックも100%sketchで制作しました。とてもイラストレーターチック

しかしこれにもやはり問題があり、コーダーがsketchに慣れていないと面倒をかけてしまうということがありました。

また、納品時に「PSDでデザインデータください！」と言われると詰みです。

一応photopiaという、webデザインのアンラインアプリで、sketchからPSDデータに変換することができるのですが、相当手直しが必要だし、無料で使おうとすると1日1回しか変換できないので、実務にはちょっと厳しい。

↑adobe製sketchといってもいいくらいに操作感が似ているXD

ということで現在はadobeのXDをメインのアプリにして、イラストレータとフォトショップも並行して使いながらデザイン作業を行なっています。

操作感はかなりsketchに近く、イラストレータやインデザインを使える人なら割とすんなり扱えるようになると思います。

これならコーダーにもさほど面倒をかけることもないし、プロトタイプを作ってUXも確認できるので、現状でベストかなと思っています。

文字周りのデザインが許せない問題

グラフィックからwebデザインへ移行すると、ブチ当たる問題はまだまだあります。

文字を使ったデザインをする場合、文字と文字の間やウェイト間の差異をすごく繊細に調整しています。

0.1mm以下の単位で、ぱっと見ても気づかないような精度で文字の微調整をすることで全体の見栄えが大きく変わってくることを、グラフィックデザイナーは体験的に知っています。

それはつまり決められた平面のサイズという制限があるから、相対的にバランスを取れるということ。しかしwebには決められたサイズという概念はありません。

見る人の画面のサイズ、デバイス、ブラウザの設定でそれぞれ違う見え方をしてしまう。

なので、カーニングなどの細かい文字設定はできないし、CSSでも再現をすることが困難なため、文字詰めという文化がないのです。

↑息をするように文字を詰めていくスタイル

これはかなりストレスでした。

ある時マインドシフトをして「もう文字詰め忘れる！」となったのですが、後に、忘れてしまうのではなく、敢えてそのニュアンスをwebデザインに活かせないだろうかと考え直し、今はエディトリアル的アプローチからwebデザインをすることを研究しています。

今回のまとめ

web独特の考え方であるUX/UIということに翻弄されつつも、それまでの経験を活かし、グラフィックデザインとは違う面白さを見出すことができました。

アプリケーションもとても使いやすいものが出揃ってきているので、かつてよりスムースにジョブチェンジすることができるでしょう。

また文字周りのストレスも逆手に取って、エディトリアル的アプローチでwebデザインするという方向で、自分なりの暖簾を見つけることもできました。

ジョブチェンジは苦労することも多いですが、新しいことに挑戦するということは刺激的で、40代のおっさんでもワクワクするような日々です。

わけわからん！となることも多いですが（笑）

今回はここまでです。

次回はあるのでしょーか。