- グラフィックデザイナーなんだけどWebも作りたい
- 最近Webデザインを始めた
そんな人に向けての記事です。
社内でグラフィックデザイナーへ向けてWeb勉強会をする機会があり、Webと紙の違いを話した内容をまとめました。
印刷物からWebに活躍の場を移す方や、副業でWebデザインを始める方が多いという現実があります。
実はグラフィックデザイナーの方が、デザイン力が高い場合が多いです。
しかし、実力はあるのにWebデザインのルールを知らないというだけで、目も当てられないほどひどいサイトを作るデザイナーがいます。
そんなデザイナーの例をあげると、
- パーツごとのデザインが違う
- ページごとに印象が違う
- 文字周りにこだわりすぎ
のような感じです。
心当たりがある方は、必要なところから読み進めてください。
Webデザインの着眼点と情報設計
Webとグラフィックでは使う脳みそが違います。
順をおって説明しますね。
Webは使うもの
ポスターやチラシは広告として”訴求すること”をメインに使われることがほとんどです。
Webは”使うこと”を前提にしてデザインされます。
- 商品を買うことができる
- 商品や店舗を探す
- その企業の特徴を調べる
- 予約ができる
- 投稿することができ、知らない人と繋がることができる
目的は様々ですが、全て”使うこと”を前提としています。
Webサイトは使うことを前提としていることを意識すると、デザインがその言葉の本質的な意味である”設計”だということを理解できるでしょう。
イチから説明している良書。超初心者向け
こちらはwebデザイン業界がおかれている現状と課題について書かれています。
ページごとにデザインを変えない
グラフィックデザイナーにありがちなのは、ページやパーツごとに個性を出そうとすること。
特にパーツごとにデザインを変えないと、手を抜いているように思えて落ち着かないんです。
Webサイトは回遊するので統一感のあるデザインを求められます。
だから、ページごとに大きくレイアウトが変わったり、装飾が変わるとユーザーは驚いたり困惑したりします。
”ここどこ？これ同じサイト？”
ってユーザーを迷子にしてしまうのはWebデザイナーとしてはダメですね。
ページ群でWebサイトです。統一感を意識してサイトを作りましょう。
Webサイトはあくまで文章に装飾を施したもの
WebサイトはHTMLとCSS、くわえてJavascriptを使って作られます。
コーディングしたことがある人ならわかりますが、そもそもHTMLはワードやエクセルといった文章です。
ワードで書かれた文章をイメージしてください。
大切なところが太字になっていたり、段落ごとに見出しが付いている文章は読みやすいですよね。
見出しをつける = 情報の優先順位をつけ、段落を作る
ということです。
そういった意味でいうと、Webデザイナーはグラフィックデザイナーよりも編集者の方が近い職業だと言えます。
それ設計のベンチマーク？デザインベンチマーク？
ベンチマークとは模範となるもののこと。
Webサイトの目的やコンセプトを正しく理解してデザインができていますか？
新しくデザインを作る時、こんなサイトにしよう！って決めてからデザインを始めますよね。
あなたが模倣しようとしているものは設計ですか？それとも見た目？
例えば、風俗の予約サイトと美容室の予約サイトは全く別物のように見えますが、実はサイト設計はだいたい同じ。
ベンチマークを決めるときは設計も意識しましょう。
こちらは企画者寄りの本です。
実際のサイトを設計やデザインコンセプトから解説しているもので、こういったサイトの解説本は珍しいです。
Webデザインと紙デザインの違い
フォントは多くて3種類/大きさは4種類
紙と違って使用できるフォント数に限りがあります。
Webに対応していないフォントがあったり、複数使うとなると読み込み時間が長くなるからです。
また、フォントの大きさも、見出しごとに統一する必要があります。
これはユーザーの”学習するタスク”を減らすためです。
この大きさの見出しで書かれているところは大切なところなんだ。と一目でわかることが何より重要です。
だからあらかじめ情報設計することが重要なんですね。
ピクセル・RGB・グリッド
AIやPSDデータの作り方も変わってきます。
使用するツールの環境設定をWeb用に変更しましょう。
ちなみにIllustratorよりも、PhotoshopやSketchを使ってデザインすることが一般的です。
カーニングには限界がある
最近ましになりつつWebの文字のカーニング。
自動でカーニングしてくれるCSSも出てきましたが、グラフィックデザイナーを満足させるものではありません。
こだわるのはタイポグラフィやロゴだけにして、文字周りに時間をかけるのはやめましょう。
Webサイトではなるようにしかなりません。
デザインを立体的に見る
デザインが出来上がったら、あなたのデザインが階層立ててデザインされているかを確認してみてください。
平面にしか見えない場合は、情報設計をミスしている可能性があります。
優先順位に従ったデザインはわかりやすく、自然に立体に見えます。
無駄なものを再度見つけてはいかがでしょうか？
こちら過去の記事でもっと深く解説してます。
- あわせて読みたい
- 男女の出会いマッチングサービスのLP【Webデザイン添削 vol.02】
文章を全部読まないことを前提に作る
スマホで斜め読みすることが当然になりました。
ブログがまさにそうで、見出しだけを見れば納得できる内容にしておくことは重要です。
簡潔な表現をこれまで以上に求められます。
動きを含めてデザインする
文章が長くなると工夫する必要が出てきます。
・折り畳めるようにアコーディオンを実装
・必要なカテゴリだけを、見るためにタブで切り替え
こういったギミックを必要に応じてデザインしなければいけません。
動きを含めてWebデザインです。
こちらはサンプルをダウンロードして使えるので、実際に現場でも転用することができます。
Webデザインの準備
グラフィックデザイナーにとって馴染みのない環境を作る必要があります。
Webデザイン向けの写真素材作り
モノの写真だけではなく、空間を表現するための空バックの写真が多く必要です。
そして、至近距離（ヨリ）の写真より、引きの写真の方が使いやすく圧迫感がありません。
サイトを一つの空間と捉えてデザインすれば”ブツ”以外のイメージ写真がたくさん必要なことがわかると思います。
Webデザイン初心者を抜け出そう
本を読んだところであなたはまだWebのことをわかっているとはいえません。
- ドメイン = URLのこと
- サーバー = ホームページを置いておくガレージみたいな場所
最低限これだけあれば、Webサイトを作ることができます。
自作のホームページを作れば理解が深まります。
実際にコーディングができないとWebデザイナーとは言えません。
以下はもっとも国内でポピュラーなサービスですので、これを機にレンタルサーバーを借りてWebサイトを自作してみるといいでしょう。
：月額880円から
：僕はこれ
：〜100円から！ポートフォリオ向け
：エックスサーバーのドメインサービス
：超一般的まとめ
ここまで読んだ人はWebデザインに興味があるはず。でも実際に行動を起こさなければ意味がありません。
行動しなければ、ここまで読み進めた時間も無駄です。
業界に長い僕も、ずっと勉強をしていないと取り残されてしまう世界です。
振り落とされないよにしがみつきましょう。
もう一度言いますが、読んだだけで満足してはいけません。
せっかく向いた好奇心をWebに振り切ってください！
Webデザイン面白いよ！
ほなね
