【初心者向け】ホームページを作る時必ずチェックしたいポイントはこれだ

スポンサーリンク
【初心者向け】ホームページの作る時必ずチェックしたいポイントまとめ プログラミング
悩む女性

ホームページを作ってみたけどうまくまとまらない。。何を意識してホームページを作ればいいんだろう??

こんな悩みに答えます

この記事を読むとホームページを作る時に必ずチェックしたいポイントがわかります

最後にポイントを意識したサイト作りの練習方法も紹介します!

初心者の方必見!

ではどうぞ☟

スポンサーリンク

作るポイント①:ターゲティング

まずはターゲティングを意識しましょう

ターゲティングとは簡単にいうと「誰が見るのか」を考えることになります

普段周りを見ると駅や街中には多くの広告があり、その広告は多くの人に注目されるように派手な色や大きいテキストが使われていたり、

若い人が集まる渋谷や原宿には若い人向けの商品やサービスの広告が貼られています。

これもターゲティングでありWebサイトではさらに見る人が絞られるので、よりターゲティングが必要になります

 

具体的には

ホームページを見る人の
  • 性別
  • 年齢
  • 見ている目的

を意識します

これを意識することで、ホームページを作るときの色や雰囲気を決めることができます

例えば、

10代から20代の女性がターゲットの時 ▶︎ ポップな画像を使ったサイトに、色は黄色やピンク

50代男性がターゲットの時 ▶︎ シンプルで落ち着いたサイトに、色は紺色や渋めの赤

などとホームページの方向性がターゲットによって変わりますね

妹子
妹子

育毛剤を売りたいのにカラフルで可愛らしいサイトだったら、その商品は買わないもんね!

 

ターゲットの性別・年齢・目的を意識して商品を買ってもらったりお問い合わせをもらえるホームページにしましょう!

スポンサーリンク

作るポイント②:デバイスの最適化

そしてもうひとつのポイントはデバイスの最適化です

見る人によって見え方が変わらないようにデバイスに最適化してからホームページを公開しましょう

 

例えば、このサイトをみてもらうとわかるようにWindowsで使える・見れるフォントとMacで使える・見れるフォントには少し違いがあります

ですから、せっかくMacでこだわって”フォントを指定したサイト“(ヒラギノ明朝を呼び出しています)を作っても全員にみてもらえるわけではないのです

 

そしてもうひとつ!!

モバイルデバイスへの最適化も忘れてはいけません

妹子
妹子

モバイルデバイスとは私たちが普段使うタブレットやスマホのことだよ!

WordPressや無料ホームページ作成サイトを使う場合は買ってに最適化(レスポンシブ)を行なってくれることが多いですが、

通常はCSSで自分で調整します

今の時代は8割以上の人がホームページをスマホからチェックします

ですので、スマホのデザインを先に行いパソコンへの最適化を行う方も多くいます

レスポンシブ化は以下のコードを使うことで簡単に行えます

headの部分に追加

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

CSSに追加

◯PC向け

@media screen and (min-width: 481px) { }

◯スマホ向け

@media screen and (max-width: 480px) { }

あとは{ }のなかにいつも通りCSSを追加していくだけです◎

簡単にできるので迷わず最適化してしまいましょう

スポンサーリンク

無料で練習する方法

では①ターゲティングと②デバイスの最適化を学んだらまずは無料でサイトを作ってみましょう

センスとは知識であり技術です!

初心者の方は特に、とにかく手を動かし知識と技術をつけていきましょう

 

今回は無料でホームページを作成できるサイトStrikinglyを使って練習していきます

手順はこちら

  • 苦手なジャンルを選ぶ
  • ターゲットを決める
  • サイトの目的を決める
  • Strikinglyを開く
  • サイトを作る

苦手なジャンルを選ぶ

まずは今回作るサイトのジャンルを決めます

なぜ苦手なジャンルを選ぶかというと、未知のジャンルのお仕事が来た時にすぐに対応できるようにするためです

そもそも仕事を依頼してくれるクライアントというのは商品についての情報を求めているわけではなく、ページを作って欲しいだけなので

苦手なジャンルの知識はなくていいのです

知識がない時にどうするのかが大切なのです

では、どんなジャンルを選びましょうか

例えば、

  • ビットコイン
  • 不動産
  • コンドロイチン
  • 皮革

この辺りはどうでしょうか?

私は全く無縁の領域です!(笑)

他にも見てみたい方はこちらのサイトをご覧ください

ターゲットを決める

ジャンルが決まったらターゲットを決めましょう

試しに上記の中で「皮革」を選んでみましょう

設定

この会社は皮革製品を作る会社で卸売業者に売ります

卸売業者のターゲットは30代から50代の男性です

買った人にもサイトを訪問して欲しいので30代から50代の男性向けのサイトにしたいです

架空の会社ですがサクッと設定を作りましょう

他にもビットコインを選んだのであれば

ビットコインをやりたい人向けのサイトで、その人は初心者である

という設定を作れますね

目的を決める

目的とはこのサイトでお客様に何をして欲しいのかということです

今回の皮革会社は会社の情報を出し、卸売業者に商品を紹介することを目的としています

ですので、コーポレートサイトを作ろうと思います

妹子
妹子

コーポレートサイトは会社の情報を紹介するサイトのことだよ〜

コーポレートサイトに必要な情報はこちらのLIGのサイトから

Strikinglyでサイトを作る

あとは今までの設定からサイトを作るのみです!

Strikinglyでサイトを作る方法はこちらの記事をチェック

 

プログラミング学習3週目の時にStrikinglyで皮革会社のサイトを作ったので公開しちゃいます

HOPE LEATHER

荒削りではありますが、ターゲティングをしっかりとしテキストも自作したのでど素人にしてはまあまあな出来になったかなと思います

(HOPE LEATHERという名前も見つけた画像にHOPEと書いてあったからという単純な理由です!(笑))

画像は無料で著作権フリーのサイトを使うようにしましょうね!

今回はここまで!

素敵なホームページを作りましょう


【ランキングに参加しています】
面白かった!参考になった!という方は下のボタンをクリックしてくれると筆者が喜びます!

ブログランキング・にほんブログ村へ 人気ブログランキングへ
プログラミング
スポンサーリンク
この記事をシェアする
KANONをフォローする
kanonblog

コメント

タイトルとURLをコピーしました