ホームページ作成の参考に!優秀デザインやレイアウトのまとめ

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

ホームページ作りの基本

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

シンプルなデザイン

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

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

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

ウェブサイトをより良く便利にする用語

アクセシビリティ

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


ユーザビリティ

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


モバイル対応

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


レスポンシブ

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


SEO

「Search Engine Optimization」の略でGoogleやYahoo!などの検索サイトにて
上位に表示されやすくするためのものです。

レイアウトについて

視覚的階層の理解

私たちは特定のパターンに沿ってウェブページを見ています。それらを理解することによってホームページ上で特に重要なものをより効果的に目立たせることができます。しかし、重要なコンテンツをいくつも置いていると逆効果になってしまうので注意しましょう。

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

直訳すると「視覚的階層」という意味で、フォントの色やサイズ、位置などによって表現される文字情報を視覚的に重みづけることです。これを意識してデザインの取り扱いルールをあらかじめ決めておくことが大切です。ただ意味もなく適当に変えているとユーザーにとっては読みづらいものへと変わってしまうので注意してくださいね。

スマホ向けかPC版向けか

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

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

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

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

余白と色調を意識する

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

appleの画像

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

参考サイト

OCEANUS

oceanusの写真

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

penetrar(ペネトラール)

ペネトラールの画像ペネトラールのHPはこちら
項目がすべて4つに分けられているので見る側はペースを掴みやすいく余裕があるのでとても見やすいです。

まとめサイト

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

WordPressデザインギャラリー

デザインギャラリー

WordPressデザインギャラリーのHPはこちら
WordPressで制作された数々のホームページがたくさん投稿されているサイトです。またコンテンツ内容とテイストで分けられていていますので、自分のコンセプトと似たモノであるならば参考にしてみると良いでしょう。

WEBデザインの見本帳

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

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

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

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

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

ペライチ


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

ペライチのHPはこちら

WiX

wixのスクショ

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

WixのHPはこちら

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

アメーバオウンドの画像

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

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

Ameba OwndのHPはこちら

最後に…

いかがでしたでしょうか?かっこいいホームページにするのであれば色とビジュアルヒエラルキーを意識することにより、商品の魅力を最大限に伝えることが出来ます。またHTMLなどを知らなくてもホームページ作成サービスで簡単に作成することができるので、自分のかっこいいと思うホームページを作ってみて下さい。

無料でホームページを作れる「ペライチ」

誰でも簡単にホームページ作成を!「ペライチ」

HTMLやCSSでお悩みなら簡単ホームページ作成サービス「ペライチ」におまかせください。
特別な知識は必要ありません。好みのテンプレートを選ぶだけで誰でも簡単にホームページを作ることが出来ます。
誰でも簡単にホームページ作成を!「ペライチ」

うきょりんです。
好きなものはドラクエです。

シェアする

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

フォローする