ごく稀ですが、グラフィックデザイナーがWebデザインを担当する事があります。また、Webデザイナーに転職したいと考えている方もいますよね？
需要はあるので、グラフィックデザイナーとWebデザイナーのどっちも両方やりたい方もいると思います。
理由はともかく、今までグラフィックデザインをやってきたデザイナーがWebデザインをする際に気を付けるべき違いや注意点、考え方をまとめました。
グラフィックデザインにはないWeb的な違いを理解しておかないと痛い目に合うので、参考にして下さいね。
この記事の目次
グラフィックデザイナーが知っておくべき事
グラフィックデザインもWebデザインも同じデザインでしょ？っていう考え方は少し乱暴です。グラフィックデザインだと印刷する事を前提に考える様に、Webデザインだと実際に触って操作する事を前提にデザインします。
また、PC・スマホというデバイスの違いも重要な考慮すべき点です。
いずれにしろ、Web上でどんな表現が出来るのかを知っておく必要があります。
あらかじめ指示があればまだしも、依頼する側も分かっておらず細かい所までの指示がないケースも多いです。
誰も気づかず、コーディングに入った段階でコーダーから指摘を受けていたのでは、コーダー自身の作業が止まってしまいます。
深堀りすると切りが無いので、確実に押さえておきたい具体的な注意点を紹介していきます。
注意点１：使用ツールの違い
グラフィックデザインでは、Adobe IllustratorやAdobe Indesignがメインで、画像加工にAdobe Photoshopを使うくらいでしょうか。
一方Webデザインでは、メインはFigma・XDとPhotoshop、アイコン作成などはIllustratorです。
現在ではWebページのレイアウトやサイト全体の構成、ページ要素の状態変化の確認など、制作の利便性の高さからFigma・XDを利用する事が。
IllustratorはWebデザインでも使います。使いどころは、拡大縮小でも劣化しない事やデータサイズ軽量化を目的としたSVG形式でのアイコン作成などです。
ビジュアル作成後は、Web素材としての書き出し作業があります。Illustratorで作り込んだビジュアルは上手く書き出し出来ずに困る事があるのでPhotoshopで作るのがおすすめです。
注意点２：カラーモード
グラフィックデザインではインクを使った印刷を前提としていますから、入稿に合わせてCMYKのカラーモードでデータを作成する事がまだまだ一般的だと思います。
WEBデザインではディスプレイ表示ですから、カラーモードはRGBです。厳密にはブラウザで使われるカラープロファイルにあわせてsRGBを使用します。
注意点３：サイズの単位
印刷物の場合だと単位は「ミリ」や「センチ」ですが、WEBデザインの単位は「px：ピクセル」です。最小単位は1pxですので、オブジェクトの作成では小数点が出ないように作ります。
デザイン後は書き出しする必要があるのですが、端数があるとサイズが修正されてしまい、意図した書き出しサイズにならない事があります。
また、割り切れないサイズで作られた画像はブラウザで表示した際、ぼやけて表示されることがあります。
本来は1pxに満たない分をアンチエイリアスで補う事により綺麗に見せるのですが、Webだとぼやけてしまいます。
※PhotoshopでもIllustratorでも端数が出ない様にそろえる機能があります。
注意点４：情報の変化
Webサイトは作って終わりではなく、運用・更新が基本です。その為、その時々でコンテンツが追加されたり、入れ替え作業が発生する事があります。
掲載する内容によって変更が発生しうるのかも含めてレイアウトを考えなければいけない事もあります。
また、デバイスの違いによる見え方の変化も考慮する必要があります。
具体例１：テキスト量の偏り
Webデザインの場合、繰り返しのレイアウトパターンが多いです。似た項目が幾つも並ぶ中で、一つだけ、極端にテキスト量が違うと違和感があります。
情報が全くない、または後々何かを追加する予定が有る場合も注意が必要です。
具体例２：ボタン/リンクの状態
Webサイトはユーザーが実際に操作するもの。クリックやタップする事で起きる状態変化もあります。
この場合は当然、状態が変わった際の見た目も忘れずに考えなければいけません。
考える必要があるのは、PCだとカーソルを合わせた時やクリック時とクリック後はどうなるのか？カーソルの無いスマホではどの様に対応するのか？などです。
※図の様に、リンクだけでも4パターンあります。CSSでどういった事が出来るのか知っていると表現の幅が広がります。
色の変化や動きなどのアニメーションがある事も多いです。その際はデバイスやレイアウトによって考慮すべき事柄は無いのか？も考える必要があります。
具体例３：フォーム等の入力項目での状態
ボタンやリンクと同様に、フォームでの入力エリアでのデザインも必要になります。
例えば、ラジオボタンやチェックボックスなどはデザインしないとデフォルトのままです。
デフォルトのままとは、各ブラウザが用意している見た目になるという事。
ブラウザごとに見た目が違うので統一感がありませんし、単純に見た目が良くないので変更するのが良いかも知れません。
具体例４：動的な変化
一般的には、ユーザーのアクションによって表示が変わるものの事を指します。
例えば、ユーザーが選択したり入力した内容によって、絞り込みが出来たり該当する情報が出力されたりする場合です。
表示内容がバラバラだったり、アイコンの有無などのパターンも想定しなければいけません。
注意点５：デバイスの違い
デザインする際に、PCやタブレット、スマートフォンなどの閲覧環境の違いはかなり大きいです。
特に主流であるレスポンシブでサイトを作る事が多いと思いますので、デザインしたものがコーディングでどの様に対応出来るのかをある程度は理解しておく必要があります。
注意点６：ブラウザの違い
昔ほどでは無いにしても、IEやChrome、Firefoxなどブラウザ毎に微妙に見た目が違う事も。
デフォルトで設定されているフォントやフォントサイズもPCとスマホで、更に言えば、iOSかAndroidなのかでも違います。
注意点７：実装、コーディングのし易さ
コーディングのし易さを前提にデザインする訳ではありませんが、レスポンシブに適さないレイアウトだとか装飾の付け方をしていないか？気にしておいた方が良いでしょう。
例えば、画像を使わずともCSSだけで出来る表現にする事も必要です。デザインにこだわる気持ちは分かりますが、落とし所の見極めも必要です。
作業工数が大きく変わってきますし、SEOの問題もあります。制作の工数にも影響する事を忘れない様にしましょう。
まとめ
グラフィックデザインでは印刷会社へ入稿作業まで行う様に、Webデザインではサーバーにテストアップして表示確認、問題が無ければ本番環境のサーバーヘアップする流れになります。
テストアップで表示確認出来る為、WEBデザインの場合はいくらでも簡単に修正出来るんでしょ？ってくらいに軽く考えているクライアントも多いです。
自社サイトでは無くクライアント案件であれば、しっかりと契約書で修正回数の制限を決めておきましょう。
この様に自社案件なのか、クライアント案件なのかでも制作の進め方や対応方法は変わってきます。
いかがでしたか？以上の記事が参考になれば嬉しいです。
note
