新人Webデザイナーが現場レベルでよく注意されるポイントのまとめ。

  • このエントリーをはてなブックマークに追加

こんにちは。
今回はデザイナーでもないのにデザインのことを書きます。

私自身はデザイナーという肩書は持っていませんが、ディレクターという立場でクライアントと接していると、デザインでよくうける指摘事項や注意点があります。

「一緒にやったデザイナーさんだけなのかなあ。。」と思っていると、色々な会社のデザイナーさんとやっていても、共通している部分が多々あり、デザインやレイアウトの参考サイトや書籍は沢山ありますが、現場レベルでこういうことを書いているサイトがなかったのでまとめてみました。

特に経験の浅いデザイナーさんに多い傾向に思いますので、タイトルに「新人Webデザイナー」と入れさせていただきました。

みんながみんなというわけではありませんが、Web制作会社で代理店経由の仕事をやっていると、必ず注意されるチェックポイントがあったりします。
デザイナーではなくても一緒に仕事をしていると学ぶことは多いです。

デザインのノウハウやアイデアではなく、現場レベルでディレクターとして関わっていて、一緒になって感じたり注意されたことをまとめています。

これからWebデザイナーになろうとしている人や修行中の方はちょっと意識しただけで随分違うと思います。
こういうポイントをしっかり押さえておくと、ボツを出される確率は少なくなってきます。

いろんなサイトのデザインを見るのも良いですが、それ以前の制作のうえでの注意ポイントを挙げています。

参考までに読んでみてください。


<<制作するうえでの注意>>

1. グリッドデザインを意識して!

グリッドデザインになっていない。

まずこれが一番多いです。
レイアウトのどこの部分どのパーツをそろえているのかよく分からない。

このグリッドデザインができていないと、素人目に見ても不安定なんです。
(なんか変、なんかおかしい、言葉の表現がわからない場合こういう感じで指摘を受けます。)

きっちりグリッドのマス目に沿ってそろえる。
これはデザインテイスト以前にWebデザインでは必須です。(基本中の基本)
1pxくらいのずれならOKという感覚ではWebデザインはできないと思います。特に企業サイトなどカッチリしたサイトではきっちりしたグリッドデザインが求められます。

これができていないと代理店の方とかにすぐに指摘されますよ。
(この要素はどこに頭を合わせてるのとか。。)

2. マージン(余白)を適度にとる。

マージンをうまく取れずにギチギチで窮屈な感じ、またはマージンを取りすぎてスカスカな感じ、こういうデザインを第一案でよく見かけます。

シンプルなのに格好良いサイトは必ずマージンの取り方がすごくよくできています。

参考サイトを見るのであれば、どうしてこのデザインは格好良く見えるのか、自分もまったく同じように作ってみて違いを比べてみると良いと思います。ちょっとした余白の取り方で全然違います。
(これは昔いたデザイン会社で実際にやってみせてもらい感じました。)

3. デザインの理由を付けて。

よく、飾り付けで模様を入れたりしているデザインに対して、「どうしてこの飾りをつけているの?」と聞くと「なんとなく。。」という答えが返ってくることがありますが、デザインするときに細かい部分にも理由や意味をきちんと説明できるようにしたほうが良いです。

クライアントにはただ提出するのではなく、必ず説明が必要です。

昔の建築物の装飾や彫刻などにもすべて物語や意味があったりします。
家具や電化製品の形状デザインにも持ちやすい、使いやすいといった意味があります。

意味ないデザインはないと思うのです。

4. エレメント(要素)に統一性を。

リスト表示などで文言の行頭に三角の矢印などよくつけたりしていますが、これもどういう場合はこのマークをつけて、と統一性やルールを持たせてください。

意味なく好きにマークをつけていると、これも必ず見る人が見ると注意されます。
デザインにルールがない!」と。

5. 色味は客観的に。

色味などは個性が出るので、デザインするときの楽しみなのかも知れません。

ですが、ここも注意です。

自分の好きなカラーやトーンが必ずしも良いとは限りません。

色味はかなり個人の好き好きがでますので、外れるとかなり大きく印象変わります。
いろんな人の意見を聞いて最大公約数(割と万人に見やすい)を選択するのが無難です。

6. 指示とおりではなくワンポイントでも提案

これはワイヤーフレームにちょっと色やグラデーションをつけた程度のデザインになってしまわないようにということです。
ディレクターによってはワイヤーフレームに色などをつけてくる方もいますが、そのままデザインに反映してしまうとこれも指摘されます。

「これだとパワポがちょっときれいになった程度じゃないの?」

よくある指摘ですのでデザインする際には、よく考えてください。
パワポの資料をきれいに作り直すオペレーションではなく、あくまでデザイナーに求められるのはデザインですので。。

<<クライアントに提出するときの注意>>

1. デザイン案の意味を知ろう!

よく2案デザイン案を出して、と言われることがあります。
このとき2案の意味をきちんと理解して提出しないと怒られる事があります。

たとえば、色を変えて2案、ほとんどレイアウト同じで少しだけパーツの形を変えて2案などほとんど変わらないようなデザインで2案を出すとたいてい怒られるか呆れられます。
事前にどういう2案の出し方にするのか話しあっておく必要はあるかと思いますが、ただ2案と言われた場合は要注意です。

2案アイデアを出してクライアントに選択させるということは、2案が独立した2案でないと選択の余地がないということです。たとえばそれぞれレイアウトを変えてみる、とか明らかに異なる2案を出す必要があります。

こればかりは担当者によって感覚が違うのでなんともいえないのですが、少なくとも安易に2案出すと指摘は受けます。絶対に。

どちらも良くてどちらにするか迷うようなデザイン案を2案出せると最高ですね。

3. レイヤー名をきちんと付けて!

代理店さんがクライアントの場合など、急にPSDファイルやPINGファイルなどのデザインの元素材を納品物として求められることがあります。

こういう場合レイヤー名などきちんとつけていないと、結局納品用にレイヤー名つけるなどの作業が発生したりします。

他の方にお願いする場合のことも考えてレイヤー名は他人が見ても分かるようにきちんとつけておきましょう。

●最後に、、、

「デザインに正解はない」

なんていいますが、プロとして仕事でやっている以上依頼主がいるわけで、依頼主がOKであればそれが正解なんです。
もちろん、個人により感性の違いはありますし、デザイン論みたいな観点で言い始めると確かに正解なんてないのかもしれません。

でも、それを
逃げの口実に使うことは仕事としては不正解!

「あのクライアントはセンスないからなあ・・・」と思うこともあるかも知れませんが、依頼主の満足度は受注している以上は必須なんです。
まずはクライアントの要望ありきで、プラスアルファでプロとして提案をしてあげれば良いのです。
ダサいと思う要求があった場合、ダサくないようにデザインしてあげるのがデザイナーなのではないでしょうか?

何故最後にこんなことを書きだすのかといいますと、Web業界では学校を卒業してすぐに「Webデザイナー」という肩書きをもらえたり、自分で名乗っていたりするのを見かけます。

デザイナー以外の肩書き、ディレクターやプロデューサーなんていうのもそうですが、簡単に肩書きを名乗れることに違和感を感じます。(もちろん会社によって異なるかとは思いますが。。。)

肩書き負けしているのではないか?

もちろん自分自身にもこの肩書きを名乗ってよいのか?という疑問が生まれるときもあります。

料理人や職人さんなんかは何年も下働きして目で盗んでやっと一人前になります。
武道でも何年も稽古をして試験を受けてやっと有段者になれます。
(剣道では1段取ったら1年、2段とったら2年。。。と段数によって次の段を受けるまできちんと稽古の年数が定められており、簡単に段位を取れるようにはなっていません。)

デザインは個性が出るので、自分自身の感性の投影のような部分もあり、デザイナーを目指す人にはそれなりに自己表現をしたい方が多いと思います。自分の個性を世の中にデザインでアピールしたいという気持ちもあると思います。

でも、新人デザイナーは「自己流」とか「自分の個性」みたいなものは捨てましょう!

プログラマーでもそうなのですが、学生時代にバリバリやっていても、やはりプロとしてやっている先輩方とは違いますし、業務でやっている人のスピードと技術は自己流のそれとは違います。

もちろん類まれなる才能のある方もいらっしゃるので、すべてがすべてにおいて当てはまるとは思いませんが、自己流はもっと自分を認めてもらえるようになってから徐々に出していけばよいと思います。

プロとして仕事にしたいのであれば、まずは我慢して人を納得させるデザインを作ればよいのだと思います。
個性とわがままは違います。

いきなり晴れやかな舞台には立てません。

Web業界は会社を転々と移る方が多いですが、これからWebデザイナーを目指される方は「我慢と辛抱」でがんばって欲しいのです。


<<あわせて読みたい>>

新人Webデザイナーが現場レベルでよく注意されるポイントのまとめ。 WebディレクターがWebエンジニアと円滑に仕事をするコツ 面白系Webサービスを何個も作ってみて、当たり前のことがやっと分かりました。
HTMLコーダーとエンジニアが効率良く仕事を進めるコツ

執筆者:高本

株式会社8bit 取締役の高本です。 社内のWebサービス企画、プログラミングや、売上・請求管理にいたるまで幅広く担当しております。

関連記事

プログラミング

【phpdotenv】PHPで環境変数を取り扱うお話

PHPでサーバーの環境ごとに設定ファイルを用意する場合、config.phpなどのファイルにデータベースの接続情報やAPIのキーなどをdefineで登録すると思います。 これは昔からある一般的なやり方ですが、例えば「ローカル環境やテスト環境と本番環境で情報を出し分けたい」「GitHubやSubversionなどに接続情報を管理されたくない」ということがあるかと思います。 Linuxの場合は「.env」でユーザーごとの情報をあらかじめ設定することが可能ですが、PHPだとデフォル […]

Webサービス

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

みなさん、reCAPTCHAを使ってますか? CAPTCHAと呼ばれる機能は問い合わせフォームやログインフォームなどいわゆるbot系対策として有効で、その中でもreCAPTCHAは無料かつ簡単に導入できるたため、様々な場所で使われてます。 目次1 2024年4月から実質有料化?2 他にないのだろうか?3 アカウントを作る4 PHPでの実装5 最後に 2024年4月から実質有料化? しかし、2024年4月から今まで100万リクエストまで無料だったのが、1アカウント合計1万リクエ […]

Webサイト制作

Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 目次1 そもそもWebアクセシビリティってなに?2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。