仕事/IT系

Web制作で確実に実装すべき4つのモノ

仕事/IT系
Web制作 アイキャッチ
スポンサーリンク



こんにちは。現役エンジニアの杉崎です!

あなたがネットサーフィンをしているときに

え…なにこのサイトめちゃくちゃお洒落じゃん…!どんな物を売ってるんだろ…?(ポチっ)

と感情を揺さぶられる経験、人生に1度はあるとは思います。

その一方で,

たかがサイトの見た目でしょ?
情報が手に入れば良いのだから別に外観なんて気にしなくて良くない?

と思っている人も中にはいると思います。

しかし,商品を買う時は自分の好みや部屋の雰囲気にマッチしているかを重視する人いるのが現実です。

言い換えると,機能的に優れていたとしても製品の見た目が悪ければ購入してもらうチャンスをみすみす逃すことに繋がります。

だからこそデザインは物の価値を何倍にも引き出す重要な要素になるのです。

Webデザインも同じように企業の特色や製品の魅力を
最大限に引き出すための重要な役割を担います。

近年はWebデザイン・UIデザインの需要も高まってきており,
デザインで生計を立てている人も珍しくありません!

今回の記事では,Webサイトのデザインで重要視されるものについて解説していきます。

この記事は以下の人をターゲットにしています!

この記事のターゲット
  • Webデザイン・UIデザインに興味がある人
  • これからポートフォリオを作ろうと思っている人

重要視されるもの

サンクスページの実装

サンクスページの実装

サンクスページとは、WEB上で何かしらのオファーをした際に、相手が申し込みを完了させたり購入を済ませた直後に表示されるページのことです。

SELFISH WORKSより

もし貴方が,装飾の施されていないプレゼント
綺麗にラッピングされたプレゼントを貰ったとしたらどちらの満足度が高いでしょうか?

ほとんどの人が後者を選びますよね?

このようにお問い合わせフォームを送った後に必ず目にするサンクスページは,プレゼントのラッピングと同等の立場にあり,顧客の満足度を高めるために重要な役割を担います。

BtoBestより引用

上の図のようにお洒落なイラストだったり、他のページに誘導するボタンが目の前にあると押したくなるのは言うまでもありませんよね?

サンクスページを設定するのとしないのとではお問い合わせ回数に歴然とした差があることが証明されているため,ビジネスチャンスを広げるためにもサンクスページに力を入れておくのに越したことはありません!

お問い合わせをしてくれた人への感謝の気持ちはサンクスページで表現するべし

エラーページの実装

エラーページの実装

インターネットサーフィンをしていると1か月に1回は目にするエラーページ。

何かを検索して「お探しのものは見つかりませんでした」
と言われたらかなりガッカリしますよね?

個人やあまり有名どころではないサイトのエラーページは大体こんな感じ。

デフォルトのエラーページ

何も設定されていないエラーページは白背景に黒文字といったいかにもシンプルな見た目です。

世界観が確固としてるお洒落なサイトでいきなり画像のようなページが出てきてしまえば,突然素っ気ない対応された感じがして嫌な気分になりますよね?

一方でGitHubやAmazonように,
サイトに沿ったデザインでかつユーモアがあれば,
ユーザーのダメージを最小限に抑えることができます。

githubの404エラーページ
GitHub 404エラー
githubの500エラーページ
GitHub 500エラー

常に最悪の事態を考えつつ顧客の心に寄り添うデザインをすると
より多くの人に興味を持って貰えるチャンスに繋がります!

万が一のことを考えてエラーページにも工夫を凝らすのが吉。心理的なダメージを最小限に抑えてくれるから。

アイコンの活用

アイコンの活用
photoACより引用

アイコンはWebサイトを美しくするだけでなく,
小さな面積でより多くの情報を詰め込めるのが魅力です。

道路標識と同じように,瞬時な判断力を求められるユーザーに
素早く情報を与えるのに非常に役立つからです。

しかし「Webサイトをお洒落にしよう!」という目的で過剰にアイコンを使いすぎたり,解釈に困るアイコンを使ってしまうのは好ましくありません。

解釈に困るUI(左折がダメなのか,直進すると行き止まりだから左折すべきなのか)
左折がダメなのか,直進するのがダメだから左折しろなのか?(BADUIたれこみサイトより引用)

交通量の多い道路で解釈し辛い標識を立てられてしまうと,
多くの人が立ち往生する可能性がありますよね?

同じように人気のWebサイトだと,ユーザーがサイトでの目的を果たせぬままウィンドウを閉じてしまい機会損失も広がってしまいます。

だからこそ,アイコンは道路標識と同じように適切に使うべきであると頭に入れておいた方が良いでしょう。

アイコンは少ない面積でより多くの情報を与える反面,適切に使わなければ思いもよらない事故の温床になり得る。

ボタンの色の考慮

ボタンの色の考慮
MarTechLabより引用

「赤は危険、緑は安全」という共通認識があり,
Webデザインにおいて役割事に適切な色を割り当てることが重要視されています。

仮にリセットボタンや削除ボタンを黒や緑に設定してしまえば,
大切なデータを誤って削除する事故が多発し,
ありとあらゆるところから悲鳴が聞こえてくるのは間違いありません…!

GitHub Danger Zone
削除ボタンは赤を設定するのが鉄則!(GitHubより)

ルールを決めずに赤いボタンや緑のボタンばかりを乱用すると,
ユーザーを混乱に招き入れたり,最悪の場合は思いもよらない事故に繋がることもあり得ます。

色の心理的な効果は私たちが思っているよりも遥かに強力です。

まとめ

今回は,Web制作で考慮すべき4つのモノについて解説しました。

ユーザーに見て貰いやすくするために必要なコトは以下の4つです!

  • サンクスページの実装
  • エラーページの実装
  • アイコンの使用
  • ボタンの色

以上の4点を踏まえると,ユーザーに優しいサイトの実現が可能になり,
より多くのファンを獲得できることは間違いありません!

現在エンジニア就活をしている方も,
多くの面接官から高評価を受けることができ,
内定率がアップすることも期待できるでしょう!

最後までお読みいただきありがとうございました★

\エンジニア就活に向けて準備するべきものを知りたい方はこちらもチェック⇩/

コメント

Comment

コメントなし