前回投稿した記事 「4/26 Webデザインクラスレポート 〜 ウェブサイト開発の全体像 (1)」の記事を投稿したところ、三浦先生からより正確かつ詳しいご説明をいただきましたので、パート２として投稿させていただきます。 ■ クライアント様への確認について 各フェーズごとに確認＋確定してプロジェクトをすすめます。このようにすすめることで、プロジェクトが後戻りすることを防ぎます。 また、常にドキュメント化してクライアント様と確定した内容を共有します。 ↓つまり １）ヒアリング クライアント様のご要望の把握。 ２）初期提案 クライアント様のご要望に基づいて初期提案し、クライアント様と方向性のすりあわせ＆確定。 ３）サイト戦略策定提案 クライアント様に確定いただいた初期提案を元に、具体的なご提案をする。 ■サイト制作の流れ １）ヒアリング クライアント様のご要望を把握する。 クライアント様によっては、ご要望が漠然とされているところの顕在化。 ① どういうサイトを作りたいか。 コンセプトややりたいことを文章にする。 「～がしたい」を具現化するためには、事前のクライアントからのヒアリングが必須です。 ２）初期提案＋概算見積もり コンセプト、サイトマップ、コンテンツ概略、戦略概略。 ３）サイト戦略策定提案 本格的なご提案。サイト全体の構成、各ページの構成、システム構築設計、具体的なコンテンツ企画。 ② サイトマップを作る 構成や各ページの機能を決める ④ 各ページのワイヤーフレームを作る。文字コンテンツは仮のものでよい。 ４）素材、原稿収集あるいは制作 クライアント様から文字や写真などの原稿をいただく。こちらでライターやカメラマンを使って制作する場合もある。 ③ 出せる範囲で文字コンテンツを集める ④ 各ページのワイヤーフレームを具体的な原稿でブラッシュアップ＆確定。 ５）デザイン制作 ワイヤーフレームに基づいたインターフェースデザインを制作。まずトップページのデザインを確定。トップページデザイン確定後、そのデザインテイストに沿って中ページデザインを制作する。 ⑤ トップページのデザインを数案作成 ⑥ 各ページのデザインを作成 ５）コーディング。システム開発。 ⑦ デザインコーディング （HTML/CSS/Javascript) ⑧ プログラミング (PHP他) ６）確認。校正。最終調整。 ⑨ サーバー上にアップロードしてテストサイトとして確認、修正する。 たいていはテストサイトをアクセス制限して作業する。 ７）本版公開 ⑩ めでたく公開！ ■ウェブ開発チーム ディレクター ：クライアントとの折衝、サイトのコンセプト・戦略策定と機能の定義(ワイヤーフレーム作成も含む)。サイト構築の進行管理。 デザイナー ：サイトのデザイン制作。ロゴや画像パーツ作成やサイトの色調など、見た目全体を担当。 ※スタッフが最小人数の場合はデザイナーがコーディングする場合もあり。 コーダー(デザイナー２というよりコーダー)：HTML/CSSを使って、上記デザインをコーディングする。 プログラマー：たとえばPHPなどのプログラム言語により、サイトのバックヤードで機能するプログラムの構築。 ※Javascriptは、flash的な動作の場合(例：トップページで数枚の画像を切り替え表示する)などは、コーダーの方が担当するケースが多いです。 他・場合によっては：イラストレーター。カメラマン。ライター。フラッシャー(flashプログラミング)。アートディレクター(デザインのディレクション担当)。プロデューサー。など。 デザイナーがトップページ担当と中ページ担当で複数いる場合もあり。＝サイト規模が大きい場合。 ■ 以下の担当の方が開発に与えられるインパクト ● デザイナー２(=コーダー)が開発に与えられるインパクトは、検索エンジンから検索されやすいコーディング、ページをすばやく表示できるコーディング、クライアントがあとから更新しやすいコーディング、jQueryなどでサイトコンテンツを動的にみせる演出などで貢献。 また以下のポイントも重要です。 ー どのブラウザ＋OSでみても、デザイナーの制作したデザインをそのまま再現させるコーディング。 ー ウェブページが「どんな人でも利用しやすいウェブサイト」になるようコーディング。＝アクセスビリティ。 ※小さすぎる文字は使わない、目の見えない方対応など。 ー どのデバイスでみてもサイトが同じように再現されるようコーディング。 ※携帯、スマートフォン、iPad、パソコン　など。 印刷物であれば必要のない作業ですが、web制作ではコーダーによって何でみてもデザインがくずれず、アクセシビリティも考慮したページが実現しています。 ● プログラマーが開発に与えられるインパクト：サイトを静的ページの一方的な発信から、動的サイトへと機能アップさせ、サイトを通じてユーザーとの双方向のやりとりができるようにさせるという貢献。 例：予約システム。ショッピングカートシステム。お問い合わせフォームなど。 サイト構築に関わっているどの担当者ももちろん重要です！！ さすが三浦先生！ 豊富なご経験からのサイト制作の現場の臨場感が伝わってきますね。 デザイナーとコーダー（デザイナー２）が別の人であるとは知りませんでした。なるほど確かに別なスキルかもしれませんね。 全体像がよくわかったところで、また次回よろしくお願いいたします！ 今年こそ プログラムを学ぶ！ 超初心者向けITスクール Club86 Startup School見学会＆説明会の日程はこちら！