ヘッダーでグッと印象アップ
実際のお店で言えば、広告や口コミで集約するのは上手で、置いてある商品もすばらしいのですが、いざお店に行ったユーザーは「店の看板を見てガッカリで店内に入ってくれない」「商品の並べ方がヘタで良さが伝わらない」「雑な印象を与えてしまい信用できない」という具合で売上にはつながらない状態です。 そこで店の看板をリニューアルして、店内を好感を持たせる雰囲気に変え、接客態度も改善していきます。まずはお店の看板であるヘッダーを変えてみます。
あくまで例ですが、ヘッダーのデザインには色、大きさ、文字だけ見ても、それぞれに目的があります。
「ピロリ菌がテーマなら診断書によく使われる水色を基調にしようか、画像は切り取って救急の十字をその下に配置しようか、まじめな雰囲気を出すために文字は明朝体にしようか・・・」
パーツごとに考えて、バランスよく組み合わせるセンスが必要になります。
丁寧な配色で基盤を固める
色の組み合わせは色彩学やカラーコーディネートの専門書、もしくはWebでも知識が学べます。 配色から連想させるイメージにはお決まりの3色がパターン化されています。配色に迷った場合、下記に具体例を挙げてますので参考になれば幸いです。| テーマ | 配色1 | 配色2 | 配色3 | アクセント |
|---|---|---|---|---|
| 信頼 | ■#222950 | ■#1F5C97 | ■#82A3C4 | ■#8C0F05 |
| 清潔 | ■#194F9E | ■#1B96C2 | ■#F8D373 | □#FFFFFF |
| 安全 | ■#185D90 | ■#4CB3D0 | ■#ABCD44 | □#FFFFFF |
| 協調 | ■#4A7A2A | ■#80B62F | ■#F4EA71 | ■#EE8C4E |
| 高貴 | ■#98CA98 | ■#EDECBA | ■#DADDA6 | ■#A5D3E2 |
| 安心 | ■#326633 | ■#333333 | ■#666666 | ■#F3E316 |
| 温和 | ■#F96611 | ■#F79833 | ■#F69866 | ■#303290 |
| 購買 | ■#D02B14 | ■#F69B1A | ■#F8D98A | ■#96BC69 |
| 愉快 | ■#F96611 | ■#F79910 | ■#D8D8D8 | ■#3298C3 |
| 率直 | ■#F5131A | ■#F65518 | ■#FBEE1A | □#FFFFFF |
| 情熱 | ■#CB1009 | ■#F7C22B | ■#3C3332 | ■#999999 |
| 躍動 | ■#CB100A | ■#730A0D | ■#BCB0A3 | ■#97B83A |
| 家庭 | ■#FBCC30 | ■#ECC068 | ■#E0923 | ■#669934 |
| 中性 | ■#FBCC30 | ■#CF310B | ■#A6A6A6 | ■#CAD730 |
| 活発 | ■#FBF12C | ■#F7F999 | ■#F79833 | ■#262424 |
| 主張 | ■#4C1148 | ■#911583 | ■#000000 | ■#2AAFCC |
| 神秘 | ■#610A08 | ■#350509 | ■#0F332D | ■#0D190A |
| 洒落 | ■#3A0B09 | ■#780E0C | ■#8D509A | ■#8C0F27 |
| 知的 | ■#696967 | ■#C9C3B5 | ■#E9E0D1 | ■#89100A |
| 誠実 | ■#8396A2 | ■#CCCCCC | ■#BFB6B2 | ■#136798 |
| 創造 | ■#CECDCE | ■#BBBBBB | ■#666666 | ■#30999A |
| 母性 | ■#F36599 | ■#F592B6 | ■#F7725E | ■#C991C6 |
| 女性 | ■#F5A59E | ■#F28277 | ■#FBF3DC | □#FFFFFF |
| 遊心 | ■#E8EB1 | ■#070706 | ■#393939 | ■#999999 |
読ませる文章のレイアウト
当サイトのフォントはMS Pゴシックで14px、行間隔は160%、色は#666666です。強調したい文章は文字を太くして、背景色を#F9D5CFにしています。 Webは紙媒体と違い、ビビットカラーは読みにくかったり、イタリック体はなじまなかったりします。
原色はあまり読みやすいとは言えない
彩度を抑える方が長文でも読みやすい
また、1行あたりの文章の長さは30～39文字くらいが読みやすいです。あまりに横に長かったり、すぐに改行していると目が追いつかなくなります。
文章の配置についてですが、重要な情報は前面に詳しい情報は後半に載せると、情報が効率的に配置され、内容を把握しやすいページ構成になります。
例えば、トップページにはダラダラと長い文章は載せずに、誘導させるようなキャッチフレーズ、インパクトのある画像を載せたほうが、ユーザーをサイト内に引き込むことができます。
さらに文章自体は起承転結ではなく、最初に概要を記載し、それから詳細説明に入ると理解しやすいです。
細かいですが気を付けたいのは、「ですます調」にすること、句読点を正しく使うこと、「ら抜き表現」「い抜き表現」はしないこと、「だから」「そして」などの接続詞や「ここ」「それなど」の指示代名詞は使わないことが挙げられます。
文章のイメージ化で情報は伝わる
「地球上で存在する純金の割合は宝飾品が1/3を占め、各国国営の銀行保有とあわせれば、純金の約半分が割り当てられます。それと比較して民間投資は約11％に抑えられ、ついで工芸品、その他が続きます。さらに採掘可能な純金は約1/3しかないと言われ、全体から見てもかなりの量の純金が採掘された結果になります。純金は商品の需要よりも通貨、つまり投資マネーの影響力が強いため、有事、米ドル、物価、原油・・・」
このように文章で説明するより右のようなイメージで視覚的に情報を脳に与えたほうが、文章は付属品として添えることができ、ユーザーへの理解を深めます。
一般的にグラフはExcelなどでも作成できますが、もっと戦略的を望むならIllustratorで制作していくのが見栄えが良いでしょう。
Web上の文章は無機質になりやすいです。コンピューターは機械的であるという先入観に加え、新聞や本よりも制作者の顔が見えないために、味のある文章でも人間味のない感じがしやすいです。
そのため、イラストを混ぜたり、写真を使ったほうが親近感から信頼性へとつながります。ライターが何を伝えたいのか、すぐに想像できるでしょう。
さらにサイトを活気付けるコツとしては、ヘッダーはあまり派手にしないで落ち着いた色を使い、コンテンツを目立たせるようにします。
そのコンテンツにはイラストや写真をなるべく添えることで、文章を生かします。サイトのトップページにはなるべく、運営者の生写真を表示します。店舗なら店主、企業なら代表取締役です。履歴書のように凛とした表情で、口元では笑顔を作ります。
トークでコンバージョンレートを上げることができない以上、引き込むようなデザインと流れるような文章で、商品の魅力を伝えることに徹します。
月額125円でも、ウイルスチェック機能付きのメールアドレスが無制限です。ブラウザから一括管理できるコントロールパネル、CGI管理、独自ドメイン管理など、豊富な機能を満載です。
ご質問やご不明な点などがありましたら、お問い合わせフォームからメールにてご連絡ください。感想、体験談、広告掲載、取材、相互リンクなども随時受け付けております。
また、業務の都合上、
