グラフィックデザイナーがWEBデザインをやる時の10個の落とし穴

WEBデザインの初心者、もしくはグラフィックデザイナーがはじめにWEBデザインを取り組む時、10個注意しないといけない落とし穴をまとめてみました。

スポンサーリンク

目次

はじめに

デザイナーのキャリアでは、グラフィックデザイン→WEBデザインという流れが多い(と聞いています)です。ちょうど自分もこの流れで、当初も本当に色々苦労してました。

まだまだ深い部分がたくさんあると思いますが、この記事はざっくり基本の部分をまとめてみましたので、ぜひ参考していただければ嬉しいです。

落とし穴1:カラーモード

DTPの世界では、印刷のインク具合によってCMYKのカラーモードで作成するのは常識です。ですが、WEBデザインでは基本モニターからの発色となりますので、ここはデザインツールを忘れなく設定をRGBに変更しましょう。

落とし穴2:作成ツール

DTPでは、Adobe IllustratorやAdobe Indesignで作成するのはほとんどですが、いざWEBデザインを作成する時、一旦作成ツールの選定について真剣に考えましょう。

同じAdobe系のphotoshopは、IllustratorよりWEBデザインに向いています。画像の書き出しとかの設定が便利だからです。

しかし、特にこの5,6年でアプリでのUIデザインでは莫大な需要が一気に増えてきて、それに対するアプリデザインを特化しているデザイン作成ツールもたくさん出てきました。しっかりコードを実装するメンバーと相談して、どのツールを使うのは慎重に決めましょう。

落とし穴3:ピクセルを意識

印刷物の単位ミリメートルとは違って、WEBデザインの単位はピクセル(px)です。最小単位は1pxですので、オブジェを作成する時端数が出ないように注意しましょう。

落とし穴4:デザイン指示書の作成

やっとデザインが完了しました。グラフィックデザインでは印刷会社に納品する形です(ここまで最終データのチェック何度も何度もしてやっと提出できるという大変な作業をグラフィックデザイナーの時期を思い出しました)。

WEBデザインの場合はそれみたいな大変な納品作業はないですが、実装のメンバーにちゃんと指示できるようにデザインの指示書が必要です。

photoshopで作成する場合psdデータそのままコーダーに渡す、もしくは別でpdfを作成して各パーツの大きさ・間隔など明記する指示書を渡すなど、会社によってやり方も様々です。デザインが完了しても、指示書がない限り完了にはなりませんね。

落とし穴5:コンテンツ内容の考慮

WEBデザインの各コンテンツを作成しました。が、実際に当て込む内容はデータベースから引っ張ってボリュームはバラバラになります。極端の場合を考慮しないといけません。

項目数/文字数が多い場合

デザインカンプ上では綺麗に文字を組んでいました。ですが、共通のパーツを使っていろんなところに使い回している場合かなり多いと思いますので、めちゃくちゃ文字数の多い場合はどうなるのか、考えないといけません。

特にコンテンツの高さや、揃え方などしっかりデザイナーの方で決めておいた必要があります。

項目数/文字数が少ない場合

逆の場合、めちゃくちゃ文字数の少ない場合、スカスカになって全体のバランスは崩れないか、諸々の配慮が必要です。

空欄の場合

万が一、何もない場合はどういう見せ方になるのか、決めておかないといけません。項目ごとトルツメか、何かしらの空欄メッセージを入れるかの対応が必要です。

落とし穴6:パーツの状態の考慮

コンテンツ(文字)の考慮以外、オブジェ(特にボタン・リンク)のそれぞれの状態を決めておく必要もあります。

ボタン/リンクの状態

ボタン系などは、通常以外色々状態がありますので確認していきましょう。

カーソル合わせる時

マウスのカーソルをボタンに合わせる時、コーディング上ではhover(ホバー)という状態の変化です。ボタン全体が半透明になったり、色がふわっと変わったり、色々アニメーションをコーディングで実装できます。デザイナーの方で決めてあげると実装も楽になります。

訪問済みのリンク

ボタンをクリックしたあとの状態です。最近では特に違う見せ方にする場合が少なくなってきましたので参考程度になります。

アクティブ上のボタン

特にタブやナビゲーションボタンのことを指します。ヘッダーなどで現在いるページのみリンクの文字色が違ったり、アンダーバーが付いたりします。

クリックできないリンク

何かしらの条件をクリアしないとボタンがクリックできないという状態です。個人情報の取り扱いにチェックを入れないと送信ボタン押せないとか。

入力欄の状態

入力フォームとか、各項目も一つ以上の状態があります。漏れなくデザインを決めていきましょう。

クリックしている時

入力欄をクリックして、入力しようとしている時の状態です。よくあるのは枠線が変わる処理です。

入力済みの項目

アプリデザインでよくある処理は入力済みで内容も問題ない場合チェックなどOKを示すアイコンが出ます。次の「エラー項目」とセットで考えてよいでしょう。

エラー項目

項目を入力したけどフォーマットが違ったりするとエラーメッセージを出す必要があります。

入力不可の項目

入力不可・不要、もしくは選択できない項目についての処理です。全体をグレーにするとか、もしくは半透明にするのはよく見かけます。

落とし穴7:動きの考慮

よりユーザー体験を向上するために、ちょっとした動きを付け加えると、サイト全体の印象も変わります。

動き方によって簡単にコーディングで実装できるものもあります。スクロールするとふわっとコンテンツが出たり消えたりとかです。

落とし穴8:デバイスの考慮

違うデバイス(端末)によって、見え方も変わる、いわゆるレスポンシブ対応です。メジャーなデバイスはデスクトップ(PC)、タブレット、スマートフォンです。成り行きでリサイズ・段落ちするように実装のメンバーに依頼してもいいですが、しっかりデバイスによって情報整理も含めてデザインをしっかり調整した方がいいです。

落とし穴9:ブラウザの考慮

違うブラウザで同じウェブページを開いても、微妙に変わる場合も結構あります。フォントの違いでレイアウトが崩れたりします。

この部分はメインにコーディングで対応する形ですが、念の為「このようなこともあるよ」と知っておいた方が無難でしょう。

落とし穴10:実装の考慮

実装しやすさを考慮しつつデザインを作成します。ある程度のコーディング知識がないとなかなかできないですが、この部分を配慮しておくとコーディングのフェーズもかなり楽になります。

まとめ

いかがでしょうか?グラフィックデザインでは最後の仕上げには印刷会社さんとのやり取りが必要で、WEBデザインの場合は実装メンバー(コーダー・エンジニア)とのやり取り・事前の諸々考慮が必要です。

前提知識として覚えておいたほうがお互いに幸せになりますね。

スポンサーリンク
トップへ戻る