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

のび太

2015.09.10

Web制作ディレクション

（編集部注＊2015年2月26日に公開された記事を再編集したものです。）

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

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

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

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

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

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

参考になる記事

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

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

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

nobita

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

記事分類（カテゴリー）がわからない
実際に書いている人が見えない（イメージできない）
文字だけなので記事内容がイメージがしずらい
サイトの雰囲気がなんとなく暗い 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制作もいよいよ終盤です。最後のひと押しをがんばりましょう！