Webサイトをリニューアルする手順と参考にしたいサイトまとめ

日本のみなさん、こんにちはぁ！　ライターのび太です。

今回は自分のブログをリニューアルしたときの手順と、そのときに参考にしたいサイトをご紹介したいと思います。みなさんのサイト制作時の参考になればうれしいです！

サイトをリニューアルする手順と参考にしたいサイト

1. リニューアルする目的を考える

「そもそもなぜサイトをリニューアルする必要があるのか？」まずはこれを考えることがスタートだと思います。ただ単に「かっこ良く見せたいだけ」や「要望があって仕方なく」などの理由であれば、わざわざするべきではないでしょう。リニューアルする主な理由としては以下のようなことが挙げられると思います。

• 新たなコンテンツの追加
• ユーザビリティー向上
• 機能面での変更

参考になる記事

目的を達成させるための最適なWebサイトのタイプ
Webサイト制作の第一歩は目的とゴールの設定から
Webサイトの「目的」と企業の「強み」とユーザーの「利益」とデザインについて

2. 現サイトの問題点を洗い出す

目的を明確にした後は問題点を思いつくかぎりすべて洗い出しましょう。Google Analyticsを使った現サイトのアクセス解析はもちろん、周りの人の意見もとても参考になると思います。サイトリニューアルでは洗い出した問題点が改善されるように設計します。

ちなみに僕のブログの場合は以下の点が挙がりました。

• 記事分類（カテゴリー）がわからない
• 実際に書いている人が見えない（イメージできない）
• 文字だけなので記事内容がイメージがしずらい
• サイトの雰囲気がなんとなく暗い etc.

参考になる記事

ウェブサイトのユーザビリティに関する最高の秘訣20か条
Webユーザビリティを改善するための5つのポイントと方法
サイト制作の参考になる「優れたWebデザイン」10のポイント

3. ワイヤーフレーム作成

ワイヤーフレームとは、Webサイトの「配置図」のことです。「何をどこに置けばユーザーにとって一番いいのか？」を考えながら作っていきます。今回は自分のブログだったので紙とペンで手書きしましたが、クライアントのサイトを作成する場合や誰かと共同作業をする場合は、パワーポイント、Cacooなどのツールを使ってするのが一般的だと思います。

Webデザイナーさんの中にはワイヤーフレームを飛ばしてしまう方もいると聞きましたが、個人的には必ず作成した方がいいと思っています。料理のときに材料だけを揃えていきなり作るよりも、レシピを見て手順を確認してからの方が明らかに作りやすいですよね？

参考になる記事

ワイヤーフレームをつくる時に押さえておきたいポイント
ワイヤーフレームのツールと作り方

4. デザイン作成

配置図を作った後は実際にパソコンを見たときの画面図に落としこんでいきます。ツールはPhotoshop、Fireworks、Illustratorなどを使用します。このときに意識したいのが、次に行うコーディングを楽にするためにレイヤーをわかりやすく整理することです。以下のような注意点があると思います。

• レイヤーにわかりやすい名前をつける
• 階層を明確にする
• レイヤーの順番はサイト構造と同じ順番にする
• 不要なレイヤーを削除する etc.

参考になる記事

デザインカンプが出来るまで
Webサイトの作り方のまとめ！デザイン制作からコーディング手前まで
素晴らしいWebデザインチュートリアル集

そして通常、デザインを作成した後はスライスツールを使って使用する画像を切り取っていきますが、近年のサイト制作ではなるべく画像を使わない方針が主流になっています。これはモバイル端末での読み込み速度やSEOなどを考慮してのことです。CSS3やアイコンフォントなどを使用することで、画像でなくても表現できることが増えてきていますね。

参考になる記事

「CSS3でできること」を知るために見ておきたい42のサイト
まだまだある！疑似要素と疑似クラスでできること
Retinaでもボケない「シンボルアイコン」を使いこなそう！

5. コーディング

デザインが確定したらガリガリとコーディングしていきます！　コーディングツールはDreamweaver、Sublime Text、Codaなどがあります。人によって使うツールは様々ですが、いずれにせよ「ショートカットなどの機能をしっかり理解」「使いやすいようにカスタマイズ」することは必須だと思います。

コーディングの際にはCSSフレームワークをオススメします。僕はFoundationを使いました。CSSフレームワークは「CSSファイルの肥大化」や「自由度が低い」などのデメリットもありますが、レスポンシブデザインを作るときや時間短縮したいときはとても重宝します。

参考になる記事

完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！
目指せSassマスター！デザイナーがすぐ実践出来る基本テクニック12連発

6. ブラウザチェック

IE、Chrome、Safariなどの各ブラウザに加え、iOS、Androidなどのモバイル端末やタブレットが登場してきたことでブラウザチェックの必要性はより一層増してきたと思います。「あぁ〜これ崩れてるわ。あぁ〜こっちも崩れてる！」と対応にイライラすることもあると思いますが、Web制作もいよいよ終盤です。最後のひと押しをがんばりましょう！

参考になる記事

Webサイトの作り方のまとめ！ブラウザチェック
サイトの様々な確認作業に使うチェックツール達！レスポンシブ、パフォーマンス、クロスブラウザ対応等全部！
レスポンシブWebデザイン制作時必見のブラウザチェックツール10選

7. 日々のチェック・更新・改善

「Webサイトは作ったらもうおしまーい！」って思っていませんか？　Webサイトは作ってからが本番です。作りっぱなしで何もしないサイトは今の時代すぐに死んでしまいます。子供と同じで気持ちを込めて育てていくことによってWebサイトは輝きを増すのです。

Google Analyticsを用いた定期的な解析、お知らせ情報の更新など、ブログだけではなく一般のサイトでも日々のチェック・更新・改善は欠かせません。丹精込めてあなたのサイトを育てていきましょう！

参考になる記事

知っておいて良かった！サイト制作後も助かる保守方法まとめ
SEO対策としてこれだけはやっておきたいこと
被リンク構築法と注意点｜５ヶ月で月間５０万PVを達成したSEO攻略法

さいごに

今回はサイト制作の流れをご紹介させていただきましたが、サイト制作は経験を積むことが何よりも大事だと思っています。繰り返すことで一連の流れがスムーズになり、もっと効率的な方法などが見つかっていくのです。

最後に、今回自分のブログリニューアルにあたってここでご紹介した多くのサイトを大いに参考にさせていただきました。どれもすごく有益な情報でとても助かりました。ありがてぇ〜！！

みなさんがサイトをリニューアルするときの参考にしてください。

Webサイトのリニューアルを支援します
制作についてのお問い合わせ

【株式会社LIGについて】

わたしたちは年間150を超えるWebサイトをリリースしている、東京上野のWeb制作会社です。多数の制作実績も！Webサイト制作のご相談はこちらより、お気軽にお問い合わせください。

【株式会社LIGについて】

わたしたちは年間150を超えるWebサイトをリリースしている、東京上野のWeb制作会社です。もちろん、サイトのフルリニューアル制作実績も！Webサイト制作のご相談はこちらより、お気軽にお問い合わせください。