わかりやすいWebサイトのキホン
良いWebデザインとは
デザインの目的は相手に伝えること!
デザインを通して「何を伝えたいか」が大切!!
使いやすいことが重要
誰にでも使いやすい
まとめ
デザインセンスという曖昧な指標は必要ありません
必要なのは知識だけです。
勉強すれば誰でも身につきます
Webサイトの種類
様々な種類のWebサイト
ショッピングサイト
申し込みサイト
イベントサイト
ポートフォリオサイト
メディアサイト
SNS
まとめ
これは一例で、もっと種類があります。
一つのサイトでも複数タイプの組み合わせている場合も!
目的に合わせて構成することが大切です
Webサイトの仕組み
インターネットとは?
世界中のコンピューター同士で情報お交換できる
Webとは?
「web」と「インターネット」は別ものです。たくさんある機能のうちの一つが「web」です
URLとは?
閲覧したいwebサイトに辿りつけるための住所のようなもの
まとめ
インターネットは「ネットワーク」のこと
webはそのネットワークを利用してwebサイトを公開したり閲覧したりできる仕組みのこと
Webサイト制作の流れ
企画を立てる
目標を設定する
はじめにメイン目標とサブ目標を設定する
(例)メイン:商品の売上をの明日など
サブ:商品評価を書いてもらう
ターゲットユーザーを決める
(例)趣味、性別、年齢層など
ターゲットユーザーをより具体化した「ペルソナ」(22歳、女性。新しい物が好き、おしゃれなカフェでゆっくりするのが好き、入社2年目、収入は月20万、ライブが好き)とよばれる人物像を設定することでデザインの方向性が定まってきます。
まとめ
ペルソナは実在する人物のように考えます。Webサイトの利用場面も思い浮かべてみましょう
サイトマップ制作
ページをグループ分けする
構成を上手にまとめるには関連するページをグループ分けすることです。
必要なページを書き出し、関連性のあるページ同士を1つのグループとして分けましょう。
(例)
ページの優先順位
特に見てほしいページやユーザーが求めているであろうページが何かを考えて、優先順位の高いページはすぐに目に止まるようなナビゲーションメニュー内に配置しましょう。
まとめ
サイトマップはペンと紙があれば手書きですぐ作成可能です。階層はなるべくユーザーが迷子にならないように2階層以内がおすすめです。
ワイヤーフレーム作成
「ワイヤーフレーム」
全ページのレイアウトを考えます。色や装飾などは入れずテキストやライン、ボックスのみで制作します。
(例)
コンテンツの優先順位
ページの中でどんな要素が必要かを書き出します。その要素の中でどれが1番見てもらいたいかかを考え、優先順位をつけます。
(例)
- メイン画像
- ロゴ
- ナビゲーションメニュー
- タイトル
- 紹介文
- 商品写真
視線の動きを考える
ユーザーの視線は上から下、左から右に移動します。優先順位の高いコンテンツほど上部や左側に配置しましょう。
まとめ
サイトマップはペンと紙があれば手書きでできます。修正などが大変になるためツールを使うのもおすすめです。
デザインする
「デザインする」
ワイヤーフレームが完成したら
【デザインカンプ】と呼ばれる、実際のWebページと変わらないデザインをツールを使って作成します。
(例)
まとめ
デザインカンプを作成することで、Webページのイメージがしやすくなります。
ユーザーさんが見やすい画像の配置、配色、書体、余白などにも気をつけて作成します。
コーディング
「ファイルを用意」
必要なのは「HTML」と「CSS」と「画像ファイル」です。
「HTMLでWebサイトのコンテンツを記述」
「.html」ファイルでは、ページ毎にそれぞれファイルが必要になります。
「CSSでWebサイトを装飾」
HTMLだけでは『色、文字装飾、レイアウト』などはできません。なので基本的に装飾に関することは全て「.css」ファイルに記述します。
「画像ファイルを用意する」
使う画像は【images】などのフォルダに保存します。
Webに使える画像は、『JPG、PNG、GIF、SVG、WebP』などです。
(例)
Webに公開
「Web上に公開する」
パソコンの中にファイルがあるだけでは、サイトを閲覧できるのは自分だけになります。
世界に公開するには、Webサーバーにファイルを転送する必要があります。
「サーバーを用意」
Webサーバーは一般的にサーバー会社からレンタルして利用します。会社によって料金やできる事が違うので、自分のサイトにあったサーバーを選択しましょう。
月額500円〜でもサーバーをレンタルできます。
「ドメインを取得」
ドメインとはサイトの場所を表す【住所】のようなものです。ドメインの名前は世界にひとつだけです。
サーバー会社さんによっては申し込んだ時点でドメイン取得の手続きも同時に行える会社もあります。
「Webサーバーにアップロード」
用意したサーバーにファイルをアップロードします。ファイルの数が多い場合にはファイル転送ソフト「FTP」のほうが、アップロードがスムーズになります。
つづく・・・