ブログのリデザインをwebクリエイターボックスに依頼してみた

  • 2011/02/24
  • このエントリーをはてなブックマークに追加

スポンサーリンク

リデザイン
というわけでブログデザインの5回目の大改築を行いました。

リデザインの受注側のお話はクリエイターボックスさんの記事を参考に、今回は発注側としてどのような事を行ったかを記載して行きます。
「ホームページを作る人のネタ帳」さんのリデザインをしました

リデザインにあたり、どのようにデザインを決めて行ったかというのがポイントです。

IT/Web業界に強い転職サイトGreen

打ち合わせ


あちらの記事にも記載されてますが補足。

リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、
・とにかく読みやすく、スッキリと
・差し色にピンクを使いたい
・jQueryを使った何か仕掛けが欲しい
の三点。それに加えて、リデザイン時に考えるべき下記の点も話し合いました。

今回のリデザインの最大の目的は記事の見易さの向上と、3カラムから2カラムへの変更です。

海外でも2カラム化が進む中遅すぎるとか言われそうですが、メインコンテンツをもう少しスッキリさせたかったと言うのが思いです。また、「jQueryを使った何か」と言うのは、適当に目的の前に手段を選んだのではなくて、ユーザーにわずか数秒でもいいので楽しんでもらいたい、1度だけでいいので感動してもらいたい、と思いから何かしらの仕掛けを作りたいと考えていました。

打ち合わせが始まり、初めに聞かれた内容は「デザインブランディング」です。
例えば、どのようなデザインにするかと言うのを決めました。

ある程度女性ユーザーも多いネタ帳なのと、どちらかと言うと私はwebデザイナーというよりも、コンテンツを作る側の人間なので、あまり「派手なデザインではなく、それでいて、セクシーにしたい」と言う事を伝えました。

「見易さと使いやすさ+ちょっとした驚き」が今回のコンセプトです。


ロゴの作成


一般的にロゴの作成をしている人ならみな知っている事かと思いますが、実はそう簡単に決まりません。
ここで結構な時間をかけました。

まず一番最初にもらったロゴがこちら。
ロゴ案1
この時点でネタ帳という部分が「文章主体」という意味をこめて作ってくれたため、とても気にいって確定。
HPと言うのもロゴとして気に入っていたのですが、ちょっとイメージが合わ無かったため、ボツへ。

ロゴマークを単品として考えて、単品でもう少し使い回し出来るようにして欲しいという依頼をしました。

続いて出来たのがこちら。
ロゴ案2
これも結構気に入っていたのですが、もう少しシンプルに・・・と。

次がこちら。
ロゴ案3
ネタ帳のっとられたーーー!!!!!

同時に以下のロゴも。
ロゴ案4
ちょとイメージとずれてしまったので、「斜め採用」「ピンクもすこし強め」なにか立体感が欲しいと伝えたところ出来上がったのが以下。
完成ロゴ
パーフェクト!2秒くらいで決定でこれを採用。


コンテンツレイアウト


次にレイアウト。
レイアウト
レイアウトはある程度頭の中で出来上がっていたので、そのまま伝えて1発で採用。

次に私がクライアントとして出した難題が以下。
  • 不協和音的なほんのちょっとだけどっか一部型にはまらないパーツ作って
  • ほんのりどこかに立体感だして

出来上がったのが以下。
ほんのり飛び出た
ほんのり飛び出た。

記事部分がさらに明確に
記事部分がさらに明確になるように配慮してくれた上、要望どおりほんのり立体感が出た。

そんなこんなであっという間にレイアウト完成。


トップの装飾


ある程度完成した時に見直すと、もっすごいシンプルになりました。も少し重たくてもいいかなとか思い始めた30分後に、「好きなもの全部書いてください」と言われ、とりあえず書きだしたリストが以下。

  • iphone
  • ipad
  • カラフル
  • 数学
  • 白黒
  • スターバックスコーヒーのクリーム乗ってる奴全部
  • ブログ
  • ハンバーグ
  • ハンバーガー
  • 雪のふる都会の夜のイリュミネーション
  • 本屋
  • フォトショップ
  • Google
  • 黒スーツ
  • 参考書の縦積み
  • 野良猫・黒猫
  • 寿司
  • じゃがばたー
  • グラウンジ、汚れ
  • 手書きのもの、基本全部好き
  • みかん
  • きりん
  • ホットパンツ
  • Twitter
  • jQuery

で、出来上がったのが以下。
ヘッダーデザイン
あぁ凄い。このあたりは賛否両論あるかもしれないですが、個人的に私の好きなものばかりがあるので開くたびにテンションがあがるに違いないと採用。



jQueryについて


途中までスクロールして何かを出したいと言うのは、以前どこかのサイトを見て考えていたので、今回それを採用。以前のまとめ記事でも一度紹介した事があり、ちょと気になってた奴をピックアップ。記事ページの下までスクロールするとにょきっと出てくる奴ですね。

今は仕掛けひとつが数ツイートに繋がるチャンスがあるので、ここを生かすために、ユーザーに「おー」を与えたかったのが狙い。

あとなんか面白そうなものお願いしますといって選んできたのがMacユーザー限定のプラグインでした。
「これWindowsじゃみれないじゃん」
「Macユーザーがこれを機会に一人でも増えればいいと思います!」
「あ、はい」
と言う流れで採用。

後はとりあえずまかせっきりで、完成した物を見せてもらったら、エラーもなく問題なかったので使う事にしました。

ところが、FC2にアップするとエラーが出る現象が全く押さえられない。
原因として考えられるとするとFC2ブログは、utf-8で宣言しても、強制的にeuc-jpにさせられてしまうところかと考えています。これが原因で、文字化けもでたり出なかったり。一応euc-jpの宣言に切り替えたのですが、そうすると、これまでIEでにょきって出てた奴が出なくなっちゃいました。

ローカルで動かしても問題ないので、よくわからんというのと、あまり時間も無かったのでそのまま放置。お恥ずかしい。4日くらい色々試したけどだめだったので、もはや誰かに頼ろうと他力本願です←いまここ



そんなわけで


だいぶスッキリして見やすくなり、リデザインしてよかったなーというのが感想です。ありがとうございました。
まだまだやる事は多くて、人気エントリー一覧とか、ソースコード見やすくするSyntaxHighlighterを導入してみようかなとか、urlを含むツイートだけ表示するスクリプトでも導入してみようかなとか色々です。

少しの間アナライザを見ながら微調整していくと思いますが、とりあえずそんな感じで。

それでは、また。



スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

MU こんばんわ~

おお
おおっ
おおお~~~
素敵designはマナさんとの合作だったのですね~☆彡
前のは前のでコンテンツぎっしりあります!的な感じで好きだったのですけど、今回は2カラムですっきりdesignで、さらに素敵になりましたね☆彡


フッターのjqueryもステキで今から色々変更点、見て回ります(笑)


いつも良い情報に感謝です^^

2011/02/24 Thu 22:30| |

石山城 祝・リニューアル

MANAさんの記事も読ませて頂きました。とってもキレイです。

そして、打合せのやりとりの様子、手に取るように想像が付いてひとりニヤニヤしてました。たぶん、そういう方も多いはず^^

また、記事では紹介されてないけど、ヘッダーのアイコン部分にも『なにか仕掛けがしてあるんじゃ???』と、オンマウスで確認もしちゃいましたw


ボクも先日似たような動機で自分なりにやってみたのですが、どうにも技術が能力が追いつかず、中途半端になってしまったので、とっても羨ましいです。ということで…

ということで、『祝・リニューアル』です。

2011/02/25 Fri 10:35| |

名前を名乗れない人 No title

topに戻るボタンどこ?

2011/02/25 Fri 16:51| |

dent-de-lion appMenu

クリエイターボックスさんのエントリーも読ませていただいて、
「jQueryを使った仕掛け」とあったので早速チェック。

『 If you’re coming to this page for the first time, please be aware that this plugin is not yet recommended for use on live websites. It’s fully functional in Mac OS X, but stay tuned for version 1.1 which will fix it for Windows! 』

何…だと…!? orz

あ、パネルは正常に動作してます。

2011/02/26 Sat 19:25| |

Orca 触発されました。

こんばんわ。
いつも楽しく読ませて頂いております。
今回のリデザインのエントリーを読んだら拙ブログのデザインも変更したくなって早速プチ・リデザインしてしまいました。

非常にモチベーション的にもデザインの進め方なども参考になります。私の場合は個人でゆっくりとデザイン変更してきているので一気に全部と言うわけには行きませんが、今回はとてもよい機会になりました。
ありがとうございました。

2011/02/26 Sat 22:54| |

atsuko リデザインおめでとうございます。

初めまして。いつも楽しませて頂いております。
>「好きなもの全部書いてください」
>個人的に私の好きなものばかりがあるので開くたびにテンションがあがるに違いないと採用。
これ案外重要かと思います。お客さんに自分のサイト(ブログ)に愛着を持ってもらう、更新のモチベーションを持ち続けてもらう為のちょっとした工夫ができるといいですね。
結果が見えてくるまでの期間は愛で乗り切って欲しかったりするので。
発注側の心の動きを見せて頂いておもしろかったです。

2011/02/27 Sun 07:55| |

Ace 横幅

すっきりして見やすくなりましたね!

やっぱり横幅はYahoo!のトップページを意識して980前後なのでしょうか。
Adsenseを優先するともう少し欲しくなるのが実情ですね(^o^;

2011/02/27 Sun 23:19| |

あれはんどろ 読み込みに時間がかかるような

すごいですね。無料ブログサービスの可能性を十分引き出してると思います。でも、僕の最新のMacでもこのウェブサイトの読み込みにずいぶん時間がかかります。

気のせいですかね?

2011/03/01 Tue 16:46| |

とある零細企業のWEB担当 jqueryの「ニョキ」について

初めまして。
いつも楽しく読ませていただいております。
本文にある「これまでIEでにょきって出てた奴が出なくなっちゃいました。」ですが、
おそらく「jqueryyappMenu.js」と言うファイルの244行目あたり、

mousedown: function(e) {

// If alt key is down when clicked:
if ( isAlt && isMouseOver ) {

// Prevent default link action:
e.preventDefault();

// Reset mouse variables
isMouseOver = false;
hasMouseFocus = false;

// Close the menu, activating callback:
closeMenu(selected);
return false;

} // endif ( isAlt && isMouseOver )
},

と言う記述がありますが、
この最後の「},」のカンマ(,)を削除すればよいと思われます。
ローカル上のIE8、windows7sp1では作動しました。
その他firefox3.15、Safari5、chrome10、opera11での動作確認はとりました。

2011/03/12 Sat 16:40| |

yamada Re: jqueryの「ニョキ」について

>とある零細企業のWEB担当さん

ぉぉー。
ありがとうございます。エラー完全にきえました><

2011/03/12 Sat 20:35| |

ゴコー はじめまして

突然で申し訳ありません。
現在僕は自分のブログをWordpressに移行しようか迷ってるんですが、
yamadaさんはなぜ敢えてfc2のまま運営しているのでしょうか?
批判というわけでは決してありませんが、yamadaさんほどの方ならなら個人ドメインとって活動して普通、
みたいなイメージがありますので宜しければ理由を聞いてもよろしいですか?

2013/04/25 Thu 10:29| |

トラックバック

この記事にトラックバックする人はクリック

Twitter 人気のつぶやき 2/19~2/25 2011

WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック!まだフォローしてない人はお気軽にフォローしてみ?...

Webクリエイターボックス:2011-02-26 11:16

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html