自分用メモ
「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
この記事へのコメントはありません。