スキルアップ

記事を上手くまとめるのもデザイン [第24回東京ブロガーミートアップ] #tbmu

ブログに関するお題に沿って参加者全員が発表をするという勉強会「東京ブロガーミートアップ」。2014年11月12日に開催となった第24回のテーマはブログのデザインについてでした!

僕はデザインのことはよくわからないし、非常に苦手。。。

PCからだと見てわかるとおり、僕のブログのデザインはブログ開設当初から大きく変化していませんし、何度も何度もデザインを変えたいと言いつつも、なかなかリニューアルしない僕に対して男子ハック@JUNP_Nさんからは「変える変える詐欺」なんて言われたりしましたね(笑)

そこでこの秋からブログのリニューアルに向けて本格的に着手。特にここ数日はモンハンもやらずにほとんどの時間をデザインに費やしましたよ。。。
そして、第24回東京ブロガーミートアップにて先行公開しました!

まぁ、僕のデザインのことは一旦置いておいて。

今回の勉強会は「ブログのデザイン」ってことなので、参加者のみなさんが取り組んでいることやデザインについて感じていることをたっぷりお聞きしてきました。なるほど~!と頷くことばかりだったので、これは僕にとって貴重な回になったことは間違いありません。

何を意識してデザインするか

まず、ムジログのわっきぃさんはパソコン版とスマホ版のデザインでは、見るデバイスによってシェアボタンの表示を変えることの重要さを指摘。

例えば、TABI LABはレスポンシブデザインになっていて、PC版ではGoogle+へのシェアボタンが表示されるのに、スマホ版ではそれが消えて代わりにLINEに送るボタンが表示される工夫について教えてくれました。ユーザー数からして、特にスマホではLINEボタンの方がシェアされるってことなんでしょうか。

また、わっきぃさんはdream seedさんのシングルカラムに近いデザインは非常に良いな~と評価していました。

そのdream seedを運営する山本さんはGoogleがAndroid 5.0で採用している「マテリアルデザイン」をブログにも取り入れるようにしていて、マテリアルデザインの特徴や考え方を教えてくれました。WindowsやAppleの「フラットデザイン」と異なり、重ねるところは重ね、1つ1つ意味のある重ね方をしているんだとか。

それと、スマホでもPCでも統一したデザインにし、読者がどっちを見ても違和感なく同じ雰囲気で見えるようにしているそうです。これはPCとモバイルのデザインがセットになってるWordPressのテンプレートだと簡単なんでしょうけど、ライブドアブログのような完全に別デザインになってるタイプだと厳しいなぁ。。。

ジャンクワードの森の裕司さんは「余白」の大切さを語ってくれました。パーツとパーツの間をすべて同じサイズ(20px)空けているそうです。たしかに、規則性がある余白によって全体的に自然な印象を受けますね。

僕も新しいデザインを試行錯誤しながら試しているのですが、この余白はかなり調整しているところです。10pxとか20pxとか。でも、逆に余白を空けすぎると肝心なコンテンツが入らなくなるから難しいんですよ。。。

カテゴリーごとの特徴やアクセスを考慮したデザイン

面白かったのが、ブログをカテゴリーごとにデザインを変えているという21世紀お取り寄せレビューのこまりさん。WordPressで「Display Widgets」というプラグインを使うと、カテゴリーごとの見た目を変えることができるらしいのです!


Display Widgetsの解説

スマホ情報を紹介するカテゴリーならケータイ企業の広告を表示させたり、アニメのカテゴリーならアニメのDVD・Blu-rayの広告を出したり、そういったことができそう。これは羨ましいなぁ。

サーバーの重さにイライラしたのとGoogleにぜんぜんクロールしてもらえていないとの理由から、以前のデザインから今のデザインに変更したちわわのままを運営するちわままさん。変更後はアクセスする際の速度が上がり、Googleにもしっかりクロールしてもらえるようになったそうですよ!

やっぱり、デザインの変更って何らかの効果があるもんなんですね~。変更によって表示速度が速くなればアクセスした読者さんはストレスを感じないでしょうし、高速化は嬉しいことだらけだと思います。

新たなデザインにしたブログ

ここ最近、ブログデザインの変更や新たなブログを作ったことを発表してくれたのが岡部さん、伊藤さん、TOMAKIさんです。

オレガジェットの岡部さんはこれまで3カラムだった見た目を2カラムに変更。メインカラムの幅を広げてコンテンツを見やすくなっていますね。

また、ヘッダーにご自身が登場してる画像もインパクトがあります(笑)WordPressのテーマ「simplicity」を使用しているそうです。特にタグをいじらなくても管理画面からけっこうカスタマイズできるようで、羨ましいと思いました!

【旧】


【新】

インストラクターのネタ帳の伊藤さんは新たに立ち上げた英語版のブログ「Beyond VBA Tutorial」を紹介。もともとインストラクターのネタ帳で書いていたExcelのマクロの解説を英語圏でも需要があると感じ、他言語化したんだそうです。デザインはなんとオレガジェットの岡部さん。

今まで日本語で解説していたことを英語で解説しようとするとなかなか同じようにはいかないらしいです。また、コードを部分的にではなく、その都度全文を掲載して解説することへの気付きなどを紹介していました。

特に伊藤さんのお話から僕が勉強になったのは、Tips系の記事を書くときに有効だと思ったのですが、まずどんなマクロなのかをザッと短く解説し、次にサンプルコードを先に掲載。そして、細かい解説はそのあとに載せる。といった書き順を見て、この読みやすさから良いな~と感じました!ぜひ、真似させてください!

エキサイトブログで日曜アーティストの工房を運営しているTOMAKIさんは2002年の時点でbloggerを使ってたり、Movable Typeもやって、最近ではWordPressを始めてポートフォリオサイトを作ったり、めちゃくちゃアクティブ!TOMAKIさんは間違いなくブログを楽しんでるし、思ってることとか作品とか気持ちを目一杯さまざまなブログに残しています。

そして、TOMAKIさんはこれまでたくさん書いてきた記事をうまくまとめるのもデザインであると言っていました。これはすごく説得力を感じました。僕はずいぶん書き散らかしていますし、昔の記事にたどり着くのは大変かも(^_^;)これはぜひ見習いたいです!
最後に、昔に1記事書いただけの古いブログを9年半ぶりに更新してみた、っていうのがホッコリしました!

@asuka_xpの感想

ブログのデザインっていうザックリとしたテーマだったのにもかかわらず、凄く濃いお話が聞けた回になりました!上に書いたとおりすごく心に残る言葉がたくさんあって、改めてブログのデザインについて考える良い機会になった気がします。

で、め~んずスタジオの新デザイン(PC版)についてはというと。。。

近日中に正式リリースします!もう完成間近なんですが、微調整したいところがチラチラあるのでゴメンナサイ!

そして、次回の第25回東京ブロガーミートアップは2014年12月10日(水)に開催予定です。
3の倍数の月なので、飲み食いがメインとなります。忘年会として全時間を懇親会にしたいので、LTは無し。ただし、それだと単なる飲み会になってしまうので、ルールを設けました。なんと、トークは「ブログ」縛り!
募集や詳細は追ってご連絡しますね~!

【第24回東京ブロガーミートアップ 参加者のみなさん】

この記事が気に入ったら
いいね ! してね!

Twitter で