ここではwebサイト作成を承る時に、お客様から頂く質問や不明点で多いお話を書いていこうと思います。

webサイト作成で右も左もわからないという方は是非ご覧ください。

尚、webサイト作成にはドメイン、サーバが必要になります。そこが分からない方はこちらをご一読ください。

【基本知識】サーバーとブラウザとドメインとは

下記はサイト作成の流れになります。

どのようなサイトが必要かを決める

まずは必要要件を考えていきましょう。

○どのようなページが必要か（トップページ、下層ページ等）

○各ページにどのような内容を記載したいか

○お問い合わせや予約などのフォームが必要か

○商品を販売する機能等、特殊な仕組みが必要か

上記を列挙していましょう。

これらが分かればサイトの大枠が決まっていきます。

尚、ここをしっかりしておかないとサイトの作成方法から変わってきますのでよく練っておきましょう。

デザインを作成する

デザイン作成には段階があります。

この時点でプロのデザイナーにお願いすることもありますが流れは覚えておきましょう。

ただ、必要要件で簡単なサイトで問題ない（例えばトップページとお問い合わせがあればいいなど）の場合はWix やペライチ等、簡単にサイトを作成できるサービスなどもあります。

この場合はサービス内のデザインを利用する等すればデザインもサーバも必要なく、ドメインも独自でなければサービス内のものを使うことが出来ます。

サーバとドメインを取得して独自にwebサイトを持ちたいとういうことは下記のデザインは必要になります。

①ワイヤーフレーム(構成案)を作成する

└ワイヤーフレームとは大体のコンテンツ配置を作成する作業です。

特に共通パーツで何が必要かを考えるのと、レスポンシブ時のパーツの変化（例えば上部にメニューを配置する時はメニューをハンバーガーなどにする等）を作成します。

また、コンテンツの大体の文章と画像の配置や、動画やスライダー等を入れたい場合は同じく配置を考えていきます。

この時、参考にしたいサイトやデザインがあると作成しやすいと思います。

デザイン画の元になりますので、ここで認識を合わせることを意識しましょう。

また、ここで後述するコーディング（HTMLやCSSの作成等）の方法がある程度決まってきますので、あまりにも複雑になるようだとコ―ディングの費用が高くなってしまうので気を付けましょう。

②モックアップ（カンプ）を作成する

└モックアップとは完成イメージです。これは何度か確認と修正を繰り返して完成するイメージです。

専らadobeソフトのイラストレータやフォトショップ、XDなどで作成されることが多いです。

ここで画像や文章なども入れ込んでいきますが、最初はワイヤーフレームに則ったデザインを徐々に入れていくことになります。

この段階でのデザイナーとのコミュニケーションはとても大切ですので注意しましょう。

また、できればレスポンシブのための画像幅が違うデザインを作成しましょう。

作成者によりますがPC版（横1080px~1920px）SP版（320px~500px程度）のデザインが最低でも必要です。予算があればプラス中間の768pxなどもあるといいでしょう。

また、この際コンテンツ幅や画像サイズなどガイドがあるようなデザイン画を作成するようにしましょう。

デザイン初心者の場合はただデザインが並んでいるようなものを作成しがちですが、webデザインでは、完成を忠実に表現するために様々な指示が必要になります。

デザイン画自体にそれが入っているとコーディングが楽になります。

以上でデザインが完成となります。

コーディングを行う

コーディングとはモックアップをHTMLにしていく作業です。

一番ポピュラーなのはHTMLファイルを作成していく方法です。そのファイルをサーバーにアップロードしてドメインにブラウザからアクセスするとサイトを見られるようになるという仕組みです。

また、世界的に多く使われているのはワードプレスというツールを使う方法です。

サーバにインストールすることによってある程度出来上がったサイト上に作成していく方法で、個人や企業で幅広く使用されています。

ワードプレスは特にブログの機能がメインのシステムなので、記事を増やしていきたいようなサイトの場合は重宝します。

デザインと要件によって決めることになりますが、分からない場合はコーダーに相談するのもいいでしょう。

基本的にはデザイン画と開発環境があればコーディングは可能ですが、ここで問題になりやすいのがデザイン画の中に指示が無く動きがあるようなサイトの場合、コーダーはそれを知る由が無いので、アニメーションなどがある場合は詳しく指示をするようにしましょう。

以上でサイトの作成は完了です。

後はサーバーにアップして公開設定を行います。これも分からない場合はコーダーに相談しましょう。

専ら開発環境がそのまま公開されるケースが多いのでコーダーがついでに行ってくれるかもしれません。