法務ネットの作り方

Posted on Posted in 趣味的なIT・ネットの話題

27701688_136b41e7d1_o

こういうホームページってどうやって作るのですか?

今回ホームページを大幅にリニューアルしました。独立した頃にリニューアルしたきり、7〜8年そのままにしていたので、そろそろ時流に乗ったホームページにしたいなぁと考えたからです。これまでに何回かホームページを作ってきましたが、このノウハウは、コンサル系の職業の人が自分でホームページを作る、コンサル系の人のためにホームページを作る方には役に立つのではないかと思われました。そこで簡単ですが作業フローをまとめておきます。

下準備1:WEBマーケティングの予習

ホームページを作るとなると、まずは業者探しから始める方が多いと思いますが、これはバツです。どんなホームページを作るべきなのかをまじめに考えるところから始めないといけません。一般的にはWEBマーケティングと言われている分野だと思いますが、自分自身にその知識が無いと、どんなホームページがよいホームページなのかを判断することができません。その判断ができなければ、業者に頼むにしても、どんな業者がよい業者なのかの判断の物差しがなく、結局価格だけで業者を選んでしまいます。
アマゾンあたりで「WEBマーケティング」で検索すると沢山本が出てくると思いますから、評判の良さそうなものを二三見繕って、目を通してください。
ちなみにですが、ホームページの作成業者ではなく、WEBマーケティングのコンサルティング業者であれば、最初から業者を探してもよいですし、「ちゃんとしてWEBマーケティングコンサルティングができるホームページ作成業者」でも構わないと思います。それでもちゃんとその業者からWEBマーケティングの基本を教えてもらう様にして、知識の習得を怠らないようにしておください。

下準備2:パーソナルブランディング

WEBマーケティングの勉強が終わっても、ホームページの作成作業や業者選定を始めてはいけません。いわゆるパーソナルブランディングを行って文書としてまとめておく必要があります。コンサル系の職業の人のホームページというのは、結局の所パーソナルブランディングの結果の表現でしかありません。ですのでパーソナルブランディングができていなければ、ホームページに書くことが無いという結果になります。いや、作れるかもしれませんが、海千山千のホームページと五十歩百歩のホームページが出来上がるだけです。そんなホームページは作るだけ無駄ですから、そんなもののために時間とコストをかける必要は無いです。

委託するかの判断

ここで始めて外注するかどうかの判断を行うことになります。外注をするのであれば、パーソナルブランディングの結果を伝えさえすれば、あとは業者任せでよいでしょう。もちろんパーソナルブランディングという言葉の意味を理解できない業者は問題外ですが。
外部委託をしないのであれば、以下の方法で、自分だけでゴリゴリとホームページを製作していくことになります。なお最近のGoogleの傾向からすると、自分でコンテンツを書きためていく方が長期的なSEOには効果的である可能性が高いです。そのため自分で作れる可能性があるのであれば、自分で作る方がよいと思います。業者に委託するにしても、記事の追加は自分で行えるシステムを使ってもらう方がよい出そう。

CMSを使うかどうかの判断

以下は自分でホームページを製作する場合の話です。最初に考えるべきはCMS(コンテンツマネジメントシステム)を使うかどうかです。CMSを使わない場合には、いわゆるホームページ作成ソフトを使ったり、HTMLを自分でコーディング(コードを書く)する事になります。ただこの方法は、労力がかかる割には、素人臭い仕上がりにしからない、更新が手間とデメリットが多いのでお勧めしません。
そのためできればCMSを使用する事をお勧めします。CMSを使用すると、デザインは既成のテーマを使うかその修正だけで済み、更新はすべてブラウザから行えます。CMSにはさまざまなものがあり、製品毎に一長一短ですが、私はこれまでオープンソースのものばかりを使っています。最初はXoops、その次はMovable Type、そして今回はWordpressです。最初にXoopsを選択したのは、Q&Aサイトという体裁つくるときに、最初からその機能が備わっていたのがXoopsだけだったのと、かっこいい(とその時は私が思った)と思ったデザインテーマがあったのがXoopsだったからです。次のリニューアルの際にMovable Typeにしたのは、だんだん仕事をが忙しくなり、サイトのセキュリティアップデートが適時に行えなくリスクを感じていたので、ASPで提供されているMovable Type(Typepad)を選択しました。そして今回Wordpressにしたのは、システム自体に自動アップデート機能が備わったことと、Movable Typeの元気が無くなっているようでおしゃれなデザインテーマが見つからない、Wordpressならいっぱいあるという状況だったからです。

レンタルサーバーの選定

WordPressもASPで提供されてます(wordpress.com)。最初は楽でいいかなと思い使ってみたのですが、カスタマイズ範囲が狭すぎて使用を断念しました。wordpress.comが提供するテーマしか使えないというのが一番痛かったです。
そうなるとレンタルサーバーを使うことになります。レンタルサーバーもそれこそ沢山業者があります。慣れないうちは使おうとしているCMSの自動インストールに対応しているところがよいでしょう。Wordpressであれば、自動インストールができれば、FTPを使う必要が無いので取っつきやすいと思います。今回は私はさくらインターネットの共用にしました。

WordPressのインストール

さくらの場合、データベースのインストールまでは自動で行ってくれませんので、事前に作成しておく必要があります。もっともコントロールパネル上から実施可能ですから簡単です。その後Wordpress自体のインストールを行います。作業としては合計でも数分ですぐに完了します。
独自ドメインを利用の場合には最初から使っておく方がよいと思います。私のようにリニューアルで行う(さくらドメインでテストしておいて独自ドメインに移行する)場合、.htaccessのmod_rewriteの設定を手動で変更する必要がありました。

テーマの選定

素人が自分でデザインしてもろくな仕上がりになりませんから、かっこいいテーマを選んで導入するのが得策だと思います。Googleがモバイル対応していないサイトの順位を下げることを発表したので、今後のサイト構築はマルチデバイス対応が必須になっています。デバイス毎にサイトデザインを分けるのは大変なので、レスポンシブ(responsive)デザインになっているテーマを使うのがよいでしょう。レスポンシブデザインは、ひとつのデザインなのに、スマートフォンの縦持ちからフルHDの横配置まで、画面の幅に応じてサイトの情報配置が自動的に調整されるようになっているデザインです。
ネットで”wordpress responsive theme”で検索すると沢山のテーマが出てきますので、自分の好みに合うテーマを選べばいいと思います。実際にはデザインが多すぎて選ぶのが一苦労でしょう。ただ、本当かどうかはわからないのですが、出回っているものの中にはマルウェア的なコードが含まれているものがあるとのことです。このリスクを避けるためには、wordpressの公式サイトで紹介されているテーマを使うのがよいです。公式サイトではテーマの掲載にあたって審査があるので、不正なコードが混入されている可能性は低いと思われます。

下準備3:SEOの知識を学ぶ

SEO対策の手法は黎明期は内部対策であり、Googleの登場によって外部対策に移行したわけですが、また内部対策重視の方向に変わってきています。そうなるとホームページを作るのであれば、最初からSEOを考慮したサイト構成にすることを考えておかないといけません。SEOのことを考えていないサイトを後から内部対策をするのは大変ですし、余計な手間がかかるからです。この辺りも書籍が沢山出版されていますから、それなりに評判の良さそうな本を1〜2冊目を通せば、だいたいの手法はみにつくでしょう。

SEOデザイン

テーマのインストール後、デザインの調整をする前に、SEOを考慮したサイト構成を先に考えた方がいいです。基本的にはサイトのページを大きく二分して、一方はコンサル業のアピールのためのページ、一方はSEOのキーワードコンテンツのページとするのがいいでしょう。私のページの場合は、フロントページと固定ページは本職のアピールのためのページとし、ブログ記事のページはSEO用コンテンツ記事のためのものとしています。そしてWordpressを使う場合には、メニュー、サイドバー、フッターが各ページで共通することが多いですから、ここに基本的なSEOキーワードをちりばめた文章を配置します。もちろんページタイトルやその他のHEAD内のMETA要素はもれなく記述します。
できるだけ高品質な写真を織り交ぜる方が見栄えはよくなると思います。最近はストックフォトを使うのが流行ですが、とりあえずはFlickrでライセンス条件を指定して(commercially available)でてきたものを使っています。

テーマ特有の情報入力

私が使ったAthemesのSydneyはカスタマイズ項目がそれなりに充実しているので、CSSやPHPを直接いじくらなくても、ある程度のカスタマイズができます。モジュール部品の配置とそれに対する設定だけで、ある程度は見栄えのするサイトになるはずですので、まずは設定項目を端から端まで浚って、どの項目がどのようにページに反映するのかを実際に確認してみるとよいと思います。

デザインのチューニング

WordPressのテーマは海外で作られているものがほとんどですから、日本語フォントのサイズだと今ひとつしっくりこない部分がどうしても残ります。そこで可能であればCSSファイルをチューニングして、行間、文字サイズ、余白等を調整すれば、見栄えがよりよくなります。テーマファイルのCSSを修正してもよいのですが、できれば子テーマ機能を利用してください。子テーマを利用すると、テーマ本体のアップデート時にも修正が残せる、修正した部分がわかりやすいというメリットがあります。FTPを使用しないといけなくなるのでハードルが若干上がりますが、後々の手間が大分と減ります。
あと仕事のためのホームページだとページ上部のAdmin Barとページ下部のFooterも不要だと思いますが、PHPをいじれば簡単に消すことができます。

プラグインの導入

WordPressはそのままでのある程度の機能が発揮できますが、かゆいところに手が届くようにするにはプラグインの導入が必要になります。
私が現時点で導入しているのは以下のものです。テーマに必須なものは別途インストールしています。
All In One SEO Pack
METAタグの設定が簡単に行えます。
Contact Form 7
自由な内容で編集できるメールフォームです。
Really Simple CAPTCHA
メールフォームを導入するとスパムが来ますのでこれでブロックします。
Google XML Sitemaps
無くてもいいのですが、XMLサイトマップを導入した方が確実にクロールされるようになるので、恐らくはインデクシングが早くなると思います。
Social Media Feather
個別記事の末尾にSNSへのシェアリンクを追加するのに使用します。
WP Super Cache
後述のPageSpeed Insights対策に使用します。が、サイトの構築中は更新が反映されなくなりますので基本オフにします。

Google PageSpeed Insights対策

ウェブサイトがストレス無く表示されるかどうかで順位が変わる可能性があるらしく、Googleの評価対策として実行します。
私が行えたのは、
ブラウザキャッシュの設定を追加
画像の圧縮率を高める
mod_deflate
Access-Control-Allow-Origin
までです。以下のプラグインは有効らしいのですが、表時が崩れたりするので活用し切れていません。
Autoptimize
css短縮化を実行するとコンタクトフォームが崩れた
javascript圧縮とhtml圧縮だけ利用
ポイントには影響なし
Async JS and CSS
非同期読み込みを実行すると速度や評価が上がるはずですが、JS非同期はブログページにアクセスできなくなりCSS非同期を使用するとデザインが崩れた

内部コンテンツの追加

内部対策用のテキストコンテンツを100件単位で追加します。これが一番大変です。が、長期的なSEOを実現するにはこれしかありません。

Google Analytics

現在の所アクセス解析はこれ一択でしょう。SEOプラグインを導入していればID番号を入れるだけで導入できます。

Google Webmaster Tool

サイトマップの提出やクロール状況の確認に使用します。これもSEOプラグインを導入していればサイトマップをすぐに提出できます。

Facebooktwittergoogle_pluspinterestlinkedinmail
納得したらすぐにシェア!