Other

DTP出身デザイナーがWebで苦戦するワケ

公開

印刷物の世界で美しいレイアウトを組んでいるDTPデザイナー。 

文字組みの美しさは完璧。余白の美学を知り尽くしている。Webの世界に足を踏み入れた瞬間に「?」が浮かぶ。

「……え、この画像、画面の幅によって切れるの?」 

「フォントって、ユーザーのパソコンによって見た目変わるの?」

紙の世界は「絶対的な固定の世界」。 Webの世界は「レイアウトが変化する」。

紙の世界で実力あるデザイナーが、Webの世界で突きつけられる「文化の違い」の正体。

苦戦ポイント① 画面サイズという概念が存在しない

DTPの基本は「枠」。A4なら210mm×297mm。ミリ単位で計算し、1ピクセルのズレもなく完璧な構図を作り上げる。まさに建築家のような精密さ。

しかし、Webの世界に「絶対的な枠」は存在しません。

  • 4Kの超巨大モニターで見る人
  • 横幅が狭い古いノートPCで見る人
  • 片手でスマホを縦持ちして見る人

ひとつのデザインが、相手の環境によって自由自在に伸縮し、時には縦一列に並び直します(レスポンシブデザイン)。

「自分がミリ単位で追い込んだ完璧な構図が、スマホだと全く別のレイアウトに再配置される」 この「キャンバスが定まらない感覚」に、多くのDTP出身のデザイナーが苦戦します。

苦戦ポイント② 「手動での文字詰め」という自由度の違い

DTPデザイナーの得意なのが「カーニング(文字詰め)」です。「ト」と「ラ」の間を0.5pt詰め、「ッ」の余白を絶妙に調整して完璧な美しさを生み出す。

ところが、Webの世界で同じように手動で1文字ずつ調整しようとすると、フロントエンジニアから切ないお知らせが届きます。

「それ、ユーザーがブラウザの文字サイズやフォント設定を変えたら崩れてしまいます……」 「テキストは画像化せず、できるだけWebフォントで打ってください。SEO(検索表示)や読みやすさ(アクセシビリティ)に影響します」

苦戦ポイント③ 「見た目」の裏に「動的な仕組み」がある

紙のチラシやパンフレットは、印刷された瞬間が「完成形」であり「ゴール」です。

しかし、Webサイトやアプリは、表示された瞬間が「スタート」になる。

  • ボタンをホバー(カーソルを乗せる)した時にどう動くか?
  • フォームに入力エラーがあった時、どう赤字で知らせるか?
  • ページをスクロールした時、どうシームレスに要素が浮き上がるか?

「見た目を綺麗に配置する」だけでなく、「ユーザーが触った時にどう挙動するか(UI/UX設計)」まで考え抜かなければならない。この「動線のデザイン」が、DTP出身者を最も悩ませるポイントになります。

でも、紙で培った「圧倒的な視覚構成力」は最強の武器になる

ここまで読むと「DTP出身者はWebに向いていないのでは?」と思えるかもしれません。

しかし、答えは違います。

実は、Webの基本ルール(グリッドシステムやレスポンシブの考え方)さえ掴んでしまえば、DTP出身のデザイナーは強いWebデザイナーへとステップアップします。

なぜなら、デジタルネイティブのWebデザイナーが苦手としがちな「圧倒的なタイポグラフィの美しさ」「情報の優先順位の付け方」「目を引くビジュアル構成」を、すでに叩き込まれているからです。

「動くキャンバス」というルールさえ面白がれるようになれば、紙で培った美学はそのままWebやアプリのUI/UXにおいて絶大な価値を発揮します。

枠を飛び越え、チームで「生きたプロダクト」を創る

DTPからWebへ、あるいはグラフィックからUI/UXへ。 新しい領域に挑戦するときに大切なのは、完璧な仕様書や枠の中に閉じこもることではありません。

「画面の向こうにいるユーザーが、どう触り、どう感じるか」

その本質に向き合い、エンジニアやアカウントとディレクターなどチームメンバーと対話しながら、一緒に生きたプロダクトを創り上げていくことです。

J.B.Goodeでは、紙かWebかアプリかという「職種の垣根」にとらわれず、自分のこだわりや興味を武器にものづくりを楽しむ仲間を探しています。

「表現の枠を広げたい」

「動くメディアの面白さに挑戦したい」

「WebアプリケーションUI/UXに関わりたい」

そう感じている方は、ぜひ一度カジュアルにお話ししてみませんか?

面談希望の方へ

まずお話をしてみる方はこちら

制作・開発のご相談をご検討の方へ

お問い合わせ・ご相談はこちら