peeks-blog

自分用メモ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

④CSSレイアウトについて

・固定レイアウト（px）と可変レイアウト（%、em）

⑤ナビゲーション

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

⑥ヘッダとフッター

グリッド設計をする

以下の点を考慮する。

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

②カラム数

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

④両サイドのマージン

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

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

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