ITスキル WEBデザイナー

【必見】WEBデザイン学習にセンスは不要です【4大原則で8割カバー/初心者向け】

2022年9月9日

【必見】WEBデザイン学習にセンスは不要です【4大原則で8割カバー/初心者向け】
ミヤビ

WEBデザインって、センスが必要かな?WEBデザイナーに転職したいんだけど、美的センスもないし、レイアウトも悲惨ですし、転職はむずかしいかな?デザインのセンスがなくても、イケイケなデザインに仕上げる方法を教えてください。

こんなお悩みを解決します。

本記事の内容

  • WEBデザイン学習にセンスは不要です
  • WEBデザイン学習でセンスを身につける方法

この記事を書いてる僕は、ジョージアで暮らすデジタルノマド。デザインセンスはありませんが、過去に、フロントエンドエンジニアとして働いてました。

WEBデザインに、センスが必要と思ってませんか?

本記事では、WEBデザイン学習をしてる初心者向けに、WEBデザイン学習にセンスが不要である理由を解説します。

この記事を読むと、センスがなくても見やすいレイアウトを作れるようになり、WEBデザイナー転職でも評価されること間違いなしです。

なお本知識は、WEBデザイナー以外でも役立つ概念です。たとえば、資料作成、サムネ・バナー作成、動画編集とかですね。初心者必見ですので、ぜひマスターしましょう!

WEBデザイン学習にセンスは不要です

WEBデザイン学習にセンスは不要です

WEBデザイン学習に、センスは不要です。

WEBデザインの本質とは?

WEBデザインに、センスが不要な本質的な理由。それは、デザイン =「ユーザーの問題解決」という事実。つまり「わかりやすい情報伝達 > 自己満なデザイン」です。

残酷な事実ですが、ユーザーは、あなたのデザインに興味はありませんよ。ユーザーがそのサービスを手にして得られる「未来」に興味があります。

  • 誤:自己満なアートデザイン
  • 正:読者の悩みを解決するデザイン

ボタンの色 =「緑」といった正解はありません。トップページに動画を埋め込んでも、サイトスピードが低下したら、離脱率も上がります。本末転倒ですよ。

すみません、、、ちょっとマニアックでしたね。まぁ、何はともあれ、ユーザーの問題意識にフォーカスすべきです。自己満なデザインに、未来はありませんので。

WEBデザインの「4大原則」とは?

まず、下記のツイートをご覧ください。


上記のとおり、デザインには「4大原則」があります。知らなかった方は、朗報ですね。

  • 型その①:近接←関連情報をグループ化でまとめる
  • 型その②:整列←各要素をキレイに整える
  • 型その③:反復←同じデザインの要素で繰り返す
  • 型その④:強弱←コントラストで要素を目立たせる

つまり、WEBデザイン初心者でも、上記の「型」さえ押さえれば、センスがなくても、それなりのデザインに仕上げられるという事実。まずは、ココを理解してください。

大切なので、画像つきで解説します。

>> 参考:Pinterest |SINCE.

 型その①:近接

型その①:近接の例

型その①:近接の例

関連する要素をまとめます。
見た目が、スッキリしますね。

「近接」が一番大切かと思いまして、要は、関連要素を近づけて、ブロックごとにまとめるイメージです。

グルーピングして情報整理を行うことで、視認性がUPし、情報を視覚的に伝えやすくなります。何はともあれ、パッと見の印象が大切ですので、関連情報はまとめましょう。

 型その②:整列

型その②:整列の例

型その②:整列の例

整列は、各要素を意図的に配置します。

  • 左寄せ
  • 中央寄せ
  • 右寄せ
  • 上下中央寄せ
  • 両端寄せ

たとえば、上記のとおり。

長い文章は、中央寄せでなく左寄せにすると、読みやすくなります。逆に、目立たせたい箇所を中央寄せにするなど、サイト全体が整理され、見やすくなります。

「整列」は少し慣れが必要ですが、必ず「近接」とセットでマスターしましょう。

 型その③:反復

型その③:反復の例

型その③:反復の例

反復は、同じデザインの特徴で繰り返します。見た目にリズムと統一感が生まれ、視認性がグーンとUPします。

ポイントは「同じデザインで繰り返す」こと。

ボタンのデザインだけ違ったら、リズム崩れませんか?

反復すべき箇所は、同じデザインで反復すべき。そこに、オリジナリティは、120%不要です。少しでもデザインが違うと、妙な「気持ち悪さ」を覚えますので。

 型その④:強弱

型その④:強弱の例

型その④:強弱の例

強弱とは、文字や色のコントラストをつけて、伝えたい要素を強調させること。

上記3要素をしっかり守るだけでも、デザインのバランスは崩れません。そこで、パンチを効かせたいときに有効なのが「強弱」です。

このサイトの場合、サービス名をあえて大きくすることで、ブランディング戦略として、ユーザーにサービス名を覚えやすくさせる工夫をしてますね。

逆に整いすぎても「重要な情報は何か?」わかりにくい。そこで「強弱」を使うと、重要な情報が何かをパッと理解できます。

ただし、使いすぎ注意です。あくまで、ワンポイント効果として、力強い印象を与えられますので。多用すると、ゴツゴツして視認性が悪くなり逆効果です。

あなたのセンスは、重要じゃない

口を酸っぱくして言わないと、初心者ほどセンスに走ります。これは、事実です。

何度もいいますが、WEBデザインにセンスは不要です。ユーザーの問題解決こそ「本質」です。

仮にイケイケなサイトを作れても、マーケティングできなければ、それは「無」に等しい。商品が申し込まれなければ、売上につながりませんので。

キャッチコピー、マイクロコピー、セールスライティング、言葉選び、色使い、フォント、、、こういった様々な要素も絡んできます。センスといっても、幅広いですよ。

そこで、記事の後半では、デザインセンスを身につける方法を解説します。

WEBデザイン学習でセンスを身につける方法

WEBデザイン学習でセンスを身につける方法

ぶっちゃけ、センスは身につけなくてOK。
センスは「トップ層」の世界ですので。

ケムッソLV5な雑魚に、センスを身につけるとか無理です。諦めましょう。センスは、長年の経験から磨かれるモノです。

長年の川の流れによって、石が丸〜くなるのと同じですよ。いきなり、丸い石コロを目指す必要はありません。

WEBデザインでセンスを意識した結果

ここで、僕が過去に作ったサービスを紹介します。それが「C'ELAVIE Nomad ENGINEER」なのですが、スキルの高い人から見たら、一目雑魚です。

たとえば、ボタンをホバーしたときのデザインとか「俺ジナリティ」で、マジでダサすぎ。ぶっちゃけ、真似しないでください。

デザインを意識したつもりでも、モノの見事に滑ってますね。初心者には、こーいったことがよくあります。カッコつけなくてOKです。

WEBデザインのセンスを磨く方法

それは、正解から学ぶことです。
つまり、世の中のサイトを見ましょう。

上記のサイトを眺めるだけでも、デザインセンスは自然と磨かれます。オリジナリティは不要、パクればOK。パクリつつ、一部を変えたら、ポートフォリオの完成です。

じゃあ、具体的にどこをパクればいいのかというと、サイト設計ですね。ヘッダー、トップ画面、カラー、フォント、フッターなど。

あとは、文字や画像を変えれば、デザイン的に失敗することを防げるかと。

大切なのは、TTP(徹底的にパクる)の精神。パクリこそ正義ですし、成長の近道です。オリジナリティなど、今日で捨てましょう。成長が遅れます。

WEBデザイン学習に、センスは不要です

あなたが想像するセンスって、たとえば、ボタンがプルプルしたり、スライドすると、ビュンと要素が飛び出してくる、あーゆうのですよね?

そこで、あなたは思います。
このサイト、マジでカッケー...

しかし初心者は、ココを目指すべきではないと断言します。

ぶっちゃけ、ユーザーにとって、そんなことはどーでもいいですからね。たとえ、コテコテの一見ダサそうなLPでも、商品がバカ売れしてたりするので、本質に立ち返るべきかと。

どんなにボタンをプルプルさせるスキルがあっても、そこを面接官に評価されることは少ない。そもそも、そんな技術を必要としてない会社かもしれませんからね。

 WEBデザインは、楽しいですよ

というわけで、センスは目指さなくて結構です。ボタンをプルプルさせるスキルより、WEBマーケティングやセールスライティング、心理学を学びつつ、デザインに応用させるスキルの方が有益です。

何はともあれ、初心者がセンスに走ったところで、面接官に鼻で笑われて終わり。本記事で解説した「4大原則」を忠実に守った方が評価されますよ。

  • 型その①:近接←関連情報をグループ化でまとめる
  • 型その②:整列←各要素をキレイに整える
  • 型その③:反復←同じデザインの要素で繰り返す
  • 型その④:強弱←コントラストで要素を目立たせる

上記をマスターし、WEBデザインを学習しましょう。そうすれば、デザインがダサくなるのを自然に防げます。研究にて実証された論理ですので、素直に飲み込んでください。

WEBデザイン学習にセンスは不要というお話でした。WEBデザインを独学で学ぶには【未経験】WEBデザイン学習の独学ロードマップをご覧ください。

 WEBデザイナー転職におすすめなスクール

【実質無料】WEBデザインスクールおすすめ比較ランキング3選【未経験から転職できる】
【実質無料】WEBデザインスクールおすすめ比較ランキング3選【未経験から転職できる】

未経験からWEBデザイナーに転職したいですか?本記事では、デジタルノマドの僕がおすすめするWEBデザインスクールをランキング形式で3つ比較紹介します。コスパ良いWEBデザイナーを目指しましょう。

続きを見る

  • この記事を書いた人
  • 最新記事

ミヤビ

「100日後にIT転職するユトリ」の編集長。民間・公務員・WEBフリーランスとマルチな職歴を持つ敏腕ゆとり転職マスター&デジタルノマド。100日後にIT転職させます。

-ITスキル, WEBデザイナー