» メリハリのあるコンテンツの作り方|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

メリハリのあるコンテンツの作り方

スタッフブログ

  • 2019.09.30

    メリハリのあるコンテンツの作り方

    顔アイコン

    こんにちは、新米デザイナーのバンクです。

    デザイナーになって約3ヶ月。
    下層ページのデザインを担当することが多いのですが、

    その時に悩むのがメリハリの付け方です。

     

    自分が作ってやり直しになったデザインを見返すと、
    どこからが新しいコンテンツかわかりにくいというか
    こう…ペラっとしてるんですよね。

     

    コンテンツごとにメリハリが無く、ページの中になんの引っ掛かりもないので、

    さら〜っと流れちゃって内容が全く頭に入ってこない…

     

    そこで、先輩デザイナーズの作品や、自分がこれまで作ったページを振り返り、

    最近私が気をつけてるメリハリのあるコンテンツの作り方を紹介します。

     

     

    01. 一目で情報が入ってくる見出し

    img03

     

     

    まずはコンテンツごとにちゃんと見出しを設けること。
    ここから違う内容ですよ〜と視覚的に伝えるためにも必要だなと感じます。

     

    特に効果的なのがナンバリング。数字が持つ効果は絶大です。

     

    「お、01って書いてある!ってことはここが1つめでこの後02があるんだな!よし!」
    っていちいち情報を整理しなくても、伝わります。素晴らしい。

     

     

    極端に言えば数字って読むって感覚ではないですよね。

    直感的に入ってきて理解できるものです。素晴らしい!!(しかし多用には注意)

     

    【気を付けるポイント】

    長すぎる見出しをつけないこと!
    短い言葉で、そのコンテンツに何が書かれているのか一目でわかる事が大事です。
    自分自身もしっかりと内容を理解していないと出来ないことなので、情報整理も大切ですね。

     

     

    02. バックグラウンドの反復

    img02

     

     

    例えば1ページの中に5つコンテンツがあるとします。
    ただ見出しをつけただけだと、まだ弱いな…と感じることがあります。

     

    そこで効果的なのが背景に色やパターンを敷く事。
    一つのまとまりとして意識しやすいですし、どこが関連性のある情報なのかすぐわかります。

     

    【気を付けるポイント】

    全てのコンテンツに背景を敷かないこと!
    まとまりやすいからと言って全てのコンテンツに背景を敷くと、

    読みにくいですし、メリハリとはなんぞや…ってなります。

     

    もちろんホームページのテイストにもよりますが、

    基本的には背景を敷く・敷かない、の反復を意識しています。

     

     

     

    03. イメージの置き方に気をつける

    img01

     

     

    個人的にここが一番苦手でして。イメージに頼りすぎるレイアウトをしてしまうんです。

    しかし、イメージが必ずしも一番大切ではない時もありますよね。

    ここについては日々先輩方からいろんなアドバイスをいただいております。

     

    先輩デザイナー日下さんのありがたいお言葉

    「そのコンテンツの内容を伝える力が強い写真なら大きく置いてもいいけど、

    そうじゃない写真は写真ありきの見せ方は適切じゃない」

     

    なるほど、たしかに。

     

     

    先輩デザイナー鈴木さんのありがたいお言葉

    「イメージの使い方は大きく3通りあって、

     

    1. ふつうに配置
    2. 背景として敷く
    3. 切り抜き写真を使う

     

    この3つをうまく使い分けるとリズムが出来る」

     

    おおお、なるほど!

     

    イメージ1つでも、どういう置き方が一番効果的なのかしっかり考える必要がありますね。

     

     

    まとめ

    細かいレイアウトやパーツの作り方など、気をつけなきゃいけないことはたくさんありますが、
    まずは最低限これらのことに気を付けていきたいです。毎日勉強ですm(__)m

     

    過去の先輩デザイナーズのブログも非常に役に立つことが書かれているので、

    こちらも参考にしてみてください!

     

     

    鈴木さん

    文章が「より読みやすく、よりターゲットに響く」

     

     

    カトリーナ先輩

    【デザインのアクセントに】ロゴっぽいデザインの作り方

     

     

    それではまた次回^^

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2019年10月
« 9月    
 123456
78910111213
14151617181920
21222324252627
28293031  

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス