結構違う WebとDTPのデザインプロセス

Illustrator(いわゆるドロー系ソフト)で作るデザインと、コーディングで作り上げていくWebデザインの違いってなんだと思います?
見た目が同じようなものであれば、デザインプロセスも同じようなものだと思いますよね。
実は、結構違うな〜と思っています。

コードはデザインを言語化している

私はDTP系、Web系、両方のデザインを制作しています。
その中で気づいたことは、「Webデザイナーはナチュラルにデザインを言語化している」ということです。

どういうことかというと、それぞれの特徴を見ると分かります。

Illustratorの場合、デザイナーの意図はアウトプット(目に見えるもの)からのみ、分かります。
要するに、見た人の主観にかなり左右されます。

対してWebはコードで表します。
そのコードを見るとデザイナーが意図していることが分かります。(セマンティック、と言われるものですね)
まさにこのコーディングがデザインの言語化なのです。

いやいや、「普通の人は〈右クリック→検証〉なんてしないよ」という方。
もちろんそうです。
ここで言いたいのは、制作時にそれらを言語化(コード)しているかどうか、ということです。

よく、「Web未経験デザイナーが制作したページレイアウトはコーディングしづらい」と言われることがあるかと思います。
これはおそらく「Webデザインの構造化」に慣れていないからだと思います。
決して、デザイナーの良し悪しではなく。

そうした言語化は、時に自分のデザインを俯瞰して見ることができ、構造のチェックもできます。

これらが、Webデザインの特徴だと思います。
また、他人が作ったデザインも理解しやすいので勉強もしやすいというメリットもありますね。

Webデザインで意識したいポイント

次にコーディングで意識したいこと。

私が普段意識しているのは

  • Simple(簡単に)
  • Clear(わかりやすく)
  • Semantic(意味あるものに)

Simple 簡単に

Webページが激重だったらどうします? 私ならページそっ閉じですね(笑)
人はそんなに待ってくれません。

デザインとは「情報の整理」です。
デザインしたいがために、情報量(データ的にも、デザイン的にも)が増えてしまったのでは本末転倒です。
ページは軽いに越したことはありません。

Clear わかりやすく

上記に通じるところですが、こちらはUIに関してですね。
そのパーツの意味や、モジュール構造などを意識する。

また、デザインには「4原則」と言われるものがあります。

  • 近接 Proximity
  • 整列 Alignment
  • 強弱 Contrast
  • 反復 Repetition

コーディングに当てはめると「margin」「padding」「h1,h2などのダグ」「classの使いまわし」などですね。

Semantic 意味あるものに

タグにも意味があります。
できるだけdivを多用するのは避け、HTML5の要素を使います。

HTML5の主なセマンティック要素

  • article 記事など
  • aside 余談・補足情報のセクション報
  • figure 図表など
  • footer フッター
  • header ヘッダー
  • main メインコンテンツ
  • nav ナビゲーション
  • section 一つのセクション
  • time 日付や時刻

これらを意識し、コーディングしています。

ということで、WebとDTPのデザインプロセスの話でした。

最新記事