色探 求人のホームページ:色カラー
ホワイトブランド ブラックブランド グレーブランド ブルーブランド レッドブランド グリーンブランド イエローブランド オレンジブランド ピンクブランド パープルブランド ブラウンブランド ゴールドブランド シルバーブランド

WEBデザインのコツ

KNACK OF DESIGN

WEBデザインのコツと豆知識

作ったら人に見てもらいたいのがWEBページです。アクセスを増やすためにはどんなことをしていったらいいかを、SEOにWEBマーケティング、サイト構築、そしてデザインと色などから考えてみましょう。古くなったやり方もありますが当サイトで行った手法とその結果などの記録も公開しています。

Webサイトは修正の繰り返し

一度作ったら終わりってことが少ないのがWebサイト運営です。紙媒体と違って直ぐに修正を反映出来るので細かにサイトをいじることになります。また、新しい技術がどんどん出てくるのでそれを取り入れていくとなると定期的に更新する必要があります。サイトをより良くしようとしたり広告のコンバーションを上げていく為の修正は面白いですが切りがないものだったりします。

サイト訪問者の移動を分析

自分のホームページへやってくる人はどんな人か?アクセス解析を入れることによっていろいろなことが見えてきます。

どんな検索ワードでサイトへ訪問されているのか。どのページへのアクセスが多いのか。ユニークアクセスはどのくらいあるのか。どの時間帯にアクセスが多いのか。 高性能のアクセス解析になると、どの国や都道府県からアクセスされているかが分かったり、サイトをどう巡っていってどのページで自サイトを離れていったかなどとページ移動の行動が解析できたり、サイトへの滞在時間が分かります。

アクセス解析は、契約サーバに付いていたり、「Google Analytics」、「忍者アクセス解析」など無料で高機能な解析ができるものを使ったりして解析することができます。

URLの誘導を複数の文章で試してみる

同じ場所に配置した広告でも文章によってクリックしてもらえる確率は変わります。配信されたテキストなら人のせいにできますが自分で作成したコピーだと目も当てられません。文章次第ですごくクリックされたり全くされなかったりするので広告文は複数用意して反応をみながら試してみるのがいいと思います。

どのリンクがクリックされたのかを調べるためにはGoogle Analyticsのイベントトラッキングを使うことで調べられます。やり方は簡単で下記の赤字の部分をリンクタグの中に追加するだけです。あとはクリックされるのを待ちます。Google Analyticsから行動→イベントのメニューでクリック回数が分かるようになります。

トラッキングIDに個々に名前をつけることでどのリンクがクリックされたのか調べられるようになります。反応のない文章を変更してテストを繰り返すことで効果の高いリンクを作れるようになります。

同じ文章で掲載位置を変え、場所によってのクリック率を調べる

ページで内でいくつも同じページへリンクを貼っていて、どのリンクから移動したのか調べたいときにもイベントトラッキングは有効です。掲載位置ごとにトラッキングIDを組み込んでおけばサイトのヘッダーやフッター、コンテンツ内のどのリンクからどれだけ移動してきたのか知ることができます。

URLに少しの気遣い

意味のある言葉でURLを作るとGoogleとの相性がよくなります。URLは基本的にはアルファベットなので英語で意味のある単語でディレクトリ以下のURLを作りましょう。日本語でURLが使える場合には狙っているSEOワードを含めても良いでしょう。

サイトのURL構造はできる限りシンプルにします。さらに人間が理解できる方法 (可能な場合は意味のある単語を使用) で URL を構成すると検索エンジンからの評価は高くなります。たとえば色 (color) に関する情報を探している場合、https://color.com のようなURLであれば、URLを見ただけで必要な情報がありそうかどうかを判断できます。https://www.color.com/index.php?id_sezione=360&sid=3a5ebc944f41daa6f849f730f1 のような英数字の羅列になったURL だと、そのURLから訪問ユーザーのぱっと見の興味は薄くなります。

URL に区切り記号を使用し単語を分けて認識させるようにします。
https://iro-color.com/episode/color-effect.html
という URL の方が、
https://irocolor.com/episode/coloreffect.html
という URL より分かりやすくなります。URL の単語の区切りにはアンダースコア (_) ではなくハイフン (-) の使用がお勧めです。グーグルのウェブマスター向けのガイドラインにハイフン (-) の方がよいと書かれています。

検索エンジン登録の確認

検索エンジンにどのように登録されているかを調べる方法のいろいろ。

site:自分のサイトのアドレス

これで検索することにとって検索エンジンにどれだけ自分のwebページが認識されているかを知ることができます。さらにこの検索で上位に来たページは検索エンジンに重要だと思われているページです。

allintitle:狙っているキーワード

allintitle:○○で検索をかけると○○(検索で上位表示を狙っている言葉)で、タイトルにその言葉が使われているページを対象として調べることが出来ます。タイトルにキーワードを使っているページは競合サイトの可能性が高いのでその中で自サイトがどの順位にいるか知りたいときに使えます。

ツイッターで拡散状態を知ろう

ツイッターのキーワード検索に知りたいページのURLを入れるとツイートのされ状況を知ることができます。通常これだけで検索できるのですが、できないサイトもあります。

URLに記号が含まれているサイトでツイートを確認する方法

当サイトのドメインの様にサイトURLに「-(ハイフン)」などの記号があるとツイッターのキーワード検索でURL検索ができません。自サイトのつぶやきを確認する場合には「url:iro*color.com」などと頭に「url:」を追加、「-(ハイフン)」を「*」するとつぶやき状況を知ることができるようになります。

ABテストでサイトを最適化する

同じページに誘導するのでも文章や画像によって人を引きつける効果は違うといわれています。自分では十分だと思っていてもユーザーから見たら興味を引かないってことは考えられます。見て欲しいコンテンツに人を集めたい場合には複数の素材を使って反応を比べて、効果の高い方を採用していくことでアクセスを増やせます。

ABテストとは

ABテストは、画像やテキストなどをAパターンとBパターンと2種類の素材を用意しどちらの素材を使った方がクリックされたりページビューが増えたりするかユーザーの反応を探る方法です。

htmlカラーの色調整の知恵

HTMLで色は16進数で表記しますが色を少し変えたいときにはこの数値をどういじったら思う色になるのか迷います。色相を変えたいとき、HTMLカラーに慣れていないなら色を選び直した方が最善です。この色味のままで、少し明るくしたい・暗くしたいという場合には6桁の数値を全て同数値で足し引きすると調整できます。#0033CCを#1144DDと1上げることによって明るい色になります。

彩度を落としたい

色が鮮やかすぎるので彩度を落として落ち着いた色にしたいときには、6桁のそれぞれの数値を近い数字に寄せることで調整できます。#CCFF00を#CCFFAAと00をCC・FFに近い数値にすることで色をあまり変えずに落ち着かすことができます。

KNACK OF DESIGN


Webアンケート調査・ネットリサーチ




イーデザイン selection

色のイメージ効果を知ろう。カラーボックスを選ぶとその色の全てが分かります。


配色の仕組みが分かる