初心者からwebデザイナーを目指すなら、ヒューマンアカデミーwebスクール

webコース
SINCE 1997全国29校展開
修了生数85,061名の実績

※平成9年10月から平成28年3月のWeb講座の延べ修了生数

webサイトができるまで

facebook Line

webサイトの制作フロー。

様々なプロセスを経て、webサイトは作られています。あなたは、どの工程のスペシャリストを目指しますか?

企画

制作フロー

  • [1] 企画
  • [2] デザイン
  • [3]コーディング
  • [4] システム
  • [5] 公開
  • [6] 運用

webサイト全体の方向性を
決めていきます。

まずはオリエンテーションの場で、クライアントの課題やwebサイトをつくる上での目的、条件や要望、スケジュールなどをヒアリングします。その後、コンセプトやタイトル、具体的なコンテンツまで、webサイト全体の方向性を決めていきます。どんな人に見てもらいたいのか、そのためにはどんな工夫がいいのかなど、何度もリサーチや打ち合わせを重ね、完成形のイメージを明確にしていきます。クライアントの要望によっては、PC向けのwebサイト以外にスマートフォンなどのマルチデバイスに対応したwebサイトについても考慮する必要があります。webサイトの仕様(使う技術やサポートするwebブラウザー)や、webサイトの構造 (サイトマップ)もクライアントとの打ち合わせの中で定めていきます。

  • サイト仕様書

    サイト仕様書

  • サイトマップ

    サイトマップ

※上のサンプルはあくまで一例です。

使用ソフト PowerPointWordExcel
担当 webプロデューサー webディレクター

オリエンテーション(オリエン)で大切なことは?

メールや電話では伝わりにくいニュアンスをくみ取り、クライアントのニーズを的確に把握することが大切です。
オリエン後に議事録を作成して、プロジェクトチーム内で共有する場合もあります。

デザイン

制作フロー

  • [1] 企画
  • [2] デザイン
  • [3]コーディング
  • [4] システム
  • [5] 公開
  • [6] 運用

コンセプトやメッセージを伝えるために、
デザインはとても重要な要素です。

webサイトを立ち上げる目的やその企業のコンセプトやメッセージを伝えるために、デザインはとても重要な要素です。世界観やモチーフのアイデアをいくつも出し合い、企画趣旨に適した表現を探ります。ユーザー目線での使いやすさや見やすさを配慮した上でのページのレイアウトやJavaScriptによる動的な部分も考えてラフデザインを作成。このラフデザインをもとに、IllustratorやPhotoshopでデザインカンプを作成し、かたちにしていきます。また、スマートフォン向けのwebサイトを制作する場合には、スマートフォンの画面サイズを考えたレイアウト別のデザインパターンも作成します。

  • Illustrator

    Illustrator

  • Photoshop

    Photoshop

使用ソフト IllustratorPhotoshopDreamweaverFireworksFlash
担当 webディレクター webデザイナー

どうしてラフが必要なの?

メールや電話では伝わりにくいニュアンスをくみ取り、クライアントのニーズを的確に把握することが大切です。
オリエン後に議事録を作成して、プロジェクトチーム内で共有する場合もあります。

マルチデバイス対応とは?

webサイトだけでなく、スマートフォンサイト、Facebookページなど様々なデバイスに合わせた画面サイズのデザインパターンの制作を行うケースが年々増えています。それぞれのデバイスに目を光らせて、それぞれどういうレイアウトが一番最適かを考えておくといいでしょう。

コーディング

制作フロー

  • [1] 企画
  • [2] デザイン
  • [3]コーディング
  • [4] システム
  • [5] 公開
  • [6] 運用

HTMLやCSSを記述して、
実際のページを組み立てていきます。

webサイトの仕様、サイトマップ、デザインカンプをもとに、HTMLやCSSを記述して、実際のページを組み立てていきます。この作業を「コーディング」や「マークアップ」と言います。制作会社によってはコーディングを行う際のルールが定められたコーディングガイドラインがあり、このガイドラインやサイトの仕様に沿って制作を行ないます。コーディング済みのページがwebブラウザーで正しく表示できるか、動作するかのチェックや、制作スケジュール管理も重要な仕事の一部です。

  • コーディング仕様書

    コーディング仕様書

  • Dreamweaver

    Dreamweaver

※上のサンプルはあくまで一例です。

使用ソフト Dreamweaver
担当 webディレクター webデザイナー コーダー

webブラウザーの種類によって表示は変わるの?

Internet Explorerをはじめ、FirefoxやSafariなど、多様なwebブラウザーがあります。webブラウザーによって言語の認識のされ方が異なるので、レイアウトがずれて表示されてしまうことがあり、コーディングの際には注意が必要です。

システム

制作フロー

  • [1] 企画
  • [2] デザイン
  • [3]コーディング
  • [4] システム
  • [5] 公開
  • [6] 運用

プログラミング言語を駆使しながら、
動的なページを作成していきます。

お客様のニーズに合ったシステムを構築するのは、webプログラマーの仕事です。プログラミング言語を駆使しながら、動的なページを作成していきます。Flashやサーバーと連携した開発になることも多く、プログラム完成後の動作検証(正しく機能するかの確認)もとても大切な仕事です。デバッグ(プログラムの間違いを修正する作業)は、場合によってはかなりの時間がかかることがあります。

  • PHPコード

    PHPコード

使用ソフト DreamweaverFlash
担当 コーダー webプログラマー

どうして検証が必要なの?

画面上では問題ないように見えていても、正しく動作しているとは限りません。システムはHTMLとは違い、毎回同じ画面が表示されるとは限らないため、念入りに検証を重ねることが求められます。

公開

制作フロー

  • [1] 企画
  • [2] デザイン
  • [3]コーディング
  • [4] システム
  • [5] 公開
  • [6] 運用

テストアップで検証後、
本番用のサーバーでWEBサイトを公開する。

各段階での念入りな検証後、テストアップを行ないます。そこで更に、見た目のおかしな箇所はないか、リンク切れや誤字がないか、Flashやシステムの動きに問題がないかなどを検証し、問題があればすぐに修正作業に取りかかります。これを繰り返し、クライアントからOKの確認が取れれば本番用のサーバーへファイルを移し、いよいよwebサイトの公開です。

使用ソフト IllustratorPhotoshopDreamweaver
担当 webディレクター コーダー webプログラマー

テストアップってなに?

テストサーバーへの仮アップロードを「テストアップ」と呼びます。本番サーバーにアップしてしまうと、世界中の人が見られる状態になってしまいますが、テストサーバーにはアクセス制限があります。閲覧を許された人しか見ることができません。

運用

制作フロー

  • [1] 企画
  • [2] デザイン
  • [3]コーディング
  • [4] システム
  • [5] 公開
  • [6] 運用

webサイトは、
完成すればそれで終わりではありません。

webサイトは、完成すればそれで終わりではありません。アクセス解析などによって効果測定や情報収集をしながら、定期的な更新や改善を行なっていきます。つまり「運用」とは、webサイトが成果を生み出すための管理作業全般のことを指します。webサイトの運営は、制作会社や別の専門業者がクライアントの委託を受けて行う場合と、クライアント自らが行う場合があります。webサイトは何らかの効果を上げるために制作するわけですから、この運用が最も重要なフェーズです。

使用ソフト IllustratorPhotoshopDreamweaverFireworksFlash
担当 webディレクター webデザイナー コーダー webプログラマー

アクセス解析ってなに?

webサイトに訪問した人が、どのリンクから訪れたのか、サイト内でどこを見たのか、などを解析すること。ユーザーの様々な情報を収集することができ、webサイトの効果的な運用には欠かせない機能となっています。

まずは、webのことを知ってみよう!

お電話での無料個別相談の
お申込み・お問い合わせはこちら

0120-15-4149

10:00~21:30(土日もOK)