情熱キャリアアドバイザー川島正好のブログ

千葉で人材育成に関わるサラリーマンが毎日更新。進路講演・就活支援など学生に役立つ活動も熱量高めに展開中。

ホームページリニューアル秘話

GWでホームページをリニューアルしました。

www.kawa4ma.asia

 

リニューアルの背景

旧サイトはかさこ塾(2016.9)卒業製作の意味で突貫製作したものをそのまま使ってきました。半年ほど経って更新ネタもたまってきていたので、改めて「誰に・何をつ伝え・何を得るか」を問い直してリニューアルしようと考えました。

 

リニューアルポイントは

  • スマホに対応(学生目線で)
  • カテゴリを整理(先生・保護者目線で)

ホームページ製作は真っ白のキャンパスに絵を描いていくような作業なので、いきなりパソコンで作りだすと迷走します。

パワポのスライド作りも同じですが、必ず下書きをして、誰に・何を伝えていきたいのかを書き出していきます。

f:id:es4794:20170505105149j:plain

 

ターゲットとコンテンツが出てきたら、見せたい人が見やすいように導線を作って整理していきます。ここで気をつけたいのは「ターゲット目線」を外さないこと。自分の好みで名前や階層を整理していくと自己満足のサイトに早変わりするため要注意です。

f:id:es4794:20170505105338j:plain

 

Wordpressを使わないワケ

Wordpressはホームページとブログが一体で更新しやすいため、顧客が流入しやすい半面、仕組みがブラックボックス化する懸念があります。つまり自分のサイトなのに自分でコントロールしきれない状況を避けました。

 

Wordpressはメールフォームのような感覚でカンタンに記事がUPできる一方、Wordpress本体に脆弱性が見つかったり、プラグインの追加・SEO対策・サイトの引っ越し・データ移行などは、Wordpressの制約に引っかかったり、専門家に依頼しなければ解決できない場合もあるからです。

 

その点HTMLは何でもあり。もともとエンジニアだったのでHTMLやCSSをエディタで作ることは苦ではなかったのと、バックアップがいつでも手元にあって身軽に運用できる点を優先させ、無料テンプレートを使ってコンテンツを整理整頓しながらリニューアルする方法を選択しました。 

 

無料テンプレートに技術サポートが!

今回採用したテンプレートはこちら。

www.coolwebwindow.com

 

無料テンプレートは「HTML テーマ レスポンシブ」などで検索すれば無料/有料がゴロゴロ出てきます。下書きを踏まえて①移行の手間が少なく、②シンプルで操作性がよいものを選びました。

 

こちらのテンプレートで驚いたのが、配布元へ技術的な問合せが無料でできること。

 

無料テンプレートって作り始めると、細部で欲しいレイアウトが用意されていなかったり、微修正したい場合が出てきます。今回は既存の「写真の横2列表示」から「横3列」が欲しくなり、ダメ元でサポートにメールしました。

 

GW真っ直中なので返信は週明けかなーと思ったら、数時間後に返信が届いてビックリ!

川島様

初めまして。
CoolWebWindowの*******と申します。

この度は当サイトのCSSテンプレートをご利用くださり、誠にありがとうございます。商品一覧のカラムを3列で表示させる方法ですが、
index.htmlファイルの138行目、
===============================
        <div class="col_two_one">
===============================
これを
===============================
        <div class="col_three_one">
===============================
というようにクラス名を変更します。その他の設定個所は、、、(略)

 

完成度80% 

ホームページは完璧に仕上げて公開するより、7割~8割くらいの完成度で早めに公開し、ターゲットの反響を見ながら微修正していくほうが、最終的に効果のあるサイトに成長すると考えています。

 

他社目線でサイトを作ったとしても、やはり実際にターゲットの方々に見ていただいて、反響を見ながら軌道修正していく方が確実です。

 

そのためには完成度に余裕(遊び)を持たせておくことも大切だと思います。