ごりゅごブログ塾で添削されたデザインと改善策まとめ

投稿日: カテゴリー イベントタグ

先日参加したプロブロガー・作家のごりゅごさん(@goryugo)主催のブログ勉強会ごりゅごブログ塾

僕は講師のはるぅなさん(@haruna1221)による添削付きのコースを選び、アイデアジムのデザインの添削を受けてきました。

ということで実際に添削された改善すべきポイントとその改善策を紹介します。

添削されたポイントと改善策

前回のデザインの回で教わった事を意識してテーマを作ったおかげで基本は大体守れていると褒められました。

しかしプロにチェックしてもらうと直すべきポイントがたくさん出てきます。

ロゴのバランスについて

まず指摘されたのはアイデアジムのロゴについて。

修正前は真ん中のGが他の文字より少し大きく、微妙にラインが揃ってませんでした。

またIDEAとYMのちょうど真ん中にGがあるため、どちらにGが付くのか分かりにくい状態でした。

Blog juku tensaku 01

修正後はGを小さくして、さらにYMの方に寄せました。

これでラインが揃ってIDEA GYMとそれぞれの単語が分かりやすくなりました。

Blog juku tensaku 02

記事一覧の表示について

次に指摘されたのは記事一覧の表示について。

最近はアクセスの半分程度がスマホからという事で、一覧性を高めるためにタイトルとサムネイルだけ表示するスタイルが増えています。

実際にアイデアジムもスマホ版のテーマはタイトルとサムネイルだけなので、PC版もこれに合わせた方がいいとの事。

修正前はこんな感じで本文の一部と続きを読むボタンを表示していました。

Blog juku tensaku 03

修正後はタイトルとサムネイルだけにして、記事と記事の間隔を広く取りました。

Blog juku tensaku 04

行の間隔について

次に指摘されたのは行の間隔について。

PC版のテーマのサイドバーには人気記事のウィジェットがあるんですが、ここのタイトルの行間が広すぎて分かりにくい状態でした。

特にタイトルが長くて4行になると上と下のサムネイルの中間に来て、ぱっと見どちらのタイトルなのか分かりにくくなってました。

Blog juku tensaku 05

行間(line-height)は1.5〜1.8が読みやすく、ごりゅご.comも基本1.5との事。

それに倣って1.5にしたところ、どこで分かれているのかぱっと見で分かるようになりました。

そもそもタイトルが長すぎるとGoogleの検索結果で最後まで表示されないので、26文字までにするがベターだそうです。

短いタイトルのつけ方はYahoo! JAPANのトップにあるニュースのタイトルが参考になると教えてもらったので、最近チェックするようにしてます。

Blog juku tensaku 06

ページャーについて

続いてページャーについて。

よく記事一覧の一番下についてるページ送りのボタンです。

アイデアジムはページの番号を並べたタイプで、それぞれの数字をクリックするとそこに飛べる仕様になっていました。

しかしこれは使いにくく、特にスマホでは小さすぎてタップしにくいという問題があるので、「次へ」と「前へ」にしたりボタンを大きくした方がいいとの事でした。

Blog juku tensaku 07

僕は前から画面遷移なしのタイプが気になっていたので、autopagerというものを実装しました。

PC版では下までスクロールすると自動で続きが読み込まれて表示されます。

スマホ版では「次の記事を表示」というボタンを設置。

Blog juku tensaku 08

これをタップすると続きが表示されます。

Blog juku tensaku 09

autopagerはこちらの記事を参考にして実装しました。

jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法 – ゆめぴょんの知恵

[M]WordPress×jQuery:次のページを自動で読み込む「jQuery.autopager」でローディング短縮! | miMemo(ミメモ)

jQueryを使ってWordpressの追加記事をページ遷移無しで読み込む | ごりゅご.com

関連記事について

直帰率を下げる方法ということで関連記事の精度を上げるためにYARPP(Yet Another Related Posts Plugin)というプラグインを導入しました。

このプラグインはカテゴリやタグ、さらにタイトルや内容の関連度の高い順に関連記事を表示してくれます。

簡単に細かい設定ができて以前より明らかに精度が上がりました。

Blog juku tensaku 10

基本的な設定はこちらの記事を参考にしました。

Yet Another Related Posts Pluginプラグイン(関連記事の表示) – WordPressプラグインの一覧

見た目をカスタマイズする方法はこちらの記事を参考にしました。

最初の設定といじるファイルさえ分かればCSSを編集するだけなので、そこまで難しくありません。

WPのプラグイン「YARPP」を5分でカスタマイズ。より見やすい関連記事表示に! | エアロプレイン

[M] 関連記事表示プラグイン「YARPP」を使って「LinkWithin」っぽくするカスタマイズ | mbdb (モバデビ)

見出しとボタンの配色について

見出しとボタンの配色について。

このブログのベースカラーが赤なので今まで見出しにも赤を使っていました。

しかし赤は行動を促す色で目立つので、クリックしてほしい所に使うのがベターとの事。

Blog juku tensaku 11

なので見出しは赤の類似色のオレンジにして、ボタン類に赤を使うようにしました。

Blog juku tensaku 12

カレーの写真について

カレーレシピの記事の写真について。

今までのカレーの写真は同じお皿と背景で変化がなく、見てて飽きてしまうものでした。

Blog juku tensaku 13

それをランチョンマットを敷いてお皿を変えるだけでかなり変わるとアドバイスを受けたので、早速ごりゅごさんの料理レシピブログ「ごりゅごはん」を参考にランチョンマットとお皿を購入。

上と同じレシピですがお洒落になりました。

Blog juku tensaku 14

自分では気付かなかった部分を改善できた!

今回の添削で普段自分で見てても気付かなった部分のデザインを改善する事ができました。

ひとつひとつは小さい変化ですが読みやすさ見やすさは大きく変わるので、定期的に(できればプロに)見てもらうといいかもしれません。

自分も添削してほしい!という人はごりゅごブログ塾の次のデザインの回に(いつあるか分からないけど)参加してみるといいですよ!

イベントカテゴリの最新記事