fbpx

「WordPress」の検索結果

ギターづくりの思いを載せたWEBサイトづくり

ギター作りの街、長野県松本市のとなりの塩尻市にあるカスタムメードギターショップT’s Guitarsのサイトが完成した。T’s Guitarsの代表の高橋さんは過去のサイトでは1日の半分を顧客のメールの返信に使っていたらしい。時間を簡易見積りシステムの導入でお問合せメールが激減したらしい。多くのサイト構築では、お問合せメールを如何に多く得ることが出来るかを工夫するのだが、その逆となった。

WEBサイトを構築してビジネスが簡素化して便利になることを目的にサイト構築をする場合は少なくない。しかし、このサイト作りの最終的な目標はそこにない。私がこのサイトでアピールしたいのは、このサイトのクライアントであるT’s Guitarsの仕事へのこだわりである。カスタムメイドする顧客と代表である高橋さんがエレキギターに使われる木材や部品一つ一つを顧客と打合せするスタイルにある。人気の国外モデルではないのに多くのミュージシャに愛されるその理由を言葉ではなくサイト全体でアピールしたかったのです。

カスタムメイドギターという世界のコンテンツを十分に発信でききるようCMSのシステムをWordPressにし、Flashを使用せず(一部サイドバーに使用)、スマートフォンやiPadにも最適化した。そして、T’S Guitarsの若きスタッフのギターづくりの想いが届けらればと制作をした。

私のホームページ作りは、クライアントの思いや情熱をデジタル化することにある。

T's Guitars

ティーズギターWEBサイト

@importは時代遅れだって?

これまで様々なサイトに携わってきたが、CSSファイルの細分化には気を使ってきた。
なぜなら、圧倒的に管理が楽だからだ。

制作中もさることながら、再び改修する際も自分が見て分かるようにマークアップし、IDやクラスのネーミングも統一化させ自分の中で定義付けを行うことで、久しぶりに覗く自らが書いたコードにもすんなり順応できる。

@import

その際に多用してきたのが「@import」。
CSSを細分化し(要するにブロックごとに分けたり、用途によって分けたり…)読み込ませることで、加筆や削除を容易にさせておくことができる。全体的には変えないが、ちょっと大がかりに変えるなどという場合に、他の部分に影響なすることなくスムーズな改修ができる。

しかし、@importはレンダリングが遅いのも事実だ。おそらくPHPやCGIを使ったサイトだと軽く不愉快なほど遅く、昔のWordPressやXoopsではかなり体感できるほど読み込みスピードが遅い。

Object Oriented CSS

最近では「Object Oriented CSS」という手法が採用されているとのことだが、調べてみると既に自分も少し導入していた手法であった。
IDにスタイルを定義付ける手法が一般的だ。つまりロケーション(ヘッダやフッタ…)ごとにスタイルを作る。しかし、Object Oriented CSSとはサイト全体クラスを付けて、必要なプロパティを「パーツ」のように付けていく。
簡単に言うと、よく使うプロパティは色々なところで再利用できるということだ。サイト全体をObject Oriented CSSで作ったことはないが、パフォーマンスも向上するのだろうか?
初動制作時の工数はかかりそうだが、これも自分の中のスタンダードを徐々に構築しておくことで、再び改修する時に手間がかからなそうだ。

Object Oriented CSS

Reset CSS使ってますか?

WEB制作を行う上で、誰もがブラウザによる表示の違いに四苦八苦する。
忌わしのIE6もMicrosoftのサポート終了によりシェアが落ちてきた。ひとつのブラウザ(かつひとつのバージョン)がシェアを専有し続けることは今後そうはないだろうが、IE6があまりにも市場に居座り続けていた時代は本当に苦労したものだ。
HTML5+CSS3が浸透してきた今が、そうした悩みもあまり大きく感じる事もない穴場の時期かもしれない。

各主要ブラウザがHTML5+CSS3に対応し始め、WEB制作がしやすい環境になってきてはいるが、ブラウザによるHTML+CSSの解釈の違いは間違いなくある。CSSハックや条件分岐で特定の環境下にCSSを適用しブラウザ間の差異を巧みに埋める達人たちもいるが、私は「Reset CSS」をおすすめする。

Reset CSSとは?

ブラウザはデフォルトでそれぞれスタイルを持っており、例えば多くのブラウザではゴシック体のフォントを採用しているが、明朝体のフォントをデフォルトで採用しているブラウザも存在する。その他にもマージンや余白、罫線の微妙な違いなどマークアップをしていると気付かされる違いが多くある。
Reset CSSとは、そういったブラウザのデフォルトスタイルを初期化をするためのCSSだ。

ユニバーサルセレクタ

一昔前は私もユニバーサルセレクタ、すなわち全称セレクタで手軽にそういったスタイルをリセットしていた。

* { margin:0; padding:0; }

上記の様な手法だ。
アスタリスクはHTMLの全ての要素を意味しており、先頭にこれを記述することで全ての要素をリセットできる。(下手すりゃborderも0!)思い起こせば随分長い間使っていた気がする。
しかし、デメリットもある。まずブラウザのレンダリングが遅くなる。意図しないスタイルもリセットされ逆に工数がかかってしまう場合もある。特にフォーム関連の要素はデザインし直すのに苦労する。
では、全ての要素に個々にリセットをかけるCSSを準備しなければならないことになるのか?実はそうではなく、一般に公開されている、ルールさえ守れば商用利用可能なReset CSSを使うことで誰でも簡単に実装することができる。

世界の代表的なReset CSS

Yahoo! User Interface Library

Yahoo! User Interface Libraryの提供するReset CSS。私の手持ちのReset CSSもYUIのCSSを参考に作成したものだ。

Eric Meyer’s Reset

Eric Meyer氏によるReset CSS。一般に配布されているWordPressのテーマを見ると、私はこの手法を一番よく見かける気がする。

導入は計画的に

実際WEB制作で毎回Reset CSSを実装するかというとそうではなく、大体制作期間により決める。リセットをかけてそこからオリジナルデザインを構築することを考えると、適用することができない時もある。(早くデモサイトをリリースしなければならない時とか)
しかしいつでも使えるよう独自のCSSを備えてはいる。HTML5に対応したReset CSSも今後登場することだろうが、またそれを参考に独自に構築していくことは、おそらく私にとって楽しい作業だろう。

webサイトでの画像ファイルをあらためて考える

現在の企業のWEBサイトはクライアント側でWEBサイトを更新することが必要とされている。中小企業にもWEB担当などがいることも長野県でもめずらしくはない。
WEBサイトを更新するには欠かせない画像ファイルの形式についてのまとめです。
webサイトを制作する上で現在では一般的に「JPEG」「GIF」「PNG」という形式の画像ファイルが支流である。

適した画像ファイル形式について

png.jpg.gifのまとめ
PNG
写真・イラストに適している。
JPEG
写真など色素の多い画像に適している。
GIF
色数の少ないイラストに適している。

PNG画像の注意点…。

IE-destroy写真にもイラストにも適し、背景に透過させる半透明グラフィックなどの表現もできる「PNG」画像だが、大きなデメリットもある。IE6では透過せず背景がグレーになってしまうことだ。しかし透過PNGをIE6に対応させる方法はたくさんある。そのひとつがGoogle Codeにあるie7.jsというJavaScript、IEの7以下に読み込ませるスクリプトで、IE7以下でもPNGを透過させることができる。
またwordpressプラグインHITS-IE6 PNG FixなどでIE6でも透過を可能にするものもある。ブラウザの表示に注意しながら使い分ける必要がある。
現在ではIE6の需要もだいぶ減ってはいるが、まだまだ油断ができないのもWEBデザイナー泣かせなIEである。

PNGはIEでキレイに見えない?

Photoshopで作成されたPNG形式のファイルにはガンマの値が異常な値に設定されている。一部ブラウザ(IE7、IE8)では色が変わってしまうといった現象が起こる。
そこで、PNG形式で保存された画像からガンマの設定(ガンマチャンク)を削除し、色温とICCプロファイルのチャンクも削除する必要がある。
※PhotoshopCS2以降はチャンクが含まず書きだしてくれるので気にしなくてOK!
作成したPNGファイルのチャンクを簡単に削除してくれるツールをご紹介。
WINでPNG形式の画像の補助チャンクを削除するソフト»
MACでPNG形式の画像の補助チャンクを削除するソフト»

PNGファイルの今後

PNGはW3C(World Wide Web Consortium)が推奨する画像フォーマットで、最近ではブラウザやグラフィックソフトのサポートも進み、標準的な画像形式になっている。 以前には、古いブラウザ(IE6等…)を使用しているユーザーへの配慮からPNGの使用を控えることもあったが、 PNGを表示できないブラウザのシェアはかなり低くなっている。そして最近急激にシェアが増えているiphoneやAndroid等のスマートフォン向けのサイトの場合はPNG形式が支流である。今後WEBサイトを構築する際にPNG画像を用いることが増えていくことは間違いないであろう。

Googleのパンダアップデートに対応するには?

SEO関連のエンジニアリングは、Googleのパンダアップデートの日本導入についての話題でもちきりだ。現在の自分の管理するサイトの検索順位の動向がきになるのは当たり前だ。数年前もいきなり上位から40位以下に数サイト落とされたことがある。Googleのアルゴリズムの変更にはエンジニアリングは恐怖とも言える。

さて、このGoogleのパンダアップデートにどう対応すればいいのかを考えてた。アメリカの動向も見てもそれほど大きな変更はないようだ。というのもGoogleの特許であるアルゴリズに準じたサイト構築をすればいい。だからといって、全て対応することは難しく、項目的に対応が不可能な部分にはある程度の打開策がある。

Googleのパンダアップデートで分かっていること

「広告」がパンダ・アップデートの要因の1つになり。アメリカの情報をまとめると信頼性が高い。それ以外は、Googleが質の高いコンテンツの評価基準を知るしかない。そこで、質の高いコンテンツのあるサイトをテキストでまとめるのが最大の解消方法ではないか?また、Googleウェブマスターのガイドラインをひたすら厳守するしかないのだが、Googleアルゴリズム200項目swet9さんのブログで読んだ。その内容は実に真を得ているのだが、全てをクリアーすることは難しく、一般の方やWEB制作会社の方々はGoogleウェブマスターのガイドライン(検索エンジン最適化スターター ガイド)を守ることをオススメする。何故ならば、多くのWEB制作会社の作品にはそれらを反映されていない。
Googleアドセンス広告を貼り込み適正な位置の紹介。サイトと広告のレイアウトについての推奨事項
パンダ・アップデートでは広告を貼ったサイトが順位を下げる?

Googleアルゴリズム200項目について

Let’s Try to Find All 200 Parameters in Google Algorithmをswet9さんが翻訳された内容を大雑把に検証する作業は必要だ。

  • ドメインに関する13要因
  • サーバー:2つの要因
  • アーキテクチャ(構造や仕組み):8因子
  • コンテンツ:14要因
  • 内部のクロスリンク :5要因
  • ウェブサイトの要因:7要因
  • ページ固有の要因:9要因
  • キーワードの使用頻度、キーワード使用方法 :13要因
  • アウトバウンドリンク:8要因
  • バックリンクのプロファイル:21要因
  • 個別のバックリンク:6因子
  • 問者のプロフィールと行動:6因子
  • ペナルティ、フィルタなどのフラグ:12要因
  • その他の要因6個

このブログで上記の項目について一つ一つ解説をしていこうと思っています。
多くは、実に常識的な反映なのかも知れないが、パナルティに関わる部分は慎重に対応したい。
また、新規サイトは不利になるような状況をどう打開するかという問題についても方法を具体的に記述しょうと考えてます。

Googleのパンダアップデートで順位が下落したら

もし、パンダアップで順位が下落したと考えられるならサイトを再構築した方がいいのではないか?WordPressなどでは、データベースから構造の変更が必要にも思える。そして、再構築はできるだけ正しくすることをおススメする。永久的なURLを保てれのが最良策である。しかし、システムを変更すると思わぬところで過去のURL自体も消去しなければならない問題も生じる。よって、対応できる問題点は、再構築時に対応を知ることをおススメする。

SEO対策。一応やっておこくこと!

個人でもビジネスユーズでもブログやサイトでやっておきたSEO対策の基本を解説しよう。もちろん、細かい部分までを押さえて置く必要はあるが、ここでは一応やって置きたい項目を上げる。
seo india maxwintek

これだけはやっておこう!SEO対策

WordPressをまず使う。もちろん、All in one Seoのプラグインを使ってタイトルタグにキーワードを埋め込む、
パーマリンクの設定もキーワードの挿入が重要になる。この辺は、Google Webmaster toolのガイドラインに沿って行う。
検索エンジン最適化スターター ガイド
あとは、ロングテールのキーワードによるコンテツページを仕上げる。もちろん、テキスト量の多いほうがいい。

これからのSEO対策

これからは、facebookのページを作成して、facebookなどからのアクセスを得る方法も必要になる。当然、YouTubeなども作成しておくと効果的だ。もちろん、ツイッターの利用も不可欠である。そして、サイト更新のピークは木曜日となる。EC関係の更新は水曜日に行い、ツイッターなどでは水曜日につぶやく準備をしておきたい。

WEBデザイナーなら一度は作ってみたいと思うテクスチャなサイト

ビジネスブログ更新方法

下記にWordPressの更新の方法や使用方法が簡単に説明された動画をご紹介させていただきます。
ご不明な点はお電話にてサポートさせていただきます。

①ワードプレス投稿マニュアル-1-管理画面の開き方と概要


ログイン画面のURLは弊社からお渡ししている、
URLを入力してください、ログイン画面はブックマークしてください。
ご契約時に弊社からお渡ししている、ユーザー名・パスワードを入力します。


②ワードプレス投稿マニュアル-2、記事の投稿;原稿作成


お客様によって、トラックバックやコメントは必要ない場合があります。
ブログのツールバーについての詳しい説明はこちらを参照してください>>


③画像の貼り付け


画像の準備について
デジカメで撮った画像をホームページに使用できます、ホームページで使用するは画像は、大きな画像(1MB)をアップしても、あまり好ましくありません。確かに大きな画像でも自動で縮小してくれますが、1M以下である事が条件です。ですので基本的に、300万画素以上のデジカメでとった写真は、縮小してアップロードする必要があります。そこで、ホームページで使うために、ウインドウズの付属のペイントで、縮小する方法をご紹介します。こちら参考にしてください>>


③公開前の確認と公開


作成したブログ記事を公開前に確認することができます。
公開前には必ず確認しましょう。
また、誤って公開してしまったブログ記事を非公開にすることもできます。
詳細なブログ更新については下記のPDFデータを参照してください。
ダウンロードはこちらから>>


ブログのアクセスUP!

Wordpress

ライバルサイトなどをSEO & Websiteで分析比較するという記事を書いた。
個人のブログでも優れたサイトを分析して、自分のブログのSEO対策を行う事は大切である。
ページランクの高いサイトと自分のサイトはどう異なるのかを確認することだ。

キーワードの数などもソースページを見れば、簡単に分かるようになっているのが、今の主流のブラウザーである。私は、Google Chromeを中心に使っている。これは、SEO対拡張機能が便利だからである。

ブログのアクセスUP!

ブログと言ってもここで言っているのは、WrodPressということになる。無料ブログでビジネスを行うのは?と私たちは感じている。無料ブログを使う人ビジネスに対する意識の問題ではある。当然、WrodPressを設置して使うには多少の知識がいる。無料ブログであれば、日々の更新度を高める必要がある。

      

  1. タイトルにキーワードを用いる
  2. 更新の頻度を高める
  3. ある程度のテキスト量を満たす。1000文字以上
  4. キーワードごとにカテゴリーごとにページを変える。
  5. 排出リンクを一定量張り込む
小さな会社のマーケティングとは