Webデザイナーの極意を伝授｜成果を出すプロの考え方と上達の秘訣

目的から逆算する

手を動かす前に、そのサイトやバナーが何のためにあるのかを明確にします。購入なのか、資料請求なのか、ブランドの印象を高めることなのかによって、正しいデザインは変わります。たとえば信頼感が大切な法律事務所や金融機関のサイトで、目立つからと派手な蛍光色を多用するのは、目的から逆算できていない典型例です。

クライアントから「明るい色にしてほしい」と言われたときも、そのまま受け取るのではなく、なぜ明るくしたいのかを掘り下げます。「親しみやすくしたい」「主な利用者がWebに慣れていない年配の方だから」と理由がわかれば、色だけでなく、文字を大きくする、文字と背景の明るさの差をはっきりさせる、ボタンを減らすといった、より本質的な提案ができます。言われたこと以上の提案ができる人は、長く頼られるパートナーになります。

利用者の状況を具体的に想像する

デザインの主役は、それを使う利用者です。どんな場面でサイトを開き、何を探しているのかを具体的に思い描きます。通勤電車で片手でスマートフォンを操作している人なら、大切なボタンは親指が届きやすい画面の下側にあるか、電波が弱い場所でも表示が重くならないかを確かめます。家事の合間に見る人なら、一目でメリットが伝わる見出しや、押し間違えにくいボタンの間隔が大切になります。夜にじっくり比較検討する人なら、他社との違いを整理した表や、判断材料になる情報の置き場所を丁寧に考えます。

人の視線の動き方の傾向を知っておくのも役立ちます。文章の多いページでは左上から横に読み、下へ進むにつれて左側を中心に拾い読みするF字型の動きが見られることが、視線の調査で知られています。こうした傾向を踏まえて重要な情報を置くと、利用者が迷わず目的の場所にたどり着けます。

情報の優先順位を決めてから形にする

いきなり色を塗ったり画像を加工したりするのは、柱を立てずに壁紙を貼るようなものです。伝えたいことがたくさんあっても、利用者が一度に受け取れる量には限りがあります。情報を重要なもの、必要なもの、補足に分け、特に伝えたい一言がすぐ目に入るように設計しましょう。

たとえばサービス紹介のページで、価格、実績、サポート体制、使い方、よくある質問を同じ大きさで並べると、どこから読めばいいかわからなくなります。最初に主なメリットと価格を見せ、残りはスクロールして読めるようにするなど、あえて目立たせない部分を作る引き算が、Webデザイナーの腕の見せどころです。構成はワイヤーフレームの段階でクライアントと合意しておくと、手戻りを防げます。制作の手順はWebデザイナーのメソッドで詳しく解説しています。

手を動かす量を増やす

考えるだけでなく、実際に作る量も大切です。優れたサイトをただ眺めるのではなく、実際に同じものを作ってみる模写は効果的な練習です。その際は、余白の大きさや行間を測り、「なぜこの値なのか」を考えながら手を動かします。たくさんのサイトを流し見するより、一つのサイトを細部まで再現するほうが、判断の引き出しが増えます。模写は練習として自分の手元で行い、他人のデザインを自分の作品として公開しないよう注意しましょう。

完璧を目指して一つの作品を抱え込むより、バナー一枚やページの一部分でもいいので、作り切る経験を重ねましょう。完成させるまでには、フォントや色、配置について小さな決断を何度も繰り返します。その積み重ねが、制作の速さと判断の確かさにつながります。

客観的な目で改善を続ける

作り終えた直後は達成感から冷静な判断がしにくくなります。少し時間を置いてから、初めてそのサイトを使う人の目線で見直しましょう。スマートフォンの実機で押しにくいボタンはないか、文字が読みにくくないかを一つずつ確かめます。誤字脱字の確認も、信頼を守る大切な工程です。確認の方法はWebデザイナーの校正で紹介しています。

公開後に数字を確認できる環境なら、クリックされた割合や、比較テストの結果を受け止めましょう。自分のこだわりより、実際の利用者の反応をもとに改善案を出し続けることが、成果につながるデザインへの近道です。

センスがある人だけが活躍できる

評価されているデザイナーの多くは、感覚だけでなく、根拠を持って仕事をしています。なぜこの配色なのか、なぜこのレイアウトなのかを説明できる人が、結果として信頼を得ています。センスと呼ばれるものも、根拠のある判断を積み重ねた先に身についていく部分が多くあります。

流行を取り入れれば評価される

デザインの流行は毎年のように変わりますが、流行は手段であって目的ではありません。年配の方が多く利用するサイトに最新の表現を取り入れても、利用者が戸惑うだけです。流行を知ったうえで、あえて使わない判断ができることも極意の一つです。

ツールが使えれば仕事になる

FigmaやPhotoshopが使えることは、Webデザイナーとしての出発点にすぎません。包丁を持っているだけでは料理人になれないのと同じで、大切なのは、何を、誰のために、どんな意図で作るかという考え方です。job tagでも、入職にあたって特に学歴や資格は必要とされないが、デザインの基礎知識・技術は必要と説明されています。基礎の確認はWebデザイナーの基本で行えます。

デザインの理由を言葉にする

自分のデザインについて「なんとなく綺麗」という言葉を使わないと決め、すべての要素に理由を添える練習をしましょう。「士業のサイトなので信頼感を出すために落ち着いた紺色を軸にし、見出しには品のある明朝体を使った」のように説明できるようになると、判断が速くなり、クライアントへの説明もスムーズになります。

デザインの基本原則を体に染み込ませる

応用的な考え方を支えるのは、近接、整列、反復、対比といったデザインの基本原則です。関係のある要素は近くに置き、端をそろえ、同じ役割のものは同じ見た目にし、強弱をはっきりつける。この基本を意識しなくても使えるようになるまで繰り返し練習しましょう。ショートカットキーや部品の使い回しで作業を速くすると、その分、意図を考える時間を確保できます。学び方の全体像はWebデザイナーの勉強方法で紹介しています。

他の人の意見をもらう機会を作る

独学で作り続けていると、どうしても見方が偏ります。勉強会やコミュニティに参加したり、経験のあるデザイナーに作品を見てもらったりして、外からの意見を受ける機会を作りましょう。学び方に迷う場合は、Webデザインスクールを比較してみるのも一つの方法です。個別のスクールを検討する場合は、デジタルハリウッドSTUDIO by LIGの評判、WEBCOACH（ウェブコーチ）の評判、Winスクールの評判、rimomo（リモモ）の評判も参考になります。