サイトを制作するために必要なデザインとコンテンツ。オーダーメイドでヘッダー、イラスト、記事、サイトを作成し、モノづくりから情報を発信します。
デザインを良くする方法
デザインを改善したい
見た目が綺麗になると、お客様のリアクションも向上しますし、お気に入りへの保存の増加からリピーターも期待できます。
何より会社の顔であるホームページは企業への印象が変わってきます。また、鮮やかなホームページを持っている満足感も生まれます。
ただし、デザインの改善には時間や金銭、知識を費やしますので、必要最低限の分析をして費用対効果を計ることが大切です。
デザインのどこをどう直せば、何が良くなって、結果的にどんな得が生まれるのかを考慮していきたいです。
どれだけ離脱率を減らせるか？
上位表示をしての誘導、有料広告からのクリック、相互リンクからの直接訪問者・・・ホームページに訪れたお客様がトップページを見ただけで帰ってしまう確率は何％でしょう。
ページを見るのをやめてしまう離脱率はホームページに導入している多くのアクセス解析ツールで、無料で算出することができます。有名なのにはGoogle Analytics、NINJA TOOLSなどがあります。
例えば、トップページには今日は300人がアクセスがあり、平均滞在時間は1分30秒、平均ページビューは4.2ページ、トップページの離脱率は52％となりました。
この現状が把握できると、「トップページの離脱率を30％台に減らし、商品購入率を2.0％に上げる」といった具体的な目標を挙げることができます。
そして、離脱率を下げるために私たちができること、それがデザイン力の向上です。
実際のお店で言えば、広告や口コミで集約するのは上手で、置いてある商品もすばらしい・・・。
しかし、いざお店に行ったお客様は、店の看板を見てガッカリで店内に入ってくれない、商品の並べ方がヘタで良さが伝わらない、雑な印象を与えてしまい信用できないのを防ぎたいことと同じになります。
ヘッダーでグッと印象アップ
まずはお店の看板であるヘッダーを変えてみます。
あくまで例ですが、ヘッダーのデザインには色、大きさ、文字だけ見ても、それぞれに目的があります。
健康診断がテーマなら通知表に良く使われる水色を基調にしようか、画像は切り取って救急の十字をその下に配置しようか、まじめな雰囲気を出すために文字は明朝体にしようか・・・。
パーツごとに考えて、バランスよく組み合わせるセンスが必要になります。
丁寧な配色で基盤を固める
色の組み合わせは色彩学やカラーコーディネートの専門書、もしくはWebでも知識が学べます。
配色から連想させるイメージにはお決まりの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
3色にプラスされている1色はアクセントカラーですので、インパクトを与えたい箇所に持ってきます。
この色の組み合わせであれば、ハズレはなく、バランスの取れた納得のいくデザインになりやすいでしょう。
読ませる文章のレイアウト
当サイトのフォントはMS Pゴシックで14px、行間隔は160%、色は#666666です。強調したい文章は文字を太くして、背景色を#F9D5CFにしています。
Webは紙媒体と違い、ビビットカラーは読みにくかったり、イタリック体はなじまなかったりします。
原色はあまり読みやすいとは言えない
彩度を抑える方が長文でも読みやすい
また、1行あたりの文章の長さは30～39文字くらいが読みやすいです。あまりに横に長かったり、すぐに改行していると目が追いつかなくなります。
文章の配置についてですが、重要な情報は前面に詳しい情報は別ページに載せると、情報が効率的に配置され、内容を把握しやすいページ構成になります。
例えば、トップページにはダラダラと長い文章は載せずに、誘導させるようなキャッチフレーズ、インパクトのある画像を載せたほうが、お客様をサイト内に引き込むことができます。
さらに文章自体は起承転結ではなく、最初に概要を記載し、それから詳細説明に入ると理解しやすいです。
細かいですが気を付けたいのは、「ですます調」にすること、句読点を正しく使うこと、「ら抜き表現」「い抜き表現」はしないこと、「だから」「そして」などの接続詞や「ここ」「それなど」の指示代名詞は使わないことが挙げられます。
文章はイメージ化で伝わる
「地球上で存在する純金の割合は宝飾品が1/3を占め、各国国営の銀行保有とあわせれば、純金の約半分が割り当てられます。それと比較して民間投資は約11％に抑えられ、ついで工芸品、その他が続きます。さらに採掘可能な純金は約1/3しかないと言われ、全体から見てもかなりの量の純金が採掘された結果になります。純金は商品の需要よりも通貨、つまり投資マネーの影響力が強いため、有事、米ドル、物価、原油、金融、為替・・・（省略）」
といった具合に文章で説明するよりも、
イメージで視覚的に情報を脳に与えて、文章は付属品として添えることがお客様への理解を深めます。
一般的にグラフはExcelなどでも作成できますが、もっと戦略的を望むならIllustratorで制作していくのが見栄えが良いでしょう。
イラストを混ぜて写真も使う
Web上の文章は無機質になりやすいです。コンピューターは機械的であるという先入観に加え、新聞や本よりも制作者の顔が見えないために、味のある文章でも人間味のない感じがしやすいです。
このようにひとつイラストを加えるだけで、この文章の語り手が想像でき、親近感から信頼性へとつながります。
また、サイトを活気付けるコツとしては、ヘッダーはあまり派手にしないで落ち着いた色を使い、コンテンツを目立たせるようにします。コンテンツにはイラストや写真をなるべく添えることで、文章を生かします。
サイトのトップページにはなるべく、運営者の生写真を表示します。店舗なら店主、企業なら代表取締役です。履歴書のように凛とした表情で、口元では笑顔をつくると効果的です。
SEO（検索エンジン対策）に関係するデザイン
2005年頃はページを量産し、全てのページからトップページにリンクを貼り、目的のキーワードでどれだけ多くのコンテンツがあるかが重要でした。
2006年頃は被リンクの数が注目されます。多くの良質なサイトからリンクされていることが評価につながったため、相互リンク、リンク購入、自作自演が目立ちました。
2007年頃になると、検索エンジンも評価方法を変えてきます。GoogleとYahoo！の検索結果の違いが大きくなり、アルゴリズムが明確に差別化されました。
IPアドレスの分散によるクラスCのSEOが効果であったり、一時期はYahoo！ではドメインエイジが評価され、1990年代～2000年初頭のドメインが高くオークションにかけられていました。
日本語ドメインなども流行し、こぞってPunyCodeを模した時期もあります。
2008年は被リンクが7割、コンテンツが1割、その他が2割といった具合のSEOになっています。
しかし、SEOだけに注目すると最も重要なことを忘れがちなります。それは本当に情報を求めているユーザーのためのサイト作りです。
中身の濃い文章を中心に、見やすいデザイン、丁寧なユーザービリティがあれば、どこからともなく自然に被リンクは増えていきます。ブックマークもされてリピーターも増えるでしょう。
IPOで買い付けた株のように、急激なSEOで順位が上がったサイトは、急激に下がる傾向があります。
一方、良質なコンテンツとデザインを兼ね備えたサイトは長く運用され、ジワジワとお客様を増やし、アクセス数はゆるやかに右肩上がりになります。ゆるやかに積み重ねてきたアクセス数は極端にゼロになることはありません。
SEOはもちろん重要です。SEOをしないと順位は上がりません。
ただ、本来の目的であるお客様目線のサイト作り、つまり、満足感のある情報とその情報に華を添えるデザインこそがSEOの基礎になります。
このSEOの基礎があってこそ、飛び道具のようなSEOが生きてくることでしょう。
何もないスペースが生きる
デザイン力を上げるためには、ヘッダーを良くしたり、イラストを挿入したり、レイアウトを変えることが効果的ですが、もうひとつ気にしたいのがスペースです。
スペースとは何もない空白ですが、この空白を上手に使わないと本当のデザインは完成しません。
文字の間隔は前述しましたが、14pxならline-heightは160％程度、13pxならline-heightは20px程度と変わっていきます。
ヘッダーの下には2pxの黒色のボーダーを入れ、左サイドバーとコンテンツの上部には10pxのスペースを挿入、さらに左サイドバーの周りは上に10pxの空白、左右に5px、枠内は上下左右に3pxの空白を入れています。
この空白のバランス感覚こそがデザインと言えるかもしれません。非常に難しく、私も制作しながら勉強させられる毎日です。
文章、イラスト、写真単体を注視するのではなく、物質と物質との距離を適切に保つことを意識した、全体を見渡す広い視野が一層デザインを良くすると思います。
デザイン論の総まとめ
「どこかパッとしない・・・が、どこを変えたらいいのかわからない。」
現状のサイトに対して、このような疑問を持つのは正しいことです。デザイナーでさえも、すぐにアイデアが思いつくわけではありません。
経験からの知識がその回答スピードと質を向上させますが、最終的に納得できるものを制作できるかは実のところ、初期段階ではわかりません。
制作途中に「ここをこうしたら、良くなるかな？」「もしかしたら、結構満足できるかも。」「うーん、今日はいいアイデアが出ない。」などと思っています。
そこでいろいろ見直します。原点に戻れるのはカラーチャートです。先ほども紹介したパターン化された3色を見つめなおし、配色を変えてみます。
したがって、「どこを変えたらいいのかわからない。」と思った場合は、まずは色を次々に変えてみましょう。
ただし、デザイン全般に言えるのですが、変えても変えても満足いかないことがあります。これは心理的なものですので、一度フタを閉じて次の日に確認したり、他のライバルサイトを見たり、デザインを改修する目的を見つめなおしたりします。
満足できる配色ができたら、次にレイアウトを考えたいのですが、レイアウトは当サイトのような逆L字型が最も見慣れており、特に別の意図がなければ、逆L字型で問題はないと思います。
逆L字型で配色が決まったら、看板であるヘッダーで他社競合と差をつけます。
配色もレイアウトも写真さえも重複することはありますが、ヘッダーだけはオリジナルです。真似することもできますが、真似する人は滅多にいませんので、そのサイトの顔になります。
その後にコンテンツの中身をメイクアップするために写真、イラストを挿入していきます。この写真やイラストもなるべく、基本の配色に沿った色合いが望ましいです。
少しずつ、お客様に見ていただきたいサイトが完成されていきます。何か迷っている方はお問い合わせからの相談も受け付けております。
ご注文の流れ
現在、ご注文はメールのみで行っております。また、打ち合わせさせていただく場合は、大変申し訳ありませんがスタッフの居住地の関係で、東京近郊に絞っております。
1 御社 
まずはメールでご連絡ください。
2 弊社 例を含め、制作に必要な事項が書かれた「発注書」を添付して、返信いたします。
3 御社 「発注書」に必要な事項を記入いただき、ご返信ください。随時、質問も承ります。
4 弊社 期日までに「請求書」と一緒に納品いたします。
5 御社 指定の銀行口座にお振り込みください。
6 弊社 ご入金金額を確認次第、確認メールをお送りします。
制作内容を細分化していますので、迅速にお見積もりいたします。まずはメールで連絡くださいませ。
今ならリンクをプレゼント！
制作したヘッダーやサイトがあるURLに当サイトの制作実績のページからリンクを1つ供給いたします。ちなみに当サイトはヤフカテに登録されており、更新頻度も高いです。
ご要望の方は発注時でも構いませんので、ご連絡いただければ幸いです。
掲載記事、写真、イラストなど、全てのコンテンツの無断複写、転載、公衆送信などを禁じます。