comments初めてのWebサイト制作、STEP1「Webサイト企画」です。Webサイトを制作するにあたって、まず最初のとっかかりは「何のサイトを作るのか」を考えることです。「Webサイト企画」は、Web制作において最も重要な部分です。会社では、Webプロデューサー、Webディレクター、Webプランナーといった役職の方々が担当することが多いかと思います。Webサイト企画は下記のような項目を考慮して、とことん練り上げていきます。作ろうとするサイトは他に似たようなサイトはないか、あるならそのサイトはどのようなサイトなのか、どんなユーザーを狙っているのか参考にします。ターゲットユーザーの選定どんな人たちに見てもらいたいサイトなのか、使ってもらいたいサイトなのか、そのユーザーの姿をはっきりさせます。ニーズの調査ターゲットユーザーがどんな情報を欲しているのか、どんな行動を起こすのかを、そのユーザーの立場になって考えてみる。ここで洗い出したニーズが、競合サイトには無かった場合そこが他サイトとの差別化のポイントとなります。作るサイトの目標はどこにあるのか(例えば、ショッピングサイトだったらユーザーに商品を買ってもらうことが目標)を明確にして、そのフローを考える。おおまかに、こういうサイトを作ろう・・・と決まったら、上記のポイントを押さえてそのWebサイトの企画を熟考していきます。この段階で、これから作ろうとするWebサイトが成功するかしないか8割~9割くらいは決まってしまうと言っても過言ではないほど、本当に重要な部分になります。ペット関連の商品を紹介するサイトを作る場合ペット商品といっても、ペットは犬なのか猫なのか、はたまたハムスターやうさぎなどの小動物なのか、何のペットの商品を取り扱うサイトにするのかを決めなければいけません。オールジャンルのペット商品を備えたサイトでも良いと思います。ペット系のサイトは既に沢山存在しています。その中で、他のサイトと同じようなサイトを作ったところで、繁盛するようなサイトにはなりません。そのサイトに訪問してみたい、そのサイトにしかない情報を知りたい、そう思ってもらえるようなサイトがより多くのユーザーを集めるサイトになっていきます。ペット商品を欲しがっているユーザーにはどんな人がいるのかも調査します。犬の商品を求めるユーザーが多い場合、犬関連の商品を扱うとより多くのユーザーを集客することができるかもしれません。人が多く集まるところには競合も集まってきますので、競争が激化することが予想されます。逆に、うさぎなどの小動物系の商品を求めるユーザーは少ないかもしれませんが、それを取り扱うサイトも少なくなる場合があります。なると、より早くにターゲットユーザーの目にとまることが可能になってきます。サイトのジャンルをセグメントすればするほど、より専門性が高くなってきますので、そういった情報を求めるユーザーとの相性が高まっていきます。相性が高まっていくとどうなるかというと、そのサイトの目標達成値が高まってくるのです。このペット商品を扱うサイトの場合だと、目標は商品を購入してもらうことです。元に、決定してくのがWebサイトの企画です。ブログに書いた「そのWebサイトのコンテンツ内容は誰に向けての情報か?」という部分も意識することで、より良い企画へと生まれ変わっていくでしょう。会社で「企画書を提出する」となると、こういったことを踏まえた内容をわかりやすくまとめたものを提出するお仕事になります。Webサイトを企画してみよう以上のことを踏まえて、あなたもWebサイトを企画してみましょう。転職活動の制作実績として見せるサイト作りをするわけですが、どうせサイトを作るなら架空の会社や架空のお店のホームページを作るのではなく、実際にユーザーに訪れてもらえるような生きたWebサイトを作ってみてはどうでしょうか。誰にも訪問されないような架空のサイトを作るよりも、ユーザーに見てもらえるようなサイトを作るほうがモチベーションも上がりますし、また、そういったサイトを運営してみるというのはWeb制作においてすごく勉強になります。それが転職活動においても有力なアピールポイントになってくるはずですよ。Webサイトを企画しろと言われても難しいよ!そうお思いのあなたにお勧めしたいのが、お小遣い稼ぎのサイトを作ってみよう!ということです。このお小遣いを稼ぐサイトを作るというのは、先ほど述べたWebサイト企画をするにあたって重要なポイントが凝縮された内容になるので、大変勉強になります。そのポイントをきちんと押さえることができれば、それが報酬という形として成果を実感することができるのもわかりやすくて良いのです。そのお小遣いを稼ぐサイトを作るために、Webサイトに掲載する商材を扱うASPに登録する必要があります。登録してみて、色々な商材を見ながらどんなWebサイトを作ってみようか、沢山の妄想を膨らませてみてください。音楽が好きな方は、音楽関連の商材を探してそれを紹介できるようなサイトを企画してみたりなどなど・・・あなたが作ってみたい!と思えるようなサイトの企画を練ってみましょう!この「作りたい」という気持ちが、勉強のモチベーションを保つ大切な鍵となるのです。PMやった、期待してた記事ができてますね!やっぱりこういう記事があると現場でどのようにサイトを作っていくかが分かって大変ありがたいです。コーディングからフレームなども説明していただけるのであれば尚うれしいです。仕事しながら記事の更新も大変だと思いますが、完成を心待ちにしております。あと個人的な意見なんですがフリーソフトとかで例を作って頂けるとうれしいなーと思います。PM横レスすみません。今adobeは月額課金とかやってます。現場と違うフリーソフトの仕様を覚えるのは無駄なカロリーな気がしたのでこちらのがよいかと。http://www.adobe.com/jp/products/creativesuite/cssubscription.html流石に画像やフラッシュはフリーではどうにもできないカベがありますし。AM>うりさんレスありがとうございますっおお、Adobeっていま月額課金とかやっているんですね!お恥ずかしながら知りませんでした。情報感謝です!確かにがっつりフリーソフトのことを覚えるのはあれですが、デザインの基本というか、例えば光沢のあるボタンの作り方を操作方法は別として試してみる、というようなことにまずは気軽に使えるかもです。いった「作り方」を知っておけば、あとはソフトが変わって操作方法を覚えるだけなので、どうしても金銭的な余裕がない場合には一つの手段として良さそうです。AMレスありがとうございます。GIMPやアルフぁエディターなどを触っていますがまだまだ分からない事も多く四苦八苦しておりますwうりさんのレス拝見させて頂きました。月額やっているんですね、知りませんでした。イラレ・フォトショ・Firework・Dreamwerverの4つで約1万2千円ですよね。月々これを支払うならばセミナーに行こうとか思ってしまいます。逆にフリーソフトを完璧に扱えるようになれればきっとAdobeソフトもある程度扱える様になる。PMそうですね、、完璧に使いこなせなくても要所要所の要領を把握することがポイントになりそうです。AM>パパさん早速のコメントありがとうございます!出来るだけわかりやすく、すぐに活かせる情報をお届けできればなと思います><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アニメーションなどの概念はあったはずですので、取っ掛かりとして触ってみるのもありかもしれませんね。PM参考になります!いつも拝見させてもらってます。AM初めまして、私も未経験ながらWebデザイナーを目指しているものです。色々なWebデザイナーに関してのサイトを見回っている時にあっきーさんのサイトに辿り着きました。ゼロから、というあっきーさんの経験談を見てとても勇気づけられました。これからもこっそり覗かせて頂きます。最近WEB業界の勉強をしたいと思いネットで調べていたところ、あっきーさんのサイトに行き着きました。WEBに関しては高校の授業で触れたぐらいのほぼ初心者に近いレベルなので地道にあっきーさんのサイトを参考にしつつレベルアップできればいいなと思います。AMさえぐささんはじめまして!コメントありがとうございます!そして返信が遅くなりすみません><このサイトが少しでもさえぐささんの参考になれればわたしも嬉しいです!何か気になることあればいつでもお気軽にコメント頂ければです^^わたしも最初はまっさらな状態でした。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。旧ブログからピックアップ未経験からでも出来るWordPressの勉強法、ポイントは4つ。ツイート管理人のあっきーです。28歳の時に未経験からWebデザイナーに転職しました。現在はWeb業界9年目で、主にディレクターとして働いています。詳しくは「管理人の経歴」をご覧ください。