こんにちは！当コラム担当の高原です！専業アフィリエイター歴8年で、WEBメディア運営会社を経営しています。
Twitter（@Koshiro_Taka）でも役立つ情報をつぶやきますので、よかったらぜひフォローしてくださいね^^
実は、Webデザインを学んでいない人がホームページのデザインを自分で考えてイメージ通りのものができあがるなんてことは無いと思った方が良いでしょう。
Webデザインは誰でも簡単にできそうなイメージがあるかもしれませんが、
ある程度の知識と経験が必要です。
ですから、何も学ばずに感覚だけで納得のできるデザインのホームページが完成するなら、すごいセンスの持ち主かもしれません。
しかし、センスが無いから無理と嘆くのはまだ早い。
アート作品を作っている訳ではないので、センスより知識です。
つまり、多くの良いホームページデザインを見て触れることではないでしょうか。
日々の生活の中でも良いデザインに触れることが大事です。
しかし、日常生活においてデザイン性に富んだホームページに多く触れるのも難しい話。
そこで今回は素晴らしいホームページデザインを簡単に閲覧できるサイトを紹介します。
更にホームページのデザインを考えるときのポイントについても紹介しますので、今後のホームページ作成に役立てて頂きたいと思います。
ホームページデザインの参考にしたいサイト5選！
デザイン性に富んだホームページを閲覧しようと思っても、ただ単にネットサーフィンをしているだけではなかなか参考になるホームページは見つからないものです。
そんな時に便利なのが、ホームページの参考となるデザインをまとめたサイトです。
実は、ホームページデザインで有名なアーカイブやまとめサイトと言われるものがあるのです。
その中からおすすめしたいのが、次の5つのサイトです。
- LP アーカイブ
- MUUUUU.ORG
- S5-Style
- straightline bookmark
- WebDesignClip
では、それぞれについて詳しく見ていきましょう。
LPアーカイブ
LPアーカイブはLPのデザインを保存し、未来に活用するようにと作られたサイトです。
LPとは何でしょうか？一見、一般的なホームページのようにも見えますが、一般的なホームページとは何が違うのでしょうか？
実はLPとは「ランディングページ」を指しており、ある商品やサービスを紹介する為の一枚の長いホームページのことです。
多くのLPはストーリー性があり、読み進めていくことで商品やサービスに興味を持ち、最終的に購入や申し込みをしてもらうための少し特殊なホームページになります。
ですから、一般的なホームページとは若干性質が異なりますが、プロのデザイナーが制作しているホームページなので非常に参考になります。
LPアーカイブの主な特長としては次の4点です。
- 登録されているホームページのデザイン数が非常に多い
- ホームページのイメージカラーで検索できる
- ホームページの業種で検索できる
- ホームページのキャッチコピーの確認が簡単
とにかくデザイン数が多いので、ずっと見ていても飽きません。
しかし、時間を忘れて見入ってしまうこともあるので注意してください。
LPのデザインを保存したサイト。
ホームページのデザイン数が多く、「イメージカラー」「業種」で検索できる。
MUUUUU.ORG
MUUUUU.ORGは主に縦に長いサイトを集めているサイトというキャッチコピーです。
ですから、先程のLPアーカイブと同様にデザインとしてはLPのようなイメージのホームページがメインとなっています。
MUUUUU.ORGの特長としては
- 見やすさ・使いやすさを追求
- カテゴリーの分類が解り易い
という点ではないでしょうか。
MUUUUU.ORGは他と比べると後発で、特に見やすさと使いやすさの部分にはこだわりを持っているとのことです。
LPアーカイブとの違いは、LP以外のホームページも多数登録されている点です。
特にカテゴリの「TYPE」を見てみると、
- ECサイト
- Webマガジン
- コーポレートサイト
- ブランディングサイト
などに分類されているので、一般的なホームページのデザインを見たい時には便利です。
縦に長いサイトを集めている。
見やすさ・使いやすさを追求したサイト。カテゴリーの分類がわかりやすい。
S5-Style
S5-Styleの最大の特長はOR検索とAND検索ができる点です。ありそうでなかった機能という感じでしょうか。
メニューから「Filter」を選択すると、【OR】と【AND】が選択できるようになります。
例えば、ORを選択した状態で、サービス、イメージカラー、タイプなどを選択すると、絞り込まれたホームページデザインが表示されます。
しかし、ANDを選択すると表示数が極端に少なくなる場合もあるので注意が必要。
色々な設定をして検索してみてください。
「OR検索とAND検索」ができるので、ホームページデザインを絞り込んで検索したい場合に便利。
straightline bookmark
straightline bookmarkは他のサイトよりは少し使いにくい印象を受けました。
色々な設定を行うには【tags list】というメニューを開く必要があります。表示が凄く小さいので、わかりにくいかもしれません。
実際に使ってみて感じた「straightline bookmark」の特長は次の通り。
- プログラム言語で検索可能
- ホームページのレイアウトで絞り込み可能
ジャンルやカラーデザインについては他のサイトと同じように指定ができますが、上記の2点が指定できるサイトは無いかもしれません。
プログラム言語については初心者レベルでは需要がないかもしれませんが、他には無い機能なので、一度利用してみてはいかがでしょうか。指定できるのは
- flash
- css
- javascript
- html5
となっていました。
また、レイアウトによる絞り込み機能についても非常に便利です。
あなたの作成するホームページのカラム数と同じホームページのレイアウトデザインを見てイメージを掴みましょう。
また、ブックマークやお気に入り登録している人の数が表示されているので、ちょっとした目安になるかもしれません。
プログラム言語（flash、css、javascript、html5）で検索、ホームページのレイアウトで絞り込みができる。
WebDesignClip
WebDesignClipの特長を簡単に述べると次の2点でしょう。
- ホームページの登録数が2000以上
- 細かい絞り込みが可能
「WebDesignClip」はホームページの登録数が2000以上なので、色々なデザインのホームページを見るには最適です。
また、カラーデザインという点では、
- メインカラー
- サブカラー
の設定ができるのも親切です。
更に、キーワードによる検索ができるのもありがたいのではないでしょうか。有りそうで無かった機能です。
検索機能があれば、商品のジャンルによってどのようなイメージのデザインが最適なのかも良くわかります。是非利用してみてください。
ホームページの登録数が2000以上で細かい絞り込みができる。
では、色々なホームページのデザインを見たところで、あなたのホームページのデザインについても考えてみましょう。
美しいデザインにはいくつかのポイントがあるようです。
ホームページのデザインを美しくする3つのポイント
これまで、様々な美しいデザインのホームページを見たあなたは、自分の作るホームページもできる限り美しいデザインにしたいと考えていることでしょう。
では、どのようにすれば美しいデザインのホームページが作れるのでしょうか。
ポイントとしてはいくつもあるのですが、その中から初心者が取り組むべき3つのポイントを紹介します。
- 参考となるホームページの真似をする
- 余白とバランス
- 色づかいや色の組み合わせに気を付ける
では、もう少し詳しく見ていきましょう。
ホームページデザインは真似から入ろう！
学ぶという言葉の語源は「真似ぶ」ということをご存知でしょうか。
何かを学ぶことは、既にできているものを真似することから始めるのが王道です。
ホームページのデザインについても同様で、美しいホームページのデザイン、真似したいホームページのデザインを見付けたら、著作権違反にならない程度に真似してみましょう。
画像などをそのまま使用するのはいけませんが、その他の部分に関してはどんどん真似してしまいましょう。
特に、レイアウトや色使い、画像の大きさなど。できれば画像の雰囲気も似せるとより効果的です。
ホームページデザインは余白とバランスで決まる！
ホームページの印象は余白に大きく左右されます。
部分的なデザインも重要ですが、全体の余白のバランスも非常に重要です。
特に見やすさの点ではフォントや文字サイズも重要ですが、文字の間隔がより重要になってきます。
つまり、文字の上下の余白と段落の間の余白。
文字間隔は詰まり過ぎても間延びし過ぎても良くありません。丁度良い感覚を見つけてください。
この時も、前述したように、美しいデザインの参考となるホームページを見て研究するのが良いでしょう。
また、画像周りの余白についてもどのくらいが適切なのかを、自分なりに研究してみてください。
ホームページは色使いで雰囲気をデザインすべし！
ホームページで使用している色も重要です。
色には意味があり、暖色系・寒色系でホームページの印象を大きく左右します。
業種によって合う色があるので、注意しましょう。
また、デザインを考えるときには、使用する色の数についても考える必要があります。
楽しい雰囲気のホームページなら色数が多目に、クールな雰囲気のホームページなら色数を少なくしたデザインにするのが良いでしょう。
多くの色を使うとごちゃごちゃしたイメージになりやすいので、色数を減らして洗練されたデザインにするのがおすすめです。
- 参考となるホームページの真似をする
- 余白とバランス
- 色づかいや色の組み合わせに気を付ける
まとめ
今回はホームページのデザインについて取り上げてみました。では、記事を振り返ってみましょう。
何も考えずにホームページを作ると、どうしても素人っぽさが出てしまうと悩んでいる人も多いでしょう。
そんな時には美しいデザインのホームページを見て参考にするのが一番。
参考にしたいホームページは下記の5つのサイトで検索するのがおすすめです。
- LP アーカイブ
- MUUUUU.ORG
- S5-Style
- straightline bookmark
- WebDesignClip
そして、美しいデザインのホームページを見付けたら、以下の3つのポイントに注意しながらホームページを作ってみましょう。
- 参考となるホームページの真似をする
- 余白とバランス
- 色づかいや色の組み合わせに気を付ける
最初はとにかく美しいデザインの真似をすることが重要です。
どんなことでも真似をすることから始めるのが何かを学ぶ最速の方法。
しかし、どうしても難しい場合はホームページのテンプレートを使ってデザインを少しずつ変更する方法も良いかもしれません。
デザインに正解はないとは言われますが、明らかな不正解はあります。そんな不正解のホームページデザインにならないように注意してください。
あなたが素敵なデザインのホームページを作って公開されるのを楽しみにしています。
