「ホームページを作る人のネタ帳」さんのリデザインをしました

Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました!リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。


打ち合わせ

ホームページを作る人のネタ帳

リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、

  • とにかく読みやすく、スッキリと
  • 差し色にピンクを使いたい
  • jQueryを使った何か仕掛けが欲しい

の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね!それに加えて、リデザイン時に考えるべき下記の点も話し合いました。

うまくいってるコンテンツは?

この「うまくいっている」というのは、よく読まれている・クリックされているコンテンツのこと。アクセス解析などをもとにユーザーがどこをクリックしているのかを判断します。ホームページを作る人のネタ帳では

  • 一番上の「人気のタグリスト」
  • サイドの「カテゴリー」
  • サイドの「最近のエントリー」

このエリアから他ページへ移動するユーザーが多いため、これはその場所のまま残すことに。

必要なもの・不要なもの

うまくいっているコンテンツとそうでないものを見極めて、あまりクリックされていないものや不要な装飾などを分けていきます。不要なものはこの際取り除いてしまいますよ!同時に一緒に表示しても違和感のないものは同じコンテンツ(カテゴリー)にしてしまったり、足りないと思ったコンテンツを追加したりという事も考えていきます。

全体のデザインを変えるかどうか

これもリデザインの時に考えておきたい要素のひとつ。全体の色合いやレイアウトをいかしつつ、新たなデザインに変更するのか、それとも全てを変えてしまうのか、という点です。Yamadaさんからは「ガラッとイメージチェンジしたい」と言われていたので、配色から考えていくことにしました。

問題点と解決策を考える

打ち合わせの際に、既存のサイトの問題点もリストアップしていきます。これは自分でデザインしたサイトの場合、自分では気付けないことも多いため、第三者と考えていくのがいいでしょう。ターゲットユーザーに実際に見てもらうのもいい方法です。ホームページを作る人のネタ帳の改善すべき点と解決方法を考えてみました。

1. ロゴをスッキリさせたい

ロゴデザイン

5色使用し、反射や背景模様などを用いてなんだかまとまっていない印象があります。今回のコンセプトとあっていないので変更。

解決策→使用する色を少なくする、過度な装飾をしない

2. Ver. 4.0…って何のことだかわからない

Ver. 4.0…

サイトの右上にあったこの「Ver. 4.0」の意味。これはホームページを作る人のネタ帳のリデザインの回数で、デザインのバージョンの事だったようです。ちょっとわかりにくい&ここまで強調しなくてもいいような。

解決策→ロゴ下に「Website Design Version…」とこっそり入れる

3. 検索ボックスが見つけにくい

検索ボックス

サイドバー内の広告に囲まれていた検索ボックス。これでは検索自体しにくくなります。

解決策→検索ボックスをサイドバートップに設置する

4. メインコンテンツの割合が小さい

メインコンテンツの割合

サイドバーを2つ用い、メインコンテンツとサイドバーが同じくらいの割合になっています。ちょっと窮屈な印象です。

解決策→2カラムにする

5. ギッシリつまった文字

つまった文字

4. と同様、コンテンツの文字(特にサイドバーのリンク)が詰まって見えます。

解決策→行間・paddingをうまく使ってスペースをとる

6. 重複したコンテンツ

重複したコンテンツ

例えばタグクラウド。「css」と「CSS」や「mac」と「Mac」など、重複したものが多数あり、タグクラウドを無駄にわかりにくくさせています。

解決策→まとめられるものは一つに整理する

7. どれがクリックできるかわからない

どれがクリックできるかわからない

特に記事ページ下のコメント・トラックバックあたり。クリックできるものと見出し画像のものが同じデザインで配置されています。

解決策→見出しのスタイルを統一し、クリックできるものとできないものを分ける

8. なぜか縦書き

縦書き

コメントの注意欄のみ縦書き・別フォント。これは非常に読みにくいですよね…。

解決策→書き方やフォントを統一する

ワイヤーフレームを作成

以上の打ち合わせをもとにワイヤーフレームを作ってレイアウトを考えていきます。今回使ったツールは mockingbird。他にも Cacoo も使ったりします。

2カラムでスッキリと。

2カラムでスッキリと。

ワイヤーフレーム フッター

サイドに入りきらないコンテンツなどはフッターにまとめました。

デザイン

レイアウトに問題がなければいよいよデザイン作業に入ります。

配色

配色

以前のホームページを作る人のネタ帳のブランディングカラー(ベースカラーとロゴに用いられるそのブランドを現す色)は、8色。これでは少し多すぎるため、5色に減らしました。要望にもあったピンクをアクセントカラーにし、温かみのある雰囲気にするため、淡いブラウンを中心にベースカラーを取り入れます。

ロゴ

ロゴ

作成したブランディングカラーを用いてロゴを作ります。HPの文字は絶対に入れたかったので採用。「Website Design Version 5.0」もここにこっそり入れました。

トップの装飾

そうしてできあがったデザインがこちら。

シンプルデザイン

なんだかシンプルすぎる…。

ということで装飾を加えることに。

こんな感じに変身。Yamadaさんの好きなものを集めました。

コーディング

FC2のテンプレートタグなどはYamadaさんがやってくださるとの事だったので、HTML・CSSテンプレート作成のお手伝いしました。そしてIE6に対応しなくてよいという神の声!という事で透過PNGもそのまま使っています。要望にもあった「jQueryを使った仕掛け」も取り入れています。

おぉ…?

これは…?

Before・After

そんなこんなで完成しました!以前よりスッキリとしている…はず!

Before

ホームページを作る人のネタ帳

After

ネタ帳リデザイン

Yamadaさんもよくおっしゃている事ですが、「Webサイトの作成目的は、作る事ではなく、運営する事」なので、これからも改善点を見なおしていき、よりよいサイトにしていきたいですね!また、依頼してくださったYamadaさんからの視点で見た今回のリデザインについて書かれた記事「ブログのリデザインをwebクリエイターボックスに依頼してみた」も合わせて読んでみると楽しいかもしれません!

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)