​​3. Webサイト制作・公開の流れ

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

​​サイトを作成する目的やターゲットを定め、デザイン前のサイトの設計図となるワイヤーフレームを作成します。
​​
  • ​​必要な物：プランニングシート / ワイヤーフレームを作成するツール
​​

​​1. ワイヤーフレームとは

​​一言で言うと「サイトの設計図」です。
​​サイトを作成する前に【何を・どこに・どれくらいの面積で】配置するかを表したものです。
​​
 
User-uploaded image: image.png
​​
​​
​​構成を考える上で重要なの事
  • ​​サイトに訪れる人が迷わない設計
  • ​​一番伝えたいことは目立たせる、ファーストビューエリアに置く
​​
​​※ ファーストビューエリアとはユーザーがWebページにアクセスした時に最初に表示されるエリア、スクロールをせずに画面に表示されるエリアのことです。
​​
​​
​​ワイヤーフレームの作成方法
​​
​​名前
​​説明
​​Figure
​​ブラウザ、Mac、Windows 無料
​​デザインツールとしても使われている
​​Sketch
​​Macのみ、有料、トライアル無料
​​デザインツールとしても使われている
​​Adobe XD
​​無料プランあり
​​デザインツールとしても使われている
​​Cacoo
​​トライアル無料
​​練習用にサイトを作成するときは手書きでも良いですが、
​​クライアント様に提出する際は基本、データ化してPDFで渡し、お互いの認識を合わせていきます。
​​
​​

​​2. デザインカンプ作成

​​Photoshopなどのデザインソフトを使用して、Webサイトの見た目を制作します。Webサイト上で見たときのデザインをそのまま再現します。完成したデザイン見本は一般的に「デザインカンプ」と呼びます。
​​
​​名前
​​説明
​​Photoshop
​​
​​Figuma
​​
​​Sketch
​​
​​Adobe XD
​​
​​素材の書き出し
​​2で作成したデータから、必要な素材を全て書き出します。
​​
​​画像形式について
​​Webで使用する画像形式は主に下記の3種類です。
​​
​​拡張子
​​
​​PNG（.png）
​​背景透過、半透明が利用できる。データ量が多いため容量が重くなりがち
​​JPEG（.jpg）
​​背景透過できない。写真などの色数がおおい画像の圧縮に便利
​​GIF（.gif）
​​256色なためイラストや、アイコンなど色数が少ない場合に使用
​​webサイトはなるべく軽くすることで見やすいサイトを制作することができます。
​​（最近でいうところのギガの仕様を減らせる..）
​​ですので、適切な圧縮方法を選んで軽いサイトを目指しましょう。