読者です 読者をやめる 読者になる 読者になる

IT系女子ログ

3年目 Webデザイナーが、最近気になるアレコレ

新人Webデザイナーの私が、1年目で指摘されたことを振り返る [デザイン編]

f:id:tosssaurus:20150321031605j:plain

昨年、未経験からWebデザイナーとして入社してはや1年が経とうとしています。ふと自分を客観的に見つめてみると、「思ってた程、成長していない…」ということに気づき、今更ながら焦り始めているところです。情けないですが。

Webのことも入社前に比べ、遥かに知識を得たし、デザインやコーディング、プログラムのことも少しは自力で調べられるくらいにはなりましたが、あまり実務で役立てられていない、成果を発揮できていないと思っています。

そういう訳で、だらだら2年目に突入する前に、1年間で指摘されたこととそれを踏まえた目標を記録しておきます。

まずは、デザインについてです。
コーディング編はこちら。

新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ

※自分の為のまとめなので、読みづらいかと思いますがご容赦頂けると幸いです。

指摘されたこと

f:id:tosssaurus:20150315230613p:plain
f:id:tosssaurus:20150315203059p:plain
f:id:tosssaurus:20150315204931j:plain

指摘を受けての反省

全体のラフを作る前に細部を作り込まない

入社したころは、「1ページデザインして」との指示があれば、上部から順番に詰めていっていました。
しかし、それでは完成するまで全体を確認できないし、完成してからデザインの方向性がズレていたと気づいたのなら……

恐ろしい事態ですが、最悪イチからやり直し…になりかねません。モチベーションも下がるし、何よりそれまでの時間が無駄になってしまいます。
勤めている以上はなるべく時間を無駄にしないよう、修正が安易なラフで一度確認するべきです。

全体のラフを作って、ディレクターさんにデザインの方向性の確認をして頂いてから、初めて細部を作り込んでいくベきです。

 

PhotoshopでWEBサイトのラフデザインを作る-初心者のためのWEBデザイン教室

Webデザインの仕方が分からない!初心者にすすめるデザインのコツ その2 | ブログ|東京のアプリデザイン制作会社|株式会社ハラハラ|harahara Inc.

 

30%の出来で、方向性の確認をする

上記と重なりますが、「デザイン"出来たら"ディレクターさんに確認して」と言われた場合の"出来たら"は、20〜30%くらいで確認しにいくこと。と入社後すぐに教わりました。

当初私の"出来たら"は120%でした…。
なので、1つ修正が入るとバランスを取るために、周囲も大幅に変えなければならない事態でした。
ある意味、進捗の確認は細かく行う、ということにも繋がるかもしれません。

 

新人Webデザイナーにありがちな5つのコミュニケーショントラブルとその解消法 | LPO研究所

クライアントに振り回されるWebデザイナーに共通した、たった一つの特徴 - studio room134

 

テクスチャーやパーツを使う

f:id:tosssaurus:20150315172803p:plain

テクスチャを使うと言えば、ソフトに入っているデフォルトのものばかりでした。それでは数が限られるし、多様していては素人っぽいですよね。フリー素材や、素材集、時にはTipsを見ながら自作したりと、テクスチャーやパーツなどちょっとしたところに手が加えられていると、引き締まったデザインになると思います。

 

デザインに迷ったら確認したい!30個の無料テクスチャ素材まとめ - Photoshop VIP

フリーテクスチャ素材館/トップページ(Top Page)

ウェブデザインにおけるテクスチャやパターンの使い方をしっかり学びたい人用のまとめ | コリス

 

要素を置いただけではダメ

要素を置いただけ、という認識ではなかったのですが、あまりに手を加えていなかったので、何回も注意されました。

時には整列させたり、時には抑揚をつけたり、手を加えてあげましょう。

 

整列させる

デザインの基本は整列です。なんとなく並べただけでは、整列していません。ルールを持って、受け手に整列していると伝わって初めて整列しているデザインになります。

整列することによって見やすくなったり、強調されたり色んな効果があります。整列してから初めて、抑揚をつけたり、何かひとつ目立たせたりと変化をつけることを検討します。

 

マージンのとり方やカラーなどルールを統一し、ルールを守る

f:id:tosssaurus:20150318231928p:plain

これも初期で教わりました。いわゆる"トンマナ(トーン&マナー)"です。メインとなる色やコンテンツごとのマージンですが、それほど多くありません。

些細なことですが、トンマナをきっちり守ることがデザインのクオリティに繋がります。

 

アクセントでルールを破る遊びのコンテンツがあってもいい

あまり整列にこだわりすぎると、今度はガチガチの面白みの少ないデザインばかりになってきます。時にはルールを破ったコンテンツをスパイスで置くのことも大事です。

 

デザインする上で要素を目立たせるという事 - YATのBLOG

 

一カ所変更があれば影響する周りのデザインの微調整も必要

変更が一カ所だけだからといって、一カ所修正して終わりではありません。変更した要素が、周囲のデザインに影響している要素だったなら、もちろん周囲の変更も必要になってきます。

デザインは詰めれば詰める程、周囲のバランスをギリギリの所で保っています。それが一カ所変更されたなら当然周囲もバランスが崩れているので、調整が必要だ、と教わりました。

私はこのことを教わってから、デザインに対する考えが変りました。始めは、OKが出ている周囲まで変更することはないのに、と納得出来なかったのですが、デザイン関連の本を読んでいくうちに理解できました。今では、より深くデザインについて考えるようになりました。

 

クライアントよ、お前の依頼の大変さを思い知れ!これがデザイナーにとっての「デザイン修正」だ! | gori.me(ゴリミー)

 

フォントを考えて選ぶ

f:id:tosssaurus:20150315203059p:plain

フォントはたくさんあって、お気に入りのフォントを多用してしまいがちですが、それぞれのフォントの成り立ちやデザインの意図などを少し調べるだけで、"このデザインの時はこのフォント"という使い方ができるようになると思います。

 

SUGAI WORLD log: フォントの選び方

書体の選び方|伝わるデザイン

フォントの基本的な選び方 | Arch

 

フォントのカーニングは必ずする

文字の左右の空間はそれぞれで違うもの。デフォルトのままだと、美しくないことが多いので、必ずカーニングして整えてあげます。

 

デザインに関わる人へ。最低限押さえたいフォントの基礎知識あれこれ | 株式会社LIG

デザイナーは文字詰めに命をかけよう ~和文と欧文のフォーマットの違いから考える~ | 株式会社アクトゼロ|ソーシャルメディアマーケティング・訪日インバウンド施策

 

文字はまず第一に可読性があること
デザインに合うようテキストを調整することは必須ですが、デザインにはめ込みたいあまり、誰が読めるか分からないほど小さい文字になってしまうこともありました。もはや線にしか見えず、文字の意味がありません。
まず第一に読み手に正しく読んでもらえなければ、文字を置く意味がありません。読めなくてもいいのであれば、違うパーツを置くなど、最適なものを用いるべきです。
 
テキスト量を調整して読みやすくする

f:id:tosssaurus:20150318231942p:plain

文字だらけの箇所は離脱率が上がってしまいます。
読みやすいよう段落をつけたり、テキストの区切りとして画像やイラストなどを配置したり、読みやすいよう、飽きないようレイアウトを工夫したりすることもデザインのひとつです。
 
マージンは意図して取る

マージンもデザインを構成する要素のひとつです。

なぜAとBは同じ高さなのか、なぜAとCは違う高さなのか、なぜDはこんなにマージンをとっているのか、きちんと意図がないと全体のバランスが変わってきてしまいます。

 

新人Webデザイナーがワンラックアップするためのマージン基礎

これが僕のミニマルウェブデザインの極意 | バンクーバーのうぇぶ屋

 

写真は必ず補正する

f:id:tosssaurus:20150315204931j:plain

どんなに綺麗に撮れている写真でも、デザインにはめてみると調整は必ず必要です。デザインとのバランスを取るために色味を変えたり、フォーカスを強調したり調整箇所はたくさんあるはずです。

そして、編集していくうちに劣化しないよう取り扱いには注意します。

せっかくカメラマンが手間暇かけて撮影した綺麗な写真でも、デザインに合わせて丁寧にレタッチした写真でも、配置する際に劣化させたり、不適切な書き出しをしていたら全て台無しです。

知識のない私は何度も画像を劣化させてしまい、「そんな質の低い素材にするなら、素材を使わない方がよっぽどマシ」と先輩にガツンと注意され、それから特に画像を使う際は気をつけるようになりました。その日は帰って泣きましたね。そして、敬遠していたPhotoshopや、レタッチなどの勉強もするようになりました。

 

初心者でも簡単に人物補正する3つのテクニック-Photoshop- | 秋田県webデザイナー【weblog】|秋田HP制作・webサイト制作

プロとして恥ずかしいPhotoshopのタブー|Photoshopの基本 : webra

Fireworksで、張り込んだ画像のリサイズ時に 劣化してしまう現象の対処方法 | Fireworksマニア

 

あからさまに効果を多用すると素人臭が出る
事あるごとにシャドウや透過を使っていませんか?私は初めの頃、大好きな斜線やチェックのパターンを必ず使っていました…。デザインに使った理由が「好きだから」、ではデザイナーとは名乗れないかもしれません。
本当に必要な効果なのか。必要だとしても、ドロップシャドウの色、透明度、距離、方向などベストかどうか。そもそもドロップシャドウよりもっと適切な影をデザインするべきでないか。便利な効果も意図して使ってこそです。
 
効果は必要な箇所だけさりげなく使う
同じような話ですが、効果をつけていけば、深みが出てきてより説得力のあるデザインになります。
しかし、Webデザインで気をつけなければならないのは、最終的にブラウザで見て頂くデザインだということです。クライアント(見る側)のブラウザやパソコンの性能は選べません。
 <
どんなに手の凝ったデザインでも画像ばかりだと、容量が大きくてなかなか表示されず、表示される前に直帰されるサイトだったり、そもそもSEO的に検索にヒットしづらく、一部にしか見てもらえていないサイトだったら…。砂漠に広告を出すようなものですよね。
それが意図していることなら問題ないですが。

f:id:tosssaurus:20150315212532j:plain

たとえ表示が遅くなろうとも、画像にする必要はあるか。cssで実現出来ないか。コーディングされた自分のデザインをいろんな環境で表示して、確認することも大切です。
 
レイヤーは整理する
レイヤーを整理しておかないと、コーディングに必要な画像のスライスの時や修正が入った時など非常に更新性が悪くなります。
最悪なのは、自分以外の方が編集してくださる時に支障が出てしまうことです。自分の信用も必ず下がりますし、何より手伝ってくださる方の時間を奪ってしまいかねません。レイヤー整理に1日かかった…なんてもったいないですよね。
慣れない頃は手間ですが制作時にレイヤー整理に気を配っていれば、仕事が円滑に進みます。レイヤー整理もデザインのうちです。
 
リンク箇所は分かりやすく目立たせる

f:id:tosssaurus:20150315223642p:plain

押してもらえなければ、リンクの意味がありません。多少周囲より浮いている方が、読み手はリンクとして認識しやすいです。
 
可変するところは、可変した際のデザイン崩れが起こらないよう想定してデザインする。
例えば、新着情報の欄。文字数制限がないなら、タイトルが1記事だけ300文字になってしまったときはデザインにどう影響しますか?背景を可変させるのか、文字数制限を設定するのか、一定文字数以上は非表示にするのか等を想定しておかなければ、サイトを更新すればする程デザインが崩れていく事態になりかねませんよね。
可変しても支障がないデザインになるようコーディングしなければなりません。
Webデザインは更新性も大切なデザインのひとつです。
 
印刷して全体を確認、ブラウザの100%表示で確認を必ずする
いいWebデザインは印刷しても成立するデザインだそうです。
特にフッターでそうまとめているか、を見るといいそうです。
 
キービジュアルの作り込み方を勉強する
どうも写真の上にテキストを載せるのが出来なくて、いつも残念なキービジュアルになってしまいます。かっこいいキービジュアルを作れるよう引き出しを増やしたいと思います。バナー制作が練習にいいみたいです。
 
Webサイト集で常にいいサイトを見る、真似をしてみる
いいデザイナーはユーザーの感覚をよく知っている、とよく言われます。まずはサイトのユーザーでなければ、目を引くデザイン、心地よいデザイン、さりげないデザインなど実際にすることは難しいでしょうし、作り手と受け手の間にギャップが生まれやすくなるでしょう。
また、新しい技術が絶え間ないので、トレンドの移り変わりも速いです。情報収集はWebデザイナーにとって生命線とも言えます。
入社したころ、RSSを知らなかったので質問しに行ったのですが、「自分で調べて。利用してないのはヤバイよ」と、言われてからはすぐに調べて、登録しました。今では気になったものはすぐEvernoteに保存できるので、業務で分からないことがあったときに大変役立っています。
Webサイトもそうですが、snsなど、色んなWebサービスを普段から利用しておくことも大切です。
 
作業工数がどのくらいかかるか予想する、実際にかかった工数を記録して誤差をなくす

f:id:tosssaurus:20150315230010p:plain

初めの頃、丸1日かかった作業を「本当は2時間の作業」と言われたり、予定の時間までに終わらず先輩に手伝って頂き、迷惑をかけてしまったりと自分の作業にかかる時間が見えず苦労しました。(今もですが…)
初めての業務を手をつける前から作業見積もりを出すなんて無理です。しかし、仕事である以上締め切りはあるのです。「この業務はいつ終わる?」と聞かれて、「初めての作業なので分かりません」で終わるのではなく、「初めての作業があるので、どのくらい時間がかかるか調べたいので◯分ください」と切り返しなさいと教わりました。
その上で今は、この作業は調べながら◯分くらいでできそう、とか、これは動作確認が必要そうなので余分に時間が必要、とか、色んな可能性を考えた作業見積もりを出すようにしています。
 
最近は自分の作業記録だけでなく、作業にとりかかる前に作業見積もりを出し、実際にかかった工数との誤差と、その原因を考えるようにしています。
私の場合、誤差が出るのはたいてい、想定していなかった作業に時間を取られていたり、自分の認識している作業スピードより手が遅いのが主な原因です。
 
 
作業予定工数は確認、調整の時間も入れる
確認、調整の時間を想定せずに作業見積もりを出してしまうと、結果的にクオリティの低いものができてしまいます。どんなにいいデザインでも、誤字脱字があるだけで、誤った情報を伝えることになるのでそれだけでデザインどころではなくなります。
また、確認には自分以外の人の手が必要なことが多いので、スケジュール調整の時間など、さらに加味する必要があります。
 

2年目の目標

  • サイト研究
  • 情報収集
  • 真似ぶ
  • 画像編集の特訓
  • ソフト操作の特訓
  • 作業工数の見積もりの正確化
  • TO DO リスト作る
  • デザインの本を毎月1冊以上読む
  • キービジュアルの作り方研究
  • バナーを沢山制作
  • アイコンを制作
  • インフォグラフィックを制作

最後に

長々と書いてしまいましたが、実はもっともっと細かい反省はたくさんあります。ここに書いたことを来年度はまず注意されないよう、新人に教える時のポイントにできるように頑張ります!