WEB

Webサイト制作の流れ

サイトのプランニング・ワイヤーフレームの作成

サイトを作成する目的やターゲットを定め、デザイン前のサイトの設計図となるワイヤーフレームを作成します。

必要な物：プランニングシート / ワイヤーフレームを作成するツール

ワイヤーフレームとは

ワイヤーフレームは、Webページのレイアウトを決める設計図です。

サイトを作成する前に【何を・どこに・どれくらいの面積で】配置するかをシンプルな線や枠で表したものです。

構成を考える上での重要ポイント

  • サイトに訪れる人が迷わない設計をする
  • 一番伝えたいことはファーストビューエリアに置く

参考サイト：https://web-kanji.com/posts/what-is-wire-frame

ワイヤーフレームの制作ツールについて

ワイヤーフレームの制作には、手書きの他、PowerPointやKeynoteなどのプレゼンテーションツールが使われます。

Adobe XDやFigmaなどでも制作可能です。

など

ワイヤーフレームをクライアント様に提出する際は、PDFや閲覧用URLを共有したりします。

ワイヤーフレーム配布サイト：https://baigie.me/officialblog/2020/12/17/btob_wireframe/?

ファーストビューエリアとは

ユーザーがWebページにアクセスした時に最初に表示されるエリア、スクロールをせずに画面に表示されるエリアのことです。

デザインカンプ作成

Photoshopなどのデザインソフトを使用して、Webサイトの見た目を制作します。

Webサイト上で見たときのデザインをそのまま再現します。

完成したデザイン見本は一般的に「デザインカンプ」と呼びます。

デザインカンプの作成におすすめ

素材の書き出し

デザインカンプを作成したら、必要な素材を全て書き出します。

必要な物：デザインカンプの作成で使用したデザインソフト

画像形式について

Webで使用する画像形式は主に下記の4種類です。

jpgpnggifsvg
色数1677万色1677万色256色単色
透明表現不可表現可能表現可能表現可能
形式ラスターラスターラスターベクター
用途長方形の写真不規則な写真アニメーションアイコン・ロゴ

ページの内容をHTMLで書く

ページの文章と骨格をHTMLというWeb用の言語で書きます。

必要な物：テキストエディタ（無料でダウンロード可能）

オススメのテキストエディタ

Visual Studio Code、通称「VS Code」はMicrosoft製のテキストエディターで、現在、プログラミングやWebの世界でデファクトスタンダートとなっているオープンソースのテキスト(コード)エディタです。

いま急速にユーザー数が増えており、エンジニアはもちろん、Webクリエイター、プログラミング入門者に至るまで用途の幅も広がっています。

デフォルトの状態でも制作に必要な機能が備わっていて初心者でも扱いやすい人気のエディタです。

Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方

Visual Studio Codeについての詳しい使い方やカスタマイズ方法が知りたい方におすすめです。

Webクリエイターやプログラマーはもちろん、日常のテキストエディタとしてVSCodeを使ってみたい、使っているユーザーが、もっと便利に使いこなせるようになることを目指し、基本からカスタマイズ、効率アップにつながる操作方法、さらにVSCodeが標準サポートしているGitの使い方まで丁寧に解説しています。

詳細を見る

ページのデザインをCSSで書く

作成したHTMLにデザイン情報を加えていきます。

こちらはCSSという言語で書いていきます。

CSSにより文字の色を変えたり、線を引いたり、余白の大きさを調整したり細かいデザインの調整ができます。

サーバーを用意する

作ったWebサイトをWeb上で見れるように公開するには、サーバーを用意する必要があります。

サーバーは自作もできますが、レンタルサーバーを借りる方が簡単です。

必要な物：レンタルサーバーの契約

おすすめレンタルサーバー

ドメインを取得する

ドメインは自分で決めることができます。（「〇〇.com」や「〇〇.jp」など）

ドメイン管理業者を通して、自分の好きなドメインを取得することができます。

ただし既に使用されているドメインは取得することができません。

必要な物：ドメインの契約

おすすめドメイン会社

サーバにWebページの情報をアップロードする

ファイル転送ソフト（＝FTPソフト）を使用して、作成したHTMLファイルやCSSファイルなどのWebページ情報を自分のパソコンからサーバにデータをアップロードします。

必要な物：FTPソフト

おすすめFTPソフト

※ レンタルサーバに付いているFTPソフトを使用することもできます。

ここまで対応するとようやくURLにアクセスして、Web上でサイトを見ることができるようになります。

-WEB