【Webデザイナー入門ブログ】Webデザイン & HTML/CSSのキホン

 目標を設定する
　はじめにメイン目標とサブ目標を設定する
　（例）メイン：商品の売上を伸ばすなど
　　　　　サブ：商品評価を書いてもらう

 ターゲットユーザーを決める
　（例）趣味、性別、年齢層など
　　ターゲットユーザーをより具体化した「ペルソナ」（22歳、女性。新しい物が好き、おしゃれなカフェでゆっくりするのが好き、入社2年目、収入は月20万、ライブが好き）とよばれる人物像を設定することでデザインの方向性が定まってきます。

 まとめ
ペルソナは実在する人物のように考えます。Webサイトの利用場面も思い浮かべてみましょう

 ページをグループ分けする
構成を上手にまとめるには関連するページをグループ分けすることです。
必要なページを書き出し、関連性のあるページ同士を１つのグループとして分けましょう。

　（例）

 ページの優先順位
特に見てほしいページやユーザーが求めているであろうページが何かを考えて、優先順位の高いページはすぐに目に止まるようなナビゲーションメニュー内に配置しましょう。

 まとめ
サイトマップはペンと紙があれば手書きですぐ作成可能です。階層はなるべくユーザーが迷子にならないように2階層以内がおすすめです。

 「ワイヤーフレーム」
全ページのレイアウトを考えます。色や装飾などは入れずテキストやライン、ボックスのみで制作します。

　（例）

（例）Figmaなど

 コンテンツの優先順位
ページの中でどんな要素が必要かを書き出します。その要素の中でどれが1番見てもらいたいかかを考え、優先順位をつけます。
（例）

• メイン画像
• ロゴ
• ナビゲーションメニュー
• タイトル
• 紹介文
• 商品写真

 視線の動きを考える
ユーザーの視線は上から下、左から右に移動します。優先順位の高いコンテンツほど上部や左側に配置しましょう。

 まとめ
サイトマップはペンと紙があれば手書きでできます。修正などが大変になるためツールを使うのもおすすめです。

 「デザインする」
ワイヤーフレームが完成したら
【デザインカンプ】と呼ばれる、実際のWebページと変わらないデザインをツールを使って作成します。

　（例）

（例）Figma、Canvaなど

 まとめ
デザインカンプを作成することで、Webページのイメージがしやすくなります。
ユーザーさんが見やすい画像の配置、配色、書体、余白などにも気をつけて作成します。

 「ファイルを用意」
必要なのは「HTML」と「CSS」と「画像ファイル」です。

 「HTMLでWebサイトのコンテンツを記述」
「.html」ファイルでは、ページ毎にそれぞれファイルが必要になります。

 「CSSでWebサイトを装飾」
HTMLだけでは『色、文字装飾、レイアウト』などはできません。なので基本的に装飾に関することは全て「.css」ファイルに記述します。

 「画像ファイルを用意する」
使う画像は【images】などのフォルダに保存します。
Webに使える画像は、『JPG、PNG、GIF、SVG、WebP』などです。

　（例）

 「Web上に公開する」
パソコンの中にファイルがあるだけでは、サイトを閲覧できるのは自分だけになります。
世界に公開するには、Webサーバーにファイルを転送する必要があります。

 「※１サーバーを用意」
Webサーバーは一般的にサーバー会社からレンタルして利用します。会社によって料金やできる事が違うので、自分のサイトにあったサーバーを選択しましょう。
月額500円〜でもサーバーをレンタルできます。

 「ドメインを取得」
ドメインとはサイトの場所を表す【住所】のようなものです。ドメインの名前は世界にひとつだけです。
サーバー会社さんによっては申し込んだ時点でドメイン取得の手続きも同時に行える会社もあります。

 「Webサーバーにアップロード」
用意したサーバーにファイルをアップロードします。ファイルの数が多い場合にはファイル転送ソフト「※２FTP」のほうが、アップロードがスムーズになります。

※１　サーバーとは？
①何らかのデータを受け取り
②受け取ったデータをもとに何らかの処理をし
③処理を行った結果を返す
という役割を持ったコンピュータ全般のこと
※2　FTPとは？
FTP（File Transfer Protocol）
「ファイルを送受信する時に使う決まりごと（通信プロトコル）」です。

HTMLやCSSファイルの作成は、『メモ帳』などでもできますが、制作するのに役立つ「補助機能」が備わっているテキストエディター（VSCode）がおすすめです。

特に人気なテキストエディターは、Microsoftの「Visual Studio Code」です。

ブラウザーによって多少表示が異なります。

そのため、ユーザーがどのブラウザーを利用するかわからないので、なるべく全てのブラウザーで動作確認をしておくのがおすすめです。

Figuma

デザインカンプ（完成見本）の作成に便利なツールです。
簡易なアニメーションなども含めた実際に動作しているような「プロトタイプ」も作成できます。

ブラウザー上で扱えるのでとても便利です。

Canva

デザイン作成の経験が少なくても、Canvaには魅力的なテンプレートが豊富にあるので、ビジュアルコンテンツを比較的容易に作成することができます。

こちらもブラウザー上で扱えるので便利です。

Adobe photoshop & Illustrator

言わずと知れたAdobeの代表的なツールです。PhotoshopとIllustratorを扱えれば、それだけで専門的なお仕事ができるくらい幅広い活動に利用できます。

少々費用が高い点と、動作する環境がある程度のスペックを求められるので導入障壁が高いのが難点です。