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

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サイトを制作する」事ができるのです。

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サイト構築(デザイン・レスポンシブなど)の時間が短縮され、より中身(コンテンツ)にこだわったサイト制作できます。

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

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

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

Web制作(htmlやcss)や開発では必須となるテキストエディタ。

自分に合ったより便利な物を使う事が作業効率を高めます。

そこで、友人に勧められた

Sublime Text

を紹介したいと思います。

制作に携わりながら、より良いエディタを探し求め生涯これを使い続けようと最近決意しましたw

その理由はふんだんにあります。というか、現段階(2015年8月)でめちゃめちゃ人気のあるエディタです。

 

理由1:魅力的なUI。

 

ui



理由2:便利なショートカット機能が沢山ある。

(commandを使った便利すぎる機能の例)

commandキーを押しながら、複数ヶ所を同時に選択して編集することができる機能。

command + L  command押したままLを連打で次の列も選択できる機能。

command + クリック   任意の場所にカーソルを置き、異なる単語を同時に修正できる機能。



理由3:様々なプラグインが用意されいる。
(Package  Control)

Sublime Textの魅力はPackage  Controlというプラグインを導入すれば様々な便利なプラグインを導入する事ができます。

Package Controlのインストール方法

1、下記のリンクをクリックして、パッケージコントロールのインストールページを開きます。

Package Controlのインストール

 

2、Sublimetext2とSublimetext3が並んでいるので、利用しているバージョンのコードをコピーします。

 

3、Sublimetextを開き、Ctrl + ‘(バッククォート) を押し、コンソールを開きます。

 

4、先ほどコピーしたコードをペーストし、Enterでインストール完了です。

 

Ctrl + Shift + P でPackage Controlが開きます。そこから必要なプラグインを入力し選択すればプラグインがインストールされます。

 

様々なプラグインは色々記事が出ていますので参考にして下さい。

 

Package Controlのプラグイン参考記事一覧

特におすすめしたい、Sublime Textのパッケージ

WordPress開発がサクサク捗るSublime Textおすすめパッケージ27個まとめ

Sublime Textに導入しているオススメのプラグイン23選

 

まとめ

テキストエディタは無料から有料のものまで沢山ありますが、悩んでいてWebサイト作りやシステム、アプリ開発などを本気でやっていこうと考えいる方にはオススメです。

備考

ちなみにSublimeTextは有料《1ライセンスでUSD $70(約8400円)》で、SublimeText2は無料で使う事ができます。

色んな方がオススメしているSublimeText是非使ってみて下さい。

こんにちは。宮崎でホームページ制作をしているTedincの林田です。

今回はWordpressに導入したJetpackというプラグインについて書いていきます。

 

jetpack_img

Jetpackとは?

様々な機能がついたWordpressのプラグインで、主にサイトの統計情報や、ソーシャルとの連動、外観の変更など40個以上の機能がついた多機能のプラグインです。

 

 

目的

今回はクライアントからFacebookとBlogが連動したいという要望があったので、プラグインを探して見つけたのがこのJetpackです。FacebookはもちろんTwitter、Google+などとも連携できます。

 

 

今回起こった問題は『連携はでているが反映されない』

設定の方法は簡単に連携できました。パブリサイズ共有から連携したい物を選択すれば連携できます。

jetpack_img2

POINT

パブリサイズ共有設定前に、連携したいソーシャルにログインしておくと作業がスムーズです。

しかし、今回は設定がうまくいっているのに反映できない問題が起こりました。

 

 

投稿のパブリサイズ共有の中のチェックボックスがとカスタムメッセージが変更できない

この問題の理由はパブリサイズ共有のチェックを過去に投稿した記事で行っていたのですが、既に投稿が反映している記事に関しては変更ができないようになっているようです。

jetpack_img3

新規投稿で確認してみるとチェックボックスがもカスタムメッセージ変更できます。

 

しかしソーシャルに反映されない。

解決方法の記事を検索し色々と試してみました。問題定義をするために参考になればと思うので試した解決方法を記載します。

 

Jetpackについているデバックで確認、他のプラグインを一度停止させて確認

WordPressではプラグイン同士の兼ね合いでプログラム自体が正常に作動しない場合があります。他のプラグインを一度停止させ確認するとプラグインが正常に起動する場合があります。そしてJetpackにはフッターびデバックという項目があり、デバックをクリックするとJetpack自体がしっかりと動作しているのかを教えてくれます。

 

解決した方法『パブリサイズ共有を一旦外し最初から設定しなおす』

シンプルな事ですが今回最初から設定し直して問題解決できました。設定の際に
このブログの他のユーザーもこの連携を利用できるようにしますか ?

というチェックボックスがあります。 ユーザー設定は1人だったので以前はチェックしませんでしたがチェックを入れ設定すると反映できました。

 

総括

今回はJetpackについて書きました。多機能なので素晴らしいと思いがちですが、機能性が多すぎてユーザビリティに少しかけるかなというのが私の個人の感想です。(Webについて詳しい方ならなんら問題ないと思います。) しかしソーシャルの連動は簡単にでき便利でかつ統計情報もダッシュボードに掲載されるので、Wordpress内で全て行いたいという方にはオススメのプラグインです。

 

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

 

developers

 

今回はお客様のサイトを作るにあたって、今までの経験を活かし、

 

「サイト制作がスムーズにいくために大事にしなければいけない事」

 

を項目にして書いていくことにしました。 これは制作者であれば考えるであろう

 

「お客様と、どうやればスムーズに仕事ができるのか?」

 

ということを自分なりに考え、色々な記事などを参考させていただきながら書いております。

 

 


この記事を書こうと思った理由


今回、宮崎でのWeb事業を行っていくにあたって、お客様に提供していきたい物を文字に表し明確化していくという事と、今までの自分に足りないものを認識し仕事を円滑にしていく為です。

 

 


Step1 受注を受けたらスケジュールをしっかりと構築


制作までの納期をしっかりクライアントと確認し、変更がある場合はリスケをしっかりと行うことは、仕事をする上では当たり前の事です。

シミュレートをしっかり行い無理のない制作スケジュールをお客様に提示することによってお客様からの信頼も得る事が出来ます。

 

 


Step2 クライアントの事業にどのようなブランディングが良いかを考え伝える


 

「ホームページはないよりあった方が良い」

 

といいた認識の方が今まで数多くいましたが、

今まで、仕事をした上での自分の答えは

 

「しっかりとした目的をもったサイトでなければ、何も意味も成さない」

 

ということです。これはクライアントと本当に有益な関係を産むために伝えるべき事であり、世の中の常識もこの基準になって欲しいと自分は思っています。

 

ですので、クライアントにはクライアント自身がこのサイトでどういった事をしていきたいかという事を明確にしていただく事は作業をする上、そして継続的なサイト運営をする上で重要なファクターであると考えます。

 

しかし、説明が長くなってしまってはクライアントにかける負担も増えてしまいますので自分はクライアントに時間を取らせないようアンケート形式で書いていただくことにしています。

クライアント自身のユーザー(顧客)目線で、ユーザーならばどのよう物を求めているかを深く考える時間をとり、クライアントにはその確固たる自分の意見を伝えていく事は非常に大事なことです。

 

 


Step3 導入するシステムや目的をクライアントに伝える


これも制作者が頭を抱える問題の一つだと思いますが、

 

クライアントがはっきりとした答えを持っていない

 

事があるかと思います。

 

しかしそれは当然の事です。

 

その為に専門職はあるのですが、Webはどうしても多少なりのパソコンの知識と操作が必要でありクライアントにシステム自体は操作していただく形になります。(それもお金を払って受注する方法もありますが、中小企業では難しい)

ですので、これも操作に対する書面、その行動の目的をテンプレート化しておき、クライアントに納品する物の説明書きをしっかりとお渡しする事にしています。

 

 

 


総括


 

Tedincの企業理念は

 

宮崎県の「good」を発信する使命があります。

 

今できる事は

 

「関わりの合うことができたお客様に有効的な物をしっかりと提供していく」

 

という結論に至り記事を書きました。

 

「便利さを理解頂くための努力」

 

も技術以外に高めなければいけませんね。

 

 

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

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

お問い合わせはコチラ