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

ペライチバナー

ホームページ作りの基本

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

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

①シンプルなデザイン

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

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

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

レイアウトのコツ

①視覚的階層の理解

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

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

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

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

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

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

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

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

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

③余白と色調を意識する

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

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

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

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

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

①イケサイ

イケサイはおしゃれなサイトやかっこいいサイトなどを紹介しているギャラリーサイトです。
WEBサイトごとにカテゴリ分けされており探しやすくなっています。

自薦・他薦問わずイケてるサイトを申告できるようになっており、様々なジャンルのホームページが紹介されています。
デザインをする際に参考になるサイトばかりですので、これからホームページを作ろうと考えているのであれば一度覗いてみてはどうでしょうか?

イケサイはこちら

②WEBデザインの見本帳

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

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

「カッコいい・クール、かわいい・ポップ、美しい・アート・芸術的、さわやか・健康・癒し系」などの印象からデザインを探せます。
デザインの印象で探す事ができるのが他のギャラリーサイトサイトにはない特徴となっています。

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

③WebDesignClip

国内だけでなく海外のかっこいい&おしゃれなホームページを紹介しています。
パット見カテゴリ分けされていないように見えますが、右上のハンバーガーボタンをクリックするとカテゴリやタグ付けなどを使って絞り込み検索できるようになっています。
「WEB・情報サービス、アパレル・ファッション、アート・美術館・展覧会、インテリア・雑貨、ウェディング関連」などの幅広いカテゴリが用意されており参考になります。

WebDesignClipはこちら

④81-web.com

81-web.comは国内の優れたデザインを中心に紹介しているギャラリーサイトです。
カテゴリ検索はもちろん、色別にホームページを検索することができますのでデザインしたいホームページの雰囲気に近いサイトを探しやすくなっています。

「+」ボタンをクリックするとFavoriteにサイトが登録されます。
気に入ったホームページが見つかったら登録しておくとあとから見返すことができますので便利です。

81-web.comはこちら

⑤I/O 3000

I/O 3000は国内外のホームページのデザインを集めたサイトです。
カテゴリ別、タグ別の他に色からもホームページを探すことができます。

キレイ系なデザインのホームページが多くありますので、そういったデザインのホームページを作りたい人に参考になると思います。
下にスクロールすると自動でローディングされるのでずっとギャラリーを見ている事ができます。

I/O 3000はこちら

⑥MUUUUU.ORG

MUUUUU.ORG(ムーオルグ)はクオリティの高い縦に長いサイトを厳選して紹介しているデザインポータルサイトです。
国内外問わずおしゃれなホームページを紹介しています。

カテゴリ検索が充実しており、業種や、色での検索はもちろん「フラットデザイン、TOPページにJS多用、かわいい系、イラスト、エレガント」などデザインの系統からも検索する事ができます。

MUUUUU.ORGはこちら

⑦bookma!

bookma!はおしゃれなサイトが集まるホームページデザインギャラリーです。
カテゴリやタグなどがないため参考にしたいサイトを探すのが少々面倒ですが、紹介されているホームページはどれもハイクオリティーなものばかりです。

デザインとしてはおしゃれでjsなどで動的に動くものが多い印象です。

bookma!はこちら

⑧S5-Style

S5-Styleは国内外のデザインに優れたホームページを紹介しているギャラリーサイトです。
カテゴリの代わりにTechnicsという項目があり、ホームページで使われている技術「CSS、HTML5、Javascriptなど」で検索する機能があります。
また、お気に入りに登録する機能もありますので、気に入ったホームページが見つかったら登録しておくと良いでしょう。

S5-Styleはこちら

⑨straightline bookmark

straightline bookmarkは国内のホームページだけでなく、海外のホームページも紹介しているサイトです。
おしゃれなホームページから一風変わったホームページまで幅広く紹介されています。

タグ検索はありますが、英語表記になっているため若干使いづらいのが難点です。

straightline bookmarkはこちら

海外のギャラリーサイト

①awwwards.

awwwards.では、ユーザーによる人気投票順にホームページを見ることができます。
ログインすれば誰でも投票に参加する事ができます。

海外のホームページが中心に紹介されており、日本のホームページはあまり紹介されていませんが、世界のデザインのトレンドを図るには良いギャラリーサイトではないでしょうか?

awwwards.はこちら

②Engage Html Template

Engage Html Templateは海外のホームページ向けのホームページのデザインテンプレートを販売しているサイトです。
海外のキレイなデザインのホームページを探すときに便利です。

また、HTMLテンプレートギャラリーですので気に入ったデザインが見つかればそのまま購入する事もできます。

Engage Html Templateはこちら

ホームページのパーツ別ギャラリーサイト

①ブブンデザインアーカイブ

ブブンデザインアーカイブはホームページ全体のデザインではなく「見出し、ロゴ、送信ボタン」などのホームページに関する部分的なデザインに特化したギャラリーサイトです。

ホームページのデザインを作るにはロゴや見出しなどのパーツは重要です。
デザインしていく上で迷うこともあるでしょう。そんなときはブブンデザインアーカイブを確認してデザインの参考にしてください。

ブブンデザインアーカイブはこちら

②見出しデザイン.com

見出しデザイン.comはその名の通りホームページのデザインで使われる「見出し」のみを集めたギャラリーサイトです。
h2、h3、h4など見出しの強さによってデザインを変えなくてはいけませんので、複数のパターンを考える必要があります。

もし見出しのデザインに迷う事があれば見出しデザイン.comを一度見てみると良いでしょう。

見出しデザイン.comはこちら

WordPressのギャラリーサイト

①Wordpressデザインギャラリー

デザインギャラリー

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

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

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

バナーのギャラリーサイト

①バナーデザインアーカイブ

バナーデザインアーカイブはバナーのギャラリーサイトです。
ホームページを作っていく過程でバナーが必要になったりする事があると思います。

バナーのデザインは必要な情報を強調したり、限られたサイズ内に情報を詰め込む必要があったり、ホームページのデザインとは違うテクニックを求められます。

バナーデザインアーカイブを確認してクオリティの高いバナーを作りましょう。

バナーデザインアーカイブはこちら

まとめ

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

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

ペライチを使えば簡単にかっこいいホームページが作れる

これまでおしゃれ&かっこいいホームページのデザインギャラリーを紹介していきました。
かっこいいホームページを作るにはセンスはもちろんHTMLやCSS、PhotoShopなどのスキルが必要になります。

しかし、そんなホームページ簡単に作れない・・・・。と考えている人も居るでしょう。
そんなときはホームページ作成ツール「ペライチ」がおすすめです。

ペライチはプロが作ったテンプレートを選ぶだけでかっこいいデザインのホームページを作ることができます。
まずは無料で試してみて気に入ったら有料プランで様々な機能を使ってみてはいかがでしょうか?

ペライチバナー
【2019年版】ホームページが簡単に作れるツール7選

ホームページ作成ツールを使えば少ない費用で誰でも簡単にホームページを作ることができます。
おすすめのホームページ作成ツールを紹介していきますので参考にしてください。

おすすめの記事