タグ別アーカイブ: レイアウト

難関するSEO

「ホームページって高い」と諦めているあなたへ。

皆さん、いつもさいたま市・川口市のHP作成・ウェブクリエイトのブログをご購読ありがとうございます。

「ホームページって高い」と諦めているあなたへ。

費用が高くてなかなか依頼するのができない!自分で作った方が安いよね?と考えている方、本当にそうなのでしょうか??

本当にホームページを作る制作費用は高い??

実際、もし自分で作ると考えてみてください。

素材はすべて自分で撮影し、細かいアイコンも自作で作りますか?

イラストレーターやショトショップがないと、ちょっと大変かもしれません。確かに今は無料のホームページ制作ソフトやツールがたくさんあるかもしれませんが果たしてそれらを使いこなすということが可能でしょうか?

もし、たくさん勉強をして作れたとしても、そのサイトはSEOに有効なソースコードで記述されているのですか?

ありとあらゆる課題がのしかかってくるのがホームページ制作です。キーワードの選定やタグの見直し、アナリティクスを駆使し修正をしていくのは正直簡単ではありません。

こういったことを勉強するために時間を割くのであれば、餅は餅屋に依頼してご自身の仕事の為に時間を費やした方が断然効率的かと思います。

なぜ業者に依頼した方が効率的なのか?

費用をかけて依頼するということは、もちろん何かしらの業績に価値を見出さなければ意味がありません。
ホームページ制作のプロであれば、いかにしてお客様の要望を形にするかをまず考えると思います。また、その先にあるエンドユーザーへの「お問い合わせ」や「購入する」にたどり着くまでのプロセスを考えて作り込みをしていると思います。
自分のサイトを作るだけの為に勉強をするのと、あらゆる工程やサイトを見て勉強を重ねた人では全く違いますね^^

そして当たり前ですが、何よりも「経験」が違います。
当たり前、でもこの経験が何よりも大事なのです!

業者さんならどこでもいいの?

ここがちょっと難しいと思うのですが、WEB業者といってもピンからキリまでありますよね?
独立をされた方でもWEB経験が10年の方もいれば、1年未満の方もいます。
もっと言うと、実は未経験だけどこの業界が好きだから独立しました!なーんて人もいるかもしれません。(ちょっと怖いですけど)
いろいろな方がいるのがフリーランス。
なので、もし可能であれば、気になった業者さんに発注する前に過去の実績などを見せてもらうのが手っ取り早いですね!

川口ウェブクリエイトはお客様のご要望に沿ったWEB制作をご提供しております。
どうぞお気軽にお問合せ下さいませ♥

–PR————————–————————————

川口市・さいたま市のHP制作はウェブクリエイト
お電話はこちら:080-9561-9469
メール:info@webcreat.biz
プランニングからドメイン取得・管理までお任せ下さい!
HP制作から看板・媒体資料などご予算に合わせてお見積り致します!
–PR————————–———————————–
ホームページ更新方法

自分でホームページを更新するには?

皆さん、いつもさいたま市・川口市のHP作成・ウェブクリエイトのブログをご購読ありがとうございます。

本日は、ご納品後にご自身でホームページを更新する方法についてご説明いたします。

納品後も更新・修正は当社(ウェブクリエイト)にお任せします。というクライアント様には関係のないお話になってしまいますが、経費削減含めて自分たちで更新・修正を行えるようになりたい!という方には必見です!

まず、お客様にご用意して頂きたい環境としましては…

①FFFTPのインストール
②FTPサーバーへの接続

になります。

※この作業を行うことで、現行アップされているファイルをご自身のPCにダウンロードし、修正することが可能になります。

③修正したい箇所を操作します。
※定期的に修正する箇所がお決まりのクライアント様につきましては以下のようなマニュアルをご用意いたします。

ホームページ更新方法

ご自身で更新する場合の手順

※上記につきましては別途費用が加算されます為、ご相談下さい※

また、実作業がない限りはメール・お電話にてアフターフォローを行っておりますので
お気軽にお問合せ下さいませ♥

–PR————————–————————————

川口市・さいたま市のHP制作はウェブクリエイト
お電話はこちら:080-9561-9469
メール:info@webcreat.biz
プランニングからドメイン取得・管理までお任せ下さい!
HP制作から看板・媒体資料などご予算に合わせてお見積り致します!
–PR————————–———————————–

Illustratorのアンチエイリアス。

おはようございます。
埼玉県でホームページ制作を行っているウェブクリエイトです。

今回はIllustratorのアンチエイリアスについて書きます。
紙媒体ではそもそもあんまり重要視されない(アウトライン化する為)のですが、
WEBでのコーディングではアンチエイリアスが必須なのですね。

わたしも自由気ままにデザイン起こしをしており、コーダーの苦労を全無視しておりました。
ごめんなさい…。汗

そうなんです!そうなんです!
イラレでラフをあげると一つ一つを画像化しなくてはいけないという、とっても大変な作業があるんですね。
スライスという方法もありますが、Photoshopならアセットで一括画像化できるという驚異的なツールがあります。
(知ったかぶってすみません。私もつい最近知りました…。)

ただアセットにするにもレイヤーごとに名称をわけないといけない…などと細かい作業はついてまわるのですが、
10年前に初めてIllustrator・Photoshopを触った私にとっては、この進化は凄まじいと思います。

ごく一部の方からは、いらないツールが増えて逆にやりにくいと言うお声もあがっておりますが、
云十万の製品がここまで進化してくれるとなんとなく嬉しい気持ちになります(素人発言?w)

脱線しましたが、Illustratorのアンチエイリアスとはなんぞや?
とお思いの方、是非こちらをご覧ください。

http://www.mdn.co.jp/di/articles/2978/?page=13
anchi

わたしもここでとても勉強させていただきました。

Illustrator派の私ですが、Illustratorも奥が深いです><
それ以上にPhotoshopはもっと難易度が高い気がします…。
なにごとも日々勉強です…。
コマンドを覚えるとなんとなく楽しくなってくるのですがWINとMACのショートカットがここまでも
違うのか!!!というジレンマもありつつ、日々格闘しております。

新しいMACがそろそろ出るようなので新世代のMACに期待し、それまでに技術磨きに励もうと思います。

–PR————————————————————–
さいたま市HP制作 ウェブクリエイト
–広告————————————————————-

マークエステルさんを知る

近所にある南浦和文化センター内の図書館へ、とある参考書を借りに外出したところ、こんな催しがやってました。ということで、少しだけ…の気持ちで立ち寄ってみました。

mark

大小含めると恐らく50枚~80枚くらいはあったのではないでしょうか?
様々な手法で描かれるマークエステルさんの色の世界は本当に驚愕そのものです。

私たち、WEBクリエイターも色には本当に悩まされます。
WEBや紙質、機材、インキ(インク)によって色の出方が本当にさまざまなのです。
しかし、それはあくまでもパソコンでの話で、「紙」(といってもさまざまあります)に直接描く油や水彩、シルクスクリーン、漆などを丁寧に丁寧に織り込んである画には感動の言葉しかありません。

最後、なんと!!!!
ご本人に逢うことができたのです。
しかも、マークエステルさんが、その場で絵を描いている姿を見学させてもらいました。
なんという奇跡!

マークエステルさんの筆の動きには迷いがありません。
たった4本しかない筆でサラリと一枚の画を書き終えたのです。
時間にしてどのくらいだったかは、ちょっと覚えてませんが…

そして、わたし達、日本人はあまり多くの色は使わず、せいぜい3色程度で納めてしまいがちですが
彼の描く画はとても多くの色が使われてます。
固定観念で、この色にはこの色があう…そう考えていた私には本当に勉強になる瞬間でした。

それから少しお話を伺い、失礼させていただきました。
館内はもちろん撮影NGでしたが、受付にあったものは写メってきてしまいました。

mark02
上の写真はあくまでも私の好みですが、他にも人間模様や日本神話に基づいて描いたというものや
中国のものなど何の観念にも捕われず描かれた世界が脳裏に焼き付いてます。

ご興味のある方はどうぞ足を運んで見て下さい。

フランス人の国際画家 マークエステル(日本語公式サイトにリンクします。)

ガラケー

ガラケーが戻ってくる!?(1)携帯のあり方

久しぶりの更新になってしまいました。
火曜・木曜更新と公表しておきながら大変申し訳ありません。

さて。今日はもう一つビッグニュース&訂正せねばならないことがあるのです…。

(1)携帯のあり方

以前、私のブログでガラケーはなくなり全てがタッチパネル式の家電になるだろうと予測した私ですが、これを覆す事態になるかもしれません。ニュースで報道されていたのは、携帯のあり方。

携帯=電話ができて、メールができればOK

確かにそうです。それがメインです。
そこにカメラがついてQR読み込み機能がついて、名刺交換ツールがついて
ネットもさくさく見れるようになり、画面も拡大され、アプリも好き放題GETできる
スマホというものが出現しましたね。

しかし、食いついたのは最初の数年。
昨今はスマホの誤作動や料金プランの問題、販売方法(パナはスマホの開発を撤退したとか)、
などなどの問題でガラケーに戻る方が増えているようです。

電話&メールはガラケー。
ネットはタブレット。

これが一番スマートなチョイスだと専門の方が言ってました。

えーーーーーっ!

私達、制作陣はメディアの報道を鵜呑みにして良いのか?

現在ウェブクリエイトはPCサイトのみの受注に限定してます。
それはガラケーで見る人がいないと想定してです。
スマホ・タブはPCサイトも普通にみれますよね。
予算の関係上スマホサイトまで制作してほしいと言われたことがないので
メニュー項目にも入れてませんでしたが、もしかすると、もしかしすると… ガラケーだけは別にサイトを制作せざる得ない日がくるのかもしれませんね。
(※ガラケー時代はPCサイト・ガラケーサイトと必ず2サイト制作が必須でした)

ガラパコス携帯

秋葉原では買取店も急上昇!?

 

ひゃー。しかもガラケーはキャリア別に見え方が異なるのがネックです。
絵文字なんかも気を付けないといけません。(※特殊依存文字などは使わないのが一番。)

どうなることやら携帯業界。

秋葉原ではどんなに古いガラケーでも1000円~買いとってくれる店も多いとか。
そうですね。店舗では買い替えられないのだから裏で手回しをするしかないですね。
逆を言うと、そこまでして戻したいというユーザーがいるということです。

スマホを高値で売り出し、スマホオンリーで勝負をしたい携帯会社と
ガラケーに戻してタブ(またはPC)だけで良いとするユーザー。

どうなるのかわからなくなってきちゃいましたね。

以前ブログで書いた内容と異なってしまうことを訂正致します。
申し訳ありませんでした><

キャリアの問題に関しては制作部隊の永遠の悩みの種であることは間違いないでしょう…。苦笑

コツコツ行うSEO

気になる!フッターリンクの必要性

いつもメルマガをご愛読いただきありがとうございます。
本日のテーマは「フッターリンクの必要性」です。
◆◆ 今回の目次 ◆◆
1.ユーザーにとって役立つか?
2.関連性があるものか?
3.SEOの基本

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【1】『ユーザーにとって役立つか?』
――――――――――――――――――――――――――――――
フッターリンクといっても、サイト内リンクなのか広告リンクなのかでも
全く違います。

以下の図を見て下さい。

footer01

footer01

●サイト内リンクであれば、必ずしも良いとは言えませんが、関連性のない無関係のサイトへのリンクに比べるとまだマシというところでしょうか。

しかし、以下の場合・・・

footer02

footer02

●私のオフィシャルサイトのNG箇所でもあるのですが、サイドにもサイト内リンクがあり、フッターにもサイト内リンクがあるのは、重複リンクになるので、オススメできません。(私もまだ修正作業をしてないので早急に修正します><)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【2】『関連性があるものか?』
――――――――――――――――――――――――――――――
●①にも書きましたが2013年のSEOは関連性が重要視されてます。
いくらバックリンクを貼ろうとも、悪質なリンクとみなされる場合は多く、
警告メールがくる場合があります。
これを放置していると、サイト自体が抹消されるという恐ろしい事態になりま すので、気を付けて下さい。

●以前のブログで私は「ディレクトリ登録には効果がある」と書きましたが、
これも同様に、関連性のないディレクトリに登録すればするほど、ランクは間違いなく落ちていくでしょう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【3】『Seoの基本』
――――――――――――――――――――――――――――――
SEOの基本=サイト運営の基本。
初心に戻って考えてみましょう。

・誰の為のサイトなのか?
・エンドユーザーは誰なのか?
・そのサイトは見やすいのか?
・導線はしっかり構築されているのか?

他にもチェック項目はたくさんありますが、1にも2にも、
ユーザー重視のサイト作り(コンテンツ作り)を徹底していれば
関連性のないリンクを設置しようなど思わないはずでしょう。
そして、おのずとユーザーが集まるサイトになることと思います。

(広告などのPRなどは必要かもしれませんが、過度に広告に頼るよりも地道にSEOで効果を出すことの方が賢明かと思います)

では、また次回のテーマをお楽しみにっ★
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【PR】ウェブクリエイトが制作したサイト

川口のリラクゼーション専門店Baron(バロン)で最上級の癒しを。
舎人ラナー「見沼親水」より徒歩5分。足立区からのアクセスも抜群!

リラクゼーション Baron(バロン)
http://www.baron.tokyo.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

記述法

【HTML5】文法修正とは?

【HTML5】文法修正とは?

さて、前回のブログでHTML5について少しだけ触れましたが、
何がどう変化(進化)したのか?ということについて私が
分かる範囲で追及していこうと思います。

 

–MENU——————————-
①まさに「HTML文法修正」→HTMLの簡素化
②使いこなせば動画も楽々掲載可!
③bodyタグの中で、構造を示すタグが追加された
————————————–

①まさに「HTML文法修正」→HTMLの簡素化

今までのソースを見てみましょう。書き出しからして長~く、意味もわからないような
ものがズラズラ並んでましたね。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>

↑ これが ↓ に、なりました。

<!DOCTYPE html>
<html lang=”ja”>

たったこれだけのタグに簡素化されたのですよ!!!
(制作者にとっても、たいぶ楽になりましたよね!)

これだけではありません。

②使いこなせば動画も楽々掲載可!
Canvas」が追加されたことにより、html5からは新規に指定されたタグで
JavaScriptを使い図を描くことができるようになりました。
(使いこなすまでは相当時間がかかりそうですが、かなり画期的です)

③bodyタグの中で、構造を示すタグが追加された

html5

html5

html5では、header,navi,section,article,footer などの構造化タグが追加され、
ブラウザや検索エンジンに対して、リアルにアピールしているのですね。
header / nav / article / aside / footerの構造タグのみで骨組みが
形成されていることが私は一番の変更点だと思いました。

特に今まで最重要タグとして扱われていたh1・h2をすっ飛ばして
article内にある全項目が最重要とみなされるようになったということ!

目から鱗です。

今までの「サイトがいきなり順位が落ちたのはなぜだ?」

パンダだ、ペンギンだ、と騒いでいましたが、それだけではなかったのでしょう。

1P目にいたサイトが100番圏外になり愕然としているサイト運営者様をみると
気の毒です。サイトを自分の子供のような感覚なのですから100番圏外だなんて
死んだと同じような気持ちになりますね・・・。

これを機に世界標準となったHTML5・UTF-8での正式な文法記述
心掛けていきましょう。

ブラウザで見た時にキレイに見えて許された時代はすでに終わったのです。
これからは中身にもしっかり目を向けて構築していくことが、いかに大切かを
知るべきです。続きはまた来週。。。。

四角枠の角を丸くする方法

たった10分でできるCSSの裏ワザ③

【四角の枠線を角丸にする方法】

●四方全て角丸にする方法
※以下の青枠のことを説明します。

四角枠の角を丸くする方法

四角枠の角を丸くする方法。超~簡単なので皆さんコピペで使ってね!

border-radius: 20px;
border: 3px green solid;     /* 枠線の装飾 */
background-color: #ccffcc;   /* 背景色 */
}

↑ たったこれだけ!背景画像でわざわざ角丸などにする必要ありません!


※ブラウザで分けたいとき※

div.kadomaru {
-moz-border-radius: 20px;    /* Firefox */
-webkit-border-radius: 20px; /* Safari,Chrome */
border-radius: 20px;         /* CSS3 */

ついでに…
●上側の角だけを丸くする方法

div.kadomaru {
/* ▼CSS3 */
border-top-left-radius: 20px;  /* 左上 */
border-top-right-radius: 20px; /* 右上 */

/* ▼Safari,Chrome */
-webkit-border-top-left-radius: 20px;  /* 左上 */
-webkit-border-top-right-radius: 20px; /* 右上 */

/* ▼Firefox */
-moz-border-radius-topleft: 20px;  /* 左上 */
-moz-border-radius-topright: 20px; /* 右上 */

/* ▼共通装飾 */
border: 3px green solid;     /* 枠線の装飾 */
background-color: #ccffcc;   /* 背景色 */
}

 

すっごい簡単じゃないですか?ね?ね?(笑)

ちょっとしたことを知っているだけで、ブラウザの表示が

ものすごく軽量化されるのです。

軽量化される→Googleの評価があがるということなので、
是非とも参考にしてみてください^^

ご購読の皆様、右下からブログ登録してもらえると嬉しいです♪

(迷惑メールに入ってしまうこともあるので、フォルダチェックお願いします。) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光を考えている方は絶対必見!屋根よりもカーポートに設置!
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

奥深きSEO

たった10分でできるCSSの裏ワザ①

たった10分でできるCSSの裏ワザ①

誰にでも簡単にできるHP制作の中での裏ワザ紹介!

いちいち画像を背景に組み込まなくてもCSSで10分で完結できる超速攻法です(笑)
どうぞコピペして、皆さんも色々実践して使ってみてください^^

ご購読の皆様、右下からブログ登録してもらえると嬉しいです♪
(迷惑メールに入ってしまうこともあるので、フォルダチェックお願いします。)

【ナビを簡単に設置する方法】

ナビって意外と作りこむのが面倒なところがあるんですよね。
私も、この作業が一番苦手分野でした。
マウスを乗せた時に、正確に画像が切り替わらないと非常にみにくい。
そして、1pxでもズレると全てが崩れてしまう。
計算しながら画像作成していく工程がどれだけ苦痛だったか・・・(笑)

で、編み出したのがコチラの方法です。
(いろいろ方法はありますが、私はデザインする上でも一番簡単で便利かと思います)

●一枚の画像を使って画像を切り替える方法

CSSで画像の置き換え指定を設定することで、マウスを乗せた時に
画像が切り替わると言う仕組みです。

例えば以下のようなナビ画像を作ります。
背景に設定する画像は、ナビのデザイン(上部なのかサイドなのか)で
異なりますが、今回は分かりやすくTOPの横ナビで・・・。

グローバルナビゲーション

ナビを一枚の画像で作る方法

背景画像のheightの半分のheightをアンカーに設定し
background-positionをtopに設定することで、
通常時の画像のみ表示させます。

上のイラストで見ると・・・

上:デフォルト状態
下:マウスを乗せた時&そのページを開いているとき。の状態になりますね。

この方法だと、画像ファイルが1つで済み、メニューが変わった時なども
便利で管理がしやすいのです。(個人的に)

●実際の設置例

(htmlコーディング)************************************************************
<ul id=”globalNavi”>
<li><a href=”/” >HOME</a></li>
<li><a href=”/guidance/”>お仕事の内容</a></li>
<li><a href=”/work/”>お仕事の流れ</a></li>
<li><a href=”/reference/”>サポート体制</a></li>
<li><a href=”/voice/”>女の子の声</a></li>
<li><a href=”/faq/”>よくあるご質問</a></li>
<li><a href=”/com/”>会社概要</a></li>
</ul>

(cssサンプル)************************************************************

#headerArea #globalNavi {
width: 962px;
height: 47px;
position: absolute;
top: 112px;
background-image: url(../iimg/gnavi.jpg);
}
#headerArea #globalNavi li, #headerArea #globalNavi li a {
height: 46px;
}
#headerArea #globalNavi li {
float: left;
display:inline;
}
#headerArea #globalNavi li a {
display:inline-block;/*ieHack*/
overflow:hidden;
text-indent:-9999px;
}
#headerArea #globalNavi li a {
display:block;
}
#headerArea #globalNavi li a.active, #headerArea #globalNavi li a:hover {
background-image: url(../iimg/gnavi.jpg);
}
#headerArea #globalNavi .m1, #headerArea #globalNavi .m1 a {
width:86px;
}
#headerArea #globalNavi .m2, #headerArea #globalNavi .m2 a {
width:145px;
}
#headerArea #globalNavi .m3, #headerArea #globalNavi .m3 a {
width:146px;
}
#headerArea #globalNavi .m4, #headerArea #globalNavi .m4 a {
width:145px;
}
#headerArea #globalNavi .m5, #headerArea #globalNavi .m5 a {
width:146px;
}
#headerArea #globalNavi .m6, #headerArea #globalNavi .m6 a {
width:146px;
}
#headerArea #globalNavi .m7, #headerArea #globalNavi .m7 a {
width:148px;
}
#headerArea #globalNavi .m1 a:hover {
background-position:0px -46px;
}
#headerArea #globalNavi .m2 a:hover {
background-position:-86px -46px;
}
#headerArea #globalNavi .m3 a:hover {
background-position:-231px -46px;
}
#headerArea #globalNavi .m4 a:hover {
background-position:-377px -46px;
}
#headerArea #globalNavi .m5 a:hover {
background-position:-522px -46px;
}
#headerArea #globalNavi .m6 a:hover {
background-position:-668px -46px;
}
#headerArea #globalNavi .m7 a:hover {
background-position:-814px -46px;
}
#headerArea #globalNavi .m1 a.active {
background-position:0px -92px;
}
#headerArea #globalNavi .m2 a.active {
background-position:-86px -106px;
}
#headerArea #globalNavi .m3 a.active {
background-position:-231px -92px;
}
#headerArea #globalNavi .m4 a.active {
background-position:-377px -92px;
}
#headerArea #globalNavi .m5 a.active {
background-position:-522px -926px;
}
#headerArea #globalNavi .m6 a.active {
background-position:-668px -92px;
}
#headerArea #globalNavi .m7 a.active {
background-position:-814px -92px;
}
※私はul(リスト)で囲んでいますが、Divやddで囲む方も多いです。

いかがでしたでしょうか?
CSSを覚えたい人は必見の小技なので覚えておくと何かと便利ですよ♪

次回はCSS裏技集②をご紹介します。

お楽しみに^^★━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光はカーポートでメンテナンスも楽々!
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

人を惹き付けるサイトとは?

人を惹き付けるサイトとは?

——MENU——————–————————————–

  1. トップページの構造
  2. コンテンツの配置
  3. フォントと文字の大きさ
  4. 見やすさ・わかりやすさ
  5. 全体的なバランス

———————————————————————

①トップページの構造


過去ブログにも記載しましたが、パッと見た瞬間に
ユーザーは何のサイトなのかを分析します。

・興味がない=直帰率100%
・ちょっと興味がある=30秒ほどTOPページだけさら~とみる程度
・とても興味がある=いろいろなページを開いてくれる

大抵は上記の3つに分別されます。
それでも「とても興味がある」とはいえ、平均3分~5分程度で
普通のサイトは見終えてしまいます。

そのため、どんなにフォトショやイラレを使えて見栄えを良くしても
ユーザー側からして興味のないサイトは数秒で離脱してしまうのです。

②コンテンツの配置

興味がないユーザーは、そもそも見当違いのサイトを検索しているのでしょうから、
ここでは省きます。

「ちょっと興味がある」という、まさにこのユーザーをいかにサイトから離脱させないか。
そこが今回のテーマです。
もう少し詳しくかりやすく説明すると、コンテンツの配置に気をつけることです。

例えば、ファッションサイトなどでは、ジャンルごとにカテゴリ分けされてますが、
季節のテーマに沿った「スペシャルイベント開催!」「夏の鉄板アイテム集」など
「おや?」っと思うキャッチフレーズと画像が大きくトップにあったらどうでしょう?

人を惹き付けるデザイン&コンテンツ

人を惹き付けるサイトとは?

自分が興味があるキャッチコピーや画像があると、思わずクリックしてしまいそうですよね。

そして、今や主流となあった「このページを見た人は、こんなページも見ています」
似たような商品誘導をすることで、ユーザーの好きなジャンルとマッチングし
滞在時間が少しでも長くなるわけです。

③フォントと文字の大きさ

上記でファッションを取り上げましたが、数知れぬサイトの中には年配の方が
見るようなサイトも存在します。
そんな時に役立つのが「テキストの大きさの選択」です。

※このようなサイトを一度はみたことがあるはずです。

これは、そのようなユーザーにも適応します。ということです。
ターゲット層を選ばない・幅広いサイトで大変重宝されるツールですね。

④見やすさ・わかりやすさ

サイトに訪れるユーザーの半分以上は、その分野の知識が無い人。と思いましょう。
知識があれば検索する必要ありませんもんね?
素人・未経験・初心者・このようなユーザーがわかるような言葉・図・グラフなどを
用いて、表現することで興味が具現化し、顧客になる可能性tが高くなります。

⑤全体的なバランス

奇抜なサイトは、そのジャンルのユーザーからは支持されますが、
一般的にはごく普通の見やすいサイトが好まれる傾向にあります。
全体的名バランスを考慮し、ユーザーがサイト内で迷子になることの
ないよう、誘導していくテクニックを覚えられたら最高でしょう。

心を込めて、ユーザー視線で作るサイトには、必ず意味があります。
制作者の細かい「想い」が詰まっているのです。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■足の痛みや歩行時の痛み、外反母趾・スポーツ障害の方は入谷式へ!
http://ashikara-labo.com/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━