~プロが教えるかんたんテクニック集~"のコラムを担当する、マジカルリミックスの赤間です。全6回のこのコラムでは、ホームページの完成後に、よりクオリティをアップさせるための手法や考え方をお伝えしていきます。Jimdoの役目は「かんたんにページを作成する」ことです。よい内容やデザインにするためには、少し突っ込んだ知識が必要となってきます。プロがよく使うテクニックを少し採用するだけでも、よりよいホームページになります。そんなテクニックをご紹介していきます。メインビジュアルとは?ホームページにおけるメインビジュアルとは、画面の上部(特にトップページ)に配置する、大きな画像領域のことを指します。キービジュアルと呼ぶこともあります。「目を引かせるためのインパクト」の役割があり、さらにキャッチコピーなどを加えることにより「ここは何のホームページなのか」を視覚的に伝える効果があります。前回ご紹介した青銅比などを取り入れて、よい比率を見つけられたら、次は内容のクオリティをアップさせてみましょう。ここでは、メインビジュアルに画像やキャッチコピーなどの文字を配置する際の、デザインパターンをいくつかご紹介していきます。メインとなる被写体は左右へ写真に人物や物など、キーとなる被写体がある場合は、左右に寄せて使用しましょう。キャッチコピーや説明を掲載するケースが多いものですが、それらを組み合わせるスペースを確保するためでもあります。新たに写真撮影をする場合は、これらを意識して、被写体を中央ではなく左右に寄せて撮影するのもポイントです。文字を掲載する場合、写真の色や種類によっては、文字をただ打っただけでは非常に見づらくなる場合があります。そのようなときは、文字を掲載するエリアをべた塗りし、思いきって分割してみましょう。半透明にすることにより、背景の写真が透けて見えるので全体のなじみがよくなります。この手法は縦分割だけではなく、横分割にも応用が可能です。書体は、全体の雰囲気を決定づけるとても大事な要素です。テーマにマッチした書体を選ぶことにより、統一感がとれ、違和感もなくなります。スタンダードな書体は「ゴシック」「明朝」と2つに大分されますが、これ以外のものを選ぶ場合、組み合わせる写真やホームページ全体に違和感がないか、吟味して選ぶようにしましょう。例:ウィスキーバーでのメインビジュアルとキャッチコピーの組み合わせ以下の例では「手書き風の丸文字」をチョイスしました。洋酒という大人の雰囲気と、全体が黒く引き締まった画像に組み合わせた場合、いささか違和感が感じられます。この書体の持つ「女性」「丸い」「手書き」といった印象が写真とマッチしていないためです。以下の例では「勘亭流」をチョイスしました。太く力強い書体ですが、勘亭流は本来「歌舞伎の外題や看板」などに用いられる書体です。和の雰囲気が強く、洋酒と組み合わせると、それぞれのキーワードにマッチしないため、こちらも違和感が感じられます。以下の例では「明朝体」をチョイスしました。上記で説明した書体は、その書体が持つイメージとのマッチングに左右されましたが、広く一般的な明朝体は、あらゆるジャンルに組み合わせやすい書体です。奇をてらって意外性を求めるよりも、見慣れた書体をチョイスするのがよいケースも多いものです。これはゴシック体にも同じことがいえます。文字の周りに縁取りをつける手法です。色数の多い写真やごちゃっとした雰囲気の写真に文字を乗せたいときに有効です。文字の周りにつけるフチの厚みで、シャープな印象やポップな印象になります。背景を敷く以外の方法として利用される手法の1つです。座布団を敷くデザインの業界では、文字を見やすく強調するために、四角や丸などの色枠の上に、文字が乗るようにデザインすることを「座布団」と呼ぶ事があります。テレビ番組のテロップも、映像に埋もれてしまわないように背景の色分けをしていることがほとんどです。このテクニックを応用すると、効果的に画像の上の文字を読ませることができます。文字に対して、内側の余白に余裕を持たせた四角い背景を敷くことにより、視認性が高まります。四角の片側をグラデーションで消えるようにアレンジをすれば、デザイン的な処理として印象を与えることができます。背景がカラフルな写真であっても、スッキリと収まりのよい状態で文字を配置することができます。~プロが教えるかんたんテクニック集~」を終了します。ホームページがひととおり完成したら、次はぜひクオリティアップを目指して手を入れてみてください。今回のコラムが、ホームページデザイン向上の一助になれば幸いです。最後までお読みいただき、ありがとうございました。代表取締役CEO/JimdoExperthttp://www.magical-remix.co.jp/http://www.kotalog.net/宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。(監修)「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。Jimdoデザインブック』(2014年10月発売)の改訂版となり、2016年11月に改変されたJimdoの新・管理メニューに全面対応した内容です。基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。プロのセオリーを取り入れて、バランスのとれたレイアウトを実現する第4回:外部サービスを利用して、カレンダーや翻訳機能などJimdoに存在しない機能を付け足す第3回:Webデザイン・レイアウトの基本をおさらい第2回:文章を見直してみよう。気配りからはじまる、よりよい構成(2)第1回:文章を見直してみよう。ための経理サポートサイト文具、通信、オフィスのことなら何でもお任せ問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール事務所開設するなら固定電話番号で信頼アップ本コンテンツは、掲載時点の内容となります。「みんなのビジネスオンライン」は「はじめてWEB」にお読み替えいただきますようお願いいたします。Reserved.「はじめてWEB」はKDDIが提供しています。