Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報

  • 2011/04/15
  • このエントリーをはてなブックマークに追加

ワイヤーフレーム、SEOやマーケティング
前回の記事の後半部分になりますので、前回の記事とあわせてどうぞ。
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報



まとめの目次




ワイヤーフレームを学ぼう


ワイヤーフレーム
ワイヤーフレームとは、クライアントに初動で見てもらうためのサイトUI案です。
この段階である程度のコンテンツも視覚化できる為、最初にワイヤーフレームを作成する人も多いのでは無いでしょうか。

ひとまずワイヤーフレームとはどういうものなのかと言う点で以下の3つのサイトを参考にしてみるとわかり易いです。

I wireframe
I ♥ wireframes
様々なワイヤーフレームが高頻度で登場してきます。
作成のコツを掴む登竜門的なサイト。


ワイヤーフレーム解説サイト
blog | web.without.words
既に更新がとまってるっぽいけど面白いブログ。既存のサイトを逆にワイヤーフレーム化している。
まず開いて、黒い部分にマウスを乗せると、ワイヤーフレームが見えます。その後、クリックし、次のページへうつったあと、もう一度そのワイヤーフレームをクリックすると、どのサイトをワイヤーフレーム化したのかがわかります。


wireframes
Wireframes Magazine
英語ですが、様々なワイヤーフレームの事についてのコンテンツを紹介しているマガジンブログ。
最近だと、スワイプの手のサンプルとか紹介されてました。

目次にもどる

ワイヤーフレームツール


ワイヤーフレームツールは無料から有料まであります。以下の記事を参考に、自分に合いそうなものを見つけてください。プロジェクト単位で使うのであれば、みんながわかりやすいものがいいですね。

ひとまずフリーで使えて人気のツールが以下2点。
Cacooカクー
Cacoo - Web上で図の作成とリアルタイムコラボレーション
日本語で使えてサイトマップもつくれてWebサイトのワイヤーフレームが作れる超便利ツール。


iPhone用ワイヤーフレーム
iPhone Mockup
手書き風と普通の両方に対応していますが、わざわざ手書き風にする必要があるのかどうか・・・。
どちらにしても凄く便利なワイヤーフレームです。

ワイヤーフレームツールのまとめエントリ3つ


有料無料あわせたまとめ
プロトタイプ/ワイヤーフレーム
ちょっと古い記事ですが、有料、無料の両方のワイヤーフレームをまとめてます。
特にワイヤーフレームツールは、ある程度まで無料というのが多いので、そのあたりも確認してみるといいかもしれない。


ワイヤーフレームまとめ
Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
海外製のワイヤーフレームのまとめエントリー。
ちょこっとした説明もありわかりやすいかと。


フリーワイヤーフレームまとめ
10 Completely Free Wireframe and Mockup Applications
フリーで使えるモックアップとワイヤーフレーム作成ツールのまとめエントリ。海外のエントリーだが、一度使ってみると、あまり英語は気にならないと思います。
ただし、日本語に対応してるかどうかは別の話なので、一度試してみる必要があるでしょう。

目次にもどる

SEOに対する基礎


SEO、サーチエンジンン最適化。検索結果においてどうすれば上位表示されるのかという代表的なWebのスキルの一つです。実はこの記事を書くにあたり、5日間このSEOについてあらゆる解説を書いていたのですがやめました。
SEOについて
ずらーっと、各タグが持つ効果や、それぞれの役割、どのような結果になるのか、ペナルティを受ける理由は何か。
色々書いたのですが、もはやこれらの行為は無意味じゃ無いかという葛藤がありました。

消した理由は以下の4点です。
  • 検索エンジン側のアルゴリズムはすぐ変わる
  • しごくまっとうな記事やページはキチンとインディクスされる
  • W3Cが正しいのではなく、中身の内容を評価される
  • ソーシャルメディアからの口コミなどの効果も加味されるようになった

この事から、SEOに対する観点は3年前から比較すると大きく変わり、もはやどの情報にも、それは違うという意見の不一致が多いのも事実です。Googleも「こういう風に作ればいいよ」という情報は出していますが、何をしたらペナルティを課しますという具体的なものは出していません。

とりわけ3点だけ、絶対的なルールがあります。その3点だけ確実に抑えましょう。

1)titleタグに含まれたキーワードが検索される。


titleタグにかかれているキーワードこそが、検索エンジンから検索されるキーワードとなります。
検索サイトでキーワードを入れて検索した場合、必ずそのキーワードがタイトルに含まれているという事実は揺るぎません。(ページの内容の価値が高い場合、まれにキーワードを含まないタイトルが現れる事はあります)
順位を決める基準は、記事の内容や情報と、どれだけ価値のあるサイトからリンクをされているかの2点に注意することです。

2)単純にコピペしてるだけではダメ


Googleのクロールスピードはすさまじいです。
特に更新の多いサイトやブログは、記事を公開してわずか数分で検索結果に出てきます。その為、他の人が作成した文章をそのままコピペしているという行為を、しっかりと見定めています。これはどのユーザーよりも、はるかに正確です。
コピペする事、それ自体が自身の検索エンジンからの訪問を遠ざける結果となるのです。
コピーコンテンツがオリジナルコンテンツより上位表示されるのを防ぐには

3)サイトへのリンクが自身の評価にもつながる


例えばウィルスに感染したサイトへのリンクばかりしていると、その仲間であると判断されます。内容が全くないページへのリンク行為もこれにあたり、ペナルティをくらいます。
逆に言えば、有益なページのリンクはそれだけで価値があると言うことにもつながります。外部とのリンクによる交流をGoogleはしっかり見ているのです。

大事なのは中身です!

目次にもどる

ところでどうしてキーワードが重要なのか


基本的な問題として、どの場面においてもキーワードの重要性が書かれています。
特に、ツール関係はこのキーワードを調べるものが多く、どうしてキーワードを調べる必要があるのかというのを知らなければなりません。

まず「キーワード」とは、検索するユーザーと、こちらが提供するコンテンツをマッチングさせる掛け橋です。
  • 何をしたい時に
  • 何を調べたくて
  • なんと言うキーワードで検索した人に
  • なんの情報を提供するべきか
つまり、これを逆に考える事がキーワードの作成のコツになります。
  • この情報を見て欲しい
  • なんと言うキーワードで検索するか考える
  • 何を調べたい人なのかを考える
  • どんな人なのかを考える
こうして考えだされたキーワードが、きちんと自分のサイト内で識別されているのかと言うのを調べるのが、ツールの果たす役割なのです。

ただし、キーワードの使いすぎはペナルティの対象となり得ます。
もしもランクを向上させたいと考えた場合、関連する情報、話題を提供してみるのが一つの手です。なぜならGoogleは、関連する情報のキーワードを紐付けし、そのページの価値を見ています。
お花の事ばかり書いているサイトで、トイレットペーパーの話を書いても、相手にしてくれないのです。

目次にもどる

マーケティングとSEOツール


Webマーケティングの覚える事はとても多いです。
ただ、マーケティングに関しては既に開かれた情報が多々あります。コトラーや、マッケンナーと言った先駆者が残した書籍などを参考に勉強するのがいいでしょう。

その他でSEOに関連するサービスを利用すると、おおよそのデータを取得して、比較することが可能です。
これらのツールをうまく活用する事で、自身にデータがなくても、ニーズを調べていく事が出来るようになります。

まず検索エンジンの特性も含め、学ぶ面で非常に優れたGoogleの様々なツールがあります。それを、どういうときに活用すればよいのかと言うのをGoogleが提供してくれています。
あらゆるツールの前にここを一読する事を勧めします。

Google for Advertisers
Google for Advertisers
このサイトでは、マーケティングに必要な行動指針と、Googleのツールが掲載されています。
例えばプランニングのページでは、ユーザーの関心を先に調べる。顧客となる可能性の高いウェブ上のユーザーを把握。オンライン コンテンツを利用するユーザーを把握。動画への興味を調べる。市場の変化を把握する。といった、基本的な流れをまず学ぶことが出来るでしょう。
GoogleはそのついでにGoogleが提供するツールへのリンクを紹介されていますが、読むだけでもとても勉強になるかと思います。


201104110003.jpg
SEOチェキ! 無料で使えるSEOツール
SEOチェックツールでは最強だと思っているツールの一つ。
同じ事が出来るサイトは大量にありますが、このサービスの凄いところは無料開放にもかかわらず、検索スピードが体感でわかるほど速い。なにより、サイト自身がインディクスされているキーワードの順位を手軽に調べられるのも魅力です。
  • SEOチェッカーツールの中でも高速
  • サイトのもつキーワードや順位を調べられる
  • Google・Yahoo!の被リンク数・インデックス数を調べれる
  • 被リンク元のページランク・Yahooカテゴリー登録の有無を調べることが出来る



リンクチェッカー
リンクチェッカー(リンク切れチェックツール) dead-link-checker.com
URL一つでサイト内の内部リンクをめぐり、リンク切れを調べてくれる優れもの。5000ページに及ぶサイトも時間はかかるがきちんと調べてくれる。何よりも、古い記事、ページで、定期的に被リンクが発生している場合、それは非常に上位検索され易い状態なのですが、そこにリンク切れがあるか無いかで評価がえらい変わりますので、そういったケースを起こさないようにしてくれる便利ツールなのです。
  • 内部リンク切れを調べる
  • 外部リンク切れを調べる



アナリティクス
Google アナリティクス
もはや誰もが知っているアナリティクス。
アクセス数を単純に見るのではなく、ユーザーから聞き取りにくい声を聞く為に利用します。
  • 訪問者はどのページで離脱したのか調べれる
  • 訪問者はトップページから次にどこへ向かったのか調べれる
  • 訪問者はどのページがお気に入りなのか調べれる



GoogleWebMastertool
ウェブマスター ツール
Googleクローラーの調整や、Google検索で出てくるサイトリンクの調整なども行える唯一のツール。
サイトリンクとは
その他そのサイトをGoogleから見て重要と決めているキーワードや、検索の露出など、様々なものがチェック出来ます。
  • Googleクローラーや、検索結果のサイトリンクの調整可能
  • トップキーワードを調べれる
  • 検索結果へのキーワード露出と、クリック数を調べることが出来る

目次にもどる

知っておきたいWebサービス


個人的にお勧めしたいベスト5です。
このブログを見ている人なら既に知っているようなツールが多いのはご愛嬌です。

Evernote
すべてを記憶する | Evernote Corporation
第一位がこちらかと。
それぞれの使い方はあるにせよ、膨大な情報を記憶し、検索できる。
人間の記憶よりもはるかに正確な情報を大量に保持することが出来るのが魅力。ただし、記憶より出し入れは遅いし、何でもかんでもこれに頼るといつか痛い目に合う可能性も無いとも言いきれ無いので過信は禁物。
特にスマートフォンを利用する事で、いつでもどこでもアクセス可能なのが魅力。
Webサービスですが、ダウンロードしてインストールする事が可能で、ローカルで動かすとすばやく、違和感なく同期出来るためすばらしい。


dropbox
Dropbox - Simplify your life
データファイルの共有と、インストールするとマイドキュメントにフォルダができて、そこにドロップ&ドラッグするだけで共有が完了するお手軽共有サービス。
こちらもスマートフォン対応。他の人とファイルを共有するのにも使え、外部への公開ファイルとしても使える便利な代物です。



Googletasks
GoogleTasks
(リンク先はサービスの説明でサービスそのものではない)
実態は、Gmail、Googleカレンダー、その他ブラウザのアドオン、iPhoneアプリ等にある。あらゆる場面で思いついたら即座にtasksにメモしておくことができ、チェックボタンがついているので完了したらチェックしていけばよい。
Googleアカウントが必要です。


PhotoshopExpress
Photo Editor, Online Photo Editor, Photoshop Express
右上のタブメニューのOnlinetoolから選んで起動。
超簡易的なPhotoshop。場所を選ばず、どこでも開けるのが魅力。
Web制作の時に役に立つかと言うとあんまり役に立たなくて、どちらかと言うとソーシャルなお付き合いが多い現代のブログ、Facebook、ツイッターといったサービスへの投稿に役立つツール。


スクリーンキャプチャでテスター
ブラウザーショット
一度紹介した事がありますが、各種ブラウザを向こうのサーバーでスクリーンショットを取って見せてくれるサービス。

目次にもどる

こんなところでしょうか。
本当はSEOの部分だけで半分以上占める予定でいただけに少しさっぱりしちゃいましたが、何かのお役に立てればと思います。

それでは、また。



スポンサード リンク

トップへ戻る

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

FC2Ad

FC2ブログ





あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html