Webデザインの本質は「言葉」コンテンツファーストでデザインを考えよう

こんにちは、ゆえです。
いつも体験談ブログを読んでいただきありがとうございます。

今回の記事では、コンテンツファーストの重要性について書いています。

それではしばしお付き合いください。



Webデザインの本質は「言葉」コンテンツファーストでデザインを考えよう

ゆえ
どれだけデザインが素敵なサイトも、商品やサービスのストーリーが伝わらないと、売るための力は弱くなります。

わに
ユーザーが本当に欲しい情報が載っていない「自分が作りたいデザイン」を作るだけでは、自己満足なアートで終わってしまいます。
まずはユーザーが知りたいと思う情報を発信することが大事だと念頭に置いておきましょう。

コンテンツファーストという考え方

コンテンツファーストという考え方で重要となるのが、誰がどんな環境でサイトを閲覧するかを考えることです。

例えば、シニア層のユーザーが多いサイトの場合、文字の大きさやメニューボタンが小さすぎるとユーザビリティを損ねます。

シニア層にはおしゃれで使いにくいデザインよりも、シンプルでわかりやすいデザインが好まれます。

また閲覧環境といえば、昨今スマートフォンで閲覧するユーザーがほとんどです。

そういったことを考えると次の2点の考え方が大切だとわかります。



コンテンツファーストとはスマートフォンファースト

これまでは、PCサイトは画像サイズが大きいぶん様々なデザイン演出が可能でした。

  • ヘッダー
  • 背景メニューエリア

など、いわゆるコンテンツとは別に外側の部分を作りこむことにより、サイトの華やかさを表現することができました。

しかしスマートフォンでは画像をサイズが小さくなり、そういった外側のデザインで主張ができなくなったのです。

そのため、コンテンツをいかに見やすく、わかりやすくかが重要になっています。

そしてその考え方はとても理にかなったものです。

なぜならそもそもユーザーは外側のデザインを見たいのではなく、コンテンツを見たいからです。

おしゃれなヘッダーはいらない

ヘッダーやメニューエリアをどれだけお洒落に演出したとしても、肝心のコンテンツが見やすく読みやすくなければ意味はありません。

外側のデザインを作りこむよりも、中身を作った方が有益です。

美人は三日で飽きるという言葉があるように、サイトの外面にばかりこだわっても仕方がありません、大切なのは中身です。



コンテンツは文章と画像とメリットを相互に組み合わせて作る

コンテンツは基本文章と画像で構成されます。

コンテンツを作る際にお勧めなのは、まず文章のみでコンテンツを考えてみることです。

文章のみでコンテンツを考えれば、論理構造のしっかりしたコンテンツになり、読み手を説得しやすくなります。

ただ文章は直感的な表現が苦手です。

そのため、写真やイラスト素材も併用し、相手の直感に働きかけるようにします。

文章と画像それぞれのわかりやすい表現を考える

同じ文章でも配置によっては読みづらくも読みやすくもなります。

どれだけ素晴らしい文章も、小さな文字で行間もなく詰め込まれていては読む気がしません。

そのため文章や画像を配置する際は以下の事に注意をしましょう。

文章を読みやすくするチェックポイント

  • 文字の大きさ文字の色は適切か
  • 文章の行間は適切か
  • 文章の強調は必要ではないか
  • 文章の表現自体はわかりやすいか

写真を見やすくするためのチェックポイント

  • 写真のサイズは適切か
  • 写真の明るさやコントラストは適切か
  • 写真の構図はわかりやすいか




ウェブサイトの特性を考えてデザインする

ウェブという媒体が持つ特性を考えてみましょう!

例えば次のような特性があります。

  • ユーザーの環境によって見え方が異なる場合がある
  • 紙媒体などと違い公開後も何度もブラッシュアップできる
  • 外部のプログラムなどを導入し機能を拡張できる
  • 印刷することができる

デザイン時にはこれらの特性をメリットと考えることをお勧めします。

例えばスマートフォンだけでなく、PCやタブレットでアクセスするユーザーもいます。

そのため、レスポンシブデザインなどを採用し、それが個別の環境に合わせたデザインが提供できると良いでしょう。

複数のデザインを用意するにはコストもかかりますが、ユーザーの環境に最適化したデザインを提供できれば各ユーザーへの訴求力を高めることができます。

ブラッシュアップについて

ブラッシュアップに関しては、アクセス解析の情報などを見ながらデザインをブラッシュアップしていくと良いでしょう。

例えばメインビジュアルの写真がベストかどうかは、ユーザーの反応を見るまでは分かりません。

反応が悪ければ写真を変える必要がありますが、ABテストなどで常にpdcaサイクルを回せるのは、Webならではのメリットです。

そのため、サイト公開後のブラッシュアップのしやすさを考えてデザインしておくことも重要です。

外部プログラム

外部プログラムに関しては、サイトの拡張性を担保するために複雑なJavaScriptやCSSなどを導入しないことも選択肢のひとつです。

単にビジュアルを見栄えよくするだけのような、肝心のコンテンツの中身にプラスにならないJavaScriptやCSSなどは導入しない方が良いでしょう。

シンプルな状態のサイトであれば、ページの印刷時にうまく印刷できないといったトラブルも防ぐことができます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次