ブログのリデザインをwebクリエイターボックスに依頼してみた
2011年02月24日 公開
というわけでブログデザインの5回目の大改築を行いました。
リデザインの受注側のお話はクリエイターボックスさんの記事を参考に、今回は発注側としてどのような事を行ったかを記載して行きます。
「ホームページを作る人のネタ帳」さんのリデザインをしました
リデザインにあたり、どのようにデザインを決めて行ったかというのがポイントです。
打ち合わせ
あちらの記事にも記載されてますが補足。
今回のリデザインの最大の目的は記事の見易さの向上と、3カラムから2カラムへの変更です。リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、
・とにかく読みやすく、スッキリと
・差し色にピンクを使いたい
・jQueryを使った何か仕掛けが欲しい
の三点。それに加えて、リデザイン時に考えるべき下記の点も話し合いました。
海外でも2カラム化が進む中遅すぎるとか言われそうですが、メインコンテンツをもう少しスッキリさせたかったと言うのが思いです。また、「jQueryを使った何か」と言うのは、適当に目的の前に手段を選んだのではなくて、ユーザーにわずか数秒でもいいので楽しんでもらいたい、1度だけでいいので感動してもらいたい、と思いから何かしらの仕掛けを作りたいと考えていました。
打ち合わせが始まり、初めに聞かれた内容は「デザインブランディング」です。
例えば、どのようなデザインにするかと言うのを決めました。
ある程度女性ユーザーも多いネタ帳なのと、どちらかと言うと私はwebデザイナーというよりも、コンテンツを作る側の人間なので、あまり「派手なデザインではなく、それでいて、セクシーにしたい」と言う事を伝えました。
「見易さと使いやすさ＋ちょっとした驚き」が今回のコンセプトです。
ロゴの作成
一般的にロゴの作成をしている人ならみな知っている事かと思いますが、実はそう簡単に決まりません。
ここで結構な時間をかけました。
まず一番最初にもらったロゴがこちら。
この時点でネタ帳という部分が「文章主体」という意味をこめて作ってくれたため、とても気にいって確定。
HPと言うのもロゴとして気に入っていたのですが、ちょっとイメージが合わ無かったため、ボツへ。
ロゴマークを単品として考えて、単品でもう少し使い回し出来るようにして欲しいという依頼をしました。
続いて出来たのがこちら。
これも結構気に入っていたのですが、もう少しシンプルに・・・と。
次がこちら。
ネタ帳のっとられたーーー！！！！！
同時に以下のロゴも。
ちょとイメージとずれてしまったので、「斜め採用」「ピンクもすこし強め」なにか立体感が欲しいと伝えたところ出来上がったのが以下。
パーフェクト！2秒くらいで決定でこれを採用。
コンテンツレイアウト
次にレイアウト。
レイアウトはある程度頭の中で出来上がっていたので、そのまま伝えて1発で採用。
次に私がクライアントとして出した難題が以下。
- 不協和音的なほんのちょっとだけどっか一部型にはまらないパーツ作って
- ほんのりどこかに立体感だして
出来上がったのが以下。
ほんのり飛び出た。
記事部分がさらに明確になるように配慮してくれた上、要望どおりほんのり立体感が出た。
そんなこんなであっという間にレイアウト完成。
トップの装飾
ある程度完成した時に見直すと、もっすごいシンプルになりました。も少し重たくてもいいかなとか思い始めた30分後に、「好きなもの全部書いてください」と言われ、とりあえず書きだしたリストが以下。
- iphone
- ipad
- カラフル
- 数学
- 白黒
- スターバックスコーヒーのクリーム乗ってる奴全部
- ブログ
- ハンバーグ
- ハンバーガー
- 雪のふる都会の夜のイリュミネーション
- 本屋
- フォトショップ
- 黒スーツ
- 参考書の縦積み
- 野良猫・黒猫
- 寿司
- じゃがばたー
- グラウンジ、汚れ
- 手書きのもの、基本全部好き
- みかん
- きりん
- ホットパンツ
- jQuery
で、出来上がったのが以下。
あぁ凄い。このあたりは賛否両論あるかもしれないですが、個人的に私の好きなものばかりがあるので開くたびにテンションがあがるに違いないと採用。
jQueryについて
途中までスクロールして何かを出したいと言うのは、以前どこかのサイトを見て考えていたので、今回それを採用。以前のまとめ記事でも一度紹介した事があり、ちょと気になってた奴をピックアップ。記事ページの下までスクロールするとにょきっと出てくる奴ですね。
今は仕掛けひとつが数ツイートに繋がるチャンスがあるので、ここを生かすために、ユーザーに「おー」を与えたかったのが狙い。
あとなんか面白そうなものお願いしますといって選んできたのがMacユーザー限定のプラグインでした。
「これWindowsじゃみれないじゃん」
「Macユーザーがこれを機会に一人でも増えればいいと思います！」
「あ、はい」
と言う流れで採用。
後はとりあえずまかせっきりで、完成した物を見せてもらったら、エラーもなく問題なかったので使う事にしました。
ところが、FC2にアップするとエラーが出る現象が全く押さえられない。
原因として考えられるとするとFC2ブログは、utf-8で宣言しても、強制的にeuc-jpにさせられてしまうところかと考えています。これが原因で、文字化けもでたり出なかったり。一応euc-jpの宣言に切り替えたのですが、そうすると、これまでIEでにょきって出てた奴が出なくなっちゃいました。
ローカルで動かしても問題ないので、よくわからんというのと、あまり時間も無かったのでそのまま放置。お恥ずかしい。4日くらい色々試したけどだめだったので、もはや誰かに頼ろうと他力本願です←いまここ
そんなわけで
だいぶスッキリして見やすくなり、リデザインしてよかったなーというのが感想です。ありがとうございました。
まだまだやる事は多くて、人気エントリー一覧とか、ソースコード見やすくするSyntaxHighlighterを導入してみようかなとか、urlを含むツイートだけ表示するスクリプトでも導入してみようかなとか色々です。
少しの間アナライザを見ながら微調整していくと思いますが、とりあえずそんな感じで。
それでは、また。