「そういえば、男子ハックリニューアルしたんですよ」のお知らせ

2011年11月6日 シェア数 アイコン 26

「そういえば、男子ハックリニューアルしたんですよ」のお知らせ
sakuです。男子ハックのデザインをリニューアルしました!といっても1ヶ月も前なのですが、いくつかポイントをご紹介します。きっと見やすくなったはず。

これが新しい男子ハック

男子ハック-4

リニューアルのポイントは

  • 角丸化
  • スリム化

の2点。特に角丸化で雰囲気が大きく変わっています。

角丸化→ひたすら丸く

・変更前

テーマの管理 ‹ 男子ハック — WordPress-3

・変更後

食べて、撮って、そして食べたくなる!そんなiPhoneアプリ『miil』が楽しい * 男子ハック-1-1

実はこのロゴの枠は画像ではなく、CSSを利用しています。

ちょっとトリッキーなのですが、CSSを利用して、「四角い要素」と「円の要素」を重ねあわせています。結構苦労しました。右上のRSSとTwitterの「丸」や、噴出しもCSSで書いてあります。画像よりも軽くなるのがいいですよね。

次に記事一覧。

・変更前

テーマの管理 ‹ 男子ハック — WordPress-3-1

・変更後

男子ハック-4-1

配置はほぼ変わりませんが、タイトルを目立つ位置に置き、「続きを読む」に「ボタンらしさ」を追加しました。

最近、角丸が流行りなので、この辺はJUNP要望です。

スリム化→狭いウインドウでも快適

コンテンツの幅がスリムなのは変わらずです。

食べて、撮って、そして食べたくなる!そんなiPhoneアプリ『miil』が楽しい * 男子ハック-2

ブラウザのウインドウを狭くすると、ちょうどサイドバーが隠れて、記事に集中できるように。

以前、@sonokoさんにインタビューを受けたときに、男子ハックを見るときは、ウインドウを狭くすると見やすいと言っていたので、ここは変えませんでした。

ちなみに「男子ハック」を閲覧している人たちの画面サイズを確認すると、

画面の解像度 - Google Analytics

iPhoneが最も多く、それを除いた場合、横幅が最も狭いサイズは、768px。

上の画像のボックスは横幅768pxなのですが、それだけ狭くても、メインコンテンツ部分はしっかり見えますね。

男子ハック-5

おまけとして404ページも作成

ページが見つかりませんでした * 男子ハック-1

目がぁ!!!

訪問していただいて、404エラーで帰ってしまわれるのはもったいないので、おすすめ記事を置きました。

その他軽量化

男子ハックの最近の悩みは、サーバーエラーが頻発すること。対策として、外部サービスが利用できるところは外部化しました。

例えば、「男子ハックの関連ツイート」は以前はWordPressのプラグインを利用していましたが、Twitter公式を利用することで、サイト全体が軽くなりました。

※それでも、サーバーエラーがでたらリロードしてみてくださいね。

裏側

このリニューアルも結構苦労していて、久しぶりにHTMLとCSSを書こうとすると、CSSの要素指定のカンどころを忘れていたりするので、どう書いてもフォントサイズが小さくならない!と叫びながら作業をしています。

リニューアルの流れですが、JUNPがIllustratorを使ってモックを作ります

男子ハックリニューアル_top.jpg

そして僕がワイヤーフレームに落として、

Google Chrome

そしてコーディング。利用しているツールはCoda。ソースをみると素人なのがバレますが、ここまで自力でできるのは、Webで検索すれば、大抵のことは解決するから。時間をかければ結構できちゃうものですよ。

ワイヤーフレーム作りに便利なCacooについてはこちらの記事が参考になります↓

Cacoo(カクー)を使ってワイヤーフレームを作ってみる | ウェブケチャップ:ブログ
昨年リリースされたWEBサービスですが、Cacoo(カクー)というWEB上で画像や図面(企画書で必要な画像やサイトマップなど)が作成できるサービスがリリースされました。 …

要素名をメモっとかないとコーディングしている間に迷子になったりするので、地味に重要ですよね。

男子ハックでは、

  • デザインはこのほうがよくない?
  • HTML&CSSのコーディング、ココ間違ってますよ!

などのご意見をいつでもお待ちしています。コメント欄/メール/Twitterなどでご連絡ください。