SHIGANAKUNAI

しがなくないデザイナーを目指す備忘録

グラフィックデザイナーに知ってほしいWebのこと

グラフィックデザイナーが作ったWebデザインをコーディングする、という案件を受けることがあります。

「デザインすること」については歴史が長いグラフィックデザイナーに一日の長があると思っていますが、Webにはグラフィックと違った特徴があります。
Webデザインを制作する際に知っておいてほしいことを挙げてみます。

タイポグラフィの制限

同じ文字でも、Webサイトには「画像」と「テキスト」が存在します。
簡単に区別すると、マウスカーソルで1文字ずつ選択できるものがテキスト、出来ないものが画像です。

01

画像はIllustrator・Photoshop等で制作したままの見た目を表示させることができますが、画像内に含まれる文章をGoogleなどに認識させにくいです。

テキストは情報をGoogleなどに認識させやすいのですが、フォント指定・装飾(袋文字や影など)・字詰めなどのタイポグラフィが苦手です。

画像とテキストは以下のように使い分けることになるでしょう。

  • タイポグラフィで魅せたいので画像にする
  • 写真に文字を綺麗に乗せたいので画像にする
  • 更新頻度が高く、文章をコピペで差し替えるのでテキストにする
  • SEOを考慮し、検索結果の上位に表示させたいのでテキストにする

「基本的にはテキストで、印象的に表現したい場面は画像にする」と考えるとよいと思います。

レイアウトの制限

グラフィックデザイナーにWebデザインについて話を聞くと「四角で区切られている」とおっしゃいますが、これはhtmlが四角で構成されていることが理由です。

htmlは文章構造を表現するものなので、レイアウトの自由度はさほど高くないのです。数年前に比べ多少自由度は上がりましたが、紙に比べるとできないことはまだまだたくさんあります。

02

どのようなレイアウトがベストなのかは回数を重ねる中で見えてくると思いますが、
僕は「柔軟性のあるレイアウトであること」が大きな1つのルールだと思っています。

 

一度に見える範囲の制限

ポスターや雑誌は紙面のサイズが決まっているので掲載量に制限がありますが、距離を変えることで全体を一目で確認することができます。

一方でWebサイトは1ページあたりのサイズに制限がありませんが、ディスプレイに収まらない部分を見ることができません。

12

パソコンは表示の拡大縮小を行われないものです。画面サイズに対して要素が大きすぎるとページの構成や内容を把握しにくくなってしまいます。
要素やフォントサイズはWebに最適化させる必要があります。

ページの移動

雑誌はページをめくって次に進みますが、Webサイトはリンクボタンをクリックして次のページに進みます。1つのページに複数のリンクボタンを設置出来るので、閲覧者に対して様々なアプローチを行えます。

しかし制作側が望む通りに利用者がページを見てくれるとは限りません。
複数のリンクボタンの中に優劣をつけつつも、ボタンだと認識できるようなデザインでなければいけません。

また、閲覧者は必ずトップページから見てくれるわけではありません。Googleなどの検索サイトから商品詳細ページにいきなりやってくることもよくあります。「何の本かを知らずに途中のページから読み始める」という感じでしょうか。

そのような場合でも「ここは何のWebサイトだ」と閲覧者に知らせるためのデザインである必要があります。

動く

  • 動画を再生する
  • 複数の写真をスライドショーで見せる
  • ボタンにカーソルを乗せる色が変わる
  • ボタンをクリックすると新しい要素を出す
  • スクロールするとさまざまな箇所が動く

ここで挙げたものは一例ですが、Webサイトでは様々な動きを表現することができます。
動きをつけたい場合、どんな動きをさせるかデザインの段階から想定すると製作をスムーズに進められます。

11

ただしどんな動きでも完全に再現できるわけではありません。
Webでどんな表現方法が可能なのか知っておく必要があります。

デザイン終了後にすること

Webサイトデザインが完了後、コーディング作業が控えています。
コーディングとは、デザインされた画像をブラウザで表示出来るようにHTMLタグで構築する作業です。

デザインデーターはjpegやpdfにしてしまえばどんな端末でもほぼ同じ見た目を再現できますが、htmlは閲覧者の端末・環境によって見た目が異なってしまいます。
その違いを極力減らしたり、SEOを意識した作りにすることがコーディング作業者の役割です。

ページの関係性、リンクボタンに認識、そして前述の「動く」やシステムとの連動を再現するのもコーディングによるものです。
近年Web業界の技術進歩は著しく、Webサイト上で表現出来ることは日々増加しています。それに伴いコーディングに必要な時間も増加します。
印刷と異なり、デザイン終了後に変更が入ることもよくあります。余裕のあるスケジューリングは必須です。

納品後にすること

グラフィックではありえないことですが、Webサイトは公開後でも手を加えることが一般的です。

  • 新商品の発売に伴い、情報の追加・変更・削除するとき
  • 作成したページを流用して他のページを作成するとき
  • 閲覧者の情報をもとに改善するとき

このような場合に手を加えていきます。なかでも3番目はWebならではでしょう。

10

Webサイトは閲覧者の端末、地域、閲覧時間、遷移先、流入元、流出先などの情報を得ることができます。
その情報を元に閲覧者の考えを読み解きキャッチコピーや文章・レイアウトなどを調整し、成約に繋がりやすくするための改善を日々行います。

まとめる

グラフィック業界は歴史が長く、作業工程がかなり確立されているように感じます。
使うソフトウェアもIllustrator・Photoshop・InDesignとそう多くなく、古いバージョンに落として入稿という現状です。

しかしWeb業界はまだ未成熟なため、新しい技術の出現とトレンドの流れが目まぐるしいです。
Illustrator・Photoshop・Dreamweaverはスタンダードですが、負けず劣らずのソフトウェアが次々と登場しています。
ソフトウェア・表現・運営方法…全てをマスターする必要はありませんが、覚えることがどんどん増えていくのでWeb制作に関わるというのは結構ハードなものなのです。

WebのデザインはWebデザイナーに任せてもらいたいところですが、いろんな理由もあると思いますので…

  • タイポグラフィやレイアウト妥協する
  • Webサイトでどんな表現が出来るかを知る
  • 後の更新に耐えられる柔軟性をもたせる

この3つを意識することで、より良いWebサイトデザインに繋がるのではないかなぁと思います。
分からないことがあるとき、気軽に相談できるWebデザイナーがまわりにいるとよいですね。

追記(5/5)

「Webデザインの基本ルール」といった内容の本は、発行が古いと現在の制作方法と差異がでていることがよくあります。
購入される場合は、必ず発行日が新しいものを選んでください。

AKIO KAI

からあげと温泉のまち、大分県出身大阪在住8年目。しがなくないデザイナーを目指してWeb、DTP、映像編集、3DCG、VRとかやってます。

著者の最新記事

  1. 詠み人知らず 2014.05.05 1:22pm

    すいません
    記事とは関係ありませんが、RSSの配信はされていないのでしょうか?
    興味がある記事が結構見受けられるので、かかさず目を通したいと思っております。
    可能であればご対応願えませんでしょうか?

    • 0
    • 0
    • AKIO KAI 2014.05.05 2:28pm

      ありがとうございます。興味をもっていただいてうれしいです。
      近日中に全ページからフィード登録できるようボタンの設置を致しますので、とりあえずは下記リンクからご登録頂けますか。

      RSS登録 / feedly登録

      • 0
      • 0

HTMLタグはご利用いただけません。