2023年の今、名刺代わりになるホームページや新着情報を載せるブログなどさまざまな種類のWEBサイト公開されています。フリーランスやYouTuber、Tiktokerと個人が活躍する時代、もはやホームページは企業が持っているだけのものではなくなってきました。ライバルと差別化できるかっこよくてオシャレなWEBサイトを作るために必要な考え方や必要になるものを解説します。
目次
SNSがある時代でWEBサイトを作る意味
まずWEBサイトを作ることのメリットについて解説します。
- SNSでは表現しきれない文章やデザインをまとめられる
- 閲覧者の思考を自分の情報のみに集中させることができる
- 情報を求めているターゲットが自分にアクセスしやすくなる
- WEBサイトが企業や個人の名刺・パンプレット代わりとなる
SNSでは自分の情報は数多ある情報の一部になってしまうため、コピーライティング・デザイン・ターゲットの3つの要素が揃って初めてユーザーの目に留まります。そこまでしてやっと見てもらえたのにSNSの投稿上の情報だけではもったいない。WEBサイトを持っていれば そこから訪問され、さらに詳しい情報をユーザーに届けることができます。
また検索からの訪問だけがWEBサイトのメリットではありません。WEBサイトの有無で企業相手の取引においても信頼が変わってきます。企業の実績や事業についての情報を好きなだけ載せることができるWEBサイトは誰でも見れる企業の名刺となります。
おしゃれなWEBサイトとは
近年おしゃれと言われるWEBサイトは、フォントを的確に利用すること、ユーザーがわかりやすいデザイン配置や構成になっていること、クリックやスクロールなどの操作に応じたアニメーションがされユーザー体験が高いことが挙げられます。
それぞれ、目的や注意点があるので解説します。
フォントを的確に利用する
フォントだけでもWEBサイトの印象は大きく変わります。WEBフォントを使用することで、手軽にWEBサイトのフォントを変更することができます。WEBフォントには、明朝体やゴシック体だけでなく崩れたフォントや手書き風フォントも公開されています。
明朝体は、スタイリッシュで大人なイメージのWEBサイトや高貴なイメージを与えることができます。
一方、ゴシック体は読みやすくビジネスサイトやブログサイトなど幅広い場面で利用されます。
ただし、ページ内で多くのフォントを使ってしまうとデザインに統一感がなくなってしまう可能性があります。同じページ内には2,3種類程度のフォントにとどめるのがおすすめです。
ユーザーがわかりやすいデザイン配置や構成
クリックを促すボタンのようなリンクデザインや、開閉するQ&Aのボックスデザインなど、ユーザーが視覚的にわかりやすいデザインをUIデザインと呼びます。
UIデザインの目的は、ユーザーに伝えたい情報を的確に伝えることです。見た目だけではなく、フォントやコンテンツの配置も重要です。
優れたUIデザインにするためにクリック率やお問い合わせ率を計測し、より結果に繋がるデザインになるように修正を繰り返すことが大切です。
操作に応じたアニメーションがされユーザー体験
ユーザー体験をUXと呼びます。
UXは、レイアウトや色使い、表示速度や操作によるアニメーション、ページ構造など、サイトを閲覧する際に認識するあらゆるが含まれます。先ほど紹介したUIもUXに含まれます。
WEBサイトでは、特に操作に応じたアニメーションが重要です。マウスがコンテンツの上にあるとき動き出すホバーアニメーションや、スクロールした時にフワッと出てくるコンテンツアニメーションなど、多くのアニメーションが導入されています。
また、良かれと思い採用したものの、UXが低下することもあります。
悪い例として以下のようなデザイン・アニメーションがあります。
- 目立たせるために、点滅のようなアニメーションをつける。
- スクロールで表示されるコンテンツの表示速度が遅いため、真っ白になることがある。
- くっついてくるヘッダーで、コンテンツが隠れて本文が読みにくい。
- 配色の明暗が激しく、チカチカして見える。
- アニメーション速度が速く目で追うことができない。
UXはユーザーが快適にWEBサイトを閲覧することができるようにすることが特に重要です。
今までにないサイトを作りたいでは差別化できない
WEBサイト制作するにあたって打ち合わせのときお客様に
とお考えになる方が多くいらっしゃいます。
WEBサイト制作は制作会社に委託すると結構高くなることも多いですし、せっかく作るなら今までにないサイトを作りたいと思うのは当然です。ではなにが良くないのでしょう。
それは、WEBサイト自体を事業の差別化ポイントにしようとしている場合です。
WEBサイトはあくまで企業や事業独自の技術やサービス・商品を効率的に訪問者に知ってもらうための手段です。ただ今までにないようなデザインやアニメーションを使用したからといってWEBサイトから注文や求人応募が増えるわけはありません。
まずは企業や事業がライバルと差別化されている部分をピックアップしてください。WEBサイトはその差別化ポイントを効果的に伝えるための画像や動画、アニメーション技術を使って制作していきます。
差別化ポイントを抑えた上でオシャレなWEBサイトにするために必要なことを次に解説します。
画像や3D要素を導入する
WEBサイトのデザインは簡単に分割すると、画像・動画・文字・装飾要素・アニメーションの5つの要素で構成されています。この中で1つでも特徴的な要素を入れるだけでオリジナリティのあるかっこいいWEBサイトにすることができます。
事業やサービスをイメージできるオリジナル画像
この中でもっとも容易に差別化ポイントにつなげることできるのは画像や動画です。画像1枚だけでもサイトをオシャレなイメージに変えることができます。動画を背景に使ったデザインでは視覚的にサイトのコンセプトを伝えることができます。
フリー画像ではなく作業風景や事業や製品をアピールできる画像を使うことでより効果的にWEBサイトを差別化させることができます。
アニメーションつきの3DCG
さらに今注目されているのはサイト上で動く3D要素です。WebGLという技術を使って3Dのイメージを配置し、スクロールやクリックでその要素を訪問者が操作できるサイトを制作することができます。3D自体を制作するコストもかかりますが、商品やサービスのイメージをより訪問者に伝えることができる上にWEBサイトのブランディング化にもつながるので、制作コストに見合った効果を発揮することができます。
ローディング画面で差別化しながらオシャレに
WEBサイトは画像や動画または3Dイメージを使うとオシャレな差別化ができることを説明しました。しかしこの全てを盛り込むことのデメリットもあります。
それは、サイトのロード時間が長くなってしまうことです。
サイト訪問者は2秒以上のロードは待てずにブラウザバックしやすくなるという調査結果があります。これはローディングバーのようなロードの進捗を視覚的に表したデザインを使うことで待ち時間が減る感覚を与えることで解決させることができます。
さらにローディングアニメーションに企業やサービスのロゴアイコンを使うことで企業のブランディングイメージの向上にも繋がります。もちろん待機時間の少ないWEBサイトを作成することが一番ですがメリットも大きいのでWEBサイトのローディング画面の導入はぜひ検討してみましょう。
まとめ
今回はオシャレでかっこいいWEBサイトを作る上で必要なことを解説しました。
WEBサイトは画像や動画、3D技術を使うことで魅力的なデザインにすることがわかっていただけたと思いますが、本当に必要なのは「なにを伝えたいサイトなのか」ということです。
まず企業やサービスの独自の強みを文字として書き出してみてください。そこから順序よく強みを効果的に訪問者に伝えるためにはどのような画像・動画・文章等、媒体を用いるのがいいか。その媒体を訪問者の記憶に植え付けるにはどのような装飾デザインやアニメーションを使用したらいいか。
このように根っこの部分から順番に考えていくことでオリジナリティのあるオシャレなホームページを制作することができます。
