誰のため?何のため?Webサイトを作り始める前に。

こんにちは!ついにWebクリエイターボックスのサイトが完成しました!これからこのサイトと、制作者のManaをよろしくお願いします!さて、さっそくですが最初の記事、Webサイトを作る前にすること。突然Photoshopを立ち上げてデザインを始めても、ユーザーが必要とするWebサイトが出来上がる可能性は極めて低いと思います。デザインやコーディングを始める前に、「このWebサイトは何のために作るのか」「誰がどのようにこのサイトを使うのか」をまとめておきましょう!


実践で学ぶWebサイト制作ガイド:その1

  • 目標:Webサイトを作る目的を明確にする
  • 必要なもの:紙とペン
  • 対象レベル:超初心者OK!

目次

  1. 誰のため?何のため?Webサイトを作り始める前に。 ←今ここ
  2. Webサイトの構成図を簡単に作れる便利ツール
  3. Webサイト設計図 – ワイヤーフレームの作り方
  4. PhotoshopでWebサイトのデザインをしよう
  5. Photoshopでスライスし、パーツ画像を作成するコツと方法
  6. 文書構造を意識しながらHTMLマークアップしよう!
  7. CSSでWebサイトのレイアウト組み+装飾の基本プロセス
  8. ついに完成!ファイルをアップロードしてWebサイトを公開!

どのような事をまとめておくのか

自身のサイトの場合は「自分が作りたいサイト」というよりも「ユーザーが求めているサイト」はなんなのか。そのためにはどんな機能やデザインが必要なのかをまとめます。クライアントのサイトの場合はここでの情報が重要なので、時間をとってしっかりと話し合いましょう。フォームを作成し、事前にクライアントに書いてもらうのもいいかも。

目的

  • このサイトはユーザーに何をもたらすのか
  • 最終的なゴールは?
  • なぜWebサイト(オンライン)でなければいけないか

ターゲットユーザー

  • 年齢層
  • 性別
  • 職業
  • パソコンorモバイル

機能

  • ダイナミックかスタティックか
  • 使用するCMS
  • 必要な機能(サイト内検索、ブログ、フォトギャラリー、ショッピングカート …etc)

競合Webサイト

  • コンテンツ内容
  • デザイン
  • どんなユーザーが利用しているか
  • このサイトに必要そうだけどまだないもの

以上をまとめておくことで、ターゲットユーザーにあったデザインの提案や機能の要不要を把握しやすくなると思います。

「Webクリエイターボックス」を例にあげてみる

Webクリエイターボックスの企画書

この画像はWebクリエイターボックスのサイトを立ち上げる際にまとめたものです。普段はあまり日本語のブログやチュートリアルサイトを見ないため、膨大な量のブログやサイトを調査しました。その結果…

英語で書かれたWeb関連情報の翻訳

多くの役立つ情報やニュースがあまり日本語訳されていないことがわかりました。特にWordpressのプラグイン。役立つプラグインも英語のみで書かれていては使い方も、どれほど使い易いかもわかりにくい。

スクリーンショット画像を使用

インストール手順やPhotoshopのチュートリアルも文章のみで説明しているサイトを多くみかけました。ターゲットユーザーを「Web制作初級から中級」としているため、文章のみの説明ではなく、スクリーンショット画像を使ってわかりやすくする。

ソーシャルサイトへのリンクを見やすく

日本のサイトのユーザーは海外のユーザーに比べて、あまりコメントを書き込まず、代わりにTwitterやはてなブックマークでリンクしていくようです。なのでそういったソーシャルサイトへのリンクをわかりやすく。特にはてなブックマークのリンクボタン( ←これ)はかなり小さいので大きく、でもデザインを崩さないように表示する。

このような事前準備や競合サイトの調査を通じて、自分の、あるいはクライアントのWebサイトがオリジナル性のあるものになるのでは?と思います。クライアントのサイトを作る場合はこの話し合いの中で「何を求めているのか」を注意深く探っていきましょう。

» 次回:Webサイトの構成図を簡単に作れる便利ツール

Web制作の手順や方法をさらに詳しく説明している拙著 Webクリエイターズガイドブックも参考にして頂ければ幸いです!

シェアする

コメント

“誰のため?何のため?Webサイトを作り始める前に。” への27件のフィードバック

  1. 初ポスト!コメントもテストテスト。。。バグ退治中。。。

  2. […] This post was mentioned on Twitter by sakistyle, Webクリエイター ボックス. Webクリエイター ボックス said: 誰のため?何のため?Webサイトを作り始める前に。 ::: Webクリエイターボックス http://bit.ly/7krZEq […]

  3. WEB人 より:

    脱・ド素人!Webデザイン初心者向けのガイド、サイト制作の手順とコツ。…

    Webデザイン初心者向けの、作業手順(ワークフロー)解説。脱・ド素人!…

  4. くすお より:

    これはやばい!
    バリバリクール!

  5. […] まずはWebサイトを作る目的を考える 誰のため?何のため?Webサイトを作り始める前に。 […]

  6. […] まずはWebサイトを作る目的を考える 誰のため?何のため?Webサイトを作り始める前に。 […]

  7. さきの より:

    はじめまして。webデザイン、超ド級の初心者のものです。スコットランドはエディンバラでスコットランド人の彼と生活を初めて3ヶ月が発ち、何か新しいことを学びたいと思いたって、この分野に独学で挑戦しようと決めました。もともとこの分野に詳しい彼からw3schoolsのチュートリアルを教えてもらったんですが、すべて英語なので、やはり日本語での説明も読みつつ英語での勉強をしたいと思っていたところ、このサイトにたどり着きました。まだまだ駆け出しで右も左も分からないほどですが、大いにこのサイトを活用させていただきます。このサイトを作ってくれてありがとう^^

  8. webのメモ帳 より:

    […] 前々からブログを書いてみたい!とは思っていたのですが、最近色々と思うこともあり、ついにサイトを立ち上げることにしました。仕事で少しはサイトに関する知識はあったのですが、自分で一からwebページを作ることは初めてのことだったので、何から手を付ければ…と思っていたのですが、Webクリエイターボックスさんのこちらの記事をみて、とりあえずどんなページを作るのかを簡単に考えてみました。 […]

  9. はぴ より:

    めっちゃおしゃれなwebですね!
    説明もわかりやすくグラフィックが好き!!

    勉強させていただきます!

  10. Kyonpei より:

    はじめまして!
    WEB制作初心者のKyonpeiです
    サイトの構成やデザイン、コンテンツなどどれをとっても素晴らしいです!
    今後、Webクリエーターボックスさんのサイトをたくさん使わせてもらい、勉強させていただきます。
    よろしくお願いします。

  11. kaori より:

    こんにちは。
    manaさんのホームページ作りを参考に自分も作ります。
    これからも参考にさせていただきます。
    宜しくお願いします。

  12. […] なんの為のものか、そこんとこはっきりさせてから作れ」というふうに言われています。 […]

  13. […] 『誰のため?何のため?Webサイトを作り始める前に。』 […]

  14. […] ブログ運営前の心構えとして 1、誰のため?何のため?Webサイトを作り始める前に。|Webクリエイターボックス 2、ブログの更新が続かない理由10か条をぶっ飛ばす|無料SEO対策のススメ […]

  15. […] 誰のため?何のため?Webサイトを作り始める前に。 | Webクリエイターボックス […]

  16. […] ■Webクリエイターボックス 2009年1月3日 誰のため?何のため?Webサイトを作り始める前に。 […]

  17. […] 誰のため?何のため?Webサイトを作り始める前に。 […]

  18. なかなかサイト作りが捗らないので参考になります。

    記事の最後に次の章へのリンクを貼った方がいい気がします。

  19. 追加しました。ご提案ありがとうございます!

  20. […] Planning a Perfect Website Content […]

  21. […] 企画もWebクリエイターボックスさんを参考に簡単につくってみました。 […]

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)