この記事をご覧いただいている皆様へ。
このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開されていた記事であり、2014年12月にデジタルマーケティング研究所へ統合されました。
企業サイトを管理するWEBマスターの方であれば、SEO会社から「テキストの量が足りません。ページに文章を追加しましょう」というような提案を受けることは少なく無いと思います。
提案側のSEO会社やサイトの管理者が画像加工などのデザインに関するスキル持っていない場合には制作元の会社に外注を検討するわけですが、それにはコストが伴います。
勢いSEO目的でいい加減なデザインのテキストを配置しているような形跡や、極力目立たせまいとしてページのすみっこに大量の文字を小さな文字で羅列し、かえって違和感を漂わせているケースをよく見かけます。
そこで今回は、ご自身でサイトを更新されているノン・デザイナーWEBマスターに向けてテキスト追加をそれなりに引き締まった見栄えに仕上げる方法を4つのポイントに分けてご紹介します。
以下のサンプルを一つずつ直していくことにしましょう。
マットの花屋はプロポーズを花束で演出します。
大切な恋人へのプロポーズを、ロマンチックな花束で彩ってみませんか?
あなたの想いを、マットが丁寧にヒアリング。パートナーにぴったりの花束をアレンジいたします。マットの花屋は、あなたのプロポーズを応援します。
シリコンバレーに位置する好立地。お気軽にご来店ください。
カリフォルニア州 マウンテンビューアンフィシアター パークウェイ xxxx番
TELL:0000-1111-2222
1.近接
近接とは、関連する項目をグループ化することです。
サンプルに意味の句切れで見出しを付け、それぞれの距離にメリハリをつけてみます。
マットの花屋はプロポーズを花束で演出します。
大切な恋人へのプロポーズを、ロマンチックな花束で彩ってみませんか?
あなたの想いを、マットが丁寧にヒアリング。パートナーにぴったりの花束をアレンジいたします。マットの花屋は、あなたのプロポーズを応援します。
シリコンバレーに位置する好立地。
お気軽にご来店ください。
カリフォルニア州 マウンテンビューアンフィシアター パークウェイ xxxx番
TELL:0000-1111-2222
少し読みやすくなりました。
2.整列
全ての部品が他の何かと揃っている状態になるように整列しましょう。
マットの花屋はプロポーズを花束で演出します。
大切な恋人へのプロポーズを、ロマンチックな花束で彩ってみませんか?
あなたの想いを、マットが丁寧にヒアリング。パートナーにぴったりの花束をアレンジいたします。マットの花屋は、あなたのプロポーズを応援します。
シリコンバレーに位置する好立地。
お気軽にご来店ください。
カリフォルニア州 マウンテンビューアンフィシアター パークウェイ xxxx番
TELL:0000-1111-2222
見出しを左寄せにしただけですが、ぐっとシャープな印象になりますね。
3.反復
反復はデザイン上の特徴を繰り返すことです。
サンプルの見出しの文字を大きくし、線をつけて反復させてみます。
マットの花屋はプロポーズを花束で演出します。
大切な恋人へのプロポーズを、ロマンチックな花束で彩ってみませんか?
あなたの想いを、マットが丁寧にヒアリング。パートナーにぴったりの花束をアレンジいたします。マットの花屋は、あなたのプロポーズを応援します。
シリコンバレーに位置する好立地。
お気軽にご来店ください。
カリフォルニア州 マウンテンビューアンフィシアター パークウェイ xxxx番
TELL:0000-1111-2222
伝えたいことがだいぶ明確になってきました。
4.コントラスト
コントラストは2つの意味が異なる要素に、視覚的な違いをつけることです。
サンプルの住所と電話番号は文章部分と区別させるために、borderを使って四角い箱を置いてみます。ポイントは臆病にならないことです。思い切ってやりましょう。
マットの花屋はプロポーズを花束で演出します。
大切な恋人へのプロポーズを、ロマンチックな花束で彩ってみませんか?
あなたの想いを、マットが丁寧にヒアリング。パートナーにぴったりの花束をアレンジいたします。マットの花屋は、あなたのプロポーズを応援します。
シリコンバレーに位置する好立地。
お気軽にご来店ください。
カリフォルニア州 マウンテンビューアンフィシアター パークウェイ xxxx番
TELL:0000-1111-2222
住所と他の部分との違いが際立つようになりました。大きめの四角を配置しただけで、のっぺりしていた全体の印象が変わります。
5.終わりに
いかがでしたでしょうか?私の会社は画像加工も行いますが、基本的には上記を基礎に現サイトのテーマカラーやフォントに合わせて、テキスト追加の作業を行っています。
これだけでサイトの世界観が壊れてしまうことがかなり少なくなるはずです。
最後に参考図書をご紹介します。
ノンデザイナーズデザインブック
DTP向けの書籍ですが、WEBにも通じる内容だと思います。
私自身もデザインを専門に学んだことが無いため、ずいぶんお世話になりました。今回の内容はほとんどこちらに掲載されているものです。
The following two tabs change content below.
2014年12月までディーエムソリューションズ株式会社SEO対策チームに所属。「SEOは実装」を信条に、コミュニケーションを重視するスタイルで数多くのサイトのコンサルティングを手がける。内部施策に関して造詣が深く、「SEOまとめ」というtwitterアカウントを通じて日々情報発信を続けている。
Twitter:
SEOまとめ