ホームページデザインの参考に!かっこいいデザインやレイアウトのコツを紹介

とにかく見栄えのいいホームページ を作りたいけれど、「何を参考にすればいいの?」「どんなことに注意すればいいの?」などお悩みの方はいませんか?
ホームページ初心者の方へ向けて簡単に洗練されたホームページを作るための方法をご紹介いたします!

ホームページ作りの基本

まずはじめに、ホームページを作るにあたって、どのようなデザインにするかやコンセプトを決めておくとよいでしょう。

ある程度のイメージや見せたいモノの特徴や雰囲気を掴んでおくことで作りやすくなります。
ホームページ作成をより円滑にするためにはいくつかの基礎知識も必要です。これから基礎知識をご紹介していくのでぜひ参考にしてみてください。

①シンプルなデザイン

多くのものを伝えたいと思うあまりにたくさんの情報を入れてしまうと、あなたのホームページから伝えたいことをユーザーは見失いがちになってしまいます。
伝えたいものを目立たせるためにもシンプルでかつ適切な情報量にしましょう。

②Web内の流行りを見抜き取り入れる

新しい目線でウェブサイトを見て、トレンドを敏感に対応するようにしたり、色んなサイトを見て「ここがいいな!ここをもう少し改善したらいいのにな~」など他のサイトの研究をしてみましょう。
その調査をもとに自分のサイトでも実現可能なのか考えてみてくださいね。

③初心者が覚えておきたいWebデザイン用語

アクセシビリティ

高齢者や障害者なども含む、多くの人が使えるものweb制作を考慮する際に使われている言葉です。

ユーザビリティ

アクセシビリティとよく間違えられますが、すでに使えるものにおいて想定ユーザーが使い安いかどうかの利便性について表すことです。

モバイル対応

スマートフォンでも見れるコンテンツ内容によりますが、今の時代PCよりスマートフォンを持っている人の方が多いので、モバイル対応をしているホームページは多いです。

レスポンシブ

様々なデバイスの画面に対応した表示をして柔軟に調整することです。
レイアウトの大きな変更などがあるので手間がかかることがあります。

レイアウトのコツ

①視覚的階層の理解

私たちは特定のパターンに沿ってウェブページを見ています。それらを理解することによってホームページ上で特に重要なものをより効果的に目立たせることができます。

しかし、重要なコンテンツをいくつも置いていると逆効果になってしまうので注意しましょう。

デザインを行う際には、まず提示すべき情報を厳選して優先度をつけて行きます。
その際に重要なのが「ビジュアルヒエラルキー」です。

直訳すると「視覚的階層」という意味で、フォントの色やサイズ、位置などによって表現される文字情報を視覚的に重みづけることです。

これを意識してデザインの取り扱いルールをあらかじめ決めておくことが大切です。
ただ意味もなく適当に変えているとユーザーにとっては読みづらいものへと変わってしまうので注意してくださいね。

②スマホ向けかPC版向けか

レスポンシブデザインの画像

今の時代ですとスマートフォンを利用する人が多いため、スマートフォンに対応しているホームページが当たり前と言われています。
ユーザビリティ性においても両方に対応するのが策であり、このようにさまざまなデバイスに応じて表示を変えるデザインのことをレスポンシブデザインと呼びます。

自分で一からレスポンシブなホームページを作ろうとするといろんな専門知識が必要なため大変難しく、また時間もかかってしまいます。

だからと言って、業者に制作を依頼するほどの予算もないし、、、
という方には、ホームページ作成サービスなどで提供されているレスポンシブデザインのテンプレートを利用すれば、低コストでかっこいいホームページが作れるのでおすすめです。

③余白と色調を意識する

注目させることに対して別の方法として、十分な「余白」を取ることです。
行間や空白で見てほしいキャッチフレーズを大きく目立たせることができます。

appleの画像

明るめの色は色相の低い暗めの色より目立ちます。目立たせたいものは明るくして他は暗くすることで強弱をつけましょう。
また配色選びはとても重要で、色によってイメージが異なります。例えば、赤には「情熱、重要、勇気」のイメージがあり、青には「信頼、誠実、開放感」などのイメージがあります。

そのためまだホームページの配色を決めていない人は、ユーザーにどのように見られたいかを想定してから決めても良いでしょう。

デザインの見本になるサイト

①OCEANUS

oceanusの写真

OCEANUSのHPはこちら

見せたい商品とコンセプトがはっきりとしていて伝えたいことがわかりやすいです。
他のページもすっきりしていて商品比較楽しみながら見ることが出来ます。

②aniary

aniaryのHPはこちら

写真集のようなデザインで商品やモデルの画像が流れていきます。
画像の横幅を合わせないことで、左右にスクロールされることをユーザーに分からせています。

おすすめのギャラリーサイト

1つ1つ検索するのが面倒で同時に比較してみたいという方には、すでにまとまっているサイトもあるのでそちらもご紹介します。

WordPressなどで作るときの参考にしてほしいと思います。

①Wordpressデザインギャラリー

デザインギャラリー

WordPressデザインギャラリーのHPはこちら

WordPressで制作された数々のホームページがたくさん投稿されているサイトです。

またコンテンツ内容とテイストで分けられていていますので、自分のコンセプトと似たモノであるならば参考にしてみると良いでしょう。

②WEBデザインの見本帳

webデザインの見本スクショ

WEBデザインの見本帳こちら

色んな企業のホームページのリンク概要が記載されています。最大の特徴としては印象 色 キーワード ジャンルと分けられていますので、自分のサイトの参考にしやすいところにあります。

③awwwards.

awwwards.はこちら

awwwards.では、ユーザーによる人気投票順にサイトを見ることができます。

また、海外のサイトがほとんどなので世界でどんなサイトが良いと思われているのかを知ることができます。

ギャラリーサイトでサンプルを探すためのコツ

①サービス・商品のカテゴリで探す

同じカテゴリの商品やサービスでも見せ方によってユーザーに与えるイメージが千差万別です。

下の例では、どちらも車メーカーのホームページですが上のフォルクスワーゲンの例はゆったりとしたイメージを与えるのに対して、下の三菱自動車の例では力強い印象を抱かせます。

「自社の商品やサービスをユーザーにどう認識して欲しいか」を考えましょう。

②サイトイメージで探す

「自社の商品やサービスをユーザーにどう認識して欲しいか」が決まったら、そのイメージに合わせて参考サイトを探してみましょう。

ここで注意が必要なのが、同じ言葉でも人によって思い描いているイメージが異なる場合があることです。

例えば、クライアントから「ポップな感じで!」とお願いされた際に、あなたは上の様なデザインを想像してたのにクライアントは下の様なものを考えていたなんてことにもなり得ます。

そこで、「こういうイメージのサイトにしたい」と例を見せられると良いでしょう。

ホームページを作る方法

ホームページを作るにはいくつか方法がありますのでひとつずつ紹介していきます。
自分にあった方法を選んでホームページを作りましょう。

①HTMLやCSSなどを覚えて自分で作る

まずは勉強して自分でホームページ作る方法です。
ホームページを作ろうと考えた時に最初に思いつく方法かもしれませんね。

ホームページの作成にはHTMLやCSSといった専門知識が必要になりハードルが高いもののお金をかけずにホームページを作る事ができます。

  • 費用をかけずにホームページを作成できる
  • 専門知識が必要であるためハードルが高い
  • 勉強する期間が必要で完成まで時間がかかる

②ホームページ作成サービスを使う

ホームページを自力で作る自身がない人や勉強する時間がないという人はホームページ作成サービスを使って作るのも手です。

ホームページ作成サービスは、更新作業がブラウザ上の操作で済むだけではなく、公開場所の確保も含めたあらゆる準備作業もブラウザ上の作業だけで済み。
なにより簡単かつハイスペックなものが低価格で揃っていますのでオススメです。
またブラウザ以外のソフトウェアが不要なので、最も準備が少なくて済む手段です。

  • パワーポイントのようにマウス操作でパーツを貼り付けるだけで簡単にホームページができあがる
  • ブラウザ上でほぼすべての操作が完了するので、他のソフトウェアやサーバーはいらない
  • 低コストでホームページを作成できる

ペライチ

登録から公開まで最短10分と、驚くほど早くページを作成することができます。
テンプレートやブロックの種類も豊富で、素材や配置をカスタマイズすることができます。
また、月額500円でネットショップが作れるので個人でお店を経営している人などにおすすめです。

ペライチのHPはこちら

WiX

wixのスクショ

直観的な操作で作ることが出来て、WIX自体に画像編集や動画編集写真素材などの、いくつかのデザインツールがあるので画像加工ができます。
こちらもコンテンツよってはネットショップを手軽に開業することができます。
おしゃれなホームページを作りたい人におすすめです。

WixのHPはこちら

Ameba ownd(アメーバ オウンド)

アメーバオウンドの画像

Ameba Owndは、Amebaを運営するサイバーエージェントが提供する無料のホームページ作成ツールです。特徴としてはスマートフォン用のテンプレートもあるのでスマ―トフォン表示の場合も安心して使うことが出来ますし、スマートフォンからの更新や独自ドメインも無料で設定ができます。

また商用利用で無料設定ができ、Shop by Owndという EC機能も実装されているのでECサイトとして使うことも出来るのも特徴です。

Ameba OwndのHPはこちら

③ホームページ作成アプリを使う

ホームページ作成アプリを使えばスマホからでもホームページを簡単に作る事ができます。
パソコンを持っていないけどホームページを作りたい場合はアプリを使って作りましょう。

また、ホームページ作成アプリならスマホからいつでも編集できるという点も魅力で外出中にも修正や変更ができますので便利です。

  • アプリでホームページを作れるからパソコンが必要ない
  • 手軽にスマホから編集できるから便利
  • スマホで撮った写真をそのまま利用できる

グーペ

グーペはアプリでホームページを作る事ができるサービスです。
飲食店などの店舗向けのテンプレートがそろっており、アプリで気軽にお店のホームページを作りたい時におすすめのサービスです。
15日間のお試し期間がありますので、その間にホームページを作って利用するかどうか判断すると良いでしょう。

グーペのHPはこちら

Crayon(クレヨン)

Crayonもグーペ同様アプリからホームページを作る事ができるサービスです。
スマホで撮影した写真をすぐに取り込むことができますので、簡単に素材を準備する事ができます。

CrayonのHPはこちら

まとめ

いかがでしたでしょうか?
かっこいいホームページにするのであれば色とビジュアルヒエラルキーを意識することにより、商品の魅力を最大限に伝えることが出来ます。

またHTMLなどを知らなくてもホームページ作成サービスで簡単に作成することができるので、自分のかっこいいと思うホームページを作ってみて下さい。

かっこいいホームページを作るならペライチがおすすめ

ホームページ作成ツールを利用するならペライチがおすすめです。
無料プランで使い勝手や、テンプレートのデザインを確かめて見ると良いでしょう。

まずはペライチを使って最初の1ページを公開していきましょう。

ペライチでホームページをつくってみる!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする