こんにちは!三河屋 田中です。 今回はWebサイトができる流れについてお伝えしていこうと思います。
1.コンセプト
2.企画・コンテンツ整理
3.他社調査
4.設計① サイト構造を決める( サイトマップ)
5.設計② 各ページ構造を決める(WF)
6.コンテンツ準備
7.トンマナ策定、デザイン
8.実装
9.公開
デザインする上で大切な考え方
トンマナ策定、ボタンの配置やサイズ感一つをとっても
デザインをするには、そこには理由が必ずある。
その理由を自分の中で明確にするために、知る。考える。
目次
・サイトのコンセプトを考える
・他社調査
・企画・コンテンツ整理
・画面設計(サイトマップ)
・WF(ワイヤーフレーム)
・コンテンツ準備
・トンマナ(トーン&マナー)策定
・デザイン
・実装(コーディング)
・公開
・サイトのコンセプトを考える
サイトコンセプトとは、そのWeb サイトで誰に向けて何をコミュニケーションしたいのかを表す概念
ゴール設定
例:企業ページの場合
名刺としての機能を持ったホームページを作りたいだけ
→あまり凝ったことをする必要はない
商品を売りたい、問い合わせを増やしたい、顧客への情報提供と交流を行いたい
→ホームページで獲得したい具体的な成果を明確にする
5W1H で考える
・What( 何を)= 目的
ユーザーが、Web サイトで「何を」得られるかを考えてみる
ユーザーがどんな問題を抱えてサイトを訪れ、そこでどんな問題が解決できるのかを考えることで、導き出すことができる
・Why( なぜ)= 意義
ユーザーにWeb サイトがどんな価値を与えられるかということ
「What」とかなり近い部分なので、併せて考えてもよい
・Who( 誰が)= ターゲット
どんな人にみてほしいか
「20 代女性」などの大きなくくりではなく、この商品やサービスが響くのはどんな人物か職業や学歴などの属性や、価値観、悩みや願望など、具体的なイメージ像を作り上げる
・When,Where( いつどこで)
ユーザーがWeb サイトを閲覧する状況を考える
仕事中に会社のデスクでパソコンで見るのか、通勤中にスマートフォンで見るのかWeb サイトの最適な構造は大きく変わる要因になる
・How( どうやって)
ユーザーがどのような経路でWeb サイトを訪れるかを想定する
自然検索からの流入数が多いのか、SNS や広告からの流入数が多いのか
などを想定して設定する
・他社調査
近い目的を持った他社が、どのような見せ方やコンテンツ内容にしているか
を調査する
・企画・コンテンツ整理
・掲載内容を洗い出す
・目的を達成するために必要な内容を考える
・他社調査をしながら掲載するべき情報を洗い出す
名刺程度の役割を求めているのであれば、「事業内容」「連絡先」「アクセス」などの情報が必要
Web 集客を考えるのであれば、「お客様の声」「事例」「Q& A」「問い合わせフォーム」が必要 など
SEO → Search Engine Optimization, 検索エンジン最適化
検索エンジンからサイトに訪れる人を増やすことで、Web サイトの成果
(CV= コンバージョン) を向上させる施策
CV=Web サイトの目標が達成されること
→問い合わせに繋げる、商品を購入してもらう、など
SEO 対策
キーワード検索をしたときに上の方に表示されることを目指す
そのために、
・キーワードとの関連性の高さ
・良質な情報を掲載していることを目指す
SEO の評価判断とは
クローラと呼ばれるロボットがインターネット上のあらゆるWeb ページを巡回して情報を収集クローラが集めた情報はデータベースに蓄積される
( これを「インデックスされる」と言う)そしてGoogle 独自のアルゴリズムによりページが評価される良質かどうかは、例えば薬事法など法律に違反していないか、などが細かく判断される
・画面設計(サイトマップ)
情報のグルーピング
類似している情報ごとにグループをまとめる
サイトの構造を決める
必要な情報を種類ごとにまとめて、関連付けて構成を組み立てていく
( コンテンツを何ページに分け、なにをどこで掲載するかを決めていく)
どのページがどのカテゴリーに属して、どのカテゴリーがどのメニューに属するのか」という構造をまとめたものを、「サイトマップ」や「ディレクトリマップ」と呼ぶ
ページに振り分ける
・WF(ワイヤーフレーム)
情報のレイアウト
どんな順番で情報を伝えたらお客さんが行動してくれるか、を考える
ワイヤーフレーム
ワイヤーフレームとは、その名のとおり「ワイヤー( 線)」と「フレーム( 骨組み)」を使って、各ページのどこになにを掲載するかを示した図のこと
ページのどこになにを掲載するか、という配置を決めていく「どうすれば見やすいか」「どうすれば使いやすいか」ということを、閲覧者の目線に立ってよく考えておく
・コンテンツ準備
掲載する画像やテキストを用意する
画像やテキストはクライアントが用意することが一般的
デザインをする前に全ての情報が揃わないことも多い
その場合は、内容や方向性は確実に握った上で、同時進行で進める
サイトのイメージを左右する画像は先に用意してもらう
※使用写真の保管場所や文言確認シートは共有ボックスにすると便利
・トンマナ(トーン&マナー)策定
デザインルールを決める
配置や配色、使用するフォント、ボタンルールなどの
トーン&マナーを詳細に詰める
例:タイトルの文字サイズ、上下の余白は?
文字は中央揃えか左揃えか?など
大きなサービスなどの場合、パーツ一覧を作ることも
・デザイン
トンマナに従い、下層ページへデザインを展開していく
・実装(コーディング)
コーディングとは、プログラミング言語を使ってプログラムを
組み立てていくことデザインしたままでは、それは画像でしかない
URL を入力して、Web ブラウザで表示されるためには、html やcss、js などプログラミング言語で組む必要がある
・公開
サーバーにデータをアップして、ドメインとサーバーを紐づける
・独自ドメインの取得
・サーバーをレンタルする( 自社サーバーの場合もある)
・ドメインとサーバーを紐づける
・ファイルをサーバーにアップロードする
・閲覧できるか確認する
Webサイトができるまでにたくさんの工程があることがわかったと思います!最近ではWordPressやノーコードなどで簡単に作成することはできます。ただ、達成したい目的に対してデザインされているのかどうかでサイト事態の価値が変わってくると思います。
「デザインをするには、そこには理由が必ずある。
その理由を自分の中で明確にするために、知る。考える。」という言葉が最近、頭から離れません。 それではまた!