© 2012 XING Inc. All Rights Reserved. 1 JOYSOUND.com デザインガイドライン 2012.12 MSG.

Presentation on theme: "© 2012 XING Inc. All Rights Reserved. 1 JOYSOUND.com デザインガイドライン 2012.12 MSG."— Presentation transcript:

1 © 2012 XING Inc. All Rights Reserved. 1 JOYSOUND.com デザインガイドライン 2012.12 MSG

2 © 2012 XING Inc. All Rights Reserved. 2 はじめに キャンペーンなど、webページ制作物の評価をする場合「どのよ うなものであればクオリティが高いのか？」「どのレベルまでがOK か？」などの主な判断基準を、このガイドラインにまとめました。 しかし、どのようなデザインやレイアウトが良いか考えるときに は、「そのページを作成した目的」を知ることが何よりも重要で す。 評価をする際には、ターゲットや目的をまず明確にし、それに見 合ったレイアウトがされているかを念頭においた上で、このガイド ラインの内容と照らしあわせて判断して下さい。 ターゲットや目的によっては、ガイドラインの内容が当てはまら ない場合もあることをご了承ください。

3 © 2012 XING Inc. All Rights Reserved. 3 目次 レイアウト –余白を設定する –要素を揃える –要素の大きさを調整する –ユーザーの視線を意識する グラフィック –テーマや題材に合わせる –トレンドを意識する –読みやすさを優先する –アイコン等でわかりやすく 配色 –イメージに合った色を使う （黒） 配色 –イメージに合った色を使う （白） –イメージに合った色を使う （カラフル） –トーンをあわせる –配色の注意点 画面サイズ –ファーストビュー範囲 –想定画面サイズ テキスト –文章はテキストで表現する –フォントサイズ –行間などの調整をする –本文に使用するフォント

4 © 2012 XING Inc. All Rights Reserved. 4 レイアウト 余白を設定する –全体に20px〜40px以上の余白をとる –背景や写真はギリギリまで使っていてもよい –余白のラインより、ページ内のフレームやテキストなどが外に はみ出さない ○：背景やイラスト以外は すべて余白の内側 ×：余白がなく窮屈

5 © 2012 XING Inc. All Rights Reserved. 5 レイアウト 要素を揃える –左、右、中心と、定めた方向にキチンと揃える –ロゴやタイトル以外の、テキストでの中心揃え多用は避ける –但し、あえてバラバラに配置したり、意図的にずらすことでリ ズムや段落を表現する場合もある ○：テキストは左寄せ、 ワンポイントで右寄せ ×：テキストが全部中心寄せ 左右寄せが無意味に混在

6 © 2012 XING Inc. All Rights Reserved. 6 レイアウト 要素の大きさを調整する –一番伝えたいことを一番大きく –不必要に画像や文字などが大きすぎたり、小さすぎたりしない ○：メリットを大きく表示 登録を促すボタンも強調 ×：テキストの内容と 表示サイズが合ってない 登録の遷移が小さい

7 © 2012 XING Inc. All Rights Reserved. 7 レイアウト ユーザーの視線を意識する –ユーザーの視線は「F」の字を描くように移動するので、読ませたい重 要な情報は上部左側に置く –左上に目立つワンポイントを持ってきておいて、右側へ視線を誘導す る

8 © 2012 XING Inc. All Rights Reserved. 8 グラフィック テーマや題材に合わせる –歌手やタイアップ先のイメージ にあわせる。 –社内企画であれば「何を伝えた いのか」に見合ったイメージを 作る。 例） –額縁、リボンなどのコラージュを共通のイ メージとして使用。 –全体の色調も公式サイトに合わせている。

9 © 2012 XING Inc. All Rights Reserved. 9 グラフィック トレンドを意識する –例 （2012年現在） 素材感のある背景、ステッチによる縁取りやリボン パララックス効果 大きな写真背景、全画面での映像 大きなイラストやインフォグラフィック タイポグラフィ 過剰な装飾をしていない シンプル レスポンシブ –フレームワークを使用することが多い –スマホ、タブレット、PCなどで共通のページをそれぞれの幅にあわせて表示で きる。

10 © 2012 XING Inc. All Rights Reserved. 10 グラフィック 読みやすさを優先する –装飾を入れたテキスト画像の視認性及び可読性に注意する。 ○：テキストが読みやすい ×：画像効果や装飾が邪魔で 文字が読みにくい。 視認性 ：パっと見た時に目に入りやすいかどうか 可読性 ：文章として読むのに適しているかどうか

11 © 2012 XING Inc. All Rights Reserved. 11 グラフィック アイコン、ピクトグラムなどを使って、情報を わかりやすく表現する –サイト全体で共通のもの、一般的に認知された形状を使うことで、文字や複雑な図形 を示すよりもユーザーにわかりやすく表現することができます。 例）

12 © 2012 XING Inc. All Rights Reserved. 12 配色 イメージに合った色を使う 【黒】 –大人っぽい –高級感 –男性的 スタイリッシュ 例） –Galaxy Tab ビジネスマン、ガジェット好き どちらかというと男性向け –スターフライヤー 高級感 http://www.samsung.com/jp/galaxytab10-1/ http://www.starflyer.jp/index.html

13 © 2012 XING Inc. All Rights Reserved. 13 配色 イメージに合った色を使う 【白】 –シンプル –企業、まじめ –女性的 スタイリッシュ 例） –tsucuru リサイクル小物の通販 –Nikon 企業サイト まじめ、シンプル ハデな演出は特設ページで https://tsucuru.com/ http://www.nikon.co.jp/

14 © 2012 XING Inc. All Rights Reserved. 14 配色 イメージに合った色を使う 【カラフル】 –にぎやか、元気 –ポップ 例） –チュパチャップス にぎやかでポップなイメージ –オトナコドモラボ 子供、元気 パステルトーンで優しい印象 http://www.chupachups.jp/ http://gao.codomolab.com/

15 © 2012 XING Inc. All Rights Reserved. 15 配色 トーンをあわせる –たくさん色を使う場合、図のよう な同じトーンでまとめると、統一 感があり見やすい画面になる。 例) 全体はライトグレイッシュやペールで落ち着いた印象 にしておき、見出しなどの強調する部分はビビッド カラーで目立つようにする。 http://www.sikiken.co.jp/pccs/pccs04.html http://www.hellomag.jp/

16 © 2012 XING Inc. All Rights Reserved. 16 配色 配色の注意点 –色を使い過ぎない カラフルにする場合は同じトーンで合わせる –基本は、メインカラーと、その周辺色 –アクセントやリンクなどに、ビビッドな強い色を使う –テキストリンクは青、強調は赤など、サイト内全体のルールに 出来る限り合わせる –コントラストに注意し、読みやすい配色にする 白黒にしてみた時にもちゃんと読めるかどうか？が目安になります –配色の補助ツール（webサービス）を活用する https://kuler.adobe.com/ などhttps://kuler.adobe.com/

17 © 2012 XING Inc. All Rights Reserved. 17 画面サイズ ファーストビュー範囲 –高さ 650px ページ上部から650px程度の中に重要 な情報が入るように配置する。 想定画面サイズ –1024×768px –1280×800px www.apple.com 例）Apple 650px内にナビゲーションとメイ ンビジュアルがおさまっている。

18 © 2012 XING Inc. All Rights Reserved. 18 テキスト 文章はテキストで表現する –ロゴや大見出しを目立たせたい場合以外、読むための文章はできる限 りテキストで表示させる –画像にする場合はcssやaltなどで必ず内容がわかるようにしておくこと 。画像とaltの内容は一致させておく –装飾にはcssを使う –改行位置はブラウザ・閲覧環境・デバイスによってまちまちなので、 単独環境での最適化をしない（句読点や文節を無視して などで改 行位置を整えることはしない） –文字サイズを固定にせず、文字を拡大・縮小した場合にも、最低限「 読める」ようにする（レイアウトが多少ズレる程度は許容）

19 © 2012 XING Inc. All Rights Reserved. 19 テキスト フォントサイズ –最小：11px 程度 –最大：48px 程度 ロゴやタイポグラフィの場合はもっと大きくても良い テキストの大きさに適切な変化をつけて、見出しと本文を分けた り、情報の優先度を表現する 但し、あまりページ内でフォントサイズに落差があると読みづらい ので注意する

20 © 2012 XING Inc. All Rights Reserved. 20 テキスト 行間などの調整をする –そのままでは読みにくい場合があるため、フォントや行間など を調整する。 –文字間隔を少しあけたほうが読みやすくなる。 CSS設定例 font-size: 14pt; /* フォントの大きさ */ font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /* フォントの種類 */ line-height: 1.5em; /* 行間 */ letter-spacing: 0.2em; /* 文字間隔 */

21 © 2012 XING Inc. All Rights Reserved. 21 テキスト 本文に使用するフォント –例） –平体、長体（横や縦にのばす）はNG –但し、タイトルロゴ等の場合は、自作したり、極端な形状のデザイン フォントを使用してもよい

22 © 2012 XING Inc. All Rights Reserved. 22 参考資料 –デザインの組み方 見てわかるレイアウトの新ルール 甲谷一 –Webデザイン・フォーラム 10人のプロが教える原則と経験則 SE編集部 編 –日本色研事業株式会社 （トーンについて） http://www.sikiken.co.jp/pccs/pccs04.html –Photoshop VIP（トレンドについて） http://photoshopvip.net/archives/34465