エキスパートコラム
みんビズ制作講座:デザインカスタマイズ(全10回)
第4回:方向性にあわせた文字とスタイルの設定
執筆:志鎌 真奈美(Shikama.net)
2012年12月26日更新
閲覧数8,569views
「デザインカスタマイズ」の第4回目は「方向性にあわせた文字とスタイルの設定」です。
普段なにげなく目にしてる文字ですが、使い方にちょっとしたコツがあります。
フォントの種類を知ろう
和文フォントにはたくさんの種類がありますが、代表的なものをピックアップしました。
この中で特に使用されるのが「ゴシック体」と「明朝体」です。
この2種類の使い分けを覚えておきましょう。
ゴシック体の特徴
明朝体と比べると「ハネ」や「トメ」がなく、文字の太さが均等になっています。
インターネットユーザーにとって、「MSゴシック」「メイリオ」「ヒラギノゴシック」などで馴染みが深く、Web上では標準的なフォントとして扱われることが多いのが特徴です。
太いゴシック体は男性らしさや力強さ、丸くて細いゴシック体は、女性らしい柔らかさを出すときに使用します。
明朝体の特徴
「ハネ」や「トメ」があり、文字の縦横の太さが異なっています。雑誌や新聞をはじめ、印刷物の本文書体に多く使われていますが、Web上の本文フォントとしては、あまり使用されません。「MS明朝」「ヒラギノ明朝」などで知られるこのフォントは、上品で繊細なイメージ、あるいは高級感を表現したいときに使用します。
同じ写真、キャッチコピーでも雰囲気が変わります
ゴシック体
明朝体
手書き風
勘亭流
みんビズでフォントの設定(大きさや種類)を変更してみよう
全体的に文字が小さいのと、見出しフォントが明朝系になっているのをゴシック系に替えて、全体に雰囲気に合わせてみます。
1. 右サイドのメニューから「スタイル」をクリック
2. 「見出し1」の「フォント」「フォントサイズ」「スタイル」「カラー」を変更します。
![]() |
ゴシック |
---|---|
![]() |
25px |
![]() |
B(太字) |
![]() |
996600 (カラーピッカーの円をつかって変更することもできます) |
※「見出し2」「見出し3」も同じ方法で変更します。
3. 次に「文章」をクリックし、本文のフォントと文字の大きさを変更します。
![]() |
ゴシック |
---|---|
![]() |
14px |
![]() |
150% |
変更が終わったら「保存」をクリックします。
4. 「フォントの変更を適用しますか?」と表示されますので「はい」をクリックします。
【設定情報一覧】※使用テンプレート:スペシャルレイアウト「S4096」
フォント | フォントサイズ | スタイル | カラー | |
見出し1 | ゴシック | 25px | B(太字) | 996600 |
---|---|---|---|---|
見出し2 | ゴシック | 18px | B(太字) | 996600 |
見出し3 | ゴシック | 16px | B(太字) | 996600 |
文章 | ゴシック | 14px | 行間150%(*1) | 333333 |
*1)「文章」には「スタイル」の項目がなく、かわりに「行間」の設定ができます。
5. ショップのカジュアルな雰囲気に合わせた見出しカラーにし、本文との区別を明確にしました。
本文の文字サイズも大きくしたので、可読性も上がっています。
次回、第5回目「余白と水平線」では、余白と水平線を上手に使って、ページを見やすくする方法を解説します。
これならわかる! Googleアナリティクス 今日からはじめるアクセス解析超入門
本当は簡単に使えるGoogleアナリティクス!
Webサイトを作ったけど、思うように集客できないという悩みを解決するために、訪問者の特性や行動を分析できるGoogleアナリティクスを、初めて使う人にもわかやすくやさしく解説します。初期設定や基本操作から始まり、データの見方や分析、また改善方法まで、これ1冊でわかります。