• Web

Webサイトを作る前に必ずやっておくべき7つの項目

構成図(サイトマップ)

はじめまして。前川です。Neganinのサイトがやっと完成しました!いたらない点もあるかと思いますが、よろしくお願い致します。
早速ですが、ブログを制作する時にやったことを振り返りながら書いていきたいと思います。カッコいい大人は過去を振り返らないでしょうが、僕は過去を振り返る男です。
まずは制作前にやったこと!何も決まってない状態でデザインに取りかかってもユーザーのニーズと合致するものを作るのは難しいです。方向性も途中でブレたり、進行もスムーズに行かない状態になったりします。
物事を円滑に進めるためには逸る気持ちは海に捨てて、下準備をしましょう!


1.目的、目標を決める

サイトを立ち上げるには、まずは目的を決めます!偉そうに書いてますが、目的もなくサイトを立ち上げるかたのほうが珍しいでしょう。
え?って顔をした人は最終的にどんなサイトにしたいのか、ユーザーに対してどう影響を与えるサイトなのかを考えると、目的も固まってくるはずです。

次に目標です。具体的な数字(アフィリエイトサイトの場合は収入、店舗サイトの場合は来客数、プロモーションサイトはお問い合わせの件数など)を目標にし、達成するために何が必要かを考えておきましょう。
目標を決めておくと運営する際のモチベーションも上がってくる。はず!

2.ターゲットを決める

出来る男はペルソナといいます!早く出来る男になりたいです。
目的を決めたことによって大体の人物像は想像できてくると思います。どんな人かを具体的に書き出ます。
年齢、性別、どこに住んでいる人か、職業は何か。その人はパソコンを使う人なのか、モバイルを使う人なのかも考えておきましょう!

目的、ターゲットは今後のデザインに大きく関わってくるので、しっかりと目的に噛み合ったターゲットを想定することが重要です。

3.キーワードの選定

目標を達成させるために、ユーザーのニーズを把握して最適なキーワードを選定します。
ここでキーワードをしっかりと選定しておけば、コンテンツ制作時にユーザーのニーズにあったコンテンツが作れます。
Google様から高い評価も得られ、SEOに強いサイトになります!

キーワードはGoogle Adwordsのキーワードプランナーとかを利用しましょう。
ジャンルによっては膨大なキーワードの量になるので、ターゲットとする人を考慮して、キーワードの選定をすると案外絞れてきます。
詳しく知りたいかたは、バズ部さんのこちらの記事に詳しい説明が書いてます。

バズ部

すごく勉強になります!ありがたやー。

4.競合サイトを見る

先ほど決めたキーワードで検索して、SEOで成功している上位のサイトを見てみます。
コンテンツ、デザイン、利用しているユーザー、競合サイトにないものなどを分析し、良い点は取り込み、悪い点は見直して、これらか作るサイトに反映させます!

競合サイトと比較した際、競合サイトにないものがこれから作るサイトにあるのは大きな強みになります。

5.サイトの機能を考える

ターゲットを決めた際、モバイルユーザーの比率が高いのであれば、モバイルサイトも考慮にいれます。
サイトによってはモバイルユーザーの割合がPCユーザーより多いことも珍しくなくなってきました。
ですが、モバイルサイトの必要性についてはユーザーの8割が必要性を感じていないと回答している検証もあるので、モバイル対応は慎重に検討したほうが良いでしょう。

次に、動的なサイトを制作する場合はCMS(コンテンツマネージメントシステム)を使用するのか、CMSのどういう機能を使うのかも今後の作業に影響を与えるので制作前にある程度決めておきましょう。
競合サイトを見た際に大体必要な機能は解るかと思います。

6.構成を決める

いわゆるサイトマップというもので、ページ間の繋がりやページの重要度などを決めるものです。やり方は人それぞれでしょうが、まずは必要なページを全て書き出しましょう!
その後カテゴリーごとにグループ分けし、選定したキーワードや選定の際に得たユーザーのニーズなどから要らないページがないか確認し、ページに順位をつけて階層を作ります。

構成図(サイトマップ)

大体こんな感じのツリー型のものがサイトマップとなります。
僕は紙に書き出したり、場合によってIllustratorを使ってサイトマップを作成してますが、別のツールを使ったほうが楽なんじゃないかと思いながら生きてます。
皆さんにはそんな思いはしてほしくないので、cacooを紹介します。

cacoo

日本語対応もしているので、英語ができない僕でも安心。サンキュー!
ただし無料版は25ページまでの制限がついています。
使ってみてはいかがでしょうか!

7.サイトを設計する

ワイヤーフレームといわれるものを作ります。先ほどのサイトマップをみながら、何を、どこに、どうやって表示させるのかを書き出します。

ワイヤーフレーム

こんな感じです。たかがワイヤーフレームですが、ここをしっかりしてないと僕の場合は後々の作業で躓きがちになるので全力です。
ユーザーの視点移動も考慮して設計するように心がけ、サイトの機能を考えた際にレイアウトが必要なオブジェクト(ソーシャルボタン、サイト内検索など)がある場合はなるべくこの段階で入れてしましょう。

先ほど紹介したcaccoでワイヤーフレームも作れます!
ほかにもワイヤーフレームで検索すると色々なツールが出てきますので、自分に合うものを探しておくと別サイトを制作する際にスピードアップが出来ていいかもしれません。

以上、7項目でした。
クライアントとの打ち合わせの際はこれらを気にしながら話し合いましょう。

  • このエントリーをはてなブックマークに追加

記事を書いた人

アバター画像

Webディレクター / デザイナー

前川 洋輝

Hiroki Maekawa

高校生のとき、窓際の席でよく外をみてボーッとしてたら、友達から「いつもどこみてるの?」ときかれて「宇宙かな・・・」といったら「サイコ野郎」と言われてしまうくらい痛い青春時代を送りました。青春を取り戻すため、タイムマシンを作れる人を探す活動をしています。

コメント

コメントする

ブログカテゴリー

TOP