宮崎のホームページ制作会社Tedinc | ホームページ制作

menu 0982-60-1084

TEDINC OFFICIAL BLOG

こんにちわTedincの林田です。
今回は自分が技術向上の為に非常に勉強しやすく役だったサイトがあったのでご紹介します。

今回自分はjQueryを自分で自由に実装していと考え行き着いたサイトなので、下記の流れので説明していきます。

メニュー
1,jQueryについて&できる事&使用方法
2,簡単に実装させたい
3,【Progate】:自分でjQueryをカスタマイズする方法を学ぶ



1,jQueryについて&できる事&使用方法


jQueryについて

jquery
jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。
参照
https://ja.wikipedia.org/wiki/JQuery

jQueryでできる事

サイトに個性がある動きなどが表現できます。(スライダー、ナビ、ページスクロールetc…)

参考記事一覧
少しのコードで実装可能な20のjQuery小技集
jQueryでできること
jQueryプラグインまとめ集

使用方法

1,ベーシックな方法

https://jquery.com/からjQueryをダウンロードし、サイトに設置します。

headやfooterなどにようにして下記のように記載して、完了でこれでjqueryが使用できるようになります」。


2,もっと簡単方法(google ajax apiを使う)

「jquery/1/jquery~」この数字はバージョン1の最新版のjQueryを取得するという意味です。(細かい指定もちろん行えます )

JavaScriptのコードを書いていく

JavaScriptのコードを下記の 【// ここにコードを書いていく。】に書いていきます。




2,簡単に実装させたい

これは簡単な説明となります。

下記のイラストを参考にしてくださいしてください。

パソコンの前で腹に息を溜め、叫びます
・・・・・・・・・3
・・・・・・・2
・・・・1
google

・・・・

・・・・

・・・・

注意点(本当に叫んでしまった場合)

1、アパート住まいの方は隣近所の人と亀裂が入ります。
2、実家住まいの方は両親が食卓の時涙目で、「辛いことがあったら言ってね」と言われます。
3、彼女と同棲中の方は、「私がこの人守らなきゃ・・・・・」と彼女に不思議な責任感が生まれます。

・・・・

・・・・

・・・・


冗談はさておき

googleで主観的な表現の検索でも良いので、検索してください。

例えば:

jqueryで滑らかなページ遷移
と検索すると

google2

約 8,990 件も出てきます。

その中から自分が実装したい物と同じような物を探して、記事どうりに行えばイメージしたとおりのフェクトがサイトに実装できます。


3,自分でjQueryをカスタマイズする方法を学ぶ


1,コピペではなく自分でコードを書く

前述した【2,簡単に実装させたい】のように、しっかり覚えなくても実装はできますが、制作するサイトに「オリジナリティ」を少しでも表現したい場合はやはり、自分の想像通りのエフェクトを制作しなければなりません。

「よし、しっかりと頑張ろう!!!!」と思った人にオススメのサイトを紹介します。

progate

サイト名:Progate

内容:WEBの知識を効率よく学習できます。
【HTML&CSS】・【JavaScript】・【jQuery】・【Ruby】・【Ruby on Rails】・【PHP】・【Java】・【Pyton】・【Swift】

上記の内容のカリキュラムが初心者向けで設定されており、プログラムなど構築しながら勉強できるので、非常にわかりやすく技術も身につきます。



まとめ

この仕事をしていて、自分で技術力が上がったと感じるときは、

「問題が発生した時に、自分自信で調べて解決できた時こそ技術が身につく」

と自分は感じており、【Progate】はその観点で技術が身につくのも早いのと思い紹介いたしました。

もちろん色々紹介されているプラグインはレスポンシブなどの観点でも優秀ですので、プラグインと併用しながら自分なりのカスタマイズを行っていくとより良いものができると思います。

opg

こんにちは。Tedincの林田です。

今回はOGPタグについて解説していきます。

項目一覧

1,OGPとは?

2,WordPressの場合

3,OGP設定項目

4,og:imageのサイズ

5,OGPチェック方法

6,fb:app_idの設定




1,OGPとは?

”OGPはもともと、Facebookが策定した物で、FacebookやmixiなどのSNSでシェアされたときに、そのページのタイトル・URL・概要・画像を正しく伝えるためのもです。
方法はHTMLのmetaタグに記述します。”




2,Wordpressの場合

WordPressはプラグインを使えば、OGP簡単に出力されます。例:JetpackやALL in One SEOなど
備考:Jetpackのパブリックサイズ共有の自動で出力されるOGPは不評なのですが、アイキャッチや抜粋などをしっかりと記述すればちゃんと表示してくれます。




3,OGP設定項目

TEDINCで行なっているOGP設定を参考に下記に項目を記載します。




4,og:imageのサイズ

og:imageのサイズ

”1200 x 630 px 以上推奨”

”最低でも 600 x 315 px”

また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。

参考記事
OGP画像シミュレータ
OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法




5、OGPチェック方法はFacebookデバッガーの使用する


1,Facebookデバッガーにアクセスします。

2,URLを入力しOGPを確認

fb_db


3,エラー項目が表時されるので、修正

fb_db_2




6,fb:app_idの設定

エラーが出てしまったので、エラー項目をチェックします。

”Share App ID Missing
The ‘fb:app_id’ property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.”

fb:app_idがないので設定して下さいといっています。設定すればニュースフィードで高いクリック率がだせるとの事なので設定していきます。

app_idの取得方法

1、Facebookにログインした状態で、Facebook開発者アプリにアクセス
2,新規アプリケーションを作成

3、Facebookのニュースフィードを設置する場合は手順に沿ってサイトに反映します。

今回はとりあえずOGPのエラーを解除するためにapp IDを確認します。(写真の1でスキップもできます。)

fb_db_3


4、取得したIDを記載しサイトに反映




5,先程のまで出ていたエラーが消えました。
注意:サイトのキャッシュなどを一度削除し、下記記写真のScrape Againをクッリクして下さい。

fb_db_4





いかがでしょうか、とりあえずこれでOGPの設定は完璧だとおもわれます。参考にしてみてください。

まえがき
私はTedincという自分の会社が、どうすればお客様に有意義なWebサービスやWebサイト、ホームページなどを提供できるかを検討する為、様々なジャンルの方々にヒアリングを行いました。
その中で、「予算があまりないんだけど、結果出せるホームページを作りたい」
という思いの中小企業やサービス業を行ってる方々の話を沢山聞きました。
では、実際どうすれば少ない予算でも結果が出せるWebサイトを作れるのかをプロとして記事にしようと思いました。
この記事は今からホームページを作ろう、または頼もうと考えている方々に向けて作成しました。長い文章ではありますが読んで頂けたら幸いです。


1,現在のホームページやWebに対する認識自体が間違っていませんか?


「ホームページは作らないといけない」

この記事をここまで読んでくれている方はきっとそうお考えのはずです。では次の質問です。

あなたがホームページを作ろうと思ったのはなぜですか?

この質問をすると、

「みんな作っているから」

「無いよりはあったほうが良い」

とおっしゃるクライアントに度々出会う事がありますが、ホームページの位置づけは現在変わっており、

企業の詳細を載せるだけの媒体ではなく、新規客を獲得し続ける事ができる媒体に変貌

を遂げています。

その、一番の理由と根拠は

現在では、検索された項目に対して、適切なコンテンツを表示しているホームページやWebサイトをGoogleが診断し、上位に表示されるようになっています。

参照元:ホームページなどのSEOはどのように評価されるのか?

一言・アドバイス

ホームページは作りさえすれば誰かに見て貰えるといったものではありません。安易な考えやプランで制作進めてしまうと意味の無いものができたり、制作に費やした時間や費用を捨ててしまう事になります。



2,ホームページは作ったけど全然効果がなかったお客様の傾向


「以前にホームページを作ったが、お客さんが誰も見ていなかった。」このような声もヒアリング時沢山あがりました。

では、このような方に私はこう質問します。

「制作者と綿密な打ち合わせを行い、Webマーケティングのすり合わせを行いましたか?」
「SEO(検索順位)のキーワードはどのようなキーワードで、何位でしたか?」
「ホームページは更新できる物でしたか?」

いかがですか?どれかあてはまるものはありませんか?
上の3つの項目は最低限クリアしなけれならない項目です。1つでもおこったっていればお客様に見られるホームページは出来上がりません。

一言・アドバイス

上記の項目を怠たってしまうクライアントの傾向に
「知りあいの作れる人に頼んだ」
「一番安く作ってくれる制作会社を選んだ。」
方々が多い傾向にあります。
ホームページを無料や格安で作れる事は大変魅力的です。しかし、無料で作れたとしも結果がでないホームページはお金はかからなかったにせよ、制作にたづさわった時間を無駄に捨てることになるのです。つまり、どんなに格安で出来たり無料で制作できたとしても上記の項目は最低限クリアしなければなりません。


3,ホームページは見込み客を獲得しやすい物に激変した!その理由とは?(消費者の購入までの流れ・心理から紐解く)


世の中にはWebの中でお客様を集客する事に成功した方々も沢山いらっしゃいます。

成功したお客様のストーリーを例に

現在のホームページは見込み客を獲得しやすい物に激変した理由を書いていきます。

マンゴーを愛した人々はこうしてつながる・・・・



(「私」は宮崎のマンゴー販売業者で「太郎さん」という消費者がマンゴーを買うまでのストーリーです。)

「私」はマンゴーをWebからも販売したいと考えており、発注した制作会社の勧めでネットショップを立ち上げマンゴーに関するブログを書き、サイトを更新を行っていました。
その努力が実り、「おいしいマンゴー」をGoogleで検索すると私のサイトは2番目に表示されるようになりました。

それから数日後のある日、関東地方に住んでいる「太郎さん」は友達に勧められマンゴーはじめて口にし、マンゴーが大好きになりマンゴーファンになりました。


そしてどれが一番「おいしいマンゴー」かをWebで検索しました。

「太郎さん」は「私」のネットショップを見て、またマンゴーが食べたくなり私のネットショップでマンゴーを購入してくれました。

PS:

「太郎さん」ありがとう・・・・ 

そして・・・・

ありがとう・・・・

マンゴー・・・・fin

ここで着眼してほしい点は太郎さんの動きの中の
「それから数日後のある日、関東地方に住んでいる「太郎さん」は友達に勧められマンゴーはじめて口にし、マンゴーが大好きになりマンゴーファンになりました。」の中のある日の部分です。

ユーザー心理から消費者の心理に変わるタイミングはいつなのか、または何処のどんな人なのかはまでは明確に予想しきれません。

しかし現代社会において断言できる事があります。それは、

太郎さんの例のように、人々が消費者心理に変わった時に使う物は、パソコンや携帯などを使ったネット検索という事です。

つまり、
検索をしてくれる時点から「太郎さん」は「私」にとっての「見込み客」になっています。
これこそがWebサイトが見込み客を獲得しやすい理由であり


「Webサイトやホームページは24時間働き続ける営業マン」

と言われる所以です。
Web検索が発達したことにより、検索してサイトを訪問してくれるユーザーが見込み客の比率は現在ぐんと上がっています。

一言・アドバイス

SEO、コンセプト、運営の全てが揃ったホームページだけが新規のお客様を獲得できるサイトになり得るのです。そして現在のGoogleが定めるSEOでWebサイトが上位に現れる為に最も必要な事は、検索キーワードに対して一番良質なコンテンツ(中身)のものが上位にいくようなっています。つまり
見込み客になりえるユーザーが検索しそうなキーワードを選び、
良質なコンテンツを書くことによりホームページやWebサイトは見込み客を獲得し続けるサイトになるということです。



4,ホームページやWeb制作会社選びを失敗しない為の見るべきポイントなど


ここまでこの記事を読んでくれて頂き嬉しいです。
しかしここまでを見てあなたは
「予算を抑える事について書かれてないじゃないか」と
思ったかもしれません。(むしろ少し怒っているかもしれません)
大丈夫です。今までの項目はどちらかと言えば「効果が高いホームページ」についての話です。
しかし、「効果が高いホームページ」とはどのような物かを理解していなければ予算を抑える事もできないのです。
このブロックでは制作会社の選び方はどのように選ぶのが正しいかを解説していきます。

1,自分自身がWebサイトを作る一番の目的ハッキリ認識した上で探す。

2,Webに対する知識を頭に入れて探す。

3,真剣にあなたの仕事のお手伝いをしてくれる制作会社を探す。

4,自分の会社や仕事のコンセプトに一番あっていそうな制作会社を探し続ける。

5,その会社の制作事例をよく見る。

6,気にいった会社のWebサイトは隅々まで見る

上記に記載した1,2の項目は「予算を抑えて効果のあるホームページを作成する」為に特に重要なので説明していきます。

(「当たり前だろこんな事!!」と思った方!実は制作を頼むクライアントが意外に見落としがちな項目なんです。)


1,自分自身がWebサイトを作る一番の目的ハッキリ認識した上で探す。について


無数にある制作会社中で、様々な物を見ると(デザインの違い、料金形態の違いなど)
いつの間にか最初の目的を忘れてしまい探すのが面倒になり自分の考えにそぐわない制作会社に受注してしまう
といった経験のある方も沢山見受けられます。
なんでもそうですが
選択肢が無数にある中で何かを選ぶ時はしっかりとした目的持ち、その目的を忘れなければ自ずと選択肢は限らていきます。 
また制作側からしても、ハッキリとした目的のあるクライアントには、必要な物の提案もしやすく、制作や運営を頼まれた後も連携がスムーズに行う事ができます。

一言・アドバイス

ホームページやWebサイトで何がしたいのか、何が目的なのかををハッキリと決め、予め予算や期間の設定などを行えば自分の必要とする制作会社はだけが間違いなく抽出されていきます。


Webに対する知識を頭に入れて探す。について


Web制作会社を選ぶ時に限らず、いいもの(より良い物)を選ぶにはその物についての最低限の知識は必要です。
「私」を例にした仮説を読んで見てください。
(「私」をこの記事を読んでくれているあなた自身に置き換えるとわかりやすいです。)

私はある日まったく知らない日本刀を5本並べられ、
「君、この中から一番素晴らしい日本刀を1本選んでごらん」
と言われました。

私は心の中でこう思います。

・・・・

・・・

・・
わかるわけがない・・・

だって

「私」は

日本刀について何も知らない



(先にもしこの記事を読んでいるあなたが、日本刀マニアの方でしたらすいません。)

上の例はWebに対しても言える事なのです。
つまり、
日本刀を何も知らない「私」が1番素晴らしい日本刀を選べないと同様
Webに対して何の知識を持たない人が感覚だけで
良い制作会社も選べるはずはないのです。

一言・アドバイス

自分にあった制作会社を探すのは大変ですが、決して感覚で選んではいけません。
Webに対する知識や情報を取り込んでから制作会社を選定しましょう。



5,クライアント(Web担当やWebに関する主権者)はどのようなWeb知識を頭に入れるべきか



では具体的にどのうような知識を取り入れて、制作会社選定を行えばいいのか下記に項目をまとめました。

・SEOの仕組み
・コンテンツ(ホームページやWebサイトの中身)のあり方
・ライティング(文章力)の重要性
・モバイルの傾向
・現在の主流のWebマーケティング方法

上記の項目はWebサイトやホームページが目的を達成する為には全てが必要不可欠な項目です。

実際にどのように運営や対策を行っていくかはプロが提案する方法で行っていけば間違いありません。
しかしクライアント側にWeb知識がないと、前述したように、まったく約に立たないサイトが完成したり、無駄に費用がかかったりしてしまいます。
限られた予算の中で最善の結果を出さなければならない中小企業の方々などはこれらの項目を抑え知識を取りいれておけば、少ない予算でもより良いサイトの発注を行う事ができます。

一言・コメント

Webの知識はWebの中から勉強できます。現在のホームページ会社のほとんどは無料で情報を提供しています。上記の項目で検索してみると様々な内容の記事がでてきます。有益な情報(コンテンツ)を掲載する事が検索キーワードで上位に掲載する1番の方法だからです。


予算を抑えて結果の出せるホームページやWebサイトを制作するには(総括)


最後まで読んで頂き本当にありがとうございます。

この記事を内容を理解して頂けたら間違いなく
「予算を抑えて結果の出せるホームページやWebサイトを制作」
を行う事ができます。

最後に

「予算を抑えて結果の出せるホームページやWebサイトを制作する」には、
制作業者と友好的なパートナーシップを気付き、クライアント自身もWebに対する知識を深める事で自ずとコスト削減に大きくつながっていきます。
ホームページの制作会社はホームページ売る会社ではなく、ホームページ早く作れるノウハウと、集客に繋がる運営方法のノウハウを提供してクライアントから料金を頂く仕事です。
Webサイトやホームページの見た目ではなく、中身(コンテンツ)やゴール(サイトの目的)の設定がしっかり出来てこそ「予算を抑えて結果の出せるホームページやWebサイトを制作する」事ができるのです。

 

今日はロゴ作成の時、参考にしているロゴデザインギャラリーサイトの紹介です。

ロゴはWebサイト、ホームページ制作のキモとなる部分です。

インスピレーションが刺激するロゴは勉強になります。参考にして下さい。

 


logogallery(とりあえずロゴを沢山見たい時にオススメ)


 

logogallery

 

URL:http://www.logogallery.net/

コメント:

Logoが全て正方形で型取られ非常に見やすいサイトです。

サムネイルをクリックすれば、デザイナーとUrlの情報が載っています。

沢山のLogoを一気に見たい時にはオススメです。

 


Logo pond(自分好みのロゴを探す時にオススメ)


 

logopond

 

URL:http://logopond.com/

コメント:

こちらも有名なロゴギャラリーサイトです。

Logo pondの特徴はサムネイルをクリックすると使われている色や、似た色の配色のものが下に一覧で表示されます。

イメージ頭にぼんやりあり、自分がイメージしているロゴデザインをさがしたい時はオススメです。

 


LOGOGALA(色は決まっているけどデザインに悩んだ時にオススメ)


 

logogala

 

URL:http://www.logogala.com/

コメント:

LOGOGALAの特徴は右のサイドバーに14種類のパレットがあり、色を抽出して一覧を表示してくれます。

色は決まっていて、デザインに悩んでいるときなどはオススメ。

 


Logo of the day(ロゴと合わせてWebサイトも見たい時にオススメ)


 

LogoOfTheDay

 

URL:http://logooftheday.com/

コメント:

気にいったロゴがどんなサイトかを見たい時には便利なフォトギャラリー。

サムネイルをクリックすると、そのままLogoをしようしているサイトに移行します。

 


LOGOMOOSE(ロゴデザイナー探しや、購入にオススメ)


 

logomoose

 

URL:http://www.logomoose.com/

コメント:

参考にしたいデザイナーや、購入したい場合に有効なLOGOMOOOSEは様々なユーザーが登録して

自分がデザインしたものなど投稿しているサイトです。

 

 


logo stock(ロゴコンセプトの勉強にオススメ)


 

LOGOSTOCK

 

URL:http://logostock.jp/

コメント:

logo stockは日本語でロゴコンセプトを説明してくれ、わかりやすいサイトです。

運営されている人の努力が伺えます。

デザイナーがLogoにどのような思いを注入して作ったかを知るのに勉強なります。

 


まとめ


 

ロゴは企業やWebサイト、ホームページを表す象徴です。

沢山いいものをインプットして、いざ自分でデザインする(アウトプット)時に約立ちます。

ぜひ参考にしてみて下さい。

 

pankuzu

今回はWordPressパンくずリストを設置する方法です。

なぜパンくずリストをつけた方がいいのか?


”パンくずリストがあるとクロウラーが現在サイト内のどの階層にいるのかを認識できるようになる。その結果、クロウラーの回遊率が上がる”

抜粋(バズ部)

SEO内部対策で行うべき20の事

バス部の記事はホームページの運営やSEOに役立つ情報でいつも勉強させてもらっています。

参考までに

URLバズ部


今回はプラグインではなくfunction.phpに記述し簡単に設置する方法です。

1:function.php記述するコード


2:single.php、page.php、archive.php、category.php、tag.phpに記載用

出力したい場所に以下のコードを記述します。

 


3:出力を確認し、見た目をCSSで変えて完成

出力されたのが確認出来たら、CSSで見た目を調整すれば完成です。

デザインのテンプレートは様々な物がありますが、今回は以前紹介したBootstrapのテンプレートを集めたサイトを紹介します。

今回は無料のテンプレートを中心に有料でも安価なテンプレートを紹介しています。

ダウンロードも簡単です。

Bootstarpとは?

Bootstrapは、マルチデバイスに対応したレスポンシブWebサイトを簡単に構築するための

「CSSフレームワーク」

です。

過去記事:Bootstrapをしっかり理解したい為の記事

 


startbootstrap


 

 

startbootstrap

 

URLhttp://startbootstrap.com/

コメント

ダウンロードまでが簡単で、登録などなく、そのままダウンロードして使えます。シンプルな英語でタイトルがつけられているので、用途に合わせたサイトを簡単選べます。

Preview & Downloadから気に入ったテンプレートページに飛んでダウンロードをクリックすればOK。

 

 


shapebootstrap


 

shapebootstrap

 

URL:https://shapebootstrap.net/

コメント

こちらは有料な物もありますが、無料もあります。

無料テンプレートURL:https://shapebootstrap.net/free-templates

有料の物でも$15~なのでめちゃくちゃお安いです。無料のテンプレートは登録など何もなしで簡単にダウンロードできます。

サイトのクオリティが高くスライダー、パララックスもそのまま無料で使える優れ物もあります。

 


wrapbootstrap(有料 $4〜)


 

wrapbootstrap

 

URLhttps://wrapbootstrap.com/

コメント

こちらは有料になりますが、$4〜で一番高くても$30くらいです。(ちなみに$30はかなり作りこまれているサイトで、日本円で約3500円くらいです。)

少しお金をを出しもいいからという人にはオススメです。

 


まとめ


 

いかがでしたか? 以前の記事でもBootstrapをオススメした理由を書きましたが、

Bootstrapは、マルチデバイスに対応したレスポンシブWebサイトを簡単に構築するための「CSSフレームワーク」

です。

Webサイトに一番必要なものは、コンテンツや機能性です。つまり一番時間をかけなければいけない項目でもあります。

Bootstrapを使えば、Webサイト構築(デザイン・レスポンシブなど)の時間が短縮され、より中身(コンテンツ)にこだわったサイト制作できます。

そして、様々なサイトで提供されているテンプレートを使えば簡単にカッコよく機能性の高いサイト制作ができるであろうと思い紹介しました。

よければ参考にしてください。

WebマーケティングやSEOでは常に新しいやり方、正しいマーケティングの方法論、SEO対策など沢山の書籍や記事があります。

しかし、その中にしっかりと頭に入っていない用語が含まれると説明の途中で理解が出来ない状況に陥いります。

今回はマーケティング(主にWebマーケティング)によく出てくる用語の意味と解説を記載していきます。

 

PV( Page View-ページビュウ)

サイトでページが 1 回表示されるごとにカウントされます。

サイトのどこかのページに訪問者が来た時PVは+1となります。

その訪問者がそのページから違うページに移動した時はPVは+2となります。

 

セッション数

サイトにユーザーが 1 回訪問されるごとにカウントされます。

訪問者がサイトに来た時セッション数は+1となります。

その訪問者がサイトから離脱しサイトに再度訪問(どのページからでも関係なし)した時セッション数は+2となります。

 

UU(Unique User-ユニークユーザー)

何人の人がサイトを訪問したかを表す指数。

訪問者がサイトに来た時UUは+1

別の訪問者が来た時UUは+2

 

KPI(key performance indicator-重要業績評価指標)

マーケティングやWebサイト、また会社運営の中でも使われるこのKPIは

様々な目的や目標(営業や運営を行い達成したい目標)を達成する為に、具体的なプロセスを数値化したものです。

KPIに設定した指数を検証し日々の業務改善を行えば必然的に目標に達成する事ができます。

例)

目的・目標: Webサイトから新規の顧客を獲得する。

KPI:PV数、セッション数、UU数、更新記事数、お問い合わせ数、契約数などがある。

一言)KPIの設定は慎重に!

このKPIの設定が間違った設定や少ない指数で設定されてしまうと、目標の達成が困難になると同時に

正しい目標達成のプロセスのデータが取れません。

逆にいうと、

KPIが正しく設定されていると目的達成以外の様々なプラスの要素が派生していきます。

上記の例をもう一度参考にすると、

目的・目標: Webサイトから新規の顧客を獲得する。

KPI:PV数、セッション数、UU数、更新記事数、お問い合わせ数、契約数などがある。

当初の目標(Webサイトから新規の顧客を獲得する)以外のプラスの要素

・KPIの指数を元に効果的な広告の選定(費用対効果の高い広告はどれか)

・KPIの指数を元に別のプロジェクトの参考になる数字の抽出 など・・・・

Webの運営だけではなく、会社経営のプラスになる要素も沢山生まれます。

ですので、KPIの設定は慎重に行いましょう。

 

リファラ(参照元)

サイト訪問者がどのどのような経路でページを閲覧したのかがわかります。

リファラを検証する事で次のような事が検証できます。

有効な広告の選定とは?

・自分のWebサイトはどのような流れでユーザーは見てくれるのか。(良質な記事の選定と検証) など・・

 

LPO(Landing Page Optimization-ランディングページ最適化)

ランディングページとはサイト訪問者が広告などの外部リンクから最初に到達するページの事を言います。

例えば

商品の販売促進が目的のランディングページを、

ユーザーの購買意欲を損なわい(むしろ向上する)ランディングページに改善したり、

検索ワード別にランディングページを作成する事などをLPO言います。

 

見込み客

商品の購入を見込める顧客(ユーザー)。

Webページ作成やWebマーケティングを成功する為には

見込み客の設定(ペルソナ-仮想顧客層)がWebマーケティングの鍵を握ると言っても過言ではありません。

見込み客の設定とは

例えば、

性別、年代、どこに住んでいるか、収入はどれくらいか、家族構成、趣味

など他にも細かい設定を行う事で具体的な戦略が浮かび上がってきます。

 


まとめ


 

今回の用語はもちろん、ごく一部です。 これらの用語はWebマーケティングだけに限らず、マーケティング全般やSEOなどを成功するための記事や本などでよく見かけます。 参考にしてみてください。

こんにちは、Tedincの林田です。

今回は2015年の春夏のトレンドカラーを紹介します。

ホームページやWebサイトの色で悩む事は多々あるかと思いますが、私は今年の流行の色などを検索して参考にしています。

ファッション業界は色を大事にしている業界ですし配色の組み合わせの勉強にもなります。

 

2015年トップ10はパステルカラー(中間色)。春夏の定番「海色」が上位

記事抜粋

レアトリス・エイズマン=パントン・カラー・インスティチュート エグゼクティブ・ディレクターは、「今シーズンは、いつも以上にウケる理由がある」と話す。それは、デジタルデバイスがもたらした“24時間働けますか?”的な日常生活からのエスケープ願望。「携帯電話にメール、そしてテキストメッセージ。人々は、こんな生活から一瞬でも解放されるため、開放的な色を好みそうだ」と分析する。

参照

【コラム】2015年春夏“海色”がウケる理由

 

 

2015 trend color palette

 

まとめ

今回選択されている色は春夏用のファッションショーなどで使われたWOMAN用の配色です。

パステルカラーはフラットデザインとの相性も良いですね。

MENS用の配色もありますが、私個人の意見としては、色に関してのセンスはやはり女性の方が際立っいると感じているためWOMAN用の配色をパレットにしてみました。

(理由:女性は毎日化粧をする事で、常日頃から色と直面している為)

ホームページやWEBサイトの配色に悩んだ場合は参考にしてみてください。

 

こんにちはTedincのteruです。

 

年の瀬の忙しい時期に差し掛かり、1年の速さに悲しさを覚える昨今です。

 

今回のタイトルは

 

Webとは?ホームページとは?を考えさせられたWebSite

 

ですが。

 

幸い私は、常に刺激をくれるWeb事業主さんと仲良くさせて貰っており、自分の仕事を指摘して頂いたり、時には自分の意見を言わせて頂いたりと・・・

 

ホームページ制作の仕事が楽しく、より良い仕事にしていこうと二人で語り合っています。

 

大きいテーマが1つ

 

このホームページ制作というものは・・・・?

 

この中に実は様々要素が含まれており

 

デザインの良さ。

 

クライアントの使いやすさ。

 

SEOの検索順位など。

 

様々な観点でどうあるべきかを週2、3度のディスカッションが行われるのですが、そんな彼から1つのWebサイトを教えてもらいました。

 

ものすごくシンプルなものです。

 

原文 これはウェブページです。

 

この著者(ジャスティン・ジャクソン)の意図は直接このサイトを見る方が伝わりますので時間がある方は見てみて下さい。

 

しかし沢山の人に見ていただけたらと私はどうしても思ったのでそのまま全文を抜粋します。

 


 

これはウェブページです。

たいしたページではありません。

あるのは言葉だけ。

それをあなたは読んでいます。

オシャレなデザインや、レスポンシブなレイアウト、魔法のようなスクリプトに私たちは魅了されてしまいました。

でも、ウェブで一番強力な道具は、今も昔も言葉です。

私が書いた言葉を、あなたが読んでいる。これこそ魔法です。

私はブリティッシュコロンビア州の小さな都市にいますが、あなたは別のどこかにいることでしょう。私は2013年6月20日の早朝にこれを書きましたが、あなたは違う日時にこれを読んでいることでしょう。私はノートパソコンでこれを書きましたが、あなたは携帯電話でこれを読んでいるかもしれないし、タブレット端末やデスクトップ端末で読んでいるかもしれません。

私とあなたがこうして繋がることができたのは、私が書いた言葉あなたが読んでいるからですウェブとはそういうものです。場所や端末、タイムゾーンが違っても、このシンプルなHTMLページで私たちは繋がっています。

私はテキストエディターでこれを書きました。全部で6KBです。コンテンツ管理システムも使わなかったし、グラフィックデザイナーやソフトウェアディベロッパーにも頼みませんでした。使われているコードも多くありません。段落や構成、強調といったシンプルなマークアップのみを使っています。

娘は8歳のときに私からHTMLを学びました。一番最初に彼女が書いたのはリスの物語でした。彼女は「HTMLを書いていた」のではなく、世界中に何かを伝えようとしていたのです。家のコンピューターで物語を書き、それを世界中に公開できるなんて、彼女には信じがたいことでした。娘にとってはHTMLなんてどうでもよく、物語を伝えられればそれでよかったのです。

あなたはまだこのページを読んでいます。

シンプルなページでも、伝えられることはたくさんあります。もしあなたがビジネスパーソンならば、何かを売ることができるでしょう。あなたが先生ならば、何かを教えられるかもしれません。あなたがアーティストであれば、自分が創ったものを見せることができます。そして、あなたが上手く言葉を使えたら、人々はそのページを読んでくれるでしょう。

もしあなたがウェブデザイナーか、ウェブデザイナーのクライアントなのであれば、まずは言葉から考えてみてください。スタイルガイドやフォトショップのモックアップからではなく、言葉から始めるのです。

伝えたいことは何ですか?それがなければ、余計なパーツをつけるのは無意味です。伝えたいことを一つだけ考えて、それを一つのページに落としこんでみてください。公開した後でも、推敲を重ねてみてください。何かを足したいと思ったときは、「これを足すことによって、伝えたいことがもっとハッキリするだろうか?この書体や画像、リンクは読み手の理解を助けるだろうか?」と自分に聞いてみてください。もしも答えが「いいえ」であれば、足す必要はありません。

ウェブデザインの本質は、言葉です。言葉は、デザインをした後に考えるものではありません。言葉はデザインの始まりであり、中心であり、主役なのです。

言葉から始めましょう。

それでは。
ジャスティン・ジャクソン

 


 

 

 

Webとは?ホームページとは?・・・・・

 

つまりそれは

 

言葉をしっかりと伝える為のツールでなくてはいけないという事です。

 

私は少し長めのこの文章を全て読みました。

 

そして言葉に強烈インパクトがありました。

 

このウェブサイトをが何が言いたいを伝える為のウェブデザインだったからです。

 

ターゲットもしっかりと考えられたデザインです。(これはホームページ制作者向けに作られたサイトです。)

 

Tedincではクライアントが本当に伝えたい言葉を伝えられるホームページ制作を行っていきます。

 

 

 

panda

 

 

 

こんにちはTeidncのteruです。 パンダが可愛いのでこの記事を書いているのではなく

 

今回はGoogleが定める

 

良質なコンテンツ

 

とは一体何なのかという事にしっかりと照準を当てて、記事を書いていきたいと思います。

 

Googleはまず2012年より「Panda アップデート」と言われるアルゴリズムの変更を行い、キーワード検索に対してのサイトの評価がガラリと変わりました。

 

2010年までのGoogleの検索結果はユーザーにとって役立つ情報が上位にこず、意味のないコンテンツが多数上位を占めていました。

 

Pandaアップデート前のSEO対策は、

 

相互リンクを沢山貼られている(*1ジャンルに関係ないものでも沢山リンクされる方がサイトの評価が高くなる)

 

人気のキーワードでユーザーを引き寄せ、違う内容のコンテンツを宣伝する(*2アクセス数が多いほど評価が高くなる)

 

など関係ない項目や無駄なリンクなどがサイトの内に蔓延していました。

 

*1 *2

今でも、もちろんリンクを沢山貼られる事や沢山アクセスがある事は良い事です。

しかしリンクが貼られた先が評価の悪いサイトだと貼られた側の評価も下がってしまうと言われています。

 

しかしPandaアップデート以降のSEOは劇的に変わり、

良質なコンテンツのホームページやWebサイトが検索結果の上位にくる

ようになりました。

 

そこでGoogleが発表している良質的なコンテンツの考えかたは以下の25項目です

 

1、あなたはこの記事に書かれている情報を信頼するか?

2、この記事は専門家またはトピックについて熟知している人物が書いたものか? それとも素人によるものか?

3、サイト内に同一または類似のトピックについて、キーワードがわずかに異なるだけの類似の記事や完全に重複する記事が存在しないか?

4、あなたはこのサイトにクレジット カード情報を安心して提供できるか?

5、この記事にスペルミス、文法ミス、事実に関する誤りはないか?

6、このサイトで取り扱われているトピックは、ユーザーの興味に基いて選択されたものか?それとも検索エンジンのランキング上位表示を目的として選択されたものか?

7、この記事は独自のコンテンツや情報、レポート、研究、分析などを提供しているか

8、同じ検索結果で表示される他のページと比較して、はっきりした価値を持っているか?

9、コンテンツはきちんと品質管理されているか?

10、この記事は物事の両面をとらえているか?

11、このサイトは、そのトピックに関して第一人者(オーソリティ)として認識されているか?

12、次のような理由で個々のページやサイトに対してしっかりと手がかけられていない状態ではないか?

13、コンテンツが外注などにより量産されているか?

14、多くのサイトにコンテンツが分散されているか?

15、記事はしっかりと編集されているか? それとも急いで雑に作成されたものではないか?

16、健康についての検索に関し、あなたはこのサイトの情報を信頼できるか?

17、サイトの名前を聞いたときに、信頼できるソースだと認識できるか?

18、記事が取り上げているトピックについて、しっかりと全体像がわかる説明がなされているか?

19、記事が、あたりまえのことだけでなく、洞察に富んだ分析や興味深い情報を含んでいるか?

20、ブックマークしたり、友人と共有したり、友人にすすめたくなるようなページか?

21、記事のメインコンテンツを邪魔するほど、過剰な量の広告がないか?

22、記事が雑誌、百科事典、書籍で読めるようなクオリティか?

23、記事が短い、内容が薄い、または役立つ具体的な内容がない、といったものではないか?

24、ページの細部まで十分な配慮と注意が払われているか?

25、このサイトのページを見たユーザーが不満を言うか?

以上の25項目が公式に発表されている良質的なコンテンツの考えかたです。

 


総括


 

Googleから具体的なアルゴリズムの発表は今後もされていかないという事になっています。

 

つまりこれから検索結果で上位になる為に大事な事は

 

ユーザーにとっての必要なコンテンツをしっかりと構築していく

 

という事になります。

 

制作者側はユーザー目線でサイトを構築していくという健全な志が大事だということですね。

 

 

こんにちは。Tedincのteruです。

 

ホームページやWebサイトが本当に効果的になるためにはどうしても外せないのが、

 

キーワード検索(SEO)で上位にいる

 

ことです。

 

あなたが何かをWeb上で検索する時を想像してお考えください。

 

例えば今回あなたは

「宮崎 ホームページ制作」ホームページを制作してくれる会社

を探すとします。

 

検索してヒット数は約740000件ありますと表示されました。

 

hit

 

 

そして検索して表示される項目は上の欄とサイドバーに広告費を払い表示させている物があり、そこから下がSEOが高い順に表示されていきます。

 

google1

 

 

そして1ページに10件ずつの検索キーワードに合ったホームページやWebサイトが掲載されています。

(SEO順位1〜10位が1ページ目、20〜30位が2ページ目・・・・etc)

 

そして、検索して下位にあるホームページはユーザーに見られる確率はグンと下がります。

 

むしろ2ページから1ページと比べるとグンと下がってしまします。

 

さらに言うなら1位と2位でもかなりクリック率は下がるという統計がでております。

 

記事

Google検索順位の真実。1ページ目でもこんなに違うクリック率。

 

では本題ですが

 

どうすればSEOで高い評価を得られるのか?

 

という事になるかと思います。

 

今日本で検索で一番使われているものはGoogle検索です。(yahooで検索する場合でもGoogleでの検索結果が表示されています。)

 

そしてSEOを様々変貌をつげ2014年現在では、

 

検索された項目対して、適切なコンテンツを表示しているホームページやWebサイト

 

をGoogleが診断し、上位に表示されるようになっています。

 

適切なコンテンツとは具体的に

 

人が見てわかりやすいという事ではなく、GoogleがホームページやWebサイトを見た時に(*クロール)どのようなサイトかをわかりやすくしておく

 

という事が適切なコンテンツを作るという事です。これは内部対策と言われるものです。

 

 

*クロールの仕組みについてGoogleがどうやっているのかは下記の記事を御覧ください。

記事
クロールとインデックス

 


具体的にやっていく項目


 

Googleが判断というのはもちろん人が行っているのではなく、Googleのクローラーが判断をしています。

判断基準はtag(title、description,h1,・・・etc)と呼ばれる物の中に検索されたいキーワードをに入れる事によって、クローラーは

「このWebサイトはどんなサイトか」

を認識してくれます

 

そして、Googleからはより良いホームページやWebサイトを目指す為の無料ツールが沢山あります。

代表的なもので、

 

Google Analytics(細分化されたWeb解析が行え、ユーザーフローや、オーガーニック検索などがすべてわかります。)

 

Google ウェブマスター ツール(自分のサイトが Google にどのように認識されるかを確認し、検索結果でのサイトのパフォーマンスを最適化できるようになります。)

 

などがあります。このようなツールを使い無料で効果的にSEO効果が上がるホームページやWebサイトの構築を目指しましょう。

 

 

こんにちは宮崎でWeb Site制作を行っているtedincのteruです。

 

GLAYが売れて結構立ちますが、彼らが売れてから自分の名前をteru(本名:旭洋[テルヒロ])と書いた後に少し照れてしまう自意識過剰な自分を来年こそは捨て去るとさっき自分に誓いました・・・・

・・・・

・・・

・・

どうでもいい話はさておき、年の瀬もあり来年[2015年]のウェブデザイントレンド予想を見ながら自分の見解、対策を書いていこうと思います。

 

原文はこちら

PREDICTIONS FOR 2015 WEB DESIGN TRENDS

 


1:Flat Design


 

flat

 

この記事によれば、

テクスチャ、パターン、影、泡、グラデーションはもはや時代遅れとの事

 

フラットデザインとは、

 

質感や立体感がほとんどない

エフェクトは最小限

文字も最小限

目的や商品が一目でわかる

部品の機能が一目で分かる

各要素がくっきりしている

グラデーションを使わない

シンプルなタイポグラフ

シンプルなグリッドレイアウト

 

最近はApple、Windows8などほとんどの物がフラットデザインに成り代わりましたね。

フラットデザインの良い所はなんといっても、デバイスが変わる事によってのデザインのズレのストレスがかなり軽減されることです。

自分の対策としては、前に書きましたBootstrapなどを取り入れてく事で、レスポンシブデザイン&フラットデザインの両方を取り込んでいこうと思います。

 

Bootstrapをしっかり理解したい為の記事

 

少し危惧する所は、立体型だったいままでのデザインよりデザインの差がつけにくくなった気がします。 自分達のようなWeb自体を制作する人間にはわかるデザインの違いが、一般の方々(Webを使う方の人々)には安っぽさの方が先に来てしまうのではないか?と少し感じています。

これからデザインは、人とは違う視線から、人とは違うアイデアがより重要となりそうですね。

 


2:Less Clicky, More Scrolly


 

コンテンツをページごとに断片化するのではなく1ページの中でスクロールさせるデザインにしていくとよいと書かれています。

これは、やはりモバイル、タブレットで見た際のストレスを減らす事になると書かれています。

sony(US)

ソニーの海外版のサイトのスクロールは最早webとは言えない鮮やかで迫力のあるスクロールデザインになってます。

 

 


3:We say, “Responsive,” You say, “What?”


 

この記事でかれらは言っている事は、

「モバイル、モバイル、モバイル!

それは2015年に、モバイルインターネット利用は、従来のラップトップおよびデスクトップを追い越すだろう」

と予測をたてています。

 


4:Typography is King


 

この記事によればタイポグラフィックアートが主流に向かって高速で軌道に乗っているとのこと。

フラットデザイン自体が文字がより際立つサイト構成だと思いますし、文字で遊び心がだすアイデアは当然増えていくと思います。

 


総括


 

傾向としてはモバイルの爆発的な普及に対するここ数年の答えが決まったように感じました。(もちろんまだまだ変化はしていくと思いますが・・)

フラットデザインにしても、どのデバイスで見てもどうやって同じように見せるかというweb業界自体の回答に思えます。

イマジネーションをどうサイトに反映していくかはデザインの差別化をする為の重要なファクターになっていきそうですね。

 

 

 

 

CONTACT US

お気軽にお問い合わせ下さい

お問い合わせはコチラ