サイト立案からリリースまでの流れと、それに必要な知識やスキルとは？
いま、わたしがやっている業務の中心となるものが
新規事業のサイト制作です。
新規事業ってなに？という方はこちら＞＞
新規事業をはじめるにあたって、なにはともあれサイトを作らなくてははじまりません。
というわけで、わたしの現在の最重要ミッションとして
この新規事業用のサイトを3月頭リリース目標で動いています。
で、いまこれがすごく大変というかやばいというか
リリース目標に間に合うかどうか心配で、たまに胃が痛くなったりしていますｗ
そこでこの辛い思い出の１ページを記録に残すため
ここに記しておくことにします(｡-人-｡)
また、未経験者の方には、こうやってサイトが出来ていくんだ～と参考になれば幸いです。
｜サイトリリースまでの流れ
1. 企画立案
どんなサイト構成にするか、どんなコンテンツを盛り込むか、どんなサイトの見せ方をするか、どうやって集客をするか、わたしのほうでそういったことを考えて提案します。
案を練るときは、競合他社を見て勉強させていただきました。
その中で、「もっとこうだったらいいのに」を自社のサイトに盛り込み、
他社との差別化をはかるということを一番のポイントとして、プレゼンしました。
サイト構成、盛り込むコンテンツ、見せ方、これら全てを
SEO的なことも踏まえて、集客へ結び付けられるようにも考えました。
＜必要な知識やスキル＞
・マーケティング力
・ナイスなアイデア
・プレゼン力
・SEO
2. 仕様構成書の作成
企画案が通ったら、さらに具体的に仕様構成書を作ります。
サイトマップや、ページ構成、どんな作りにするかを具体的に落とし込みます。
今回、コンテンツの一部でWordpressを利用することにしました。
自分で内容をまとめつつも、不明な点や迷う点がでてきたらすかさずメンバーに確認をとりながら、方向性を確認しつつ作り上げていきます。←これほんとに重要です。
＜必要な知識やスキル＞
・盛り込むコンテンツをどうやって形にするか、制作全般に関する知識
・UI
・コミュニケーション力
・SEO
3. 作業担当割り振り＆依頼＆スケジューリング
仕様書を作ったら、作業担当を割り振ります。
うちの会社の場合かなり単純です。プログラム部分はプログラマー、デザイン＆コーディングはwebデザイナーが担当します。今回は、コスト削減も含めて、プログラマーさんにお願いしなくてもすむようなサイトの作りになっています。なので、作業担当は全部自分です＾＾；
この割り振りを明確に進めるためにも、前段階の仕様構成書は細かい部分まで詰めておく必要があります。
今回は、イラストを外注にお願いするので、外注先の選定と依頼発注（依頼内容やイラストのイメージをパワポにまとめる）も行います。
作業の割り振りが決まったら、各担当者にどれくらいの工数がかかるか割り出してもらい、おおよそのリリース日を決めてスケジューリングします。
＜必要な知識やスキル＞
・スケジューリング力
・コミュニケーション力（対外折衝も含め）
・全体を把握する力
4. デザイン作成
仕様構成書を元に、いよいよデザイン作業にはいります。
一番見せたいものは何か、ボタンやリンクはわかりやすく、
競合他社はごちゃごちゃしたサイトが多かったので、できるだけごちゃつかせないようにシンプルでわかりやすいデザインを心がけました。
また、安心や、清潔感が感じられるような配色を意識しました。
さらに今回はイラストを盛り込むので、そのイラストがサイトの肝となります。
このイラストを生かせるようなデザインも心がけました。
また、コーディング時に施すSEO対策のことも考え、不自然なデザインにならにようにも心がけています。
＜必要な知識やスキル＞
・デザイン力（PhotoshopやFireworksを使用）
・UI
・マーケティング力
・SEO
5. コーディング
デザインができたら、コーディングにはいります。
わたしはコーディングでは、タグの意味にこだわってコーディングします。
よく言われるのが、HTMLは英語の論文と同じようなものです。
最初に大きな見出しがあり、次いでそれについて内容を述べる。
サイトの作りをそのように記述し、検索エンジンにも読まれやすいソースを心がけます。
なので、dl、dt、ddはどういう意味なのか、ulとolの違いは？、そういったことを把握して
ではQ&Aのページを作るときに、QとAをただpで綴ればよいのか？いや、QをdtにしてAをddにするのがタグの意味としては一致しているのではないだろうか？などと、考えながらやっています。
いろんなタグが存在するということは、それぞれに意味があるわけで、検索エンジンはきっとその意味に基づいてページを読んでいるのではとわたしは思っています。
まぁ、それが全てでSEO効果があるわけではありませんが、何も考えずにやらないよりはやったほうがいいという部分ですね。
ちなみに対応ブラウザは、IE６も視野にいれてコーディングしていますorz
数ある自社サイトの解析結果をみると、IE６からのアクセスはまだ完全に無視できる数ではないと思っています。。
＜必要な知識やスキル＞
・SEO
・コーディングスキル＞XHTML、CSS（Dreamweaverを使用）
・タグの知識
・必要あれば、Javascript、jQuery
・必要あれば、PHP（書けなくてもなんとなく書いてある意味がわかる程度の知識があるとよい）
6. デバッグ（確認＆修正）
コーディングが完了して、サイトが出来上がったら、自分でいろいろと触って確認してバグなどがあったら修正を行います。
この作業は、いろんな環境からのバグを見るためにもできれば複数人のひとに協力してもらうのがベターです。
さらに、サイトを利用してみてどうだったかもフィードバックしてもらうと尚良しですね。
＜必要な知識やスキル＞
・コミュニケーション力（みんなにちょっと面倒なことをお願いするので、快く協力してもらえるようにします）
7. リリース
サイトに問題なく、ゴーサインが出たらいよいよリリースです。
こんなサイト作りましたよ～と、プレスリリースを出したりしてみなさんにお知らせします。
----------------------------------------------------------------------
とまぁ、こんな流れでやっています。
今回の業務は、webディレクター兼webデザイナーという感じですね。
webデザイナーの部分は、4.5.6.のサイトのデザインとコーディングの作業になります。
各作業に対して、必要だな～と思ったスキルや知識を書かせていただきました。
もちろんわたしの見解ですので、もっと他にも必要なことや、逆にそれはいらないだろうというものもあるかと思います。
そのあたりは、うちではこうだよ～とご意見いただけるとうれしいです＾＾
また、これからwebデザイナーを目指してがんばっている方には
こうやってサイトが出来ていくんだ～と参考になればと思います。
webデザイナーとしてサイトをデザインしてコーディングするのも、
ただデザインして、ただ形にできればいいというわけではありません。
もちろん、とりあえず形にできれば仕事としては完了できます。
しかし、この世界で生き残っていくためにも、さらにプラスアルファのことが必要になってきます。
では、そのプラスアルファとは何か？
それは、
webに関することや、自分の興味あることに関して常に情報のアンテナを張っておく事だと思います。
これをしておくことで、そこから得た情報をいま行っている業務にフィードバックし、スキルアップを常に意識して行います。
また、会社のためになりそうな情報があれば、それを社内にフォードバックします。
そうすることで、「へ～あっきーさんはそういうことも知っているんだ～。今度これについて意見をもらってみよう」と、なります。
聞かれると、それについてもっと詳しく調べておこうという気になりますので、
そうなると、それが自分のプラスアルファのスキルとして蓄積されていきます。
しいては、少しずつですが、自分の仕事の幅が広がっていきます。
これはホントに大事な部分だと思います。
実はwebデザイナー３年目という方と仕事をする機会があったのですが、わたしは２年目なのでわたしより１年も先輩だからきっといろいろ勉強になるはずだ～って思っていたら、あれ？そんなことも知らないの？みたいなことがちらほら。。技術的な面でも、あれ？みたいなことがちらほら。。
失礼ながら、きっと何も考えずにただサイトを作って３年を過ごしてきたんだろうな～と思ってしまいました。
常にアンテナを張り巡らせてきた自分と、そうでない人とではこんなにも差がつくんだなと、実感したときでした。
わたしだって、そんなにすごく知識を蓄えられているわけではありません。すごいひとはもっと沢山います。そんな中でも、自分にやれることを毎日やる。これだけでも、１年後にはすごい力となって自分に返ってくるはずですよ。
わたしはそれで、未経験からwebデザイナーになって２年目で、新規事業のディレクターを任せていただくことになったのですから。
継続は力なり。
興味は原動力なり。
知識・情報は未来を切り開く開拓力なり。
こんな感じでいかがでしょうか？ヽ(ﾟ◇ﾟ )ﾉ
@akki_webよかったらフォローいただけるとうれしいです＾＾
facebookもあります。
はじめましての方はこちら⇒テーマ別の目次
＞＞2011年のわたしの目標
新規事業のサイト制作です。
新規事業ってなに？という方はこちら＞＞
新規事業をはじめるにあたって、なにはともあれサイトを作らなくてははじまりません。
というわけで、わたしの現在の最重要ミッションとして
この新規事業用のサイトを3月頭リリース目標で動いています。
で、いまこれがすごく大変というかやばいというか
リリース目標に間に合うかどうか心配で、たまに胃が痛くなったりしていますｗ
そこでこの辛い思い出の１ページを記録に残すため
ここに記しておくことにします(｡-人-｡)
また、未経験者の方には、こうやってサイトが出来ていくんだ～と参考になれば幸いです。
｜サイトリリースまでの流れ
1. 企画立案
どんなサイト構成にするか、どんなコンテンツを盛り込むか、どんなサイトの見せ方をするか、どうやって集客をするか、わたしのほうでそういったことを考えて提案します。
案を練るときは、競合他社を見て勉強させていただきました。
その中で、「もっとこうだったらいいのに」を自社のサイトに盛り込み、
他社との差別化をはかるということを一番のポイントとして、プレゼンしました。
サイト構成、盛り込むコンテンツ、見せ方、これら全てを
SEO的なことも踏まえて、集客へ結び付けられるようにも考えました。
＜必要な知識やスキル＞
・マーケティング力
・ナイスなアイデア
・プレゼン力
・SEO
2. 仕様構成書の作成
企画案が通ったら、さらに具体的に仕様構成書を作ります。
サイトマップや、ページ構成、どんな作りにするかを具体的に落とし込みます。
今回、コンテンツの一部でWordpressを利用することにしました。
自分で内容をまとめつつも、不明な点や迷う点がでてきたらすかさずメンバーに確認をとりながら、方向性を確認しつつ作り上げていきます。←これほんとに重要です。
＜必要な知識やスキル＞
・盛り込むコンテンツをどうやって形にするか、制作全般に関する知識
・UI
・コミュニケーション力
・SEO
3. 作業担当割り振り＆依頼＆スケジューリング
仕様書を作ったら、作業担当を割り振ります。
うちの会社の場合かなり単純です。プログラム部分はプログラマー、デザイン＆コーディングはwebデザイナーが担当します。今回は、コスト削減も含めて、プログラマーさんにお願いしなくてもすむようなサイトの作りになっています。なので、作業担当は全部自分です＾＾；
この割り振りを明確に進めるためにも、前段階の仕様構成書は細かい部分まで詰めておく必要があります。
今回は、イラストを外注にお願いするので、外注先の選定と依頼発注（依頼内容やイラストのイメージをパワポにまとめる）も行います。
作業の割り振りが決まったら、各担当者にどれくらいの工数がかかるか割り出してもらい、おおよそのリリース日を決めてスケジューリングします。
＜必要な知識やスキル＞
・スケジューリング力
・コミュニケーション力（対外折衝も含め）
・全体を把握する力
4. デザイン作成
仕様構成書を元に、いよいよデザイン作業にはいります。
一番見せたいものは何か、ボタンやリンクはわかりやすく、
競合他社はごちゃごちゃしたサイトが多かったので、できるだけごちゃつかせないようにシンプルでわかりやすいデザインを心がけました。
また、安心や、清潔感が感じられるような配色を意識しました。
さらに今回はイラストを盛り込むので、そのイラストがサイトの肝となります。
このイラストを生かせるようなデザインも心がけました。
また、コーディング時に施すSEO対策のことも考え、不自然なデザインにならにようにも心がけています。
＜必要な知識やスキル＞
・デザイン力（PhotoshopやFireworksを使用）
・UI
・マーケティング力
・SEO
5. コーディング
デザインができたら、コーディングにはいります。
わたしはコーディングでは、タグの意味にこだわってコーディングします。
よく言われるのが、HTMLは英語の論文と同じようなものです。
最初に大きな見出しがあり、次いでそれについて内容を述べる。
サイトの作りをそのように記述し、検索エンジンにも読まれやすいソースを心がけます。
なので、dl、dt、ddはどういう意味なのか、ulとolの違いは？、そういったことを把握して
ではQ&Aのページを作るときに、QとAをただpで綴ればよいのか？いや、QをdtにしてAをddにするのがタグの意味としては一致しているのではないだろうか？などと、考えながらやっています。
いろんなタグが存在するということは、それぞれに意味があるわけで、検索エンジンはきっとその意味に基づいてページを読んでいるのではとわたしは思っています。
まぁ、それが全てでSEO効果があるわけではありませんが、何も考えずにやらないよりはやったほうがいいという部分ですね。
ちなみに対応ブラウザは、IE６も視野にいれてコーディングしていますorz
数ある自社サイトの解析結果をみると、IE６からのアクセスはまだ完全に無視できる数ではないと思っています。。
＜必要な知識やスキル＞
・SEO
・コーディングスキル＞XHTML、CSS（Dreamweaverを使用）
・タグの知識
・必要あれば、Javascript、jQuery
・必要あれば、PHP（書けなくてもなんとなく書いてある意味がわかる程度の知識があるとよい）
6. デバッグ（確認＆修正）
コーディングが完了して、サイトが出来上がったら、自分でいろいろと触って確認してバグなどがあったら修正を行います。
この作業は、いろんな環境からのバグを見るためにもできれば複数人のひとに協力してもらうのがベターです。
さらに、サイトを利用してみてどうだったかもフィードバックしてもらうと尚良しですね。
＜必要な知識やスキル＞
・コミュニケーション力（みんなにちょっと面倒なことをお願いするので、快く協力してもらえるようにします）
7. リリース
サイトに問題なく、ゴーサインが出たらいよいよリリースです。
こんなサイト作りましたよ～と、プレスリリースを出したりしてみなさんにお知らせします。
----------------------------------------------------------------------
とまぁ、こんな流れでやっています。
今回の業務は、webディレクター兼webデザイナーという感じですね。
webデザイナーの部分は、4.5.6.のサイトのデザインとコーディングの作業になります。
各作業に対して、必要だな～と思ったスキルや知識を書かせていただきました。
もちろんわたしの見解ですので、もっと他にも必要なことや、逆にそれはいらないだろうというものもあるかと思います。
そのあたりは、うちではこうだよ～とご意見いただけるとうれしいです＾＾
また、これからwebデザイナーを目指してがんばっている方には
こうやってサイトが出来ていくんだ～と参考になればと思います。
webデザイナーとしてサイトをデザインしてコーディングするのも、
ただデザインして、ただ形にできればいいというわけではありません。
もちろん、とりあえず形にできれば仕事としては完了できます。
しかし、この世界で生き残っていくためにも、さらにプラスアルファのことが必要になってきます。
では、そのプラスアルファとは何か？
それは、
webに関することや、自分の興味あることに関して常に情報のアンテナを張っておく事だと思います。
これをしておくことで、そこから得た情報をいま行っている業務にフィードバックし、スキルアップを常に意識して行います。
また、会社のためになりそうな情報があれば、それを社内にフォードバックします。
そうすることで、「へ～あっきーさんはそういうことも知っているんだ～。今度これについて意見をもらってみよう」と、なります。
聞かれると、それについてもっと詳しく調べておこうという気になりますので、
そうなると、それが自分のプラスアルファのスキルとして蓄積されていきます。
しいては、少しずつですが、自分の仕事の幅が広がっていきます。
これはホントに大事な部分だと思います。
実はwebデザイナー３年目という方と仕事をする機会があったのですが、わたしは２年目なのでわたしより１年も先輩だからきっといろいろ勉強になるはずだ～って思っていたら、あれ？そんなことも知らないの？みたいなことがちらほら。。技術的な面でも、あれ？みたいなことがちらほら。。
失礼ながら、きっと何も考えずにただサイトを作って３年を過ごしてきたんだろうな～と思ってしまいました。
常にアンテナを張り巡らせてきた自分と、そうでない人とではこんなにも差がつくんだなと、実感したときでした。
わたしだって、そんなにすごく知識を蓄えられているわけではありません。すごいひとはもっと沢山います。そんな中でも、自分にやれることを毎日やる。これだけでも、１年後にはすごい力となって自分に返ってくるはずですよ。
わたしはそれで、未経験からwebデザイナーになって２年目で、新規事業のディレクターを任せていただくことになったのですから。
継続は力なり。
興味は原動力なり。
知識・情報は未来を切り開く開拓力なり。
こんな感じでいかがでしょうか？ヽ(ﾟ◇ﾟ )ﾉ
@akki_webよかったらフォローいただけるとうれしいです＾＾facebookもあります。はじめましての方はこちら⇒テーマ別の目次＞＞2011年のわたしの目標