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
- デザインのセンスは真似て作って磨こう
- 広告デザインをより良くする為の手引き
- ロゴマークをデザインするときの考え方
- ロゴ完成までの手順
- ロゴはベクターデータで作る
- デザインするとき意識したい10のスキル
- 伸びるデザイナーはいつも制作している
- スキルアップとその先のことを考えよう
- 広告デザインの業界で働くには(DTP)
- 文字の扱い、文字の単位についての色々
- 文字調整!見せる文字とそうでない文字
- デザインで頻繁に使う記号とその読み方
- タイトル・見出しのデザイン処理の一例
- 伝える為に整ったレイアウトを考えよう
- レイアウトで迷ったときの解決への道筋
- 迷いを解決する!効率的な配色の考え方
- 混ぜすぎ注意!印刷を考えた色の指定
- 金赤!M100Y100に一番近い特色
- DTPの心得!デザインの基本的なルール
- どこまでセーフ?印刷時の画像解像度
- ミス防止!入稿データのチェックリスト
- 用紙サイズ一覧!コピー紙など、よく使う紙の大きさ
- 紙のサイズの覚え方・紙のサイズの計算
- 紙の規格!A規格とB規格の用紙の由来
- 誤植を防止!ミスを無くす校正のやり方
- デザインや印刷の現場で使われる用語
- 集客や売上に繋がるチラシのテクニック
- カッターで紙をまっすぐに切るコツ
- ほんの少し役立つデザイン制作の小ネタ
- スマートフォン向けにサイトを最適化する
- 運営サイトのバナー広告費を設定しよう
- アドセンスの設定と広告配置のポイント
- 100位でもいいビッグキーワードのSEO
- 興味を引く記事を作るコツと記事の特徴
- サイトを最適化!WEBデザインの小ネタ
- 分かりやすい案内地図の作り方
- キャッチコピーのお助けテンプレート