2017.06.01 Thu

下層ページデザインを作る上でチーム内で共有すべき6つのこと

mv

こんにちは、鶴川です。
皆さんの制作現場では1サイトのデザインを作るにあたり何人のデザイナーがチームに加わりますか?
デザイナーも個性があるので、何も情報がないままだと
1つのサイトなのに目的や方向性の違う統一感のないサイトになりかねません。

今回は、トップページ、下層ページを分担して作る上で
共有するべき6つの情報についてまとめたいと思います。

1.サイトの背景情報


まずはそのトップページデザインにたどり着くまでの「背景情報」が必要です。
主要情報として「目的」、補足情報として「ターゲット」「利用シーン」などがあります。

・サイトのゴールは何なのか?
→認知度向上?
→イメージ向上?
→資料請求や商品の購入?

サイトの全体像も把握しておくと、
ユーザーが迷子にならないようなページ動線も考えることが出来るので尚良いですね。

2. テキストルール


そのサイトで使用するフォント、また見出し・本文のサイズを決めておきましょう。
文字間・行間なども統一しておくとより美しくまとまります。

また文言について予め社内ルールがあると印象も変わってくるでしょう。

・例えば・・・
→「お問い合わせ」「お問合せ」など送り仮名はどうするか
→見出しやリストの文末に「。」はつけるか、つけないか

 

3.色


そのページ独自のカラーが発生しないよう、ある程度カラーコードを決めておきましょう。

・テキスト色だと・・
→基本のテキストカラー
→テキストリンクカラー
→強調するテキストカラー
→注釈のテキストカラー

 

4.画像アイコン


写真や画像、アイコンはトーンを統一することが大事です。
写真だったら色調などの補正、
アイコンだったら塗りのアイコンなのかアウトラインのアイコン(その場合は線の太さも)揃える必要があります。

5.余白


余白もサイトの雰囲気を大きく左右する要素のひとつです。
ある程度の統一ルールを設けましょう。

・例えば・・・
→コンテンツとコンテンツの余白
→コンテンツ内の余白
→見出しの下の余白
→ボックスの余白

 

6.装飾


角丸の大きさや、四角形、円形などの枠組み、また見出しのあしらいなど
統一させたい装飾がある場合は事前に共有しておきましょう。

■まとめ


これらの情報をすべて「口頭」もしくは「データ」のいずれかにまとめようとすると
失念・手間になってしまうので、
私の場合は「1.背景情報」「4.画像アイコン」「6.装飾」は口頭で、
「2.テキストルール」「3.色」「5.余白」は簡単にデータを作成しPSDに配置しています。

guide

チーム作業を円滑に進めるため、これらも随時アップデートしていきたいと思います。

WRITERこの記事を書いた人

鶴川

鶴川

ジーニアスウェブ大阪でWEBデザイナーとして働いてます。

ジーニアスウェブ大阪でWEBデザイナーとして働いてます。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW