スマートフォンサイトを表示する

  1. TOP
  2. みんビズ制作講座 デザインカスタマイズ : 第4回 方向性にあわせた文字とスタイルの設定

エキスパートコラム

みんビズ制作講座:デザインカスタマイズ(全10回)

第4回:方向性にあわせた文字とスタイルの設定

執筆:志鎌 真奈美(Shikama.net)

2012年12月26日更新

  • このエントリーをはてなブックマークに追加

閲覧数5,759views

このコラムをPDF形式でダウンロードする

「デザインカスタマイズ」の第4回目は「方向性にあわせた文字とスタイルの設定」です。
普段なにげなく目にしてる文字ですが、使い方にちょっとしたコツがあります。

フォントの種類を知ろう

和文フォントにはたくさんの種類がありますが、代表的なものをピックアップしました。

この中で特に使用されるのが「ゴシック体」と「明朝体」です。
この2種類の使い分けを覚えておきましょう。

ゴシック体の特徴

明朝体と比べると「ハネ」や「トメ」がなく、文字の太さが均等になっています。
インターネットユーザーにとって、「MSゴシック」「メイリオ」「ヒラギノゴシック」などで馴染みが深く、Web上では標準的なフォントとして扱われることが多いのが特徴です。
太いゴシック体は男性らしさや力強さ、丸くて細いゴシック体は、女性らしい柔らかさを出すときに使用します。

明朝体の特徴

「ハネ」や「トメ」があり、文字の縦横の太さが異なっています。雑誌や新聞をはじめ、印刷物の本文書体に多く使われていますが、Web上の本文フォントとしては、あまり使用されません。「MS明朝」「ヒラギノ明朝」などで知られるこのフォントは、上品で繊細なイメージ、あるいは高級感を表現したいときに使用します。

同じ写真、キャッチコピーでも雰囲気が変わります

ゴシック体

明朝体

手書き風

勘亭流

みんビズでフォントの設定(大きさや種類)を変更してみよう

全体的に文字が小さいのと、見出しフォントが明朝系になっているのをゴシック系に替えて、全体に雰囲気に合わせてみます。

1. 右サイドのメニューから「スタイル」をクリック

2. 「見出し1」の「フォント」「フォントサイズ」「スタイル」「カラー」を変更します。

1フォント ゴシック
2フォントサイズ 25px
3スタイル B(太字)
4カラー 996600
(カラーピッカーの円をつかって変更することもできます)

※「見出し2」「見出し3」も同じ方法で変更します。

3. 次に「文章」をクリックし、本文のフォントと文字の大きさを変更します。

1フォント ゴシック
2フォントサイズ 14px
3行間幅 150%

変更が終わったら「保存」をクリックします。

4. 「フォントの変更を適用しますか?」と表示されますので「はい」をクリックします。

【設定情報一覧】※使用テンプレート:スペシャルレイアウト「S4096」

  フォント フォントサイズ スタイル カラー
見出し1 ゴシック 25px B(太字) 996600
見出し2 ゴシック 18px B(太字) 996600
見出し3 ゴシック 16px B(太字) 996600
文章 ゴシック 14px 行間150%(*1) 333333

*1)「文章」には「スタイル」の項目がなく、かわりに「行間」の設定ができます。

5. ショップのカジュアルな雰囲気に合わせた見出しカラーにし、本文との区別を明確にしました。
本文の文字サイズも大きくしたので、可読性も上がっています。

次回、第5回目「余白と水平線」では、余白と水平線を上手に使って、ページを見やすくする方法を解説します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

志鎌 真奈美(しかま・まなみ)

志鎌 真奈美(しかま・まなみ)

Shikama.net 代表/JimdoExpert
http://www.shikama.net/
http://www.web-supporter.jp/

北海道函館市生まれ。北海道教育大学函館校卒業。千葉県市川市在住。
1997年よりWeb制作を始める。ソフトウェア会社のWeb制作部門に5年間勤めた後、2002年4月に独立。Web制作・企画・制作、システム構築などに従事。
講師として、Webマーケティングやデザインのセミナー活動も行っている。

著書に『WebデザイナーのためのJimdoスタイルブック』(共著、マイナビ)、『Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!』(技術評論社)。

Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/10/8~2017/10/14]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ