参考サイトを3つあげてください
目次
競合する会社(地域の競合、サービスの競合)
自社と同じ地域、例えば「渋谷区 賃貸」で検索した際に、自社のホームページが出てきてほしいなと思った場合、同じ地域の競合のサイトをまとめておいてください。
競合はその地域で喜ばれるサービスを提供している可能性があります。
サービスの参考やHPの参考になります。
同様のサービスを提供している価格帯の近い会社をあげておいてください。
ベンチマーク(売上の目標とする会社、ビジネスモデルの目標など)
目指すべき会社(売上など)や社員の働き方、ビジネスモデルなどをあげておくことで、サイトの参考になります。
見た目のイメージの近いもの(イケサイなどがおすすめ)
見た目の目指すイメージに近いHPをまとめておいてください。
こちらはとても重要です。
競合サイトでイメージが近いものでもかまいませんし、ベンチマークの会社からでもかまいません。
競合サイトやベンチマークにイメージに近いものがなければ良いサイトがあります。
それが『イケサイ』というサイトになります。
こちらは、様々なHPをストックしているサイトで、業種やジャンルで細かく区切られています。
オンラインショップをされる方やファッションでお考えでしたらそのカテゴリから選んで参考サイトを確認することができます。
参考サイトを一覧から探してイメージを考える
例えばH&Mのサイトの場合、サイト上部にメニューがあって写真があって商品が一覧で並ぶ縦に読んでいくサイトになっています。
様々なサイトの良い点をまとめておいて、自社のHPに取り入れるのが良いでしょう。
イケサイは色から選ぶこともできる
例えば、元気なサイトにしたいので、黄色をメインに使用したサイトの構成を考えます。
しかし、黄色と一言でいっても、薄い黄色なのか、赤みがかった黄色なのか、様々です。
そんな時にこの色から選択肢、黄色の中のどの黄色なのかをイメージしやすいかとおもいます。
また、黄色いサイトにサブの色、挿す色として何が良いかも参考サイトから考えることができます。
与えたい印象を書いておく
与えたい印象をまとめて置くことで、HP内で使用するフォントなどに影響を与えます。
例えば、テキストを読ませるようなサイトや伝統的、堅いイメージの場合は明朝体を使うなどがでてきます。
明るい印象、堅い印象、誠実、さわやかなど、簡単にで良いのでまとめておくことで、イメージにブレが無くなります。
使う色を16進数でまとめる
一番使う色 二番目に使う色 三番目に使う色を16進数(#ffffff)でまとめます。
色の指定をする場合、「黄色」といっても明るいものから暗いものまであります。
色を選択する際に同じ色を正確に選ばなければサイトの見た目がバラバラになってしまいます。
どの黄色、緑なのかを正確に指定するには、#+6桁の英語と数字で指定される16進数で色を指定する事がHP制作では多くあります。
一見複雑に見えますが、この色の指定を簡単に行う方法があります。
Google Chrome拡張機能を使う
グーグルクロームには、拡張機能という様々なツールを無料で使う事ができます。
クロームウェブストアというところから機能を追加して使用します。
こちらの検索窓に、colorpickなどで検索していただくと、ColorPick Eyedropper(他のツールでもかまいません)というツールがありますので、こちらをChromeに追加で追加してください。
例えば、イケサイの中でこのサイトの「このサイトのこの黄色」と考えたものがありましたら、 このツールを使います。
右上にあるツールのボタンを押して、参考にしている色の画像や文字の箇所にカーソルを合わせ、クリックすると、#000000などのコードがでますので、この数字と英語の組み合わせのコードをメモしておいてください。
次から色の指定をする際に、この#から始まる色で指定することで、いつも同じ色で指定することができますので、サイトのイメージにばらつきが出ることなく、指定をすることができます。
参考サイトを元に、制作を進めるのが早く、良いものを制作できますので、参考にして見てください。