初心者でも実践できる!今風のかっこいいホームページを作るコツなどをご紹介します

Webデザイン

ホームページデザインには、正解がありません。しかし誰にでも、「多くのユーザーに見てもらえるかっこいいホームページを制作したい」という思いはあるはずです。かっこいいホームページは、感覚で制作するものではありません。かっこいいホームページを制作するポイントや注意点などを理解すれば、初心者でも十分かっこいいホームページが制作可能です。
今回はホームページをかっこよく作りたい方向けに基本的に押さえておきたいポイント、それにデザイン上でのポイントや注意点、参考になるWebサイトのご紹介もしていきます。

ホームページをかっこよくするための基本


ホームページをかっこよくするためには、次のような点が基本のポイントになります。

  • ホームページの目的を考える
  • 目的にあわせたかっこよさを考える

ホームページの目的を考える


まずは、何のためにホームページを制作するのか考えましょう。たとえば、

  • 自社の基本情報を紹介したい→コーポレートサイト
  • 自社の特定の商品やサービスを売り出したい→ブランディングサイト
  • ユーザーが商品をインターネット上で購入できるようにする→ECサイト

など、目的により作らないといけないホームページが変わってきます。
目的が決まらないとホームページの構成や、具体的に必要なページ内容も特定できなくなります。デザイン段階の前に、基本となる制作目的や作るべきサイト種類などを決定しておくと安心です。

目的にあわせたかっこよさを考える


目的が決まった後は、目的に合わせたかっこよさを考えましょう。

  • コーポレートサイトはデザイン面で他タイプより遊びにくいので、トップ画像やトップコピーなどで差をつける
  • ブランディングサイトはイメージが重要なので、独創的なイラストなどを添えてみる
  • ECサイトはユーザーが分かりやすいようすっきりとした見た目を心掛けながら、きれいな画像を大きく映し出すなど工夫する

ホームページの種類によってもかっこよいデザインが変わってきます。目的に合わせて雰囲気まで含めた適切なデザインを行わないと、ユーザビリティが下がったりとよくない事態が発生します。目的に合わせたユーザーの使いやすさと、デザインの洗練性を両立できるよう確実にデザインしていきましょう。

ホームページをかっこよく作るためのポイント


Webデザインをかっこよく作るには、次の点を重要視していきましょう。

  • フォント遣いを工夫する
  • 色遣いを工夫する
  • 写真などリッチな情報にこだわる
  • 余白などを適度に調整する
  • アニメーションで動きをつける

フォント遣いを工夫する


サイト内のフォントは、読みやすくサイトテーマにあったものを選ぶのが基本です。ホームページの中には、細いメリハリのないフォントを採用しているところもあります。しかしその場合、閲覧すると文字がつぶれてしまうなどの悪影響が出てしまいます。
ホームページのフォントは、制作段階できちんと読みにくくないか確認してください。表示してもかすれない、スムーズに何の文字かわかるフォントを採用しましょう。また

  • 明朝・・・和風の雰囲気を出せる
  • ゴシック・・・堅い雰囲気を出せる

など、フォント種類によってホームページがユーザーに与える印象が変わってきます。ホームページテーマに合わせて、適切なフォントをチョイスしましょう。

色遣いを工夫する


ホームページの色遣いは、サイト内雰囲気だけでなく使いやすさにもかかわる部分です。ベースカラーは、ターゲットユーザーに合わせてチョイスしたほうがよいでしょう。たとえば

  • ポップな炭酸飲料を探している人・・・オレンジや黄色などを使ってポップにする
  • 高級なお茶を探している人・・・金色や青色などを使ってさりげない高級感を出す

など、ニーズによって使うべきカラーも変化します。
またデザイン全体の雰囲気を考え過ぎて、「CTA(コール・トゥ・アクション)」ボタンの色をサイトテーマカラーと同じ色にしようとするのはあまりよくありません。ボタンがデザインに同化してしまうと、どこがボタンかユーザーに分かりにくくなり離脱の原因にもなります。CTAボタンはアクセントとして、サイト内で使っているカラーとは別の色を選択したほうがユーザビリティも向上しやすいです。

写真などリッチな情報にこだわる


Webサイトの素材となる、リッチな情報(テキストより情報量の多い写真や動画など)もかっこいいホームページ作りに重要です。Webサイト制作では、フリーの画像サイトから画像を持ってくる場合も多いです。しかし流用した画像ばかりだとオリジナリティが薄れ、ありきたりなつまらないWebサイトになるかもしれません。
特にトップページのファーストビュー(一番最初に見える箇所)などには、自分で用意したオリジナルの画像やイラストなどを配置したいところです。オリジナリティの高くてきれいな画像やイラストは、ユーザーを視覚的に引き付ける効果も見込めます。動画アニメーションを使う場合も、画素の高い鮮明できれいな素材にしましょう。

余白などを適度に調整する


現代風のかっこいいホームページを作るには、余白や行間の使い方が重要です。いくら色遣いや色の組み合わせなどが素敵でも、余白や行間が極端に狭かったりすると窮屈な印象が出て、古臭いレイアウトになる可能性があります。余白や行間などを適度に調整したデザインは雰囲気に余裕を出すことができ、また情報が整理されテーマも伝わりやすくなるので有効です。
最近のWebデザインのトレンドは、「ミニマルデザイン(サイト内情報を含め、不必要な情報を極力省いたシンプルなデザイン)」です。余白などの使い方は、ミニマルデザインで作られたホームページなどを参考にするとよいでしょう。

アニメーションで動きをつける


モダンなホームページにするには、アニメーションで動きを付けるのも有効です。

  • スライダーアニメーションで画像をカルーセル表示する
  • スクロールに合わせて画像を順次読み込む
  • 読み込み進捗率をリアルタイムで表示する

など、さまざまなアニメーションがあります。
複数のアニメーションを入れ込み過ぎるとサイト表示が遅くなる可能性もありますが、適度に入れると動的なサイトになり、ユーザーの目を引きやすくなります。またローディングアニメーションにはユーザーのサイト読み込みで待たされているという感覚を減らす効果があったりと、ユーザビリティに効果的なアニメーションもあります。ぜひアニメーションも活用しながら、かっこういいホームページを作りましょう。

かっこいいホームページを作るためのヒント


かっこいいホームページを作るには、次のようなヒントを参考にしましょう。

  • シンプルなデザインを心掛ける
  • ホームページのトレンドを知る
  • 意図を伝える

シンプルなデザインを心掛ける


初心者は伝えたい情報を、考えうる限りホームページに詰め込み過ぎることが多いです。しかし情報が多過ぎるホームページは可読性も低下し、ユーザーが見にくいサイトになりがちです。ホームページデザインでは伝えたい情報を取捨選択し、余計な要素を省きながらシンプルなデザインを心掛けましょう。
たとえばファーストビューには余計な情報を入れず、

  • トップ画像
  • トップコピー

などだけのシンプルな構成にします。すると画像とともにサイトで伝えたい内容が一瞬でユーザーの頭に入り、自分のニーズに合うかどうかがすぐ分かるようになります。

ホームページのトレンドを知る


ホームページデザインは、ファッションと同じで移り変わりが激しい面があります。もちろんレイアウト構成の基本など変わらない部分もありますが、Webデザインでは基本を押さえながら流行をすぐ取り入れられる柔軟性も求められます。
定期的に競合などWebサイトデザインを確認し、取り入れたい部分や直したほうがよい部分などを考えて自分のサイトデザインの参考にする癖をつける方法が有効です。参考デザインを増やせば増やすほど、あなたのデザイン想像力は上がっていくでしょう。サイトデザインの情報収集は、トレンドに乗り遅れないようある程度こまめにやっておいてください。

意図を伝える


ホームページを制作する際は、各コンテンツの意図をどれだけお客様に伝えられるかも重要です。ユーザー目線で必要なレイアウトを考え、ホームページを制作していきましょう。たとえば

  • なぜこのコンテンツを作ったのか
  • 自分にとって、このコンテンツはどのように関係があるのか
  • このコンテンツを利用することで、自分はどのように変化できるのか

など、ユーザーの目線を想定しながら制作を行っていきます。自社の意図だけを押し付けるサイトは、離脱率が増加します。離脱率を減らし効果の出るホームページにするため、またスムーズにお客様にコンテンツ内容を理解してもらえるかっこいいホームページを作るためにもユーザー目線を忘れないでください。

かっこいいWebデザインを作る参考サイト


ここからはかっこいいホームページ制作の際参考になるWebサイトを、カテゴリーごとにご紹介していきます。

  • フォント遣い
  • 色遣い
  • 写真などの使い方
  • 余白などの使い方
  • アニメーションなどの動き

フォント遣い


http://www.ren-web.co.jp/index.html
リフォーム関連の企業ホームページです。自社の社名を、明朝体風の漢字で大きくあしらっているのがポイントです。漢字の武骨なかっこよさが、シンプルに伝わる構造になっています。各カテゴリー要素にもそれぞれ同じ書体の武骨な漢字が使われ、信頼感を出す効果にもつながっています。

色遣い


https://www.infocubic.co.jp/
マーケティング支援などを行っている会社の、コーポレートサイトです。グローバルメニューの最上部設置などコーポレートサイトとしてベーシックな作りながら、社員が生き生きと働く様子などをトップ画像にアニメーション表示してエネルギッシュさを出しています。各要素は基本は青、マウスオーバーするとオレンジになるというように、自社のテーマカラーである青とオレンジをうまく配分していて気持ちがよいです。青はクールさ、オレンジは活発さを出せるので、「この会社はビジネスもしっかりしていて、社員も生き生き働いているんだな」というイメージを自然と出せているのもポイントです。

写真などの使い方


https://www.nurishige.com/
塗装会社が公開しているホームページです。トップコピーの「熟練した、塗り」がシンプルにユーザーの目へ移るとともに、実際の鮮明な施工画像をフェードイン・アウト方式でトップ表示しているのも訴求力を高めています。他のサイト内画像も施工風景や施工後の写真などが中心で、オリジナリティが高いです。スマホ表示にすると、トップコピーとトップ画像が途切れずちょうどよい具合に入るよう調整されているのもポイントです。

余白などの使い方


http://privee.jp/
ネイルサロン関係のお店のホームページです。トップページには

  • タイトルロゴ
  • メニュー
  • ECサイトリンク
  • トップ画像アニメーション
  • 住所などの基本店舗情報

上記以外の要素は一切見られません。ミニマルデザインの典型的な事例となっていますが、文字間や行間なども適度に空いており、サロンらしいゆったりとした雰囲気が出ています。画像ギャラリーの余白なども適切に設けられており、窮屈さは一切感じません。構成も比較的簡単なので、真似できるところはぜひ真似してみてください。

アニメーションなどの動き


https://www.s5-style.com/
フロントエンドエンジニアなどとして活躍している方が公開している、ポートフォリオサイトです。「Hello World」などの文字がタイプ上に表示されるアニメーション、マウスオーバーすると背景タイル色がハイライト表示になるアニメーションなどさまざまなアニメーションが駆使されています。メニュー表示の動きのあるフェードインからフェードアウト、他ページに遷移する際の画面拡大アニメーションなど、他にも随所にアニメーションが凝らされています。すべてを真似するのは難しいと思いますが、独創的なアニメーションの参考になるサイトです。

まとめ


今回はかっこいいホームページを作るときに参考になるポイントや、実際のデザイン事例などもご紹介してきました。Webデザインにはトレンドがありますが、心掛ける基本的なポイントを覚えておけば時流にも対応しやすいです。今回ご紹介した以外にも素敵でかっこいいサイトはたくさんあるので、ぜひ自身でも調べてみてください。