自分のメモがてらにウェブ制作(ウェブサービス)の流れを書いてみようかと。
ちなみに私の場合の話なのであしからず！
レッドストーンあんてなの時を思い出しながら書いてみます。
※下記は部分的でも全文でもコピペしても流用しても何をしてもOKです。
何かに役立てば幸いです。
[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]1)計画を立てる[/button]
[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]2)設計する[/button]
[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]3)制作する[/button]
[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]4)テストする[/button]
[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]5)公開する[/button]
さて、１）から多少内容をみていきましょう。
１)計画を立てる
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]サイト(ユーザー)の目的(やコンセプト)[/button]
これによってサイトの大まかな流れが決まります。
ベクトルを見誤ると結果、使い勝手もデザインもおかしな物になるでしょう。
※コンセプトとは
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]ターゲット層[/button]
誰が何を見るために作るのか。この層を間違えないように。
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]現状把握[/button]
現状のサイト、または競合するサイトなどの情報を集めます。競合サイトより上を行くもの目指しましょう。
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]広告の有無[/button]
最初に設定しておき、デザインに組み込まないと広告の効果を発揮できません。
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]使用する言語[/button]
静的(HTML)・動的(PHP/CGI etc.)を決めておくと後々楽です。
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]管理方法[/button]
管理の方法を初期で決定しておきましょう。1人なのか複数なのか後から追加出来る方法なのか。
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]現在の問題点[/button]
リニューアルの際はこれが重要になります。なぜ、リニューアルするのか。
アイデアで勝負したい時や思いつきを重視する際はマインドマップ(有料もあるが無料ウェブ版で充分です)なんかも有効です。
２)設計する
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]フローチャート[/button]
簡単な流れ図があると設計も楽です。
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]サイトマップ[/button]
ページ構成をわかり易く表示。トップの下には詳細ページみたいな。
上記のフローチャートと一緒に設計するもよし、別で作るもよしとおもいます。
ここで言っているのは、ウェブURLクロール用のサイトマップではありません。
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]デザイン案(ワイヤーフレーム)[/button]
ウェブページの主なデザイン案です。手書きでも無料サービスでもある程度決めましょう。
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]ブラウザ・スマフォ対応[/button]
各種ブラウザに対応させるかどうか。スマートフォンや携帯にまで対応させるか。設計の時点で決めておかないと大変になります。
またサイト自体、Javascript・Flashを切っても同じように見ることができるのか？は最近ではセキュリティ上重要になっています。
ブラウザのシェア率はここでみましょう。
StatCounter Global Stats
日本のここ半年のシェア率
[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]フレームワークの有無[/button]
簡単に言うと、ウェブサイトの土台です。CSSボタンやフォームやデータベースなど初期から作るにはめんどい事もサクッと実装できます。
この辺はサイトの目的やデザインに合わせて使用するかどうかも考えましょう。
最近は楽なCSSフレームワーク、Bootstrapが有名かも。
老舗はアプリフレームワークの、CakePHPか。
ここまでにサイト制作の95％を注ぎましょう！
３)制作する
ここまでの計画を形にしていきましょう。
無心で制作するのみ。
４)テストする
実際にサーバーにアップして動作検証をしてみましょう。
５)公開する
公開後はSEO対策、管理、サービス追加などでウェブサイトを育てて行きましょう。
というような感じで進めていけば、自分がやりやすいサイト作成が出来ると思います。
やはり、明確な道標というのは重要だなと実感します。
ただし、この通りにやったから成功するというわけではありません！
結果はまた別物と考えておいたほうがいいです。
一番やってはいけないと言われているパターンは、
[button link=”#” color=”#ffdead” size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]「あ、このサイト良さげ！デザインもいいなぁ～」[/button]
[button link=”#” color=”#ffdead” size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]「真似してまず作ってみよう！」[/button]
[button link=”#” color=”#ffdead” size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]「まず公開してから徐々に変えて行こう！」[/button]
です。
私は過去これで大変な思いをしましたが、いい勉強にもなりました。
重要なのは作る前の計画と設計に力の95％を注ぐことです。
気づいたことを箇条書きでも付箋でもいいので書き留めていくことで、必要な物そうでないものが見えてきます。
という感じに、途中まで書いて段々と尻すぼみになってしまいましたが、ウェブ制作の流れを書いてみました。
次回はウェブ制作に便利なサイトやサービスのまとめでも書いてみます。