Webデザインで多い失敗は何か?デザインづくりに必要なスキルも紹介! - Webデザイナー・Webディレクターの求人転職支援「STASEON(スタシオン)」

Webデザイナー・Webディレクターの求人転職支援「STASEON(スタシオン)」

Webデザイナー・ディレクターの求人転職支援

Webデザインで多い失敗は何か?デザインづくりに必要なスキルも紹介!
TIPS 2020.11.02

Webデザインで多い失敗は何か?デザインづくりに必要なスキルも紹介!

昨今みなさんが情報取集を目的にアクセスするWeb上のホームページはどのように作られているのでしょうか。
Webページはさまざまな要素から形作られていますが、なかでもデザインは重要な要素です。

ユーザーは情報が取りやすく分かりやすいホームページを閲覧したい、という思いを持ってアクセスします。「ホームページのレイアウトや画像加工など施し見やすいデザインにすること」をWebデザインと呼びます。 今回は、Webデザインに興味を持ち始めた「Webデザイン初心者」によくありがちな失敗要素と身につけたい要素をご紹介します。

Webデザイン初心者によくある失敗

ここではWebデザイン初心者が失敗に陥りやすいポイントをご紹介します。

独創性を発揮しすぎる

確かに「独創性」は大切です。Webデザイン初心者は「独創性を出すことのどこがいけないのか?」と思うかもしれません。しかし「独創性すぎる」デザインではユーザーが「このホームページはどう見ればいいのか分からない」と混乱してしまいます。Webデザイン初心者の方はまず「基本的なデザインのルール」を学ぶところから始めましょう。

デザインは基本とトレンドがあり、その上で「独創性」を入れます。それを独創性だけ追求すると「良くわからないホームページ」という評価を受ける可能性が高まります。以上の理由から、独創性を求める前に必ず「デザインやレイアウトの基本」を身につけましょう。

画像を加工しすぎる

ホームページに使用する画像を加工しすぎることもWebデザイン初心者に良くある失敗です。具体的な例として「複数の画像を合体させ、さらにフィルタ効果を使い過ぎる」といった感じです。Webデザイン初心者は教本で「こういう加工のやり方」という知識は持っている方が多いです。

しかし、その加工方法をどのようなときに使うのかが分からないために元画像を加工しすぎてしまう傾向があります。
現状、プロの間では「画像を加工することはそんなに多くない」という意見が多く挙げられます。もちろん画像を魅力的に見せる為に最低限の加工はします。

しかし、あくまで画像そのものをどのようにデザインを考慮した上で引き立つのか考えるのです。「加工技術をふんだんに使えば良い」というより「ホームページに掲載する画像として魅力的なものを作るために必要な加工技術」ということを念頭に制作しましょう。

見出しを目立たせすぎる

確かに「見出し」はWebデザインの中で非常に大切な要素です。見出しがあるからこそ、その文章で何を伝えたいのかがユーザーに分かりやすくなるからです。

ただし、必要以上に目立たせるのはナンセンスです。よくある失敗例として「見出しを囲った上で色も付けて、文字を太くし、さらにアイコンを付ける」ということが挙げられます。これではユーザーに圧力的な印象を与えるばかりで魅力的なホームページとは言えなくなるでしょう。

Webデザイン初心者はデザインの基本に沿って「最低限の強調」にしましょう。そのホームページのデザインのテイストがあるので、見出しのデザインに正解はありません。デザインの主流としては「下線を引く」ことや「文字にアイコンを載せる」など1要素か多くても2要素の強調方法に留めましょう。

ユーザーの利便性を考慮していない

ホームページは何のために制作されるのでしょうか。その一要素として「情報を収集したい」というユーザー向けに作られていることが挙げられます。ユーザーの利便性を考慮していないホームページは最後まで閲覧されない可能性が高いです。

例えば「押したらどうなるかわからないボタン」や「理解できない説明文」、「そもそもボタンかどうか分からない」などが挙げられます。また確かにユーザーは「情報を収集したい」という気持ちでホームページを訪問しますが、情報過多だと「何が要点なのか」を理解できずに混乱します。

この問題を防ぐ為には自分が制作したホームページを他人に見せ、客観的な意見をもらいましょう。

デザインが統一されていない

Webデザイン初心者のなかには「学習した知識をフルに活用し、1つのホームページにいろいろなデザインを使いたい」という人も存在することでしょう。しかし、この考え方は推奨できません。ポイントは自分がユーザー側になった視点で考えることです。ページごとにデザインが異なると、その都度「このページの構成はこうで、こういう見方で良いのか?」と考える時間を与えてしまいます。

これではいくら内容が魅力的でも閲覧される可能性は低いです。また、そのホームページはどのようなコンセプトで作っているのか疑問視する意見すら持たせてしまいます。

以上の理由からホームページのデザインは統一しておきましょう。

優れたWebデザインをつくるために必要なスキル

優れたWebデザインにするにはどのようなスキルが求められるのでしょうか。

デザインのルールや理論

「デザインのルールや理論を学ぶ」ことは優れたWebデザインをする上で重要な要素と言っても過言ではありません。このスキルをしっかりとモノにできるかどうかで、良いデザインになるかが決まります。

この知識はデジタルもアナログも共通しています。例えば「デザイン表現の理論(近接・整列・反復・コントラスト)」や「デザインする上でどの色を使えばよいか(配色ルール)」など多くのルールを知っておく必要があります。
しかしこのルールを完璧に覚えるまでに5年~10年ほどかかるのである程度学んだら「実践しながら学ぶ」ようにしましょう。

デザインソフトの使い方

Webデザイン初心者はデザインソフトの使い方も学ぶ必要がありますが、この要素だけに捕らわれがちです。デザインソフトはあくまでも自分のアイディアを表現するための「ツール」という位置づけです。とはいえ、この要素がないとWebデザインができないので最低限のスキルは持っておきましょう。
デザインソフトの例はPhotoshopやillustratorなどがあります。

デザイナーとしての思考

これまで説明した「デザインのルールや理論を理解しておく」ことや「デザインソフトの使い方」も重要ですが最も大切なことは「ユーザーが何を求めているのか、ユーザー側に立ってデザインしていく」という要素です。

ユーザーが求めているものは何かを観察したりリサーチしたり、理解することが必要です。ホームページのコンセプトに沿って「ユーザーが解決したい問題は何か」を念頭に置いて制作します。ユーザーが抱えた課題に即したアイディアを出し、解決策を投げかける対象を明確にしておきます。例えば、何を・誰に・どのタイミングで・どんな場所で・どうやってなどです。

優秀なWebデザイナーは「そもそもユーザーはどんな課題を抱えているか」見抜く力も持っています。このプロセスを踏んだ上でホームページなどの表現に落とし込み納品するのです。デザイナーは「芸術性」が重視されがちですが、論理的な思考も必要なのです。

コーディング・プログラミングの知識

コーディング(またはプログラミング)の知識も持っておいて損はないでしょう。昨今ではコーディングができることは必須ではありませんが、知っておくことは必要です。

ホームページを構成するプログラミング言語は主に「HTML・CSS」が挙げられます。HTMLはヘッダーやフッター、見出しなどの「Webサイトの情報構造」を決定します。CSSはレイアウトや文字間隔、文字の色などホームページの装飾を整えるためのものです。

しかし、プロのデザイナーでも「コーディングスキルは必須か?」という議論が展開されている状態なので、Webデザイン初心者の方は先んじて学ぶものではないでしょう。

情報の取捨選択能力

プロのデザイナーは根拠を持ってデザイン制作します。根拠を考える上で「情報」は「知識」と並び大切な要素です。
例えば「女性客中心な店で4月頭~5月末までの期間限定、商品20%~50%OFF…」など先方から情報提示されたらどれを一番目立たせたら良いでしょうか。これら全てを載せていては情報過多になってしまいます。

情報を取捨選択するスキルは、必ずしも問題解決の答えを求めているわけではありません。「どの情報を載せるか、構成はどうするか」といった考えを念頭に置き、根拠を持ってデザイン制作に臨む姿勢が大切です。

まとめ

今回はWebデザインについてご紹介しました。Webデザインを行う上で重要なのは画像の加工手法といった「技術」と思われがちですが、実は論理的思考やデザインのルールなどの「知識」が重要です。初心者は独創性を持たせることに重きを置かず、まずは基礎知識を高めホームページをデザインすることを心がけましょう。

▼関連記事

・UI/UXの素晴らしいサービスとは?先行サービスから学ぶ良いUI/UX
・Webデザインとタイポグラフィ:これからは文字デザインの重要性が高まる
・Webデザイナーのポートフォリオの作り方!転職・就職に効果的!

▼クリエイティブ業界の求人情報

・クリエイター求人検索

-カテゴリーから記事を選ぶ-

はじめての方へ

アカウントを登録すると、求人情報やポートフォリオをお気に入り登録することができます。



Webディレクターの求人

MORE

おすすめの記事