SEOとSEMの仕組み

挨拶もなしにスタートします。



SEM

SEMとは「Search Engine Marketing(検索エンジンマーケティング)」の略語。

リスティング広告SEOなどの検索エンジンに関するマーケティング施策のすべてを指し、画像検索や動画検索など、あらゆる検索方法に対する施策も含まれます。

 

Youtube動画が検索結果に表示されることも多いため、

テキスト記事だけでなく動画のマーケティング施策も考慮するべきでしょう。

 

SEO

検索エンジンの検索結果画面には「自然検索結果」と「広告枠」の2種類の表示枠があり、一般的なSEMはこの2つの表示枠に対しての施策となる。

 

「自然検索結果」の施策にはSEO、「広告枠」の施策はリスティング広告となる。

 

SEMの一つの手段としてSEOが存在している。

 

SEOは「Search Engine Optimization」の略で、日本語では「検索エンジン最適化」と訳されます。

 

Google検索エンジンアルゴリズムにHPを最適化させ、検索エンジン上で露出を増やすこと。

 

ユーザーファーストを掲げているGoogleは、過去のブラックハットSEOが効かなくなり、ホワイトハットSEOが主流となっている。

 

リスティング広告

検索結果画面の広告枠で、検索キーワードに沿った広告が表示されるので、

検索連動型広告」と呼ばれる。

入札式の広告で、設定キーワード、広告タイトル&文章、金額などの様々な要素を考慮して表示される広告が決定されている。

 

GoogleAdwords、Yahoo!プロモーション広告ともに、ガイドラインを参考にするとよいでしょう。

 

検索上位の仕組みは、基本的に200以上のGoogleアルゴリズム原因によって決められており、Yahoo!GoogleGoogleアルゴリズム原因によって順位が決定されているため、ほぼ同じ順位となる。

 

中でも特に重要な要因を記載します。

 

検索上位のクリック数・クリック率

検索結果1ページ目と2ページ目はクリック率がかなり変わり、

タイトルやメタディスクリプションによってもクリック数は変わります。

 

Googleアルゴリズム

これが検索順位を決定する要因です。

適切にSEO対策することで上位表示の可能性が高まります。

 

アルゴリズムの検索上位のアルゴリズム要因の上位はこちら。

 

1.被リンクドメイン数 

2.発リンク数

3.被リンク数

4.発リンク数(内部)

5.被リンク数(内部)

7.総単語数

8.ユニーク単語数

9.ページランク

10.被リンク数(外部)

11.キーワード出現数

 

つまり、大事なのは、

被リンク数、内部リンク、キーワード出現関連、単語関連

 

被リンク数

Googleアルゴリズムで最も重要な要因です。

あらゆるドメインから被リンクを増やし、被リンクの質を高めながら、検索上位化しやすいサイトにしよう。

 

内部リンク

内部リンクを最適化し、評価されやすいサイトにしましょう。

参照リンクを適切に増やし、サイト内にページ追加しながら、ユーザー・クローラーが回避しやすい際t構造を作ることが大切です。

 

キーワード出現関連

SEOキーワードの出現を最適化し、キーワードに特化したページを作成しましょう。

 

単語数関連

テキスト量を増やすことで、単語数が最適化されるため、「Googleの1ページ目に表示されるコンテンツの平均単語数は、1890語」とされている。

 

Googleガイドライン

これを参考にすることによって、評価されやすくなります。

 

Google検索エンジンスターターガイド

内容としては、SEOの基礎、サイト構造の改善、コンテンツの最適化、クローラーへの対処、モバイルSEO、プロモーションと分析、

 

Google HTML/CSS style Guide

一般的なスタイルルール、一般的な書式ルール、一般的なメタルール、HTMLのスタイルルール、HTMLの書式ルール、CSSスタイルルール、CSSの書式設定ルール、CSSメタルール、が内容です。

 

Googleの方の言及内容

下記のポイントになります。

1.200以上のアルゴリズム要素で決まる。

2.そのキーワードを検索したユーザーに役立つサイト

3.ユーザーの意図に沿った関連性の高いコンテンツ

4.ユーザーにとって有益なサイトをつくること

5.検索エンジン最適化スターターガイドを読むべき

6.ユーザーの行動の変化をヒントにした新しいコンテンツを考える

7.クロールとインデックスの仕組みをしっかり理解する

8.モバイル対応したサイト作成

9.サーチコンソールに登録する

 

ウェブマスター向けガイドライン(品質に関するガイドライン

このガイドラインは、Googleがサイトを認識し、インデックスに登録し、ランク付けをするプロセスをスムーズに行う手助けとなるサイト作成ガイドです。

 

ウェブマスター向けガイドライン(品質に関するガイドライン) - Search Console ヘルプ

 

このガイドラインに準拠しないサイトは、最悪Googleの検索結果から完全に削除される可能性があります。

 

検索結果の品質を評価するためのガイドライン

このガイドラインの内容は、

1.Google検索品質評価ガイドライン

2.日本語訳と対象版について

3.ページ品質評価ガイドライン

4.モバイルユーザーのニーズを理解する

5.ニーズメット評価のガイドライン

6.ガイドラインの概要(順不同)

 

Official Google Webmaster Central Blog: Updating Our Search Quality Rating Guidelines

 

 

他にも、下記も参考になります。

 

オーガニック検索を増やす方法とSEO対策について

Google ウェブマスター向け公式ブログ: 良質なサイトを作るためのアドバイス

 

 

これらの上記に記載している内容は最低限の内容になりますが、

Googleの評価基準に準拠するため、効果的であることは間違いありません。

 

被リンクはなかなか難しいところですが、

内部リンクとキーワードの使い方は、最低限注意をしていきましょう。

 

 

 

 

 

フロントエンド側のトレンド

今回は前回書いた記事とは別で、

フロントエンドのトレンドを記載していきます。

 

1.HTML/CSS

このふたつについては、基本的に説明は不要かと思います。

この2つは難易度もそれ程ではなく、基本的なスキルになります。

 

2.CSS

CSS3は従来のCSSで出来なかった、グラデーション、アニメーション、移動、回転、などができるようになり、動きを付けることが出来るようになってきました。

 

CSS3の広がる可能性!美しいテキストエフェクト用コードスニペット24個まとめ - PhotoshopVIP

 

美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も! | Webクリエイターボックス

 

3.Sass(SCSS)

CSSメタ言語になります。CSSを使いやすく、便利に記述できる。

変数も使えるのは便利です。

 

4.jQuery

JavaScriptのライブラリで、簡単にJsを使えるようになります。

スライドショーやスムーススクロールができる。こちらのほうが、CSS3よりも細かく指定できます。

学習コストはかなり低い部類になります。

 

5.SublimeText

軽快、多機能、豊富なプラグインとテーマ、多言語対応など、非常に便利。

 

6.Emmet

HTML+CSSの速度を鬼上げします。
とにかくタイピングが減る。

Sublime Text 2とEmmetで制作効率アップ!@福岡マークアップ勉強会 | キリンブログ

 

7.gulp

鬼上げの代表格。自動化してくれるタスクランナーです。

例えばファイルを保存したと同時にブラウザを自動リロード、Sassnoコンパイル、画像とCSSを圧縮などを一瞬で行ってくれる。[grunt]と比較されがち。

こちらのほうが処理が少し速い印象を持ちます。

5分で導入! タスクランナーGulpでWeb制作を効率化しよう - ICS MEDIA

 

8.Git

バージョン管理ができる「Git」。学習コストは少し高いものの、

それだけの価値がある。

index.html以降が複数になったときなど、

問題解決にお勧めいたします。

 

 

このあたりはトレンドであって、

これらができればといった話ではありません。

 

Flashがなくなることもあり、

動きのあるサイトへの対応が変わってきています。

前回紹介したシネマグラフや、動画の背景への埋め込み、

ロード時間を考慮したJsでの記載など、選択肢は多岐にわたります。

 

様々なやり方ができてきていますが、

基本的にはロードが短く動きが軽いものを作成するためにも、

ライブラリを有効に活用するべきですね。

 

 

 

 

Web制作の動向とトレンド

こんばんは。
2016年のトレンドのグラフィックデザインのトレンドと展望を書いていきます。

 

まずはデザインのトレンド。

UIやUXデザインはユーザーありきを重視した、

より使いやすいものが主流です。

 

カラーは、淡いピンクとブルーで、

ローズクォーツとセレニティである。

優し色といった感じです。

 

ざっくりと項目をあげると、

・高いユーザビリティ

・レスポンシブデザイン

・アプリを連想させるデザイン

・ナビゲーション

・モジュール形式

・Material Design

・フラットデザイン

・ビジュアル重視

インフォグラフィック

タイポグラフィ

・モダンレトロ

・魅力的なカラー

・グリッドとジオメトリックの図形

・動画とアニメーションgif

 

全体の流れ

1.個人情報漏えい対策

2.スタティックなサイト

 静的サイトは速く、強固、安全、簡単

3.Chroomのシェアが54%を超え、年末には60%の見込み

4.Vivaldiの台頭

5.Safariのシェア低下

6.CSSが「Grid Layput Module」に

7.デザインはモバイリフィケーションに

8.ページ容量の肥大化

 ここ3年で平均して2倍になり、2.2MBを超える

9.WebAssemblyの台頭

10.SEOの終焉とSEMの台頭

 

 

注目テクニック

1.ストーリーテリング

2.セミフラットデザイン

 フラットデザインに少しシャドウを付けて奥行きを与えたり、角丸を使うなど

3.カスタムメイド

4.ユニークなグリッド

 格子状、斜め、z-indexなど

5.シネマグラフ

 下記のような参考

cinemagraph.jp

6.パララックスを使ったアクション

7.遅延ロード

8.中央で分割されたコンテンツ

 最近増えてきたのが、このレイアウト

 

レスポンシブのトレンド

1.ストーリーテリング

2.Less is more

3.デザインのパターン化

4.カード型レイアウト

 レスポンシブと非常に相性が良い

5.隠されたメニュー

6.ヘッダに大きな画像or画像なし

 

 

マーケティング的な視点から

1.デザインの均質化

2.パターン、ページではなく全体を通したUI

3.Webサイトの飽和状態

4.拡大して画像のぼかし

 小さい画像を拡大してガウスブラーでぼかすと、ロードに時間がかかる

5.ローディング状態を表す要素

 サイトのつなぎ目のローディング状態を表すだけでその価値がある

6.いつの時代でも利用できるWebサイト

7.プロリーダー

8.不要なスクロールジャック

9、不要なポップアップ



といったところですね。

ここまで書いてきましたが、

要はユーザビリティを考えたシンプルなものを、

綺麗な短文のコードで書いていくのが良いと思います。

 

しかし、ユーザーのWebサイトに対する認知度は変化しており、

セミフラットデザインが逆に新しく感じたりする可能性もあります。

 

特に、シネマグラフは軽くも煩くなく、

目を引きやすいために活用する頻度増やしたいと思う。

 

今後のトレンドの流れとしては、

ナビゲーションの変化と、タイポグラフィの増加、

シネマグラフやgifなど動く絵も増えると予想する。

 

そのため、いかにファイルサイズを抑えて、

かつその動く絵とリンクなどを別の意味で分かりやすく表示する

そのバランスが重要と考えている。

 

 

 

 

 

 

各プログラミング言語の特徴

こんにちは。

少し時間が空きましたが、

今回はプログラミングの主な9言語をご紹介します。

簡易的な判断で個人の偏見満載です。

 

1.Java

何でもできる言語といった感じです。自作ゲーム、ツール、Webページ、Webアプリにandroidアプリまで作れて、エミュレーターや実機すぐに動作確認ができるので、感覚で理解できる。

 

オブジェクト指向と呼べる技術の代表であり、汎用性が高い上に、

歴史が長いために調べると大体のことがわかる。

 

宣言の縛りがそれなりになるため、

PHPRuby等には自由度で劣る。

 

2.PHP

簡単なWebページからブラウザゲームまで幅広く作成可能で、開発に要する時間が比較的短い為にWeb系サービス開発に向いている。メディア、EC,ソーシャルゲームのバックグラウンド問わず、様々なサイトが開発できる。データベースやAPIとの連携、cookieへのアクセス駆使することで幅広いコンテンツやWebシステムの作成が出来るうえ、Javascriot等の言語を併用できるので、動きのあるリッチなコンテンツやwebページに仕上げられる。

動的なウェブコンテンツを含むウェブサイトの構築に適した、オープンソースのシフトウェア群である「LAMP」の「P」である。

 

Wordpressなど、全てオープンソースであり、無料で使えるワンセット言語担当として普及。CakePHPやZendFramework、FuelPHPSymfonyなど、フレームワークが多いのが魅力で、ライブラリも豊富。

 

CGIよりは速いが、基本的には呼ばれて動くので処理は速くはない。

Web系の開発に強いが、それ以外で使用されないために汎用性が低い。

 

一般的に広く浸透している為、学習はしやすい。

 

ルールが比較的少なく、型の宣言が少ないコード量で書けるために覚えやすい。

勉強を始めたばかりでも比較的すぐにHPの作成が出来る。

 

ある程度直観的に動作を進めることができ、

実際にコードを書いて実装する感覚が他言語に比べて容易である。

 

しかし、ここからスタートすると、CやJavaは型がしっかりしている言語は難しく感じるかもしれません。

 

しかし、XAMPPなど、ローカル環境開発が簡単に構築できる。

 

3.JavaScript

オブジェクト指向型、関数型、命令型へのプログラミングへの対応が可能。ブラウザ側で動作する言語で、Webサービスで高機能な画面動作の実現に必須。Unityというゲームエンジン上で開発も出来る。HTMLに様々な動きや機能をあたえられる。開発環境なしに、テキストエディタを使ってプログラミングできる点もうれしい。3DCGのレンダリングもできる。

 

Web開発において幅広く利用されている。

サーバーサイドでの利用もでき、バックエンド、フロントエンド両方が実現可能であり、Unityでの開発にも用いられる。

 

ライブラリもjQueryやnode.js、Angular JSなどのフレームワークがあり、実装も簡単になってきた。

 

ただ、ブラウザによって動作に差が出ることがあるので、動作確認やプログラミング自由度の高さ故の不具合がある。

 

同じスクリプト言語PHPtp記述形式が似ているため、合わせて学習するとよい。

 

ライブラリの存在は大きく、HTML、PHPなどのフロントエンド側とセットで覚えて、マークアップエンジニアや、フロントエンジニアになれる。

 

4.Ruby

簡単なWebサービスから大規模なものまで開発でき、Twitterクックパッド、自治体業務システムも運用している。手早くかけてすぐ動かせるためにバグ対応やコーディングのサイクルが早い。組み込みのクラスライブラリが高性能であり、重要でないところは自分でしなくてよい。

 

柔軟性が高く、文法に縛られない。

インタリプタ言語なので、実行速度が遅くなるが、その差は比較的少ない。

 

短文で多くの機能が実行できるので、

シンプルで美しい文法は解析がスピーディーで保守性も高い。

 

テキスト処理が強力であり、システム管理系において効果的。

 

チームで開発する際は、

ルールを決めて記述しないと処理がかみ合わなくなる。

 

5.C#

パソコン、サーバー用プログラムによく利用されているうえ、ゲーム、アプリ開発などにも幅広く使用されている。企業向けの業務システムで利用されることも多い。最近はやりのUnityはこれで記述もできるので、個人でゲーム作成が出来る。

 

C言語を拡張してC++なら、C#C言語の名を冠したJavaである。Javaと文法が似ている。

.NET環境で主に利用されている言語である。

C++で問題となったメモリ管理の問題が解決されている点が魅力。

ただ、Windows環境でのみ利用が可能という制限付き。

 

Visual Studioを使うとかなりのサポートが受けられる。

 

6.C++

C言語の拡張言語で、C言語で出来ることはC++でも出来る。

コンシューマーゲームから生産性ソフトウェア、ロボット工学から電化製品まで組み込みシステムも手広く開発できる。

基本的にC言語と同じ作法のため、大抵の言語で通用する。

夢のような機能を実装できるが、膨大な知識と時間が必要。

コンパイルすることで機械語に翻訳されるため処理は非常に速く。プログラムでパソコンを制御することを学ぶには適している。

Cよりも少ないが、コード量は多い。

メモリ管理など複雑な処理が必要で、コンパイルが必要。

C++と一括りにされているが、開発環境とOSに合わせて種類が多く、

環境に依存するためOSが変わるとソースコードの大改修が必要。

 

7.Objective-C

iOSアプリ開発のための言語。実機を所持ししていれば実装を進められる。

C言語で記述されたものを制御しやすくしたもの。ソース自体はC言語の上位互換的なもの。

 

8.Python

海外のWebサービスは幅広く使用されている。Webアプリケーション、デスクトップアプリケーションなどの開発が可能。システム用のスクリプト、各種自動処理、理工学・統計開発ツールとしても使用可能。

C、C++とも仲が良く、何でもそれなりにできる。C言語C++のライブラリも利用可能。Rubyのライバル的存在。

データ解析や自然言語の解析などの数字を扱うことを得意としており、分析を任せやすい。

 

少ないコード量で簡潔に記述が出来、読みやすく書きやすいと言われる。

 

生産性、保守性が高く、海外では頻繁に利用され、最近は急速に伸びている。

Googleでも使用されているとのうわさ。

日本には余り馴染みがない。

 

 

9.C

OSの開発に役立つ。機会に近い言語であり、ハードウェアに近い部分を触れる。

汎用性が高く、非常に多くの分野で採用されている。

様々な言語の元になっており、元祖プログラミング言語

 

ここで学んだ言語は、大体使用できます。

C++でも使用できるため、非常に便利だ。


C言語は記述通りに動く。

つまり、全てコーディングしないといけない為、

プログラマーに大きく依存する。

C++同様にプログラムでパソコンを制御することを学ぶのに適している。

環境に依存する。




とまあ、書いてきましたが、

これはかなりこのサイトを参考にしています。

www.geekjob.jp


これを書くだけで疲れたのに、

この記事を書いた人にリスペクトの意を。



これから言語を学ぶ人に、

少しでも参考になったなら。

 

 

サービスについて~後半は単なるメモ風味を添えて~

最近では当社はWeb制作会社として少しづつ認知されるようになってきました。

 

ですが、当初から思い描き、

力を入れていきたいのは自社サービスになります。

 

まず自社で生きていける力を受託でつけていき、

そこから自社のサービスに投資していくという形式をとっています。

 

その中で、自社サービスについて、

当社でも幾つも題材を挙げてきましたが、

今一つこれといったものが出てこない時期が続いていました。

 

そこで、今はざっくりとこんなアイデアはどうだろうと

思えるアイデアを明文化していきながら、

加えて当社の理念についても明文化しようと思います。

 

とにかくそのためには、サービスというものを、

大きくまず3つに分けて見ましょう。

1.モノ提供 (有形物)

2.情報提供 (無形物)

3.快適提供 (基本的に無形物でのサービス中心)

 

そして、これらについても、消費者側から、買い手が必要とするものを提供するマーケットインなのか、提供側からの商品開発・生産・販売を行うプロダクトアウトなのかによっても分類できます。

 

前回、メディアについても触れましが、

メディアは情報提供に分類できますね。


さて、私としては作成しようと思うのは

自社メディアで考えているところです。

 

例えば、

 ・日本のことについてもっと知るサービス

ex.日本史メディア

日本人がもっと日本を好きになるメディア

日本人がもっと日本のことをしるメディア

 

・ノンプログラマーがIT知識を身に着けるサービス

ex.共通言語生成メディア
プログラミングに関する浅めの知識を学べるメディア

PCに関する広い知識をつけて、プログラマーと共通言語を持つ

プログラマーとノンプログラマーの架け橋サービス

 

・ ノンデザイナーが最低限気を付ける内容がわかるサービス

ex.デザイン赤ペン先生

自分のデザインを修正してくれるサービス

 

・就活未経験者が気を付けるべき事特化型メディア

ex.就活メディア

やるべきことの指標になるサービス

 

・女子就活性に特化したサービス

ex.リクルート女子に送る必要なもの

就活女子が抑えるべきポイントを知れるサービス

 

・綺麗、美しい、に特化したメディア

ex.心まで綺麗になるメディア

綺麗なもの、 美しいものをただただ見るサービス

 

 

目指す方向によって、出るサービス、やるサービスが変わる。

・文化継承

・便利

・楽しい

・面白い

・笑顔

・知的欲求の充足

 

など、少しまとまりがなくなりましたが、

今回はこんな感じで。

 

 

webメディア

はい。こんばんは。

 

今回は頭の中の整理をしながら、

Webメディアについて勉強していきます。

 

まずは一次メディア、二次メディアと二つに分かれますね。

一次メディアは、自らでのその記事を作成していくもので、

最も形式としては一般的なものです。

 

こちらは、オリジナル記事、寄稿記事、転載記事が大枠としてあり、

取り扱うジャンルが媒体によって違うということです。

 

二次メディアは、一次メディアで書かれた内容を諸条件に基づいて配信しているメディアであり、ポータルメディアや、キュレーションメディアもこちらに分類されます。

 

さて、企業が自社でメディアを所有している場合、それを「オウンドメディア」といった言い方をし、沢山のPVと広告収入を目的とする一般のメディアとは一線を画します。

 

このメディアでは、「企業とユーザーとの関係構築」を主たる目的として、企業のファンづくりを行っていきます。

 

さて、最後に紹介するのが、「消費者生成メディアCGM)」という、一般ピーポーが気軽に記事を更新、公開できるメディアとなります。

基本的に個人が記事を作成して公開できるものです。

 

ここは個人的に重要ポイントなので、

少し分類分けして書きます。

 

・口コミサイト(食べログ

ナレッジコミュニティOKwave)

SNSFacebook)

・動画共有サービス(Youtube)

・イラスト投稿サービス(pixiv)

・ブログポータル(アメーバ)

・BBS(2ちゃんねる

 

となります。

今回は、かなり他社さんのサイトで勉強させていただきました。

LIGさんという超凄い会社さんのブログです。

 

便利な時代ですね。

 

こうしてみると、

SNSyoutube食べログなどの有名なサービスも

メディアに位置付けられ、そこから転載されて、

二次メディアに掲載されたりするんですね。

 

そうなると、一般の人が書いた記事が、

プロの記事を押して世間に出ることもあります。

 

それはもう都合よくメディアの思うつぼな訳で、

得た情報を鵜呑みにするのではなく、

その情報の取捨選択を自分でできる様になる事が、

今の時代には必要なことになります。

 

メディアを見るときは、

心を冷静にして、離れて見ましょう。

 

 

当方のこれまでの経緯とコンテンツについて

どうも皆さま。

少しずつですが、記事を書き始めた摂津の赤牛でございます。

 

最近は台風の影響で少し気候が荒れているせいか、

真夏に比べて、周囲の人の表情も少し暗く映る今日この頃。

 

さて、簡単にこのブログを書くに至った経緯と、

現職についてお話しをしていきます。

 

私は現在、Webディレクター兼デザイナーとして、

Web関連の会社を経営しております。

 

悲しいかな、経歴は以上です。笑

目下幾つかサービスの作成を検討している所なんですねーこれが。

 

でありますが、この会社を始めたのも僅か半年ばかり前、

一歩ずつ何とか、脇道に沢山それて、うさぎとかめに例えるならば、

うさぎさんの性格のかめさんのように牛歩で進んできました。

 

元々がWeb関連の人間ではないので、

専門性が高くなかったために、大変に勉強することが多く、

文句を言い出したら京セラドーム何個分になるんだ、、、、

作りあがっていく時、完成品を見たときの感動があるがゆえに、

有り難いことに、苦し楽しくやれてはいます。

 

とまあ、ですが、

世界に出ていく仕事がしたい、クリエイティブな仕事がしたいとは

以前から思っており、そこに私の野望(やりたいこと)を混ぜ合わせた形で、

起業するに至り、紹介からまずはじっくり成果を積み重ねております。

 

メンバーは私とエンジニアだけでスタートしましたが、

助けてくださる沢山の方々のお陰で、少しづつ範囲を広げている所です。

 

その中で、SEOアドセンス、クリック単価について

諸々勉強していく上では、自分でやるべきだろうと、

こうしてブログを書いている訳であります。

 

こういったブログを書く際も、

ユーザーが何を求めているかを意識しながら書くために、

まずは自分で一度書いて効果検証していきます。

 

私の苦手な、継続を心がけていきましょう。