logo-idv ico_pp

新人Webデザイナーが学んだ3つの考え方

デザイン

新人Webデザイナーが学んだ3つの考え方
こんにちは、インディバルUXデザイン室のWebデザイナーです。2018年に新卒入社しましたが、気付けばあっという間に一年四ヶ月経っていました。
そこで本記事では、手がけた仕事から学んだ3つの考え方をまとめました。これからデザイナーになる方に、少しでも参考になれば嬉しいです。
 
内容は
・仕事をもらったらまずステップ分解
・創造より真似る
・ユーザーニーズで多角的に考慮する
仕事としては、バナー制作、UIデザイン、UXデザインになります。

仕事をもらったら、まずステップ分解

会社に入ったばかりの頃はとにかくバリバリと働いている人間に憧れ、仕事を受け取ったら「はい!」「かしこまり!(>ロ<)ゝ」の勢いですぐさま着手していました。
例として、バナー制作の仕事での失敗があります。私は依頼後すぐに制作をスタートしてしまいましたが、進行していくうちに、デザインや配色で多数のデザインパターンが出来てしまいました。さらにPinterestなどを参考にするうちに、「ああでもない、こうでもない」と目移りして絞れない沼に落ち、結果としてかなりの時間を無駄にしてしまいました。
この失敗は、制作ステップの切り分けがうまく出来ていなかったことが原因です。
 
現在の自分の制作ステップは、大まかに下記のようになります。
 
STEP1:軽く要件を確認
インディバルのバナー制作案件は、文言や画像などが決まっている状態での制作依頼が多いです。そのため、何を見せる、誰に見せる、見た人にどうなって欲しいなどの訴求ポイントを、制作に入る前にもう一度確認した方がその先の進行がスムーズになります。
また自分の場合、完成したバナーを掲出する位置も考慮します。すでに存在するWebサイトで掲出位置が固定されている場合は、バナーへ目線が行くように、周りとのコントラストを意識します。
 
STEP2:ラフ案作成
まずはテキストだけを入れて文字サイズを見ながら、訴求軸の優先順番と画面のバランスを調整します。画面サイズなどの原因で、文言を若干変更するなどの作業も必要になります。
 
STEP3:デザイン・装飾
 
STEP4:もう一回STEP1を振り返る
ここはかなり大事です。ついついオシャレでかっこいいものを作りたがる新人デザイナーは、振り返ることをしないと訴求ポイントからズレてしまう可能性があります。
 
STEP5:Pinterest
みんな大好きPinterest。インスピレーションを集めるには良いサイトですが、新人は制作段階で見てしまうと、おしゃれなバナーに目移りして左右されがちです。
デザインがほぼ決まった段階で、「背景を参考にする」「見出しの装飾を参考にする」というように、明確な目的を持って一つ手を加える目的で使います。
 
簡単そうに見えますが、ステップごとに作業を切り分け、1つの作業を行なって居るときは他のステップに右往左往しないのが肝心です。
もっと詳しくデザイン手順を知るには、株式会社LIGさんの「新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ」という記事をおすすめします。
 
 

創造より真似る

スキル不足の新人が「真似ることから始めよう」というのはセオリーですが、更に言いたいのは、UX思考にある「Jakob’s Law(ヤコブの法則)」です。
それは「ユーザーが既に他のWebサイトで多くの時間を費やしていることは、彼らは新しいサイトをみるときも、もう知っている既存のサイトと同じような形を好む、ということを意味する。」ということです。

例えば、日本国内のアルバイトサイトを例にとってみます。
求人の募集内容を記した求人詳細ページは、デザインこそ違いますが構成と配置はとても似通っています。募集タイトルの下に、スライドで動く写真画像と説明の文章があり、ページの下の方には「応募する」ボタンと「お気に入り」ボタンが来ます。
なぜかというと、それがユーザーが一番馴染みの深い、受け入れやすい構成だからです。
新人Webデザイナーが学んだ3つの考え方
 
新人デザイナーはよく無意識に他人の作品(特に競合サービス)と差をつけたがると思いますが、上記の理由からそれは間違いであると言えます。
 
もう一つの例はアイコンです。
アイコンは普遍的で、意味が伝わりやすいものでなければいけません。左向きの矢印であれば「戻る」、三本の横線が縦に並ぶと「メニュー」、そういうのは私たちが多くのサービスに触れることで既に学習できた認識です。
したがって、そこに時間を費やす必要はありません。私たちが普段よく目にするアイコンをシンプルに選択し、残った時間をユーザーの導線などを考えるのに使った方が効率的で賢明ではないかと思います。

よく目にするアイコンの例

ユーザーニーズを多角的に考慮する

ある案件で、補足説明が出るモーダルウィンドウのボタンをデザインする機会がありました。私は「この補足説明の存在を知らなかったらユーザーは困るだろう」と思い、押しやすいように濃いグレーの色でデザインしました。
しかしそのデザインは、上司に「見たい人だけ分かればいいよ。しかもユーザーは一回押したらもう学習できる。目立ちすぎると邪魔だよ。」と言われたため、薄いライトグレーに変更することになりました。
 
これは非常にありがちな、「一種類のニーズにしかフォーカスできていない」状態です。
 
世間にいる多くの新人デザイナーが、私のように「自分にはデザインの力があるから、その力で何かに貢献したい」と考え、相手の潜在的なニーズを全て満たそうとします。
しかし、仕事上では「相手」とは、一般的なユーザーだけではありません。クライアントや自社もまた、ニーズを持った「相手」なのです。さらにユーザーの中にも、ニーズを持つ人と持たない人が存在します。
全てのグループのニーズを満たそうとすると、矛盾になってしまいがちです。

そういう時の解決策は
・analyticsツールを見る → 定量的な数値がわかる
・先輩に聞く → 過去に似た形のABテストなど行ったかどうか、その結果
・企画さんに聞く → 機能、クライアントの利益に影響が出るかが分かる
 
「ユーザーが押しやすいから良いだろう」と思い込んで作業するのではなく、このニーズを持つグループの属性、シェア、他グループとの利益関係を多角的、論理的に考慮してから、どのグループを優先するか決めましょう。
 
以上です。
 
世間的にデザイナーは「モノ作りの仕事」というイメージが強いと思いますが、一年目の仕事を通じて抱いた感想としては、作成のスキルよりも、土台となる考え方のトレーニングの方が大事だと思いました。
 
最後までお読みいただきありがとうございました!
 

執筆者プロフィール

2018年に新卒入社したWebデザイナーです。趣味は自力旅と海外ドラマ鑑賞です。MCUの「アベンジャーズ」シリーズと9年間追いかけていたドラマ「ゲーム・オブ・スローンズ」が最近終わった事でとても寂しく、中国のSF小説「三体」を次の楽しみとして狙っています。