初めてのWebサイト制作、STEP１「Webサイト企画」です。
Webサイトを制作するにあたって、まず最初のとっかかりは
「何のサイトを作るのか」を考えることです。
「Webサイト企画」は、Web制作において最も重要な部分です。
会社では、Webプロデューサー、Webディレクター、Webプランナーといった役職の方々が担当することが多いかと思います。
Webサイト企画は下記のような項目を考慮して、とことん練り上げていきます。
Webサイト企画をするにあたって重要なポイント
競合調査
作ろうとするサイトは他に似たようなサイトはないか、あるならそのサイトはどのようなサイトなのか、どんなユーザーを狙っているのか参考にします。
ターゲットユーザーの選定
どんな人たちに見てもらいたいサイトなのか、使ってもらいたいサイトなのか、そのユーザーの姿をはっきりさせます。
ニーズの調査
ターゲットユーザーがどんな情報を欲しているのか、どんな行動を起こすのかを、そのユーザーの立場になって考えてみる。ここで洗い出したニーズが、競合サイトには無かった場合そこが他サイトとの差別化のポイントとなります。
目標設定
作るサイトの目標はどこにあるのか（例えば、ショッピングサイトだったらユーザーに商品を買ってもらうことが目標）を明確にして、そのフローを考える。
おおまかに、こういうサイトを作ろう・・・と決まったら、上記のポイントを押さえてそのWebサイトの企画を熟考していきます。
この段階で、これから作ろうとするWebサイトが成功するかしないか8割～9割くらいは決まってしまうと言っても過言ではないほど、本当に重要な部分になります。
例えば、ペット関連の商品を紹介するサイトを作る場合
ペット商品といっても、ペットは犬なのか猫なのか、はたまたハムスターやうさぎなどの小動物なのか、何のペットの商品を取り扱うサイトにするのかを決めなければいけません。
もちろん、オールジャンルのペット商品を備えたサイトでも良いと思います。
ただ、ペット系のサイトは既に沢山存在しています。その中で、他のサイトと同じようなサイトを作ったところで、繁盛するようなサイトにはなりません。
そのサイトに訪問してみたい、そのサイトにしかない情報を知りたい、そう思ってもらえるようなサイトがより多くのユーザーを集めるサイトになっていきます。
そして、ペット商品を欲しがっているユーザーにはどんな人がいるのかも調査します。
犬の商品を求めるユーザーが多い場合、犬関連の商品を扱うとより多くのユーザーを集客することができるかもしれません。ただし、人が多く集まるところには競合も集まってきますので、競争が激化することが予想されます。
逆に、うさぎなどの小動物系の商品を求めるユーザーは少ないかもしれませんが、それを取り扱うサイトも少なくなる場合があります。そうなると、より早くにターゲットユーザーの目にとまることが可能になってきます。
さらに、サイトのジャンルをセグメントすればするほど、より専門性が高くなってきますので、そういった情報を求めるユーザーとの相性が高まっていきます。
相性が高まっていくとどうなるかというと、そのサイトの目標達成値が高まってくるのです。
つまり、このペット商品を扱うサイトの場合だと、目標は商品を購入してもらうことです。
このように、どんなサイトをどんなユーザーやジャンルを狙って作っていくか、「競合調査」「ターゲットユーザーの選定」「ニーズの調査」「目標設定」を元に、決定してくのがWebサイトの企画です。
ブログに書いた「そのWebサイトのコンテンツ内容は誰に向けての情報か？」という部分も意識することで、より良い企画へと生まれ変わっていくでしょう。
会社で「企画書を提出する」となると、こういったことを踏まえた内容をわかりやすくまとめたものを提出するお仕事になります。
Webサイトを企画してみよう
以上のことを踏まえて、あなたもWebサイトを企画してみましょう。
転職活動の制作実績として見せるサイト作りをするわけですが、どうせサイトを作るなら架空の会社や架空のお店のホームページを作るのではなく、実際にユーザーに訪れてもらえるような生きたWebサイトを作ってみてはどうでしょうか。
誰にも訪問されないような架空のサイトを作るよりも、ユーザーに見てもらえるようなサイトを作るほうがモチベーションも上がりますし、また、そういったサイトを運営してみるというのはWeb制作においてすごく勉強になります。
そして、それが転職活動においても有力なアピールポイントになってくるはずですよ。
いきなりWebサイトを企画しろと言われても難しいよ！
そうお思いのあなたにお勧めしたいのが、お小遣い稼ぎのサイトを作ってみよう！
ということです。
このお小遣いを稼ぐサイトを作るというのは、先ほど述べたWebサイト企画をするにあたって重要なポイントが凝縮された内容になるので、大変勉強になります。
そのポイントをきちんと押さえることができれば、それが報酬という形として成果を実感することができるのもわかりやすくて良いのです。
さて、そのお小遣いを稼ぐサイトを作るために、Webサイトに掲載する商材を扱うASPに登録する必要があります。
＊ASPとはアフィリエイト・サービス・プロバイダ (Affiliate Service Provider) の略で、そういった広告商品を取り扱うところを言います
参考：アフィリエイト・サービス・プロバイダ – Wikipedia
で、広告商材を取り扱うその代表的なASPがA8.net
です。
まずはこの⇒A8.netに登録してみて、色々な商材を見ながらどんなWebサイトを作ってみようか、沢山の妄想を膨らませてみてください。
ペット好きの方は、ペットの商材を探してそれを紹介できるようなサイトを企画してみたり、
音楽が好きな方は、音楽関連の商材を探してそれを紹介できるようなサイトを企画してみたり
などなど・・・
あなたが作ってみたい！と思えるようなサイトの企画を練ってみましょう！
この「作りたい」という気持ちが、勉強のモチベーションを保つ大切な鍵となるのです。
- 独学でWebデザイナーになるための第一歩
- Webサイト制作の流れ
- STEP１：Webサイトを企画する
- STEP２：Webサイトの仕様策定
- STEP３：サイト構成書 / 構成図 / ワイヤーフレーム（モックアップ）を作る
- STEP４：Webサイトのデザインを制作する
- STEP４-２：Webサイトデザインの基礎ルールやポイント
この記事を読んだ人は他にも次の記事を読んでいます
- サイト作りに必要なスキルに「客観視」があると思う
- STEP２：Webサイトの仕様策定
- そのWebサイトのコンテンツ内容は誰に向けての情報か？
- Webサイト制作の流れ
- Webデザイナーとは？Webデザイナーの業務内容と仕事の流れ
最終更新日：2013年5月13日
管理人のあっきーです。28歳の時に未経験からWebデザイナーに転職しました。現在はWeb業界９年目で、主にディレクターとして働いています。詳しくは「
やった、期待してた記事ができてますね！
やっぱりこういう記事があると現場でどのようにサイトを作っていくかが分かって大変ありがたいです。
コーディングからフレームなども説明していただけるのであれば尚うれしいです。
仕事しながら記事の更新も大変だと思いますが、完成を心待ちにしております。
あと個人的な意見なんですが
フリーソフトとかで例を作って頂けるとうれしいなーと思います。
Webデザイナーをこれから目指す個人がAdobeソフトを買うのは厳しいです；
横レスすみません。
今adobeは月額課金とかやってます。
現場と違うフリーソフトの仕様を覚えるのは無駄なカロリーな気がしたのでこちらのがよいかと。
http://www.adobe.com/jp/products/creativesuite/cssubscription.html
流石に画像やフラッシュはフリーではどうにもできないカベがありますし。
＞うりさん
レスありがとうございますっ
おお、Adobeっていま月額課金とかやっているんですね！お恥ずかしながら知りませんでした。。情報感謝です！
確かにがっつりフリーソフトのことを覚えるのはあれですが、デザインの基本というか、例えば光沢のあるボタンの作り方を操作方法は別として試してみる、というようなことにまずは気軽に使えるかもです。
そういった「作り方」を知っておけば、あとはソフトが変わって操作方法を覚えるだけなので、どうしても金銭的な余裕がない場合には一つの手段として良さそうです。
わたしも実はAdobeのソフトが買えなかったので、家でフリーソフトでボタンを作るコツを勉強して、会社でそれをPhotoshopで実践するというようなことをやっていましたｗ
レスありがとうございます。
GIMPやアルフぁエディターなどを触っていますが
まだまだ分からない事も多く四苦八苦しておりますw
うりさんのレス拝見させて頂きました。
月額やっているんですね、知りませんでした。
しかし、イラレ・フォトショ・Firework・Dreamwerver
の４つで約１万２千円ですよね。
月々これを支払うならばセミナーに行こうとか思ってしまいます。
あちらをたてればこちらがたたずになってしまいますが
Adobeを使った方が分かっていてもやはり手がだしづらいんですよね・・・
逆にフリーソフトを完璧に扱えるようになれれば
きっとAdobeソフトもある程度扱える様になる。
とか、思っちゃったりなんかしてますw
そうですね、、完璧に使いこなせなくても要所要所の要領を把握することがポイントになりそうです。
それが分かってきたら、Adobeは30日間の無料試用期間があるはずなので、そこで集中的に使い方をある程度覚えていけると良いかもですっ
＞パパさん
早速のコメントありがとうございます！
出来るだけわかりやすく、すぐに活かせる情報をお届けできればなと思います＞＜
Adobeは高くて、なかなか手が出にくいところですよね・・・
わたしも家にAdobeのソフトが無いときは、フリーのソフトGIMPを色々いじったりしていました。
下記はその時のことを書き綴った昔のブログになります↓
「フリー制作ソフトGIMP～PhotoshopがないならGIMPがあるさ！」
http://ameblo.jp/akki-akiaki/entry-10273079151.html
「ドラゴンレーダー風のボタン～GIMPで作成」
http://ameblo.jp/akki-akiaki/entry-10295547360.html
先にうりさんが仰っていたように、現場で使われるAdobeのソフトとは異なりますので実戦向きではないのは確かです。
でも確か、Adobeのソフトと共通するレイヤーやGifアニメーションなどの概念はあったはずですので、取っ掛かりとして触ってみるのもありかもしれませんね。
その辺りも踏まえて、追って記事を書いてみたいと思います！
こうやってご要望を頂けると、これをご覧の方々がどんな気持ちで見ているのかという参考にもなりますので、すごく助かります！ありがとうございます(＾-＾)
参考になります！
いつも拝見させてもらってます。
＞Ryoさん
こんにちはです！
以前お仕事をされながら学校に通っていらっしゃるというコメント頂きましたよねっ？
学校はいかがでしょうか？
この記事が参考になれて嬉しいです＾＾
初めまして、私も未経験ながらWebデザイナーを目指しているものです。色々なWebデザイナーに関してのサイトを見回っている時にあっきーさんのサイトに辿り着きました。ゼロから、というあっきーさんの経験談を見てとても勇気づけられました。これからもこっそり覗かせて頂きます。失礼しました
＞mmmさん
ご訪問、そしてコメントありがとうございます！
「ブラウザ」の意味すら知らなかった私でも、なんだかんだとここまでやってこれました＾＾；
そんな私の経験が、少しでも皆さんの勇気になれば凄く嬉しいです！
ぜひぜひこれからもよろしくお願い致します（*^_^*）
Very informative blog post.Really thank you! Keep writing. dkegefaeabde
Johng524
Thank you for comment！
はじめまして！ 最近ＷＥＢ業界の勉強をしたいと思いネットで調べていたところ、あっきーさんのサイトに行き着きました。 ＷＥＢに関しては高校の授業で触れたぐらいのほぼ初心者に近いレベルなので地道にあっきーさんのサイトを参考にしつつレベルアップできればいいなと思います。
さえぐささん
はじめまして！コメントありがとうございます！
そして返信が遅くなりすみません＞＜
このサイトが少しでもさえぐささんの参考になれればわたしも嬉しいです！
何か気になることあればいつでもお気軽にコメント頂ければです＾＾
わたしも最初はまっさらな状態でした。だから、がんばれば必ずレベルアップできますよっ
がんばってください！