.COM スタイルシート 調整依頼.

Presentation on theme: ".COM スタイルシート 調整依頼."— Presentation transcript:

1 .COM スタイルシート 調整依頼

2 主な修正事項 A_ページ内での文字バランスを整え、使用性をUP （強弱の関係性／級数／太さ／スペースを調整） B_テキストの読みやすさをUP （テキスト要素のスペースを調整） C_画像とタイトルの連動性をUP （画像まわりの文字の配置を調整）

3 ヘッドラインとボディの文字バランスを調整
A_メイン/マーキー ヘッドラインとボディの文字バランスを調整 ＞ヘッドラインの文字をやや小さくする（ボディとの差を縮める）/　文字をやや太くする ＞ボディの文字をやや大きく　/　太く、　行間を広く ヘッドラインとボディのコントラストを緩和 ＞ヘッドラインの文字をやや小さくする（ボディとの差を縮める）/　文字をやや太くする ＞ボディの文字をやや大きく　/　太く、　行間を広く

4 ヘッドラインとボディの文字バランスを調整
A_メイン/FEATURES・VOICES・CONNECTIONS ヘッドラインとボディの文字バランスを調整 ＞ヘッドラインの文字をやや小さくする（ボディとの差を縮める）/　文字をやや太くする ＞ボディの文字をやや大きく　/　太く、　行間を広く ＞ヘッドラインとボディのスペースを広く

5 A_キャリア構築/どんな人と？どんな成長？
クリックしたくなるが、できないアイコン 見出しと本文の関係性を統一する ＞見出しはやや太く（大きく）。　本文はやや小さく。 ＞本文の行間広める。

6 A_Strategy/ （mobile版) キャッチとボディの文字バランスを調整 ＞PC左→モバイル右で消える？ ＞文字の強弱バランス

7 A_Ducati/CLIENT CASE STUDY
クリックしたくなるが、できないアイコン 見出しと本文の関係性を統一する ＞見出しはやや太く。見出しと本文のスペースは、統一する ＞経緯/概略　間はスペース広くとる。 ＞本文の行間広める。

8 A_Digital・Operations/CAPABILITIES・CCS
クリックしたくなるが、できないアイコン 見出しと項目の関係性を統一する ＞見出しはやや太く（大きく）。　行間広げる。 ＞項目の行級数下げる。「さらに詳しく」は級数ややUP。

9 A_キャリア構築/選ばれる理由 ボディと項目を見やすく調整 ＞ボディの行間を広くする/ 文字をやや太くする
キャッチトボディのコントラストを緩和 ＞キャッチの文字をやや小さくする（ボディとの差を縮める）/　文字をやや太くする ＞ボディの文字をやや大きく　/　太く、　行間を広く ＊キャッチの色をリンクボタンに合わせる？ ボディと項目を見やすく調整 ＞ボディの行間を広くする/　文字をやや太くする ＞ボディの文字をやや大きく　/　太く、　行間を広く ＞項目ごとは、まとめる（行間注意）

10 B_コンテンツ/ニュースリリース 本文をある程度のまとまりでみせる工夫 ＞3～５行くらいのまとまりに分ける（まとまり内での行間は詰める）
本文をある程度のまとまりでみせる工夫、文中の行間を調整 ＞本文の行間をやや詰める、５行くらいのまとまりに分ける ＞「箇条書き」と「本文」の行間を広めにとる ＞「箇条書き」同士の行間は本文の行間に準じる？ 本文をある程度のまとまりでみせる工夫 ＞3～５行くらいのまとまりに分ける（まとまり内での行間は詰める） ＞「箇条書き」と「本文」の行間を広めにとる ＞「箇条書き」同士の行間は本文の行間に準じる？

11 B_Bridgemaker：コンテンツ ３－４行ごとのまとまりを強める ＞まとまり内の行間を狭く、まとまりごとの行間は広く
＞３－４行ごとのまとまりを強める（行間を狭く、まとまりごとの間を広く） ３－４行ごとのまとまりを強める ＞まとまり内の行間を狭く、まとまりごとの行間は広く

12 B_Bridgemaker：コンテンツ ３－４行ごとのまとまりを強める ＞まとまり内の行間を狭く、まとまりごとの行間は広く
＞表題を強める ＞ひとつの出典・注釈欄の級数下げる、行間詰める ３－４行ごとのまとまりを強める ＞まとまり内の行間を狭く、まとまりごとの行間は広く ＞「出典」「注釈」の級数下げる、 　　（行間バランスは本文の箇条書き部分に準じる）

13 B_Ducati/CLIENT CASE STUDY （mobile版)
スペースを同程度に調整する クリックしたくなるが、できないアイコン

14 C_コンテンツ/ひとー概要 アイコンと対応する文字項目をまとめる ＞アイコンと項目間をつめ、対象をわかりやすく調整
クリックしたくなるが、できないアイコン アイコンと対応する文字項目をまとめる ＞アイコンと項目間をつめ、対象をわかりやすく調整

15 C_（mobile版) アイコンと対応する文字項目をまとめる ＞アイコンと項目間をつめ、対象をわかりやすく調整
クリックしたくなるが、できないアイコン アイコンと対応する文字項目をまとめる ＞アイコンと項目間をつめ、対象をわかりやすく調整

16 C_（mobile版) 画像まわりの文字の配置を調整する ＞画像とタイトル・ボディ間をつめ、対象をわかりやすく調整
SLのイメージカラーに統一 　テクノロジー＝グリーン 画像まわりの文字の配置を調整する ＞画像とタイトル・ボディ間をつめ、対象をわかりやすく調整

17 C_Strategy・Diital・Technology（mobile版)
　　　　　 画像まわりの文字の配置を調整 ＞ひとつの案件でまとまって見えるようにする ＞アイコンはボディの下に？

18 .COM スタイルシート 調整参考

19 参考①‐Yahoo!ニュース 　　　　　 参考 ＞文字間、行間

20 参考②‐日経ビジネス http://business.nikkeibp.co.jp/ □キャッチのボリューム感
□句読点のあるとき、文字間を広めにとる □長い記事は、５行前後に束ねる

21 参考③‐東洋経済オンライン

22 参考④‐NEWSWEEK.COM

23 参考⑤－日経HP http://www.nikkei.co.jp/nikkeiinfo/about/ 参考
＞キャッチの色、余白、（リンクボタンと色の統一）

24 参考⑥‐東洋経済HP