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

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】はその観点で技術が身につくのも早いのと思い紹介いたしました。

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

まえがき
私は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サイト、ホームページを表す象徴です。

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

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

 

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などを成功するための記事や本などでよく見かけます。 参考にしてみてください。

 

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サイトの構築を目指しましょう。

 

 

bootstarap

 

こんにちは。tedincのテルです。

友人に薦められた「Bootstrap」を導入したのですが、イマイチどのくらいの便利なのかが理解できていなかったので、書いていこうと思います。

Bootstrapにあるiconはサイトに統一感ができるし、タグ一つで呼び出せるので便利だ・・・・

と思っていた自分に、このような記事を見つけました。

 

ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略

 

この記事の中に


ウェブデザイナーの仕事がエンジニアによって奪われつつある

 

ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア/プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。

象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作ったりしてくれるだけでいいよね」と考える企業が増えつつある。


 

・・・・・

もっと深く理解しなければ(汗)

 

まずはBootstrapとは?

 


Bootstrap


 

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

「CSSフレームワーク」

です。

Bootstrapであらかじめ用意されたフレームワークに則り、UI部品を組み合わせると、フラットデザインをベースにした、見栄えの良いフロントエンドの開発ができます。そのため、開発工数を大幅に削減できるだけでなく、デザインが苦手なエンジニアでも、ユーザビリティの高い画面の開発が可能になります。

前述にあった

Bootstrapがあればデザイナー不要

=デザインが苦手なエンジニアでもユーザビリティの高い画面の開発が可能

Bootstrap

 

これはCSSとHTMLの事を理解できていれば、本当に誰でも綺麗なデザインのサイトができちゃいますね。

 


まずは設置方法


 

1、まずBootstrapのトップページからファイルをダウンロードします。

2、自分のサイトの中に導入、headの中に記述してパスを通します。

 

css

<link rel=”stylesheethref=”bootstrap.css” type=”text/css“>

 

js

<script src=”bootstrap.js” type=”text/javascriptcharset=”utf-8“></script>

 

icon*注意*

Bootstrapにあるiconを使いたい場合はcssのファルダのディレクトリと同じ場所にfontを設置して使えるようになります。

bootstarap3

 

Bootstrap 3 からiconは切り離されたとのことです。Glyphicons のサイトから Bootstrap 3 用のicon集をダウンロードして設置します。

参考記事:Twitter Bootstrap 3 でアイコンを使う方法


使い方


BootstrapのメニューからComponentsのページへ進みます。

bootstarap2

サイトを構成してる様々な要素がBootstrapにはあります。(icon,buttom,nav….etc)

bootstarap4

自分はデザインに差をつける為、また強調したい文章などにiconは必須なのでいつも画像でやっていましたが、これがあれば簡単に、しかも統一性のあるiconが使えるので非常に便利と思って使っていたのですが、

何が一番素晴らしいという、と

 

レスポンシブWebレイアウト

 

Bootstrapでは場合、グリッドの列数は12に固定されています。そして、col-xs-1, col-xs-2のように「横に占める列数」を名前に含むクラスがBootstrapによって提供されています。これらのクラスをブロック要素に付与していき、要素が占める列数の合計がちょうど12になるようにレイアウトしていきます。

抜粋(Webアプリをあっという間にカッコよく! BootstrapによるレスポンシブWebレイアウト

 

これを取り入れることによって様々なデバイスから見たときのレイアウトの心配がかなり軽減されます。

 

さらにBootstrapは最近ではAppleも取り入れているフラットデザインをベースにしたサイトが基本となっています。

 

 


総括


 

これからはサイト構成の指針となるであろうと感じられる物ですね。

前日にGoogleの社長、ラリー・ペイジが

これからはさらにコンピューターの発達で、今人が行っている作業の8割くらいが機械によって行われていくだろう。イマジネーション持たない人たちは仕事がなくなる・・・

といった記事を見かけました。

Webの中の様々な変化には日々驚かされますが、より強い想像力を発揮し、自分の仕事に取り組む姿勢は忘れてはいけませんね。

October 14, 2014

 

こんにちは。

 

宮崎は本当台風が多いという事を思い出しながら、いやいやここまではこなかったぞ!!

 

と感じている昨今です。

 

今回は自分のためのメモついでにWordpressでよく使うテンプレートタグを書いていきます。

 

テンプレートタグとはWordpressに元々標準で用意されている、呪文のようなものです。

 

例えば、

 

記事のタイトルを呼び出したり、

 

本文を呼び出したり、

 

写真を呼び出したりなどなど・・・

 

沢山あるので自分がよく使う物を書いていきます。

 


ページタイトル


<?php bloginfo(‘name’); ?><?php wp_title(‘|’); ?>  サイト名|ページタイトルで表示

<?php wp_title(‘|’, true, ‘right’); ?><?php bloginfo(‘name’); ?>  ページタイトル|サイト名”で表示

 


ディレクトリのパス


 

<?php bloginfo(‘url’); ?>  サイトのアドレス(URL)で設定したディレクトリのパス

<?php bloginfo(‘template_directory’); ?>  テーマを格納しているディレクトリのパス

<?php bloginfo(‘stylesheet_url’); ?>   テーマのスタイルシート(style.css)のパス

<a href=”<?php bloginfo(‘url’); ?>”>  サイトのアドレス(URL)で設定したディレクトリのパス

 

 


インクルード


 

<?php get_header(); ?>    ヘッダーテンプレートをインクルード

<?php get_sidebar(); ?>   サイドバーテンプレートをインクルード

<?php get_footer(); ?>  フッターテンプレートをインクルード

 

 


タイトル


 

<?php the_title(); ?>  投稿記事・固定ページのタイトルを表示

<?php the_title_attribute(); ?>    title属性に記事のタイトルを付ける

<?php wp_title(”); ?>   ページのタイトルを表示

 


本文・抜粋


 

<?php the_content(); ?>  本文を表示

<?php the_excerpt(); ?>  抜粋を表示

 

 

 


総括


このページは随時使ったタグに関しては追加していきます。

デザインのカスタマイズはまず使うタグを挿入してみて、呼び出されたソースを見てカスタマイズしています。

何事も考えるよりやってみるが大事ですね。

 

 


参考サイト


WordPress Codex 日本語版 (テンプレートタグ)

WordPressよく使うテンプレートタグの覚え書き

 

 

こんにちは。秋です。日本のことわざに「秋高く馬肥ゆ」というのがあります。意味は「秋は空気も澄んでいて、空も高く感じられ、馬も肥えるような収穫の季節でもある」・・・・ なるほど太り過ぎに注意って事だな・・・ と感じている今日この頃です。
抜粋:http://kotowaza-allguide.com/a/akitakakuumakoyu.html

今日は自分がデザインのアイデアなどに悩んだときにお世話になっている参考サイト一覧のWebSiteを紹介したいと思います。新しいもの、新しい技術などの勉強にもなります。よろしければ参考にして見てください。

 


Design Link Datebase


 

designlinkdatabase

 

 


bookma! v3


 

bookmav3

 

 


WP DESIGN GALLERY


 

wpdesigngalleery

 

 


I/O3000


 

io300

 

 


イケサイ


 

ikesai

 

 


 Web Selction


 

webselection

 

 


週刊Web Design


 

weekweb

 


ズロック


 

zrock

 

 


Good Web Design


 

goodwebdesign

 

 


WONDER BOOKMARKS


 

wonderbookmarks

 


総括


 

今回は国内のコンテンツのみをピックアップしました。自分がこの仕事をはじめた頃は海外のサイトに比べると革新的なWebSiteは少ないなと感じていたのですが、最近では自分のアイディアや個性をサイトにしっかり取り入れたり、会社をブランドしてあげようとする意思をもったサイトが沢山見受けられるようになりました。いいものを深く見る事は、すべての事に良い影響を与えます。参考にしていただけたら幸いです。

 

 

CONTACT US

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

お問い合わせはコチラ