ウェブサイト作成時の工程一例

ウェブサイトは自作でもかんたんに
つくれるようになっていますね。

プロの方に任せたい気持ちがある一方、
自分でつくってみたいという方もいるでしょう。

やり方はたくさんあるでしょうが、
ウェブサイト作成の工程例を見たい方向けの記事です。

 

 

もくじ

コンセプトを作ろう

まずはコンセプトをつくりましょう。

最近のウェブサイトはプログラミングが
あまりなくても項目を付けられるものが多いです。

どんなものにするか、
どんなものにしないかを決めておくことで
方向性を明確にすることができます。

 

コンセプトといいますが、
複雑なものを目指す必要はありません。

ニーズからわかりやすい言葉を選びましょう。

伝えるのにちょうどよければ
ダジャレでいいたいことを書くことも可能です。

言葉で表しにくければ、
好きなウェブサイトを集めましょう。

または、好きなイメージ(写真)でもいいです。

 

トップページのイメージを作成

コンセプトや方向性ができたら
トップページのイメージを作成します。

あまりこだわらず、雰囲気を作るためのものと
理解しましょう。

プログラミングに慣れていなければ、
ノートに手書きでつくってもいいです。
Wordやパワーポイントなどでもいいです。

ワイヤーフレームの作り方はこちらにも
記載をしています。

ウェブサイト制作基本ツール:スケジュール、ワイヤー、テキストエディタ、FTP

どんな構成にするのか、
上に並べる項目リストを何にするのか、
色をどうするのか、
雰囲気をどうするのか。

トップページと他のページは
当然雰囲気が似通ってきます。

トップページをつくってみることで、
全体の修正を考えるきっかけになります。

 

大切なことは、全体の雰囲気がわかることです。

なお、テキストはダミーで十分です。

ダミーテキストの入力方法は
こちらに紹介しております。

デザイン素案をWord作成するとき、ダミーテキストを使おう

 

うまく決まらない場合
トップページのつくり直しに移ります。

全体をつくってから修正を行うと
単純な修正だけに多くの時間が必要になります。

できる限りトップページだけの
クオリティをあげていきましょう。

ちなみに、写真は仮のものを入れておくといいです。
良い写真がすでに手元にある場合の方が少ないでしょうから。

 

全体の構成を確定

トップページが仕上がる間に
全体の構成を考えておきます。

何ページ作成するかわかれば
全体の工数がわかります。

また、必要な機能もはっきりします。

  • 決済機能を入れる
  • 予約機能を入れる
  • チャットボットを入れる

などなど、必要な機能を理解した上で
技術を取りに行きます。

 

各ページの構成に落とし込み

トップページと構成が確定したら
各ページの作成に落とし込んでいきます。

雰囲気の修正がここからないようにしましょう。

あってもいいのですが、
全体をつくってから雰囲気を修正すると
手間がかかります。

修正できたとしても
細かなところでミスが出がちです。

方向性が確定してから作成をしていきましょう。

 

写真の準備と仕上げ

全体構成が決まった辺りで、必要な写真が
はっきりしてきます。

カメラが上手な方は自分で撮影することもできますが、
可能ならプロの方にお願いするとよいです。

最近は、素人でも写真を撮りますし、
出来不出来がわかりやすいです。

一般の方にも良いものだと認識してもらえるように
いい写真を用意しましょう。

 

最終的に写真を当て込み細かい文章などを
校正した上で、仕上げとなります。

 

まとめとして

これらの工程は、誰かにウェブサイトの作成を
依頼する際にも大切です。

特に、ページ構成がわかると
見積もりを取りやすくなります。

自作をしていく場合でも、もちろん
役に立つ内容です。

自前のウェブサイトを検討されている方は
ちょっと参考にしてみてもらえるとうれしいです。

 

【編集後記】
令和3年の日税研究賞の受賞者が発表になりましたね。
発刊は例年8月31日なので、それ以降で読めますね。

【運動記録】
ストレッチ○ 筋トレ○

【子育て日記(4歳・0歳)】
ブロックで見たことがないようなものを上の子が作っていました。
基礎的な形から一緒に作っていたのですが、
もう原型がわからないくらい自分流。

学ぶときの過程を垣間見て刺激になりました。

もくじ