Webデザインの目的

単なる見栄えの良さではなく、写真やイラストなどのグラフィックや表などの視覚的要素を使って文字だけで伝わりにくい部分を視覚的に伝えることがWebデザインの目的です。
良いWEBデザインはターゲットユーザーにとって使いやすく、見やすく、そして目的を達成しやすいデザインです。
具体的には、以下の要素を満たすデザインが良いと言えます。

1.ユーザー目線のデザイン（ユーザービリティ）

• わかりやすいレイアウト
  • ターゲットユーザーを明確にし、ユーザーにとって必要な情報をわかりやすく配置する
  • ユーザーの行動を分析し、導線を明確にする
  • 重要な情報が目につきやすいように目立たせる
• 快適な操作性:
  • 操作がシンプルで迷うことなく目的にたどり着ける
  • ボタンやメニューなどの操作要素は、わかりやすく押しやすい大きさにする
  • 動きや音などの要素を効果的に活用する
  • ページの表示速度が速くなるよう最適化する
• 視覚デザイン
  • 文字や画像の読みやすさ、見やすさに配慮
  • ターゲット層に訴求する見た目
  • ブランドイメージに合致している
  • サイト全体で統一感のあるレイアウトと配色
• 情報設計
  • 必要な情報が適切に整理されている
  • コンテンツの質が高い
  • 信頼できる情報である
• アクセシビリティ:
  • 障害を持つ人でも利用できるように、アクセシビリティガイドラインを遵守したデザイン
• その他
  • 異なるデバイスでも操作性やわかりやすさを損なわないよう、レスポンシブデザインにする
  • ストーリー性のあるコンテンツで、ユーザーを惹きつける
  • コンバージョン（Webサイトに訪れたユーザーが何かしらのアクションを起こし、行動が成果に「転換」する）を促進する
  • 最新技術の活用
  • 定期的なメンテナンス

2.SEO対策

• コンテンツ制作
  • 独自性、情報量、読みやすさなど、さまざまな観点からターゲットユーザーにとって有益で質の高いコンテンツを作成する
  • ユーザーがどのようなキーワードで検索しているのかを調査し、ターゲットキーワードを選定し、可能な範囲でキーワードの出現率を上げる
  • ユーザーが読みやすく理解しやすいコンテンツ構成にするため、見出しや箇条書きなどを活用する
  • コンテンツを定期的に更新し、常に最新の情報提供を行う
  • レスポンシブデザイン
• 内部対策
  • 各ページのタイトルタグとメタディスクリプションは検索結果に表示されるスニペット情報になります。ターゲットキーワードを含め、簡潔でわかりやすい記述にする
  • 見出しタグは、コンテンツの構造を検索エンジンに伝える役割があるため、適切にh1～h6タグを使う
  • 内部リンクは、サイト内のページ同士を繋ぎ、ユーザーの回遊性を高める役割があるので、適切なアンカーテキストを用いて内部リンクを構築する
  • ユーザーが現在見ているページがサイトのどこに位置するのかをわかりやすくするため、トピックパス（パンくずリスト）を設定する
  • 構造化データは、検索エンジンにコンテンツの内容をより詳細に伝えるための仕組みです。適切な構造化データをマークアップすることで、検索結果にリッチスニペットが表示される可能性が高くなります。
    参考：サイトマップとは？2つの種類・作る必要性・作り方まで丁寧に解説
    参考：【初心者向け】構造化データとは？メリット・書き方・種類・ツールまとめ
  • ページの読み込み速度は、検索エンジンランキングの評価要素の一つです。ページスピードを改善することで、ユーザー利便性を向上させる
• 外部対策
  • ソーシャルメディアで自サイトの記事などを拡散し、被リンクを獲得する
  • ブランド名や商品名などがインターネット上で言及されることも、外部対策の効果になります。ソーシャルメディアでの口コミや、ブログ記事での紹介などを狙う
  • 関連性の高いサイトから自サイトへのリンクを獲得する。

これらの施策を総合的に行うことで、検索エンジンでの上位表示を目指し、Webサイトへの流入を増やすことができます。

PC表示のドキュメント（アートボード）幅の決め方

コンテンツ幅 [1060px] のPhotoshopのグリッドのガイド線設定

---

サイトの高速化

サイトの表示速度は離脱率に大きく影響します。一般的には、ページが表示されるのに３秒以上かかると40%のユーザーが去ってしまうと言われています。
また、Googleのガイドラインでは1ページあたりの総ファイル容量を1600kb（＝1.6MB）以下にすることを推奨しています。

出典：https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight?hl=ja