イベント先日参加したプロブロガー・作家のごりゅごさん(@goryugo)主催のブログ勉強会ごりゅごブログ塾。僕は講師のはるぅなさん(@haruna1221)による添削付きのコースを選び、アイデアジムのデザインの添削を受けてきました。いうことで実際に添削された改善すべきポイントとその改善策を紹介します。前回のデザインの回で教わった事を意識してテーマを作ったおかげで基本は大体守れていると褒められました。プロにチェックしてもらうと直すべきポイントがたくさん出てきます。ロゴのバランスについてまず指摘されたのはアイデアジムのロゴについて。修正前は真ん中のGが他の文字より少し大きく、微妙にラインが揃ってませんでした。IDEAとYMのちょうど真ん中にGがあるため、どちらにGが付くのか分かりにくい状態でした。修正後はGを小さくして、さらにYMの方に寄せました。GYMとそれぞれの単語が分かりやすくなりました。記事一覧の表示について次に指摘されたのは記事一覧の表示について。最近はアクセスの半分程度がスマホからという事で、一覧性を高めるためにタイトルとサムネイルだけ表示するスタイルが増えています。実際にアイデアジムもスマホ版のテーマはタイトルとサムネイルだけなので、PC版もこれに合わせた方がいいとの事。修正前はこんな感じで本文の一部と続きを読むボタンを表示していました。修正後はタイトルとサムネイルだけにして、記事と記事の間隔を広く取りました。行の間隔について次に指摘されたのは行の間隔について。PC版のテーマのサイドバーには人気記事のウィジェットがあるんですが、ここのタイトルの行間が広すぎて分かりにくい状態でした。タイトルが長くて4行になると上と下のサムネイルの中間に来て、ぱっと見どちらのタイトルなのか分かりにくくなってました。行間(line-height)は1.5〜1.8が読みやすく、ごりゅご.comも基本1.5との事。それに倣って1.5にしたところ、どこで分かれているのかぱっと見で分かるようになりました。そもそもタイトルが長すぎるとGoogleの検索結果で最後まで表示されないので、26文字までにするがベターだそうです。JAPANのトップにあるニュースのタイトルが参考になると教えてもらったので、最近チェックするようにしてます。ページャーについて続いてページャーについて。記事一覧の一番下についてるページ送りのボタンです。アイデアジムはページの番号を並べたタイプで、それぞれの数字をクリックするとそこに飛べる仕様になっていました。これは使いにくく、特にスマホでは小さすぎてタップしにくいという問題があるので、「次へ」と「前へ」にしたりボタンを大きくした方がいいとの事でした。僕は前から画面遷移なしのタイプが気になっていたので、autopagerというものを実装しました。PC版では下までスクロールすると自動で続きが読み込まれて表示されます。スマホ版では「次の記事を表示」というボタンを設置。これをタップすると続きが表示されます。autopagerはこちらの記事を参考にして実装しました。Plugin)というプラグインを導入しました。このプラグインはカテゴリやタグ、さらにタイトルや内容の関連度の高い順に関連記事を表示してくれます。簡単に細かい設定ができて以前より明らかに精度が上がりました。基本的な設定はこちらの記事を参考にしました。見た目をカスタマイズする方法はこちらの記事を参考にしました。最初の設定といじるファイルさえ分かればCSSを編集するだけなので、そこまで難しくありません。WPのプラグイン「YARPP」を5分でカスタマイズ。(モバデビ)見出しとボタンの配色について見出しとボタンの配色について。このブログのベースカラーが赤なので今まで見出しにも赤を使っていました。赤は行動を促す色で目立つので、クリックしてほしい所に使うのがベターとの事。見出しは赤の類似色のオレンジにして、ボタン類に赤を使うようにしました。カレーの写真についてカレーレシピの記事の写真について。今までのカレーの写真は同じお皿と背景で変化がなく、見てて飽きてしまうものでした。それをランチョンマットを敷いてお皿を変えるだけでかなり変わるとアドバイスを受けたので、早速ごりゅごさんの料理レシピブログ「ごりゅごはん」を参考にランチョンマットとお皿を購入。上と同じレシピですがお洒落になりました。自分では気付かなかった部分を改善できた!今回の添削で普段自分で見てても気付かなった部分のデザインを改善する事ができました。ひとつひとつは小さい変化ですが読みやすさ見やすさは大きく変わるので、定期的に(できればプロに)見てもらうといいかもしれません。雅恭@onys310フリーのパーソナルトレーナー。トレーニングやロードバイク、スパルタンレースなんかが好き。体づくり、購入したアイテム、挑戦した事なんかについて書いてます。