デザイン初心者向けワークショップ
Pocket

2015年8月15日に開催された第44回 WordBench 大阪の「WordCamp Kansai 2015再演!デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜」に参加してきました。

第44回 WordBench 大阪 「WordCamp Kansai 2015再演!デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜」

デザイン初心者向けワークショップ

WordCamp Kansai 2015で大人気だったハンズオンで、
当日は運営側で参加できなかったため再演を待ち望んでました。

内容はデザイン初心者向けで、色やフォントなどデザインの基礎知識を解説したあとに、
実際にブログデザインをしてみたり、ブログの改修をやってみようというものです。

デザインの基礎について勉強

WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり! from Ayaka Sumida

こちらが当日のスライドシェア。

分かりやす過ぎてたまらない。
見たら分かるようなスライドです。

特に参考になったのは、スライドの16,17ページにある、
「色を選ぶときRGBではなく、HSBで選ぶ」ことです。

RBGはR:レッド、G:グリーン、B:ブルーの組み合わせで色を選ぶのに対し、
HSBはHue:色相、Saturation:彩度、Brightness:明度の組み合わせで色を決めます。

なぜHSBかというと、スライドに書かれているように「人っぽい」要望に応えやすいから。

色の調整をしたいとき、人はきっとこう考えるはず
「もうちょっと明るくしたいな..」「もうちょっと鮮やかに..」

そんなときにRGBで調整しようとしても、どう調整したらいいか分からない。
けど、HSBなら明るくしたいと思えば明度を変更すればいいし、
鮮やかにしたければ彩度を変更すればいいです。

なるほどー!

ブログデザインリニューアル

ブログデザインのリニューアル例のお話もありました。

デザインのリニューアルをするときは、今のデザインのどこに問題があるかを考えるところから。
また、どうしたいか。

例えば、コンテンツ幅やレイアウト、カラム数など。

今の自分のブログでもいろいろ見直して、ちょっとリニューアルしてみました。

1.ワンカラムレイアウト

最近、ブログでよく見る1カラムレイアウト。
2カラムが多かったブログですが、1カラムだと読み手が記事に集中できていいです。

あと、やっぱ流行り感あってかっこいい感じします(笑)

ってことで、1カラム取り入れましたが、記事はそれでよくても、
トップページはやっぱ情報出したいなということで、記事ページだけ1カラムにしてみました。
トップページでは2カラムで人気記事やタグなどを出したままです。

いろんなブログを参考にしてみると、1サイトだけ記事ページのみを1カラムにしたものがあったので取り入れてみました。
やっぱ1カラム記事は今風でいい感じです。

とはいえ、もともと表示させていた情報を下に移動させてしまっているので、影響はどうだろう…。

2.スマホサイズでタブバーの設置

これはこの勉強会を受けてではないですが、先日Gigazinのハンバーガーメニューについての記事を見て変更してみました。

なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?~Gigazinより~

このブログはレスポンシブサイトで、スマホサイズのときにハンバーガーメニューを表示していました。

Gigazinの記事ではタイトルの通りハンバーガーメニューの失敗例とどう改善されたかが書かれています。
例えばFacebookがハンバーガーメニューをやめて、ページ下部にタブメニューを追加したことなど。

もちろん時と場合によりけりですし、浸透しつつあると思うので、
一概にハンバーガーメニューがダメだとは言えないと思いますが、
少なくとも今の自分のブログでは不親切なメニューだし、サイト内を回遊してもらえてないんじゃないかなと思いました。

そこでスマホサイズのときに、ページ下部にタブメニューを追加してみました。
(ハンバーガーメニューは残したまま)

tabbar

ちゃんと見てる記事のカテゴリの色が変わるようにしています。

とはいえ実は、このブログは来訪者の約90%がPCで閲覧。
あんまり意味ないかも!笑

3.スマホサイズでトップへ戻るボタン削除

これもちょいちょい議論になる「トップへ戻るボタンは必要か?」

こちらでもアツい議論が。

ページ先頭へ戻るボタンって必要ですか?

このブログでは、何pxか下に行くと追従型のトップへ戻るボタンが表示されるという、よくあるボタンがついてます。

これもハンバーガーメニューと同じく一概に言えないですが、
一旦スマホで消してみました。

PCではトップへ戻るボタンあっても邪魔ではないのですが、
スマホだと閲覧スペースを狭くしてしまいますし、
「トップへ戻りたいときってどんなと時だろう?」と考えると思いつかなかったからです。

特にこのブログのスマホ表示では、ハンバーガーメニューが追従してくるので、
トップへ戻ったところで何かある訳ではないです。

トップへ戻るボタンについては、ページの最下部にだけ設置されている場合もよく見ます。
確かにトップへ戻るボタンが追従する必要もないのかなと思うこともあります。

トップへ戻るボタンについてもいろいろ考えることありますが、
これも正解ないですし、試行錯誤でやっていきます!

あとその他もろもろ細かい修正もしています。

さいごに

今回のブログデザインの勉強会はすごく勉強になりましたし、楽しかった。

ブログのデザインを変えたいと思っても、なかなかやろうとしないので、こういう機会があると嬉しいです。

また、定期的にブログデザインの見直しと改修をしていこうと思いました。

Pocket