Web制作の流れ
1．企画を立てる
webサイトの目的、どんなコンテンツが必要か、ターゲットとなるユーザー、ペルソナ。
誰がどのように何のためにこのサイトを使うかまとめる。サイトの種類によって異なる。
2．サイトマップ
webサイトの構成を表したもの。
必要なページ数、ページのグループ分け、階層など
3．ワイヤーフレーム
webサイトの骨組み。
テキスト、画像などをboxで作成し、必要項目や優先順位を確認するため。
4. デザインカンプ
デザインツールを使用し、webサイトの見本となる「デザインカンプ」を作成する。
実際に表示された時を想定して作りこむ。
5．コーディング
HTMLやCSS、またはプログラミング言語で動きを付け、文章や画像等を用意作る行程。
6、web上に公開する
作成したファイル。ドメインを取得しwebサーバー上にアップロードする。
必要なスキル
・HTML ・CSS ・javascript(jquery) ・Photoshop ・Illustrator ・PHP&SQL ・デザインカンプ ・ドメイン&サーバー ・ライティング ・SEO ・デザイン ・マーケティング動きを表現するもの(出来ると良いスキル)
**・アコーディオン ・ドロワーメニュー ・ハンバーガーメニュー ・スライダー ・マウスホバー（アニメーション） ・ローディング画面 ・on/offの切り替え ・トップへ戻る（フローティング要素） ・モーダルウィンドウ ・パララックス（スクロール効果）**デザインカンプからデータを取得するする
デザインカンプからデータを取得してwebサイトとして実現させる。・画像の取得
・文字テキストの取得
・フォント情報の把握
・色情報の把握
・幅、高さの把握
・余白の幅の把握
サーバーとドメイン
**納品データ→建物 サーバー →土地 ドメイン →住所**＜サーバーの種類＞
1：共用サーバー
2：専用サーバー(レンタル)
3：VPS (Virtual Private Server)
4：パブリッククラウド
FTPソフト
サーバーにファイルをアップロードしたり、サーバーにアップしたファイルを削除したり、更新したりするためのソフト
サイト制作における納品物について
納品物となる主な項目は以下となります。・データ一式
・マニュアル
・デザインデータ（PSDやAIデータなど）
・購入した写真素材
**〇データ一式とは**
web制作に必要なファイルが揃ったデータのこと
HTML、CSS、javascript、画像データなど
**〇マニュアルとは**
クライアントがする作業に対しての説明書
CMSを導入することで、コードが書けなくてもサイトを更新できるという利便性が高まっております。ただ、使ったことのないツールをいきなり触るのは勇気がいりますよね。そういった更新に対して作業マニュアルを納品することで、円滑に更新業務をおこなえるようにすることが目的
**〇デザインデータとは**
photoshopやILLustratorなどで作成したデザインデータ
制作物には著作権は発生するため、デザインデータなどは契約時に取り決めが必要である。
**〇購入した写真素材**
web制作に必要な写真素材を購入した場合、その写真素材自体を納品することは不可であり、購入した本人または所属組織に使用権が付与される。オリジナルの素材データを渡す行為は『使用権の譲渡』にあたるため、禁止されていることが多い。
そのため、写真素材を購入する場合、規約内容を把握した上で納品物としてどう扱うか、どちらが購入するかが重要である。
●制作会社がサーバーにアップする場合
クライアントより承認を得た上でサーバー情報を教えていただき、サーバーにファイルを制作会社がアップする方法
この場合、サーバーにアップすることで納品とされ、大体このパターンが一般的である。
●クライアントがサーバーにアップする場合
クライアントがサーバーにアップするため、データ一式をZIP形式などでクライアントにお渡しする納品方法
この場合、納品ファイルに不備があった時、修正し再度納品する必要が出てくるので、制作会社で直接アップする時より融通が利かないという点がある
画像ファイル形式
種類
・JPEG (ジェイペグ)
・GIF (ジフ)
・PNG (ピング)
・TIFF (ティフ)
・BMP (ビットマップ)
上の3つ(jpg、gif、png)は画像を圧縮してファイルサイズを小さくするファイル形式
下の2つ(tiff、bmp)は無圧縮なファイル形式
JPEG形式、PNG形式、GIF形式はラスター画像、SVGはベクター画像です。
メインビジュアルやバナーなど写真画像が入る場合はJPEG形式、
ロゴやアイコンなどの小さいパーツはSVG形式、PNG形式、GIF形式の順で使うことが多い
JPEG (ジェイペグ)
拡張子：.jpg、または.jpeg
カラー：約1,677万色 (24bitカラー)
圧縮方式：非可逆圧縮
透過：非対応
用途：写真画像
フルカラーに対応し、非可逆圧縮による効率の良い圧縮ができるため、色数の多い写真画像に適したファイル形式。
PNG (ピング)
拡張子：.png」
カラー：約1,677万色 (24bitカラー)
圧縮方式：可逆圧縮
透過：対応（アルファチャンネル対応）
用途：ロゴ、アイコン、透過のある画像
GIFに代わるファイル形式として登場した比較的新しいファイル形式。
ロゴ、アイコン、色数が少なめの写真画像などに使う。
JPEG同様にフルカラーを扱うことができるが可逆圧縮のため、色数が多いとJPEGよりもファイルサイズが大きくなる。
透過を綺麗に表現することができ、透過度の異なるグラデーションを表現することも可能。
GIF (ジフ)
拡張子：.gif」
カラー：256色(8bit)
圧縮方式：可逆圧縮
透過：対応(1色のみ)
アニメーション：対応
用途：色数の少ないロゴ、アイコン、短いアニメ
扱うことのできる色数は少ないが、ロゴやアイコンなど色数の少ない画像を保存する場合にはファイルサイズを最小限に抑えることができる。
PNGほど高機能ではないが、簡単な透過にも対応。
今回のファイル形式の中では唯一アニメーションに対応しており、短い動画ファイルにも使用される。
SVG (エス・ブイ・ジー)
拡張子：.svg」
カラー：約1,677万色 (24bitカラー)
圧縮方式：非圧縮
透過：対応（アルファチャンネル対応）
用途：ロゴ、アイコン、マルチデバイス対応が必要な画像
上記3つのファイル形式はピクセル単位で表現する「ラスター形式」であるのに対し、こちらはIllustratorのような「ベクター形式」。
よって、拡大しても劣化しないのでマルチデバイス対応が容易になり、テキストベースで保存するためファイルサイズも非常に軽く、主にロゴやアイコンに使われている。
計算して出力するため、フルカラー対応ではあるが色数の多い写真画像には不向き。
Webサイトの種類
参考サイト→https://www.biz.ne.jp/matome/2003491/
「自社や商品・サービスの認知させる」「見込み顧客を集める」「商品やサービスを売る」「求職者からの応募を集める」「新しい収益を作る」といったサイトを作る目的によって作るべきサイトが変わります。ホームページと一口に言っても実は種類があります。大まかに分けると全部で9つ。
1・コーポレートサイト
2・ランディングページ
3・プロポーションサイト
4・オウンドメディア
5・サービスサイト
6・ブランドサイト
7・リクルートサイト
8・ECサイト
9・メディアサイト
1.コーポレートサイト
サイトの目的
企業サイトともよばれ、企業を紹介することが目的のサイトです。
企業の公式サイトになるため、会社の顔といっても過言ではありません。
より多くの人に、会社のことを知ってもらうためのマストツール。
掲載コンテンツ
企業の正式名称や本社、支社の所在地、アクセス、役員の情報、企業の沿革や歴史、社員の数や社屋についてのページを制作するのが一般的です。中には、コーポレートサイトの中に採用ページを作るケースもあります。
2.ランディングページ
サイトの目的
商品やサービスの購入・申し込みをしてもらうことがランディングページの目的です。
インターネット広告やSEO対策で見込み顧客が検索するであろうキーワードで表示させてアプローチしていくのが一般的です。
掲載コンテンツ
サイトの種類として紹介していますが、ランディングページは一般的に「1枚のWebページ」で構成されています。そのため、コーポレートサイトでは1つのサイトに複数のコンテンツを用意するのが一般的ですが、ランディングページでは必要ありません。
商品やサービスの購入・申し込みをゴールとしているため、1ページ内で「商品の紹介」「商品を使うメリット」「メリットが得られる根拠」「使用ユーザーの声」「購入を検討する上で出てくる疑問とその回答」「購入方法」を用意する必要があります。
3.プロモーションサイト
サイトの目的
言葉のとおりで、何かしらの商品やサービスのプロモーションを行うサイトです。
サイトの目的（ゴール）としては「商品を知ってもらう」「商品に興味を持ってもらう」「商品を買ってもらう」の3つと言えるでしょう。サイトの目的に「購入」まで含まれている点を踏まえると、ランディングページと少し似ています。
プロモーションの一環で行われるリアルイベントの告知がメイン目的の場合は「キャンペーン特設サイト」となり、キャンペーン期間中のみ運営されます。
掲載コンテンツ
商品やサービスをはじめて知る人に向けて、「特徴」や「メリット」をコンテンツに載せます。商品やサービスのプロモーションの一環でリアルイベントを行う場合は、イベントの趣旨や場所などを解説するページも必要です。
4.オウンドメディア
サイトの目的
本来の意味は、その企業が持っているメディアの総称のことをいいます。
しかし、この意味が変わりつつあり、多種多様なコンテンツを用意して商品やサービスの魅力を伝えていくサイトのことを指すようになっています。そのため、「商品・サービスの認知」から「商品・サービスの購入・申し込み」までを実現させ、尚且つ、利用したユーザーが自社のファンになるようにするのがオウンドメディアの目的です。
掲載コンテンツ
SEO対策を施して「商品・サービスの認知」を広げていくのがオウンドメディアの基本的な運営方法です。そのため、見込み顧客が検索するであろう検索ワードを分析。その検索ワードで上位表示できるコンテンツ（ページ）を作っていきます。例えば、将来的に自社の商品・サービスが必要になるであろう見込み顧客が今悩んでいることを分析。「お役立ちコンテンツ」を量産し、そこから自社商品やサービスの認知度を広めていきます。
ある程度、自社やオウンドメディアの認知度が上がり、オウンドメディア名で検索するユーザーが増えれば、上記とは違うコンテンツを作るのもありです。
すでにメディアに興味を持っているユーザーに対して、ファンになってもらえるような連載企画やインタビュー記事などを作るのもありでしょう。
5.サービスサイト
サイトの目的
サービスサイトは企業が提供している商品・サービスの紹介や特徴を伝えて「購買・申し込み」に繋げることが目的。
サイトで狙うべきターゲットは、商品やサービスの潜在顧客または顕在顧客の2つになります。このターゲットに対して、商品やサービスに関する情報を提供していくのがサービスサイトの役割です。
掲載コンテンツ
商品やサービスの潜在顧客または顕在顧客であるターゲット層が「知りたいこと」「気になること」について情報を提供するコンテンツを作っていきます。
もちろん、商品に関する特徴やメリット、価格表などのコンテンツは必須です。実際に利用したユーザーの声を紹介するコンテンツも作ってあげたほうが良い。
リード獲得が目的であれば、「問い合わせフォーム」「資料請求フォーム」なども作ります。
6.ブランドサイト
サイトの目的 購入の基準となるポイントは人によって異なりますが「商品やメーカーについてのイメージ」が決め手になることが多いです。そのため、企業自体や商品などのブランド力、知名度を高めることは、販売力に直結する大事なポイントとなります。ブランドサイトは企業や商品の認知度やブランド力を高めるのが目的です。
掲載コンテンツ
商品やサービスのコンセプト、企業理念などを伝えるコンテンツが必須です。ただし、商品の性能や価格の優位性を伝える「機能的価値」より、商品やサービスを使うことで得られるライフスタイルなどを伝えるといった「感情的価値」を伝えるようにしましょう。
「機能的価値」を伝えるにしても、企業側が一方的に伝えるのではなく、サイトに訪れたユーザーに問いかけるようなコミュニケーションが効果的。メッセージ性が出るため、ブランド力の向上に繋がるはずです。
7.リクルートサイト
サイトの目的 リクルートサイトの目的は、求職者に自社の魅力をPRし応募を促すこと。最近はインターネットを活用して求人情報を探すことが多いので、企業のホームページにリクルートサイトを置く、もしくは専用のリクルートサイトを作る企業が増えています。掲載コンテンツ
最低限、「自社の魅力」や「求める人物像」「待遇」「応募要件」などは掲載しましょう。掲載するにしてもただ伝えるのではなく、キャッチコピーなどを用いて求職者の心に刺さるようなコミュニケーションをとることがポイントです。
制作予算にもよりますが、「先輩社員インタビュー」や「◯◯さんの1日の働き方」といったコンテンツを作り、写真や動画などを交えて伝えるのも効果的。働くイメージが湧きやすく応募に繋がりやすくなります。
8.ECサイト
サイトの目的 ECサイトとは、ネット上で実際に商品やサービスを直接販売できるサイトのこと。商品やサービスの購入に繋げて売上をアップさせることが目的です。リアル店舗と違い「いつでも・どこでも」でも買い物ができるため、今や企業活動においてなくてはならない販売戦略と言えるでしょう。
掲載コンテンツ
商品の機能や魅力、そして価格を伝える商品ページは欠かせません。扱っている品数が多い場合はカテゴリページも必要になります。また、コンテンツも重要ですが、ECサイトにおいては「サイト機能」も重要です。
例えば、商品を探しやすい検索機能はもちろん、決済機能なども欠かせません。運営側においては受発注管理機能や顧客管理機能も必要になります
9.メディア祭と(ポータルサイト)
サイトの目的
商品やサービスの情報だけでなく、関連するお役立ち情報や業界についての最新情報を提供するのがメディアサイトです。代表的なメディアサイトで言えば、不動産ポータルサイトの『SUUMO』など。
このメディアサイトを上手に使うことによって、お客さんの関心を上手に引いて、サービスサイトなどに誘導することができる特徴があります。
また、特定のジャンルでポータルサイトが認知された場合は、ポータルサイト上で広告収入を得られたり、掲載料を徴収することも可能です。作る側としては「新しい収益の柱」を作ることがメディアサイトを作る目的と言えるでしょう。
掲載コンテンツ
ポータルサイトのテーマにそったニュースを配信するコンテンツや解説記事が必要です。『SUUMO』であれば、物件情報や不動産会社の情報を載せています。テーマによっては、特定の業種に関わる企業情報を載せる必要もあるでしょう。
また、ポータルサイトもECサイト同様、情報が膨大になりがちのため、「検索機能」といったサイト機能の実装も欠かせません。
ホームページの肝となるコンテンツ
・単発タイプ その記事だけで完結するタイプのコンテンツです。時事ネタの速報記事やニュースまとめなどが代 表例です。・連載タイプ
いわゆる続きモノになるコンテンツです。1話2話…と記事を増やしていくイメージになります。
・追記タイプ
既に投稿した記事に対して追記をして、記事自体の質を上げていくタイプです。
・季節・歳時タイプ
そのときどきのイベントごとをテーマにします。クリスマスやバレンタインデー、正月など…多くの催し物があるため、テーマも豊富です。
・永続タイプ
情報の更新がいらず、そのままの状態でも問題のないサイトです。
・辞書タイプ
テーマに対して端的に解説していくタイプです。辞書を始め、専門用語などの説明が最たる例となります。
インタビュータイプ
いわゆるQ&A方式のタイプのコンテンツです。
データタイプ
テーマに挙げているモノに対して、調査の結果報告をするタイプです