2020/11/02 (更新日: 2022/06/15)

WordPressでブログを始めるなら、デザインの『本質』と『4大原則』を理解しよう！

ブログの始め方

こんにちは、KAIです。

プロ構成ライター、戦略コンサルタントをしています。

本記事で解決できる悩み

大丈夫です。こんな悩みを解決します。

著者の略歴

コピーライター歴8年、フリーランス歴4年。
これまで150を超える企業案件で、文章原稿を作成してきました。

※目次をクリックすると、該当箇所に移動します。

WordPressでブログを始めるなら、デザインの『本質』と『4大原則』を理解しよう！

結論からお伝えします。

デザインには『4つの原則』が存在します。

本記事ではこの『デザインの4大原則』を紹介するとともに、そもそものデザインの「意味」や「役割」、そしてWordPressブログでどう活かせるかといったデザインを学ぶ「メリット」を解説していきます。

まずは、なにげなく使っている『デザイン』という言葉を具体的に理解していきましょう。

「WordPressブログの注意点」は以下の記事で解説しています。
【後悔する前に】ブログを始めるなら【絶対】知っておくべき9つの注意点
WordPressでブログを始めるメリット7つ&デメリット4つ 【世界シェア38％】WordPress（ワードプレス）の人気の理由に迫る！

そもそもデザインとはなにか

デザインの語源は「計画を記号や図面で書き表す」という意味の『Designare』だといわれています。

つまり「デザイン」は元は『設計』に近い意味合いで使われていたということです。

とはいえ、現代における『デザイン』の意味は昔とは大きく変化しています。

現代のデザイン

以前は物理的な『モノ』のみに対して「デザイン」という言葉が使われていました。

しかしいまは、その『モノ』を使って、”ヒト”がどんな『コト』をしたいのかという「目的と手段」までを「デザイン」と呼ぶようになりました。

つまり現代における「デザイン」とは、“『モノ』という手段を通じて『コト』を創造すること”なのです。

もはや「有形」か「無形」かすら問われなくなりました。

「ブログの目的」は以下の記事で解説しています。
ブログを始めるメリットって？【全人類】にオススメしたい9つの理由
Webライターなのにブログしてないの？【ポートフォリオに最適】

デザインの本質

これまでの話からもわかるように、『デザイン』とは表面的な装飾のことではありません。

色、カタチ、機能や性能なども含め、『ヒト』の目的を実現するための「手段」こそが『デザインの本質』なのです。

少し深く抽象的な話になったので、ここから「ブログ」でデザインがどんな役割を担うのかを解説します。

「本質」は以下の記事で解説しています。
本質を見抜く3つの視点と思考法【VUCA時代をどう生きるのか】
なぜなぜ思考で【脱！思考停止】そもそも『考える』って？

WordPressブログでのデザインの役割

WordPressを使ってブログを運営する場合、デザインが担う役割は主に3つあります。

具体的に解説します。

「ブログの全体像」は以下の記事で解説しています。
【全体像が知りたい！】ブログの始め方をわかりやすく解説【初心者必見】
【副業の新定番！】ブログをおすすめする理由【仕組みとメリット】
ブログで稼ぐ仕組みとは？『商品』と『広告枠』の2つから【適性診断】

ブログの骨格『情報設計』

まず、WordPressブログの骨組みになるのが『情報設計』です。

「サイト構成」あるいは「記事構成」を考える上で、重要になってきます。

『ヒト』、つまり読者の目的を満たすためには、記事の内容だけでなく上記のように「ブログ全体」に気を配る必要があります。

・どの経路からブログに来るのか
・どんなニーズを抱えているのか
・記事を読んでどう変化するのか

ブログを開設する際には、一連の行動を具体的に「言語化」しておくと、読者目線での『情報設計』がデザインできますよ。

「ブログのジャンル」は以下の記事で解説しています。
特化ブログと雑記ブログの選び方【理想と現実】のギャップ
【後悔しない選び方】ブログとnoteの違いとは？5つの目的別【徹底比較】
「一連の消費者行動」は以下の記事で解説しています。
人の心を動かす文章を書くには？感情を動かす3つのコツ

ブログの質『ビジュアル化』

一方でブログの質を大きく左右するのが図説などの『ビジュアル』でしょう。

伝えたいことを最大限に伝えるためには、文章だけでなく視覚的に理解を促す「ビジュアル」制作が重要です。

たとえば、以下の図は本ブログで作成したものです。

特にライター方の場合、「ブログ=文章で伝えるもの」という固定概念にとらわれやすいので注意しましょう。

「ライターの業務領域」は以下の記事で解説しています。
初心者がwebライターになるなら、まず就職【最速で成長できる】
文章を仕事にできる人の特徴【業界8年】のコピーライターが解説

ブログの世界観『ブランディング』

最後は『ブランディング』です。

『ブランディング』はかなり意味が広い言葉ですが、読者から見た「ブログの世界観」のことです。

後に說明する「デザインの4大原則」でも触れますが、特に『一貫性』はキーワードです。

次のような要素に「一貫性」があるかどうかが、ブランディングに大きく影響するからです。

たとえば男性向けのビジネスブログなのに、ポップなフォントを使い、レインボーカラーやキャラクターでブログをデザインしていたら、読者はどう感じるでしょうか。

デザインは「センス」でも「好き嫌い」でもなく、目的を持ち意図してするべきものなのです。

「WordPressテーマ」は以下の記事で解説しています。
「初心者でも『失敗しない』WordPressテーマの選び方【おすすめ5選】」

デザインとアートとエンジニアリングの違い

前章で触れましたが、デザインには「センスが必要」だと誤解されがちです。

たとえば次の2つとよく混同されるため、違いを理解しておきましょう。

比較することで、デザインの本質が「問題解決」のための『手段』であることが浮き彫りになるはずです。

「問題解決」は以下の記事で解説しています。
問題解決のための思考法【ボトルネックの罠】に注意！
論点思考とは？【本当に解くべき問い】を見極めて『生産性』を上げる

デザインはアートではない。問題解決の手段である

まず「デザイン」と「アート」とは『主語と目的語』が正反対です。

図にするとつぎのようなイメージです。

こと「アート」に関しては、良し悪しを決めるのは自分次第なので表現方法が無限に存在します。

しかし、「デザイン」はあくまで相手がなにをどう望んでいるのかを糸口に、表現方法を『論理的』に決定していきます。

「論理的思考」は以下の記事で解説しています。
論理的思考とは？結論を導くプロセスを【徹底図説】
論理的に考えるには？【因果関係】を見つけよう！

デザインはエンジニアリングではない。中心には常にヒトがいる

あるいは「エンジニアリング」もよく「デザイン」と同じように扱われることがあります。

まさに”相手の問題を解決する”点では同じなのですが、「デザイン」と「エンジニアリング」は、『プロセス』に違いがあります。

図でイメージすると、一部重複する部分があります。

つまり、「インプット」や「アウトプット」が同じだったとしても、その過程＝「プロセス」の違いによって「デザイン」と「エンジニアリング」は異なります。

たとえば同じようにWebサイトの”使い心地”を追求したとしても、ユーザーのインターフェースのデザインを変更するという手段もあれば、単純にプログラムの処理を改善するという手段も存在します。

特にプロダクトデザインの場合、「デザイン」と「エンジニアリング」の線引きが難しいのは、このためですね。

「具体化」や「性能」は以下の記事で解説しています。
具体化と抽象化の『真実』行き来しないと【無意味】
伝わる文章を書く方法【相手のメリット】に変換

WordPressブログに活かせる『デザインの4大原則』

それでは具体的なデザイン手法として「4大原則」を紹介します。

特に、ブログの「アイキャッチ画像」や「プロフィール」、「図説資料」を作成する際に重宝しますよ。

これを実践するだけでデザインの質が何十倍にもなるので必ずマスターしましょう。

デザインの4大原則①整列

まずは『整列』です。

WordPressブログのデザインで『整列』を活かすなら

『整列』とは、情報を一定のレイアウトルールに従って並べることです。

たとえば、文章や図を『見えない線』に沿って規則的に並べていきましょう。

画像のようにランダムに並んだ情報を『整列』すると次のようになります。

「視認性」が上がり、意味がより理解しやすくなりますよ。

デザインする際は、常に見えない線『アウトライン』を意識しましょう。

デザインの4大原則②対比

次は『対比』です。

WordPressブログのデザインで『対比』を活かすなら

『対比』とは、情報の優先順位を明確にすることです。

たとえば、文字と文字とのサイズ差を大きくしたり、メインカラーとアクセントカラーを使い分けたりすると、要素に明確な『ギャップ』がうまれます。

画像のようにランダムに均一なサイズの文字を『対比』させると次のようになります。

『ジャンプ率（文字サイズの差）』が上がることで、重要度合いが高い順に視認されますね。

デザインする際は、メリハリを意識して『コントラスト』を作りましょう。

「対比」は以下の記事で解説しています。
思考が浅い人こそ『MECE』で考えるべき【深さも幅も大事】

デザインの4大原則③近接

次は『近接』です。

WordPressブログのデザインで『近接』を活かすなら

『近接』とは、関連する情報を近づけることです。

たとえば、図のように美しさ優先の均等なレイアウトは、デザインの情報設計が損なわれて機能していません。

画像のように関連する要素を『近接』させると次のようになります。

『情報設計』が明瞭になることで、視覚的に伝わる情報量を増やすことができますね。

デザインする際は、関連性を感じ取れるように『余白』の差を意識してレイアウトしましょう。

デザインの4大原則④反復

最後は『反復』です。

WordPressブログのデザインで『反復』を活かすなら

『反復』とは、情報の構造を一定のルールで繰り返すことです。

ブログのデザインなら、次の要素がルール化できないか、考えてみましょう。

たとえば、図のようにランダムで統一感のないデザインだと、視点が定まらずユーザーに不親切な伝え方になっています。

画像のように同等の要素を『反復』させると次のようになります。

情報の『要点』が明瞭になることで、読者に本当に伝えたい箇所に注意を集中してもらいましょう。

デザインする際は、統一感を意識して『情報整理』が行き届いたデザインをめざしましょう。

「構造」は以下の記事で解説しています。
アナロジー思考とは？【最高に生産的なアイデアのパクリ方】
メタ思考とは？絶対に気づくべき思考の癖【2つの思考法で改善】
思考を整理するならロジックツリーが【最強】

ちなみに本記事で紹介した『デザインの4大原則』は、超有名なRobin Williams著「ノンデザイナーズ・デザインブック」で詳しく学べますよ。

もしブログ開設がまだの方は、次の記事を参考にしてくださいね。

【初心者向け】WordPressでブログの始め方【5ステップ徹底図説】
【定番サービス7選】ブログを始めるなら目的別で選ぶべき
【無料はNG！】独自ドメイン名とは？正しい決め方とおすすめサービスを解説

参考
「デザインとは?」公益財団法人日本デザイン振興会

WordPress デザイン ブログ 初心者 原則 本質