Webの画面設計について

この記事は4分で読めます

自分用メモ

「Webサービス 画面設計」で検索する

※参考:ウェブカツWebサービス部
※参考:ウェブカツ稼ぐためのWebデザイン入門

★画面設計フェーズのタスク★



コンテンツを表示する各エリアや、
メニュー・ボタンなどのUIパーツの寸法を規定し、
各情報ブロックを画面上に配置するレイアウト設計を行う。

画面レイアウトは「ワイヤーフレーム」を作成して表現するが、
手書き程度の簡単なもので済ます人もいる。

①レイアウト方針を決定する
②グリッド設計をする
③タイポグラフィ設計をする
④ワイヤーフレームを作成する

※画像:Webプロデューサーとは?制作フローも解説
※参考:UXとカスタマージャーニーの違いやユーザーエクスペリエンスの解説

レイアウト方針を決定する


Webページの構成要素は、コンテンツやナビゲーションの他にも
サイトロゴ、メインビジュアル、広告、
ユーティリティ(検索、トップへ戻るボタン等)と数多くある。
これらを適切にレイアウトするには、以下の6点を踏まえながら
方針を明確にする必要がある。

①PCサイトかモバイルサイトか

この2つのサイトは利用シーンが全く異なるので、
最適なレイアウトも異なる。
事前に、どちらか1つのみの制作なのか、両方作るのかを考慮する必要がある。
両方作る場合は、ソースコードを分けた専用サイトを制作するのか、
1ソースのレスポンシブWebデザインにするかを決める。

②レスポンシブWebデザインを採用するか

メリット・デメリットがあるので、予め考慮しておく必要がある。

★メリット
・同じHTMLコードで制作されてるので、1ファイルの修正で住む。
・同一URLなので、ユーザーがシェアするのが容易。
・クローラーが効率よくページをクローリングしてくれるので、SEO上も有利。

★デメリット
・PCサイト、モバイルサイト共に最適化されず
 中途半端なデザインとなるケースもある。
・HTML/CSSとも構造が複雑になるので、開発コストがかかる。

③レイアウトの基本形のどれを採用するか

・左袖ナビゲーション型
・上部ナビゲーション型
・逆L字ナビゲーション型
・ビジュアル型
・ブログ型
・カード型(タイル型)

④CSSレイアウトについて

・固定レイアウト(px)と可変レイアウト(%、em)

⑤ナビゲーション

・グローバルナビゲーション
・ローカルナビゲーション
・ページングナビゲーション
・ページトップへ戻るボタン
・フッターナビゲーション

⑥ヘッダとフッター


グリッド設計をする


以下の点を考慮する。

①全体幅
・960px幅が最も有名だが、少し狭い印象も。

②カラム数

③カラム幅、ガーター
・ガーターとは、カラムとカラムの隙間のこと。20〜40pxが多い。
→10進数と16進数のどちらを基準にするかも考える。

④両サイドのマージン

タイポグラフィ設計をする


定義:文字周りのスタイルを設定すること

p要素、h1〜h6の見出し要素、リスト要素が対象となる。

font-sizeとline-heigthを決定し、

ワイヤーフレームを作成する


・レイアウトパターンの数
・トップページのレイアウト
・サブページのレイアウト
・段組み構成
・要素幅
・ヘッダ
・グローバルナビゲーション
・サイドバー
・フッター

※画像:ポートフォリオのジャンルや制作過程、注意点や必要な機能

ワイヤーフレームの作成手順

①配置する要素をリストアップする
②大枠のエリアを設ける
③エリア内に要素を配置する
④寸法を入れて調整する

★デザインラフフェーズのタスク★



このフェーズでは、詳細なビジュアルデザインを行う。
掲載する写真の撮影、選定、加工、イラストの作成、
アイコンやボタン等のUIパーツの作成、ページの装飾、
その他ビジュアルに関する具体的なデザインを全て行う。

PhotoshopやIllustratorなどの画像編集ソフトで画像の作成も行う。

①カラー設計をする

配色を考え、仕様する色のカラーコード表を作成する。
微調整はページ全体が出来上がってからでも行えるが、
デザインカンプ作成やコーディングに必要なカラーコードはここで用意する。

★どのような色を決める必要があるか。
・キーカラー:#FFD700
→配色する際に、鍵を握る最も重要な色のこと。
→必然的にサイトの印象を決める事にもなる。
→ロゴの色をキーカラーにしたり、サイトで表現したいイメージに合う色を選ぶ。

・ベースカラー:white
→使用する割合が最も多い、ベースになる色のこと。
(ただし、背景色となる白(ここでは#F7F7F7)は除く)
→キーカラーをベースカラーにする場合もあるが、絶対ではない。

・サブカラー:#F7F7F7
→ベースカラーを補う色。ベースカラーよりは使用する割合は少ない。
→1色とは限らず複数使う場合もあるが、多くても4色に留めるのが無難。

・アクセントカラー:green、#8C2A2A
→目立つ部分にほんの少量だけ使う色のこと。
→ベースカラーとは対象的な、トーンを変えた色がよく用いられる。

・本文のフォントと背景:black
→背景が白の場合、フォントカラーは黒が多い。
→カラーコードでは若干薄い「#333」がよく使われている。
→背景を白以外にするなら、フォントカラーもそれに合わせて調整する。

②UIパーツや写真を収集、作成する
③デザインカンプを作成する


参考:作ってるサイトの色

・全体の背景色:#F7F7F7
・本文の色:black
・一番上:#E9E6DC
・タイトル:white
・ユーザー登録:green
・グローバルナビ:#FFD700
・検索ボタンの囲み:#E9E6DC
・検索ボタンの装飾:#8C2A2A
・フッターナビ:#FFD700
・コピーライト:#E9E6DC
・お問い合わせフォームのバリデーションチェック:red
・お問い合わせフォームの送信ボタン:green

★実装設計フェーズのタスク★



①各ページの記述情報を決定する
②動的要素、サイト機能の仕様を作成する
③HTMLの構造設計をする
④CSS設計をする
⑤プログラム設計をする

★コーディングフェーズのタスク★



①開発環境を構築する
②必要なコードを用意する:js、Googleマップ、SNSシェアボタン、GA、広告など
③HTML、CSS









  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。