「ホームページを作る人のネタ帳」さんのリデザインをしました
Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました！リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。
打ち合わせ
リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、
- とにかく読みやすく、スッキリと
- 差し色にピンクを使いたい
- jQueryを使った何か仕掛けが欲しい
の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね！それに加えて、リデザイン時に考えるべき下記の点も話し合いました。
うまくいってるコンテンツは？
この「うまくいっている」というのは、よく読まれている・クリックされているコンテンツのこと。アクセス解析などをもとにユーザーがどこをクリックしているのかを判断します。ホームページを作る人のネタ帳では
- 一番上の「人気のタグリスト」
- サイドの「カテゴリー」
- サイドの「最近のエントリー」
このエリアから他ページへ移動するユーザーが多いため、これはその場所のまま残すことに。
必要なもの・不要なもの
うまくいっているコンテンツとそうでないものを見極めて、あまりクリックされていないものや不要な装飾などを分けていきます。不要なものはこの際取り除いてしまいますよ！同時に一緒に表示しても違和感のないものは同じコンテンツ（カテゴリー）にしてしまったり、足りないと思ったコンテンツを追加したりという事も考えていきます。
全体のデザインを変えるかどうか
これもリデザインの時に考えておきたい要素のひとつ。全体の色合いやレイアウトをいかしつつ、新たなデザインに変更するのか、それとも全てを変えてしまうのか、という点です。Yamadaさんからは「ガラッとイメージチェンジしたい」と言われていたので、配色から考えていくことにしました。
問題点と解決策を考える
打ち合わせの際に、既存のサイトの問題点もリストアップしていきます。これは自分でデザインしたサイトの場合、自分では気付けないことも多いため、第三者と考えていくのがいいでしょう。ターゲットユーザーに実際に見てもらうのもいい方法です。ホームページを作る人のネタ帳の改善すべき点と解決方法を考えてみました。
1. ロゴをスッキリさせたい
5色使用し、反射や背景模様などを用いてなんだかまとまっていない印象があります。今回のコンセプトとあっていないので変更。
解決策→使用する色を少なくする、過度な装飾をしない
2. 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カラムでスッキリと。
サイドに入りきらないコンテンツなどはフッターにまとめました。
デザイン
レイアウトに問題がなければいよいよデザイン作業に入ります。
配色
以前のホームページを作る人のネタ帳のブランディングカラー（ベースカラーとロゴに用いられるそのブランドを現す色）は、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サイトの作成目的は、作る事ではなく、運営する事」
↑まさに、ですね。
シンプルでとても見やすいデザインになっててびっくりｗデザインはやっぱりマナさんテイストがわかりますね縲怐B
失敗リストの小ネタも遊び心があって良いな縲怐喀r
とても参考になりました！この小ネタ使わせていただいても良いですか？？？
いやぁ縲怺ｴ動しました。
最強の二人がタッグを組むと凄い!!
あと、この記事の分析も大好きです。
あと数回読み直しますw
うーん！素晴らしい。
色調も統一されていて、非常に素晴らしいの一言。
IE6非対応というのも・・ｗ
綺麗ですね。
素晴らしい！！
ですけど上へ戻るボタンがなくなったのがきになる。。。
[…] 「ホームページを作る人のネタ帳」さんのリデザインをしました[Webクリエイターズボックス] 依頼した「ホームページを作る人のネタ帳」さん視点もあり、非常におもしろい。ヘッダーイメージのスタバカップの角度がちょっと気になるかも。。 […]
こういうのっていくらくらいの料金で引き受けて下さるのでしょうか？
スゴい綺麗なデザインですね！
記事も非常に参考になりました！
僕も、人に見せれるようなデザインと説明ができるようになりたいですが、中々・・・。
ネタ帳さんから訪問しました☆彡
Twitterでyamadaさんがレイアウト変えるって言ってて楽しみにしていたら、マナさんが絡んでいたのですね～～＾＾
素敵デザイン参考にします＾＾
ファーストビューが不要な装飾で押し下げられている。
アフィリの事を考えるとすっきりしすぎも問題。
このデザインが最適解ではない。
素晴らしい仕事だがもっと工夫の余地はあると思う。
こっからはA/Bテストですな。
[…] […]
すごい勉強になります。
今こういう情報がほしかったんですｗ
[…] […]
今年こそはWP始める！と思ってからすでに２カ月が過ぎようと＾＾；
今日！ようやくWP始めました！
ローカルサーバー作ってWPダウンロード
レンタルサーバー登録して
あれ？WP簡単インストール？あららこれだけでよかった？＾＾；
そこからManaさんのテーマアップして
ふう～
ここまでですでに2時間！＾＾；
さ～て３月までにはなんとか形にしたいです！
みなさんありがとうございます！これからもテストを重ねて改善していければと思います！
はじめまして。いつもManaさんのバイタリティーに感動しています。
ユーザビリティーは高いほど良いですよね。
読みやすい、迷子にならない、などを配慮することで多くの人に届きやすくなる。
誤解を恐れずに言うと、その辺の配慮が得意なのは、女性の制作者に多い気がします。嬉しい！
全体的に大掃除＆整理されたイメージで、素晴らしいですね！
１点、他の方もコメントされていますが、一番上の画像があることで、華やかさと引き替えに、ビジターは毎回のように下に大きくスクロールしないと記事を読み始められない。
このようなレイアウトは多くのブログが採用していますが、ビジターにはマウス操作が不自由な方もいらっしゃいます。
もっと違う方法を世の中の主流にできないものか？私自身、日々考えています。何か思いつき、自分で実現できた暁には、ご報告したいところです。
あ、差し支えなければ、要した日数や予算など、「こういうもんなんだよ」という事例として、大まかでいいので知りたいです^^
長文失礼しました！
なるほどー。
参考になります。
[…] 「ホームページを作る人のネタ帳」さんのリデザインをしました | W…とにかく読みやすく、スッキリと 差し色にピンクを使いたい jqueryを使った何か仕掛けが欲しい の三点。それに加えて、リデザイン時に考えるべき下記の点も話し合いました。 うまくいってるコンテンツは? この「うまくいっている」というのは、よく読まれているクリッ…はてなブックマークより 愛美魂☆♯17☆『ヨガ10日目クヨクヨせず心をスッキリ！』愛美のBLOG ameblo.jp PLIMEのHP http://www.plime.jp ダンスボーカルユニットPLIMEのAIMI（関口愛美）です！ 愛美魂とは。。。 私が毎週、週毎にいろんなことに挑戦していく動画BLOGです！ 第3週目「ヨガ（yoga）」 今日はくよくよしない、心をスッキリさせるポーズで…YouTubeより […]
[…] […]