【HTML＆CSS】Webサイトの制作の流れ

おはようございます！

7月26日 金曜日。晴れ🌞
最高気温35℃。これがあと1ヶ月以上続くんか。。。|ω・;)

気にせず今日もやっていきます。。。

今日の教材も昨日に引き続きこちら、

昨日の最後に、CHAPTER１をスキップしていくかどうか検討すると言いましたが、

CHAPTER１の中でもナレッジとして重要なことが１－７にあったので学んでまいります。

（他のCHAPTERも重要そうなところはやって、別にスキップしてもいいやつはスキップしてこうかなと。。）

さあ！それではさっそくやっていく！

CHAPTER１　最初に知っておこう！Webサイトの基本

　Webデザイナーは、単にWebサイトのデザインをするだけではない。Webデザイナーは、企画・設計、デザイン、コーディングと呼ばれるファイル作成までを行う。特にフリーランスで働きたいという人は、すべての作業を一人で行う必要がある。

※Copilotにて確認し、加筆しています。

１．企画を立てる

◆目標を設定する

　　最初に、主軸となる目標（メインゴール）と、それに伴う目標（サブゴール）を考える。

＜メインゴールの例＞※赤字は加筆

　・商品の売り上げを伸ばす
　・資料を請求してもらう
　・作った商品を見てもらう
　・自社にあった人材を獲得する
　・新規サービスのPRをする

　・情報提供
　・コミュニティ形成
　・リードジェネレーション
　・エンターテインメント
　・教育

　　　　　↓

　メインゴールが決まったら、それを達成するためのサブゴールを１～３つ程考える。

　　　　　↓

＜サブゴールの例＞※赤字は加筆

　・商品の特徴を知ってもらう
　・会員登録をしてもらう
　・動画を見てもらう
　・商品をSNSで広めてもらう
　・レビューを書いてもらう

　・ユーザーエンゲージメントの向上
　・コンバージョン率の向上
　・サイトのパフォーマンス向上
　・SEOの強化
　・ユーザーサポートの充実
　・ブランド認知度の向上

目標を達成したかをどのように計測するのかも考えておくこと。例えば、売上金額やアクセス数、会員登録数、SNSの「いいね」の数のような、数字でわかる目標だとわかりやすい。

◆ターゲットユーザーを決める

目標を決めたら、次に「ターゲットユーザー」を決める。
→ターゲットユーザーを具体的に考えておけばデザインのイメージがしやすい。

　・性別　　・年齢層　　・職業　　・趣味　　・悩み　　・収入　　・国や地域

　・ファッション愛好者　　・主婦　　・学生　　・教育者　　・起業家
　・映画、ドラマファン　　・ゲーマー　　などなど

×「１０～４０代の女性、主婦・会社員・学生」→範囲が広すぎて曖昧
〇「２０代の女性、会社員」→年齢層は10歳前後の幅を設定するとよい

<ペルソナ>
　ターゲットユーザーをより具体的に詳細に描写した架空の人物像のことを「ペルソナ」という。ペルソナを作成することで、ユーザーのニーズや行動パターンをより深く理解し、Webサイトの設計やコンテンツ作成に役立てることができる。

<ペルソナの例>

１．eコマースサイトのペルソナ
　・名前：佐藤華々子
　・年齢：28歳
　・職業：IT企業のマーケティング担当
　・趣味：ファッション、旅行、カフェ巡り
　・行動パターン：週末にオンラインショッピングをすることが多い。SNSでトレンド情報をチェックし、気に入った商品を購入する。
　・その他：最新のファッションアイテムを手軽に購入したい。忙しい日常の中で、オンラインショッピングを楽しみたい。

２．教育サイトのペルソナ

　・名前：鈴木ガジェット太郎丸β
　・年齢：19歳
　・職業：浪人生
　・趣味：野球、自作PC、ゲーム
　・行動パターン：平日は予備校に通い、講義後図書館にて勉強時間を確保。週末にはオンラインでよりよい教材を探し求めている。
　・その他：大学受験のための効率的な勉強方法を知りたい。試験対策のための教材や過去問を探している。東大合格を目標に毎日10時間勉強している。自分の名前は気に入っている。

２．サイトマップを作る

必要なページを書き出し、ページ同士のつながりや重要度などの構成を図にまとめる。この構成図を「サイトマップ」と呼ぶ。

◆ページをグループ分けする

構成をうまくまとめるコツは、関連するページをグループ分けすること。必要だと思うページを書き出した後、関連性のあるページ同士を１つのグループにグルーピングしていく。この時出来たグループが「階層」となる。

＜その他ポイント＞

　・ユーザーの視点を考慮
　・カテゴリの明確化
　・一貫性のある命名
　・階層構造の設計

＜サイトマップ例＞

※ユーザーが迷子にならないようスッキリと簡潔な構成が求められる

階層が深いほど、ユーザーは何度もクリックして目的のページに進まなければならない。サイト内で迷子になると「いいや、もう一回ググろ」ということになり、そのサイトは諦められてしまうので、必要なページを絞り、なるべく２階層以内に収めたほうがよい。
どんなに多くても３階層以内に収めること。

◆ページの優先順位

ページの優先順位を決めることは、ユーザーが重要な情報に迅速にアクセスできるようにするために重要。ユーザーが求めているページは何かを考え、優先順位の高いページはすぐに目につくようにナビゲーションメニュー内に配置する。

華金なので、ジョギングした後に角ハイボールを買うのでこれにて終了です。

おつかれさまでした～(‘ω’)ノ