MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
なんで?ホームページのデザインにこだわるべき理由とポイント

なんで?ホームページのデザインにこだわるべき理由とポイント

公開日:2018年03月09日
最終更新日:2018年03月09日
オンスタ運営
デザイン
デザイン
ホーム > 全記事一覧 > お知らせ > なんで?ホームページのデザインにこだわるべき理由とポイント
このエントリーをはてなブックマークに追加
なんで?ホームページのデザインにこだわるべき理由とポイント
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは。GrowGroupでエンジニアを務めている石原です。
エンジニアといっておきながら、今回はデザインについての記事です。

なにいってんだこいつ...と思われるかもしれませんが、そんな外れていないと思うので何卒ご容赦を。

人は感覚としてデザインを判断している

弊社でもホームページのデザインも業務として行っておりますが、
さて、なぜそもそもホームページにデザインが必要なのでしょうか?

人がデザイン、見た目にこだわるというのは実は結構心理的に奥深い所にあります。 多くの人はそれまでの人生の中で「かっこいい服をきる」「かわいい髪型にするために美容室にいく」「自分がかっこいいと思う車を購入する」といった見た目にこだわる経験をしています。

人が見た目にこだわる、つまりは「他人から見た時のビジュアル的な良さ」にこだわるという行動は、当たり前になりすぎていて、もはや感覚として処理をしてしまっているのです。

対して、あまりデザインにこだわらない人というのは、これまでの人生の中で他人から見た時のビジュアル的な良さにこだわってこなかった人です。

感覚としてデザインを判断している」というのは当たり前のことながらすごく重要なことで、まずはこのことを認識してからデザインについて検討を重ねる必要があります。

ホームページについても同様です。 「かっこいいデザインのホームページを作りたい」「キレイなホームページを作りたい」 そういった漠然とした感覚で デザインに力を入れたい というお話を度々耳にすることがあります。

しかし、デザインにはそれがデザインすべき明確な理由があります。

ホームページになぜデザインが必要なのか

なぜホームページにはデザインが必要なのでしょうか? 大きく分けて3つご紹介します。

 

1. 情報の整理

ホームページは見に来た人に対して情報を表示します。文章データや画像データのことです。
掲載したい情報が多ければ多い程、ホームページを見に来た人にとっては見つけることが難しくなります。

辞書で考えてみましょう。
もし、辞書に目次がなかったらどうでしょう?
もしくは順番が50音で並んでなかったら?
きっと目的の語句を探すのはものすごく大変ですね。

ホームページでも同じようなことになります。
掲載すべき情報を整理して、ページ構成やナビゲーションの整理、見た目を調整することで、利用しやすさは天と地の程差が開きます。

 

2. ユーザー体験を設計する

ホームページのデザインは、一体全体だれのために行うものなのでしょうか。

簡単ですが、答えはホームページを見に来た人(ユーザー)です。
ホームページを見に来た人が、どんな感情をいだくのか、 どんな考えをするのか、といった体験をデザインするのもデザインが必要な理由です。

自分ではない、第三者視点でホームページのデザインを考えるということは難しい作業です。

カスタマージャーニーマップや、ペルソナなど、より専門的なデザイン手法も存在します。

ユーザーがホームページに辿りついてからどんな感情を抱いてほしいか。
どんな考えにいたらせるのか。
そんなユーザー体験をデザインすることもWebデザイナーの仕事です。

 

3. ブランドの整理

実はホームページをデザインする前に検討すべきこともあります。それが"ブランド"です。
サービスでも、個人でも、会社でも、それがそれであるための存在意義があるはずです。

ブランド(英: brand)とは、ある財・サービスを、他の同カテゴリーの財やサービスと区別するためのあらゆる概念。 1

ホームページのデザインではブランドを表現する必要があります。
デザインの方向性が中々決められない時は、サービスが、個人が、会社がどのようなブランドなのか認識していない場合も。

強みだったり、一般に認知されているイメージを整理し、ブランドを整理して決めていく作業もホームページのデザイン作業の中で行います。

ホームページのデザインの傾向

それでは、実際にホームページを作るとしてどんなデザインにすればいいのでしょうか?
こちらも3つの傾向に分けてご説明します。

 

1. ブランディングが目的である

こんな時

  • 自社の商品の良さを知ってほしい
  • 自社の強みを感じてほしい
  • サービスの理念・コンセプトを伝えたい

ブランディングが目的の場合は、より見た目にこだわる必要があります。 重要となる要素としては、写真イラスト配色,キャッチコピーアニメーション などです。 ホームページを見に来たユーザーがデザインから感じとってほしいことを検討し、デザイナーが見た目として落とし込んでいきます。

ここが中々わかりにくいのですが、デザインにも高級感を感じて欲しいときの文字の種類や配色、写真の構図などのロジックがあります。 そのロジックを駆使し、デザイナーが見た目として感覚レベルで感じ取れるようにデザインするのです。

 

2. 情報の整理が目的である

こんな時

  • 現状のサイトが使いにくい、わかりにくい
  • 掲載すべき情報量が多い

ホームページに掲載する情報には、様々な種類があります。 製品情報だったり会社情報だったり、ブログの記事だったり、突発的なお知らせだったり... 数え上げるとキリがありません。

また、掲載すべき情報が多い場合、すべてのページにおいてデザインを作っていては膨大な時間を消費することになります。

重要な要素としては、レイアウト配色変更性 です。

変更性とは、ホームページの仕組みを理解した上で、それを考慮したデザインを行うことです。

例えば、特殊なフォントをデザインで利用した場合、画像として設置しなければホームページ上で表示することはできません。

画像で設置すると、当然その文言を変更する時にはデザインファイルを修正して画像を差し替える必要があります。もちろんデザイン用のソフトウェアを購入しなければ編集もできません。

他方、文字データだけでホームページ上に表示できるように最初からデザインをしておくだけで、変更する時はキーボードで文字を変更するだけで更新することができます。

特に、情報量が多い場合はCMS(コンテンツマネジメントシステム)も共に導入するパターンも多いため、より専門性の高い知識の上でデザインをする必要があります。

また、より多い情報量の中で目立たせたい情報や、あまり必要でない情報などの情報の優先度も存在します。
デザインの中でも優先度の高い情報の見た目を変えたり、配置を工夫したりなどの調整が必要となります。

 

機能性が目的の場合

こんな時

・使いやすいシステムを作りたい
・会員機能があるホームページを作りたい

 

会社のホームページや、メディアサイトなどとは異なる WebサービスやWebアプリなどの場合、
いかに使いやすいようにするかという点が重要になってきます。

ECサイトなどもそうですね。
ホームページを見に来た人に見てもらうだけではなく、使ってもらう必要がある場合、カートボタンの押しやすさや、どのボタンを押せばログアウトできるのか、マイページはどこからアクセスできるのかなど、ユーザーが迷わずに使えるようデザインする必要があります。

重要な点としては、UIデザイン(ボタンや入力フォーム、ナビゲーションなど) です。

これも不思議なことなのですが、人がホームページの中の"ボタン"を「これをクリックすれば、反応するであろう」と感じるのは、その人がそういった経験をそれまでに積んできたからです。

よって、どんなボタンが押しやすいのか、押したらどんなエフェクトが必要なのか、マウスカーソルを合わせたときの挙動は?など、そのボタンをボタンたらしめるためにデザインする必要性があります。

ホームページのデザインを依頼する時のポイント

これまで、デザインがなぜ必要なのか、目的に対してどんなデザインが必要なのかを説明しましたが、実際にデザインを他人に依頼する時にどんなことが必要なのでしょうか?

こんなことを事前に検討すると、よりデザイナーに伝わりやすいのではと思うことを紹介します。

 

1. 目的、ターゲットを明確にする

ホームページを立ち上げる時、それは何かしらの目的があるはずです。

集客がしたいのか、まわりに自慢できるデザインのWebサイトにしたいのか、現状サイトのどんな課題をなぜ解決したいのか... また、ターゲットもデザインを決定する重要な要素です。

ホームページを見に来る人の性別や趣向、年代などで、どんなデザインにすべきかは大幅に変わってきます。
目的やターゲットが大幅に変わると当然デザインの方向性も変わります。

よって目的やターゲットがぶれないように、一度考え直して決めるとその後のプロジェクトも進みやすくなるでしょう。

もちろん、本当にその目的で正しいのか、そのターゲットで正しいのかについて、デザイナーや制作会社が提案することも可能です。

 

2. ブランドについて見直す

ホームページに掲載する情報の整理を行う際に、「どんなページが必要なのか」「そのページにはどんな文章が必要なのか」迷うことがあります。

すると、その事業自体の構造や、企業の強み、理念などが明確でないと中々合意を形成することが難しくなります。

例えば、企業であれば自社の強みは本当は一体何なのか、事業をどのように説明すればわかりやすいか、理念をどんな風に広めたいかなど、事前に検討することでよりデザインにも反映することができます。

 

3. ホームページのデザインのキャッチコピーをつける

目的や認識を共有する時に、キャッチコピーという手法は割と有効だと考えています。

20台後半の女性に、会社の楽しさを知ってもらうデザイン」など、何かしらわかりやすいキャッチコピーをつけて共通言語化しましょう。

そうすることで、その後のデザインについてもブレが少なくなります。

ホームページのデザインは、目的達成の手段です

さて、ホームページのデザインについてつらつらと書きましたが、いかがでしたでしょうか。 ホームページのデザインは、目的を達成するための手段の一つです。 デザインは感覚で決まるものではないということを認識した上でホームページのデザインを依頼することで、きっと目的を達成することにつながるデザインが仕上がると僕は考えています。

もちろん、GrowGroupでも歴戦の経験のあるプロのデザイナーがデザインを行いますので、ホームページのデザインについてお困りの方はご相談ください!

Grow Groupだからこそ、解決できることがあります

052-753-6413

受付時間 / 平日10:00〜19:00

以上、エンジニアの石原でした。


  1. https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%83%B3%E3%83%89 ↩︎


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その③
デザイン
ロゴ制作
公開日: 2017年09月21日
最終更新日: 2017年09月21日
ロゴマークの基礎知識 その③
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
シンプルなデザインについて考えてみる
デザイン
Webデザイン
公開日: 2017年07月25日
最終更新日: 2022年01月17日
シンプルなデザインについて考えてみる
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その①
デザイン
ロゴ制作
公開日: 2017年07月26日
最終更新日: 2022年01月17日
ロゴマークの基礎知識 その①
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選
テクノロジー
デザイン
マークアップ
公開日: 2021年04月22日
最終更新日: 2021年04月22日
コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーのキャリアアップ(デザイナーがキャリアアップするための道のり-最終章)
デザイナー
デザイン
公開日: 2017年01月29日
最終更新日: 2022年01月17日
デザイナーのキャリアアップ(デザイナーがキャリアアップするための道のり-最終章)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
修正サクサク!校正記号を正しく覚えよう!
デザイン
公開日: 2018年05月29日
最終更新日: 2018年05月29日
修正サクサク!校正記号を正しく覚えよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
これは便利!デザイナー向け【chrome拡張機能】7選!
デザイン
デザイナー
デザイン
Webデザイン
公開日: 2017年10月11日
最終更新日: 2022年01月17日
これは便利!デザイナー向け【chrome拡張機能】7選!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
よく使われるA4パンフレットの折り加工の種類
デザイン
パンフレット
公開日: 2018年08月02日
最終更新日: 2022年01月17日
よく使われるA4パンフレットの折り加工の種類
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
仮説の考え方と使い方
デザイン
公開日: 2021年04月05日
最終更新日: 2021年04月05日
仮説の考え方と使い方
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。