WEBデザインって、センスが必要かな？WEBデザイナーに転職したいんだけど、美的センスもないし、レイアウトも悲惨ですし、転職はむずかしいかな？デザインのセンスがなくても、イケイケなデザインに仕上げる方法を教えてください。
こんなお悩みを解決します。
本記事の内容
- WEBデザイン学習にセンスは不要です
- WEBデザイン学習でセンスを身につける方法
この記事を書いてる僕は、ジョージアで暮らすデジタルノマド。デザインセンスはありませんが、過去に、フロントエンドエンジニアとして働いてました。
WEBデザインに、センスが必要と思ってませんか？
本記事では、WEBデザイン学習をしてる初心者向けに、WEBデザイン学習にセンスが不要である理由を解説します。
この記事を読むと、センスがなくても見やすいレイアウトを作れるようになり、WEBデザイナー転職でも評価されること間違いなしです。
なお本知識は、WEBデザイナー以外でも役立つ概念です。たとえば、資料作成、サムネ・バナー作成、動画編集とかですね。初心者必見ですので、ぜひマスターしましょう！
WEBデザイン学習にセンスは不要です
WEBデザイン学習に、センスは不要です。
WEBデザインの本質とは？
WEBデザインに、センスが不要な本質的な理由。それは、デザイン ＝「ユーザーの問題解決」という事実。つまり「わかりやすい情報伝達 > 自己満なデザイン」です。
残酷な事実ですが、ユーザーは、あなたのデザインに興味はありませんよ。ユーザーがそのサービスを手にして得られる「未来」に興味があります。
- 誤：自己満なアートデザイン
- 正：読者の悩みを解決するデザイン
ボタンの色 =「緑」といった正解はありません。トップページに動画を埋め込んでも、サイトスピードが低下したら、離脱率も上がります。本末転倒ですよ。
すみません、、、ちょっとマニアックでしたね。まぁ、何はともあれ、ユーザーの問題意識にフォーカスすべきです。自己満なデザインに、未来はありませんので。
WEBデザインの「4大原則」とは？
まず、下記のツイートをご覧ください。
デザインの4大原則
✅近接：関連情報を近づけてグループ化
✅整列：各要素を意図的に配置
✅反復：デザインの特徴を繰り返す
✅強弱：コントラストをつけて目立たせるデザインの原則を守るだけで、8割ほどカバーできる。オレジナリティに走るとダサくなるので、先人の知恵から最短距離で走ろう😇
— インペリアル ミヤビ@🇬🇪 (@ImperialMiyavi) June 13, 2022
上記のとおり、デザインには「4大原則」があります。知らなかった方は、朗報ですね。
- 型その①：近接←関連情報をグループ化でまとめる
- 型その②：整列←各要素をキレイに整える
- 型その③：反復←同じデザインの要素で繰り返す
- 型その④：強弱←コントラストで要素を目立たせる
つまり、WEBデザイン初心者でも、上記の「型」さえ押さえれば、センスがなくても、それなりのデザインに仕上げられるという事実。まずは、ココを理解してください。
大切なので、画像つきで解説します。
型その①：近接
型その①：近接の例
関連する要素をまとめます。
見た目が、スッキリしますね。
「近接」が一番大切かと思いまして、要は、関連要素を近づけて、ブロックごとにまとめるイメージです。
グルーピングして情報整理を行うことで、視認性がUPし、情報を視覚的に伝えやすくなります。何はともあれ、パッと見の印象が大切ですので、関連情報はまとめましょう。
型その②：整列
型その②：整列の例
整列は、各要素を意図的に配置します。
- 左寄せ
- 中央寄せ
- 右寄せ
- 上下中央寄せ
- 両端寄せ
たとえば、上記のとおり。
長い文章は、中央寄せでなく左寄せにすると、読みやすくなります。逆に、目立たせたい箇所を中央寄せにするなど、サイト全体が整理され、見やすくなります。
「整列」は少し慣れが必要ですが、必ず「近接」とセットでマスターしましょう。
型その③：反復
型その③：反復の例
反復は、同じデザインの特徴で繰り返します。見た目にリズムと統一感が生まれ、視認性がグーンとUPします。
ポイントは「同じデザインで繰り返す」こと。
ボタンのデザインだけ違ったら、リズム崩れませんか？
反復すべき箇所は、同じデザインで反復すべき。そこに、オリジナリティは、120%不要です。少しでもデザインが違うと、妙な「気持ち悪さ」を覚えますので。
型その④：強弱
型その④：強弱の例
強弱とは、文字や色のコントラストをつけて、伝えたい要素を強調させること。
上記3要素をしっかり守るだけでも、デザインのバランスは崩れません。そこで、パンチを効かせたいときに有効なのが「強弱」です。
このサイトの場合、サービス名をあえて大きくすることで、ブランディング戦略として、ユーザーにサービス名を覚えやすくさせる工夫をしてますね。
逆に整いすぎても「重要な情報は何か？」わかりにくい。そこで「強弱」を使うと、重要な情報が何かをパッと理解できます。
ただし、使いすぎ注意です。あくまで、ワンポイント効果として、力強い印象を与えられますので。多用すると、ゴツゴツして視認性が悪くなり逆効果です。
あなたのセンスは、重要じゃない
口を酸っぱくして言わないと、初心者ほどセンスに走ります。これは、事実です。
何度もいいますが、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デザイナーに転職したいですか？本記事では、デジタルノマドの僕がおすすめするWEBデザインスクールをランキング形式で3つ比較紹介します。コスパ良いWEBデザイナーを目指しましょう。
続きを見る
