WordPressオリジナルテーマを作ってサイトをリニューアルしました

公開日:  最終更新日:2013/07/03

構想に1年、制作に2週間。(実制作時間は40時間くらいかな?)非常に長い時間をかけてやっとオリジナルのWordpressのテーマが出来ました。詰めが甘い部分が多々あるので、運用しながら色々修正して行こうと思いますが、とりあえずは一通り形になって一安心です。


hakaselabo

WordPressのオリジナルテーマ作りの流れ

  1. デザインする(ラフを描いて、Photoshopでレイアウトとパーツを作る)
  2. HTMLとCSSでコーディングする
  3. WordPressテンプレートにする

デザイン

これは本業というか今まで散々やってきた事なので、すぐに終わりました。そんなに手の込んだものを作ろうとも思ってなかったので制作時間4〜6時間程度?で終了です。

流行のフラットデザインを取り入得れようかなとちょっと心をよぎったものの時間を優先するため以前に作りかけて放置していたデザインをそのまま流用。クオリティ的にはちょっとアレな部分もありますが、とりあえずはまあ良しとしました。

コーディング

楽天市場ほかネットショップを運営するにあたり、必要最低限の知識しか無かったHTML・CSSを改めて勉強する良い機会になりました。

floatとcleafixなど、わかっているつもりでいた知識も、自分でサイトを作ってみると新たな壁に突き当たり、それを乗り越える事により「活きた知識」に変わった様な気がします。

デザイン時に想定していない問題が発生する事も多く、「コーディングの事を把握した上でのデザイン」の重要性を再認識。普段はコーディングは他の人がやるって人も一度全体の流れを知る事により、よりスムーズな制作が可能になると思います。

wordpressのテンプレート化

正直ここに一番時間が掛かりました。ブログの運営の流れを知る必要があり、wordpressの構造も理解した上で、PHPやJavaScriptの知識も必要になったりします。

こう書くとすごく難しそうに感じるかも知れませんが、ほぼ知識0の私でも出来たので、根気とやる気さえあれば誰でも出来るはずです。

まだまだ試行錯誤の状況ですが、一番勉強になった工程でもあります。Scriptが想定通りに動いてくれた時の嬉しさは癖になるかも知れません。

参考にしたサイト

素人ですので色々勉強しないと話になりません。幸いネット上には有益な情報が大量に、しかも無料で転がっています。参考にさせてもらったサイトの方々にはただただ感謝です。私もいつか誰かの役に立てる様に頑張ろうと思う所存でございます。

HTMLやCSSの事で良くわからなくなったらこちら。(私はよくタグの綴りがわからなくなりますw。)

HTMLクイックリファレンス

個人的にwordpressテンプレート化でつまづいた時に参考にしたサイト。jQuery関係が特に詳しい感じ。

logicA

オリジナルテンプレートを作ってみて思った事。

リニューアルよりも大事な事がある?

ブログに大切なのはまずコンテンツこれは充分承知しているが、入れ物も重要(自分自身のモチベーション的な意味でも、ユーザーの安心感的な意味でも)。

これはネットショップにも言える事で、どちらか一方しかない状況だと旨くいかない事が多い。

サイトは奇麗だが売れないショップ、商品は良いんだけどページが汚くて贈り物とかは買う気がしないショップ。そんな事例は腐るほどあるだろう。

SALEばっかりやっている安売り店舗は別として、きっちり成果を上げている店舗はデザイン面、コンテンツ面(品数や品質、サービス)のどちらもきちんとバランスをとっていると感じる。

ついつい「形から入りたくなる病」が発祥して、成果の伴わないデザインに固執してしまうのは、店舗運営担当者が陥りがちな罠で、今回のブログデザインのリニューアルに関してもそんな匂いがしないではないが、一通り作ってみるという経験はサイトの構造に関しての理解度を大きく上げてくれた。

もしネットショップの担当者で、サイトのリニューアルを考えている人がいたらまずはその優先度があっているかを考えて欲しい。「売れるのに売ってない商品がある」「買ってもらうための情報が不足している」。そんな状況を放置してのリニューアルならちょっと待った。まず簡単に出来る事を終わらせましょう。

デザインのリニューアルには確実にメリットがあります。デザインが良くなれば、ユーザーの安心感は増し、担当者のモチベーションも上がります。(アクセスも多少上がるはず)しかし、せっかくのメリットを活かせる状況になっていなければ意味がありません。

しっかりと自分のサイトの状況を客観的に見た上で売れる店舗(読まれるブログ)を目指しましょう。

それではまた

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る