エディトリアルデザイナーの私がブログの構成で気を付けているルール

どうも！【ほほなっつ】です。

私はエディトリアルデザインの分野で働いていて、普段からエディトリアルデザインとブログのレイアウト構成は似てるな〜と感じています。

どちらを構成する上でもノウハウが共通し、活かされます。

エディトリアルデザインでもブログ記事の構成でも、読ませるテクニックとして重要なのは「目止まり」と「抜け感」。

それらを引き立たせる上で、普段から心がけたいのは、構成時のルール（統一感）をしっかり決めておく事。

今回はエディトリアルデザイナーの私が、ブログを構成する上で気をつけているルールをご紹介します。

エディトリアルデザインとは新聞・雑誌・書籍などの出版物のデザイン。読み手の視線、意図を考えて視覚的に効果的な図や写真等を整理・配列・編集あるいは計画すること。紙面構成。

出典：Wikipedia

画像配置時のルール

画像やイラスト、図解などの配置は、ブログの目止まりを意識する上ではとても重要な要素。

読み手からすると画像は言わばその記事のセーブポイント。箸休め的な要素も含まれています。

ブログ全体を通して統一性のある記事の量産を心掛ける上で、簡単に実践出来る点がいくつかあります。

私が実践しているルールはこちら

画像のサイズと縮尺

画像のサイズはwide200pixel 現在はwide273pixelに、縮尺は余程のことがない限り４:３で統一。
※縦のトリミングの方が明らかに意図が伝わり、見栄えが良ければ例外とする。

大画面のPCで記事を読まれた場合、画像サイズが大きいと圧迫感があり抜け感を損ないます。

タイトル付きアイキャッチ

記事のアイキャッチになる画像には、概要が掴めるタイトルを入れ込む。

これは最近になってようやく取り組みだしたのですが、人気があるブログ、よく読まれているブログは、このアイキャッチのセンスが光ります。

理想とするアイキャッチが及ぼす効果は、ブログ全体の統一と引き締め、オリジナリティの演出、パッと見たときにその人のブログだとファーストビューで認識されるようになることです。

＼私が参考にしたブログはコチラ／
www.haruchannel.net

ご存知の方も多いと思います！
＼ ハルチャンネル＊ ／

こちらのブログが私の理想とするアイキャッチのあり方。参考にされたい方は、＼ ハルチャンネル＊ ／の記事の中に、アイキャッチの作り方の記事が、とてもわかりやすくまとめられています。

私も即座にリーディングリストに加えさせて頂きました。

見出しと関連画像

h3以上の見出しに対して、一つの関連画像を配置する。

ブログの記事は大抵読まれず流し見されます。見出しと画像は流し見でも目に止まるので、読まれなくても記事の内容を掴んでもらう為になるべくセットで配置したいところ。

プライバシーと著作権

人物の顔にはモザイクか目隠しをつける。

画像を引用する際は©︎をつけ、出典クレジットにURLをリンクするなどの配慮をする。

画像の加工とトリミング

画像は加工アプリやトリミングでなるべく無駄を省き、明るくわかりやすい状態で配置する。私は仕事柄フォトショップを使えるので、必要であれば用途に合わせてレタッチや切り抜き、コラージュなど本格的に画像を加工します。

しかし、面倒なので大抵は『LINEカメラ』などの加工アプリで済ませてしまいます。

プロのカメラマンでもないので、写真の処理は基本後処理に頼るカタチになるため、最大限加工で善処するようにしています。

画像配置ルールまとめ

文章構成時のルール

画像の配置が「目止まり」なら、文章構成は「抜け感」が関わってきます。

スーパーのチラシが安っぽく見られるのは、余白もほとんど埋め尽くされ、内容がギッシリしているから。もちろんそれがスーパーのチラシの長所でもあるのですが。

高級ブランドのカタログやパンフレットが上品にまとめられて見えるのは、デザイナーが考えに考えベストな配分で余白を作っているから。

抜け感は余白から生まれます。

私が実践しているルールはこちら

改行と抜け感

なるべく区切りの良い所で改行し、記事全体の抜け感を意識する。

詰まり過ぎず、開き過ぎず。

スマホで見るのと、PCで見るのとでは改行位置が変わってしまうので、へんな場所で改行せずなるべく句読点で区切る。

ワード数はなるべく無駄を省いて簡潔にまとめる

整理出来るところはリスト化し、余分なワードは削る。

英数字の全角・半角の統一

文章中の英数字の全角・半角の使用は、ブログ全体でどちらかに統一する。

とは言え、これは一概にどちらがいいとは言い切れず、私は全角・半角を使い分けています。（意図して使い分けているので、一つの文章に対して適当に混ぜ合わせた使用はしない）

「かっこ」の使い分け

数ある「かっこ」の中でも、それぞれ用途に合わせて使い分け、統一していきたい。

以下、私の「かっこ」使用のルール

（）←このカッコは日本語のものを使用する。
英数字の()カッコだと、()←外枠が下に下がっていて見た目が悪い。

「かっこ」の使い分け例

（）←心の声や補足
「」←セリフ、強調小
『』←人の名称、建物の名称、場所の名称、事柄の名称
【】←強調大
〝〟←飾り、強調小

スラッシュはなるべく全角のものを使う

エディトリアルの分野だと「／」スラッシュは全角のものを用いるのが基本。 文章構成を読ませたいという事において、エディトリアルと繋がりの深いブログでもそのルールを踏襲したい。

一つの記事中でテキストカラーを3色以上使わない

色を使いすぎると、どうしてもまとまりが取り辛くガチャガチャしてしまうので、目止まりから離れてしまいます。安易なカラーでの強調は控え、キーカラーを決めたらなるべくその1色で展開する。※黒系統はカラーバリエーションに数えない。

文章構成ルールまとめ

まとめ

長々と書きましたが、とにかく普段から目止まりと抜け感を意識しています。

記事を書くと言うよりも、小冊子やパンフレットをレイアウトする感覚が近いかな

それでもまだまだ理想とするカタチに持っていけていないのは、私のデザイナーとしての実力とブロガー？としての実力が足りないからに他なりません。

まぁそこら辺は徐々に近づいていければいいかな！←例によって最後テキトー