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

  1. TOP
  2. Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~ : 第6回 メインビジュアル画像に文字を配置する際のテクニック5連発

エキスパートコラム

Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~(全6回)

第6回:メインビジュアル画像に文字を配置する際のテクニック5連発

執筆:赤間 公太郎(株式会社マジカルリミックス)

2015年3月23日更新

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

閲覧数8,669views

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

"Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~"のコラムを担当する、マジカルリミックスの赤間です。全6回のこのコラムでは、ホームページの完成後に、よりクオリティをアップさせるための手法や考え方をお伝えしていきます。

Jimdoの役目は「かんたんにページを作成する」ことです。さらによりよい内容やデザインにするためには、少し突っ込んだ知識が必要となってきます。プロがよく使うテクニックを少し採用するだけでも、よりよいホームページになります。そんなテクニックをご紹介していきます。

メインビジュアルとは?

ホームページにおけるメインビジュアルとは、画面の上部(特にトップページ)に配置する、大きな画像領域のことを指します。キービジュアルと呼ぶこともあります。

「目を引かせるためのインパクト」の役割があり、さらにキャッチコピーなどを加えることにより「ここは何のホームページなのか」を視覚的に伝える効果があります。

前回ご紹介した青銅比などを取り入れて、よい比率を見つけられたら、次は内容のクオリティをアップさせてみましょう。ここでは、メインビジュアルに画像やキャッチコピーなどの文字を配置する際の、デザインパターンをいくつかご紹介していきます。

  1. メインとなる被写体は左右へ
  2. 写真と文字エリアを分割
  3. 適切な書体
  4. 袋文字
  5. 座布団を敷く

1. メインとなる被写体は左右へ

写真に人物や物など、キーとなる被写体がある場合は、左右に寄せて使用しましょう。よく、キャッチコピーや説明を掲載するケースが多いものですが、それらを組み合わせるスペースを確保するためでもあります。

新たに写真撮影をする場合は、これらを意識して、被写体を中央ではなく左右に寄せて撮影するのもポイントです。

2. 写真と文字エリアを分割

文字を掲載する場合、写真の色や種類によっては、文字をただ打っただけでは非常に見づらくなる場合があります。そのようなときは、文字を掲載するエリアをべた塗りし、思いきって分割してみましょう。
少し半透明にすることにより、背景の写真が透けて見えるので全体のなじみがよくなります。

この手法は縦分割だけではなく、横分割にも応用が可能です。

3. 適切な書体

書体は、全体の雰囲気を決定づけるとても大事な要素です。テーマにマッチした書体を選ぶことにより、統一感がとれ、違和感もなくなります。スタンダードな書体は「ゴシック」「明朝」と2つに大分されますが、これ以外のものを選ぶ場合、組み合わせる写真やホームページ全体に違和感がないか、吟味して選ぶようにしましょう。

例:ウィスキーバーでのメインビジュアルとキャッチコピーの組み合わせ

以下の例では「手書き風の丸文字」をチョイスしました。洋酒という大人の雰囲気と、全体が黒く引き締まった画像に組み合わせた場合、いささか違和感が感じられます。
この書体の持つ「女性」「丸い」「手書き」といった印象が写真とマッチしていないためです。

以下の例では「勘亭流」をチョイスしました。太く力強い書体ですが、勘亭流は本来「歌舞伎の外題や看板」などに用いられる書体です。和の雰囲気が強く、洋酒と組み合わせると、それぞれのキーワードにマッチしないため、こちらも違和感が感じられます。

以下の例では「明朝体」をチョイスしました。上記で説明した書体は、その書体が持つイメージとのマッチングに左右されましたが、広く一般的な明朝体は、あらゆるジャンルに組み合わせやすい書体です。
奇をてらって意外性を求めるよりも、見慣れた書体をチョイスするのがよいケースも多いものです。これはゴシック体にも同じことがいえます。

4. 袋文字

文字の周りに縁取りをつける手法です。色数の多い写真やごちゃっとした雰囲気の写真に文字を乗せたいときに有効です。文字の周りにつけるフチの厚みで、シャープな印象やポップな印象になります。背景を敷く以外の方法として利用される手法の1つです。

5. 座布団を敷く

デザインの業界では、文字を見やすく強調するために、四角や丸などの色枠の上に、文字が乗るようにデザインすることを「座布団」と呼ぶ事があります。テレビ番組のテロップも、映像に埋もれてしまわないように背景の色分けをしていることがほとんどです。
このテクニックを応用すると、効果的に画像の上の文字を読ませることができます。

文字に対して、内側の余白に余裕を持たせた四角い背景を敷くことにより、視認性が高まります。

四角の片側をグラデーションで消えるようにアレンジをすれば、デザイン的な処理として印象を与えることができます。

背景がカラフルな写真であっても、スッキリと収まりのよい状態で文字を配置することができます。

まとめ

  • メインビジュアルは「目を引かせるためのインパクト」であり、「ここは何のホームページなのか」を伝えることもできる
  • 画像に文字を乗せる場合、視認性に気をつかう
  • 書体は組み合わせるもののテーマに沿って、適切なものを選択する

さいごに

以上で全6回のコラム「Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~」を終了します。

ホームページがひととおり完成したら、次はぜひクオリティアップを目指して手を入れてみてください。
今回のコラムが、ホームページデザイン向上の一助になれば幸いです。
最後までお読みいただき、ありがとうございました。

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

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。

主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。

[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員

10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版

  • 1年間無料

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

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!