皆さんが普段見ているホームページ。これって一体作るのにどれくらいの労力が必要なのと思ったことはないでしょうか。

ホームページって実は簡易的に作る場合は簡単に作れるのですが、しっかりと作り込む場合は結構な工程が踏まれています。

本記事ではホームページを受託制作をしている弊社のホームページが公開されるまでのワークフローをご紹介したいと思います。

企画・構成

それではここからホームページ制作の工程をご紹介していきます。

まずはじめにする作業はホームページの企画、構成を考えます。

企画、構成とはホームページをどのような目的で運用していくのか、どういった内容をホームページに入れるのかといったいわば、土台作りになります。

ここは基本ディレクターがクライアントと打ち合わせを行ってヒアリングをするのが一般的です。

この企画、構成をしっかりしないと何を伝えたいホームページなのか、使い勝手が悪いホームページになってしまったりといいホームページはできないので、この土台部分をしっかりと作る必要があります。

弊社では毎回ヒアリングシートを用意して、お客様の要望をしっかりと汲み取るように心がけています。

ヒアリング項目を一部抜粋してご紹介させていただきます。

• 制作の目的
• ターゲットユーザー
• 競合他社の有無
• アピールポイント、差別化できるポイント
• テーマカラー
• デザイン参考
• 準備していただける素材

このような項目を毎回ヒアリングするようにしています。

ワイヤーフレームの制作

続いてワイヤーフレームの制作です。

ワイヤーフレームとは何かというと、前工程の企画、構成ですり合わせた内容を元にホームページ内のどこにどんな情報を載せるか、どういうページが必要なのかなどをデザインはせず、要素を配置したものになります。

このワイヤーフレームを作ることでデザイナーがデザインする際に役立ちますし、ホームページに入れる内容の調整なども早い段階で行うことができるので、いいホームページができやすくなります。

デザイン制作

続いてはデザイン制作です。

ワイヤーフレームを元にそれをデザインしていく工程になります。

このデザインの工程では、事前ヒアリングのテーマカラーやデザイン参考を意識しながらデザインしていきます。

このデザイン工程が一番時間をかける部分になります。サイトの雰囲気などはこのデザインの段階でしっかりと詰めておく必要があります。

構築してからデザインの修正とかがあるとかなり労力が必要なので、このデザイン段階で詰めれるところは徹底的に詰めていきます。

ホームページ制作のワークフローを紹介！

皆さんが普段見ているホームページ。これって一体作るのにどれくらいの労力が必要なのと思ったことはないでしょうか。 ホームページって実は簡易的に作る場合は簡単に作れるのですが、しっかりと作り込む場合は結構な工程が踏まれていま […]

構築

デザインが完成したらいよいよ構築をしていきます。デザインを元に忠実にデザインを再現して構築をしていきます。

デザインを忠実に再現するのはもちろんのこと、デザイン時に表現できない動的な部分も実装していきます。

動的な部分と言いますと、カーソルが被ったときのホバーアニメーションやメニューバーを押した時にメニューが上から出てきたりするものです。

テスト運用

構築まで完了したら実際にサイトとして運用できるところまでは完成しています。

ただ実際に運用する前にテスト運用を挟みます。このテスト運用をすることで、何かサイトでバグが発生しないかなどの検証を行います。

テスト運用で問題があればすぐ修正を行い、問題なく運用できるようになればテスト運用は終了します。

本番運用

そしてラスト工程となる、本番運用です。

テスト運用でバグなどが起きないことが確認できているので、安心して運用をすることができます。

ホームページ制作のワークフローを紹介！

皆さんが普段見ているホームページ。これって一体作るのにどれくらいの労力が必要なのと思ったことはないでしょうか。 ホームページって実は簡易的に作る場合は簡単に作れるのですが、しっかりと作り込む場合は結構な工程が踏まれていま […]

まとめ

いかがだったでしょうか？こうみると意外といろんな工程を経て、ホームページが完成しているんだなと思ったかと思います。

とりあえずホームページを作るのではなく、しっかりと目的を持ってホームページを作ることで仕上がりがかなり変わってきます。

弊社ではこうしたホームページ制作をさまざまな業種の企業様からご依頼をいただいております。

ホームページ制作をお考えの方はぜひ一度お問い合わせください。