2022/08/01\感想やシェア嬉しいです/ツイートシェアはてブLINEこの記事では、Webサイト完成までどんな工程があるのか簡単に説明しています。仕事の合間の息抜きに植物を育てています♡もっと詳しくみるWebサイト制作にはすごくざっくり分けて「1.企画」「2.デザイン」「3.コーディング」があります。この流れを解説していきまっす。1.企画サイトコンセプトペルソナ色サイトマップワイヤーフレーム2.デザイン3.コーディング最後に1.企画Webサイトを制作する時は、デザインしてコーディングすると思われがちですが、とても大事な「企画」からスタートです。企画は、「Webディレクション」とも呼ばれ、サイト作りを分業で行う場合は、Webディレクターが担当することが多いです。どんなサイトを制作していくかのプランをしっかりと練るところからスタートです。クライアントさんの「サイトを制作する目的」をヒヤリングし、どんなサイトを作るかを構成していきます。サイトが何の為に作られるのかによって、必要なコンテンツ等も変わってきます。具体的に決めるのは以下の4点です。サイトコンセプトペルソナ色サイトマップサイトコンセプトまずはサイトコンセプトです。このサイトが何の為に作られるのか、サイトを作ることでどんな結果を期待しているのかを検討します。コンセプトを決定していないと、後のデザイン工程で意図とは異なるイメージを作ってしまったりするのでとても大切です。逆に言えば、コンセプトがしっかりしていると、最後まで進めやすいということですね。ペルソナペルソナは、このサイトを見にきてほしいターゲット層を具体的に設定することです。「この設定いるのかな?」わたしもスクールに行った時に思ったよ。この考え方は、デザインというよりも「マーケティング」の考え方で、具体的に1人のペルソナを立てて、その1人に刺さるようなサイトを作りませうってことですね。作成した1人の為にサイトを作ればいいので、ちょっと楽かも!?というメリットもあります。ペルソナは具体的に設定してみてください。色はデザインに入る前の段階で決めてしまいます。デザインに入ってから、何使おう〜と迷うのではなく、最初にある程度設定しておくべきです。使う色は、サイトコンセプトによって決めます。色についてはこちらの記事にも書いているので良かったら後で読んでください。【Webデザイン初心者さんへ】デザインする時に注意する3ポイントchiiweb.net/media/design-point/サイトのコンセプトから、使用するメインカラー、ベースカラー、アクセントカラーを選定します。「色」が与えるイメージって、なんとなく感じ取っていると思うのですが、もし全然分からないという場合は、色について多少知識があるとすぐにデザインに活かせられますね。「青が与えるイメージ→冷静、落ち着いている、清潔な、信頼感」などのような知識ですね。色から得るイメージが分かると、コーポレートサイトで青がよく使われている理由が分かるかと思います。サイトマップサイトマップとは、サイトのページ構成がすぐに分かる表のことです。サイトのコンセプトを決定した後、「何を掲載するか」を考えて作ります。簡単に作った参考例です。このような形で作成していきます。この時点で、何のページを作成して、どういう内容を掲載するかを検討しておきます。サイトコンセプト、ペルソナ、色、サイトマップが決定したら、デザインの基となる「ワイヤーフレーム」を制作します。ワイヤーフレームワイヤーフレームは、デザインに移る前の段階で、ページをどんな構成にするか簡易的に作成するものです。配置の確認というイメージですね。ワイヤーフレームは、どんな位置にどういう風に何を置いていくかをざっくり考える工程です。ここにこういう写真を使おう、ここに文章を入れよう、等を検討していきます。ワイヤーフレームの段階では、文章やコピーが確定していなくても問題ありません。ここまでできた後、デザイン・コーディングに進みます。2.デザイン企画が決定すると、デザインに移ります。企画時に決めたプランに基づいてデザインにしていきいます。企画していると、デザインで困ることが少ないかも?分業の場合は「デザイナー」が担当します。3.コーディングデザインがしっかり完成したら、コーディングに移ります。大規模なプロジェクト等は、確定したページからコーディングに進むことがよくあります。全ページの確認が終わってからコーディングだと、確認待ち期間が勿体無いからですね。コーディング後に大きな修正が入るとコーダーは大変なので、できるだけデザイン確定後にコーディングを始めたいところではあります。実際の現場では理想論だったりするかもしれません。コーディング終了後に修正がくることは割とあると思います。分業だと「コーダー」が担当しますね。最後に今回は、超簡単にサイト制作の流れを見てみました。コーディングの後は確認作業をし、クライアントさんにもしっかり確認していただいて納品となります。分業の場合だと、ディレクターが企画をし、デザイナーがデザインをし、コーダーがコーディングするという流れで1サイトが完成します。フリーランスの場合は、この流れを1人で全部やる場合もあるし、1部分を請け負う場合もあるし...と案件によって様々だと思います。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Δコメントは承認後に表示されます。コメント投稿後元記事のトップに戻ります。【Webデザイン初心者さんへ】デザインする時に注意する3ポイント関連記事サイト制作時のヒヤリングどうしてる?WordPressでサイトを制作する理由って?Aboutこのサイトは、これからWebデザイナーを志す方の為の、情報発信サイトです。【css】テキストを右から左に流すアニメーションProfileSearch\Instagramでもwebデザイン情報発信中/このサイトについてプライバシーポリシーサイトマップ©chiiweb.net。