デザイン
ページの少ないサイトではナビゲーションの領域を広くとる必要はないので、
スペースを広く使った1カラム型のデザインを使うことが増えている。
写真は一瞬のうちに視覚に入り、強い印象を与える。
スマホは写真を印象的に見せるためには大きく使うことが重要。
タイトルやリードのようなテキスト回りにも十分に余白をとることでゆったりとした印象になります。
色というのはとても印象に残りやすい要素であり、特に広く使うのが効果的
書体によって気分も左右される
見出しと本文の比率が大きいとインパクトが強く、元気な感じになる。
また比率が低いとクールな印象になる。
情報の見せ方は情報の内容によって変えるべき。
文字を大きくした場合でも、文字を細くするとクールな印象になる
アイコンがあると標識のようにわかりやすく親しみやすいデザインになる。
ナビゲーションは適切な場所に。
適切な動きがあるとなおよい。
ナビゲーションの役割は他のページへ行きやすいという点、動きが閲覧を邪魔したり
押しつけがましくならない限り追従するメニューはどんな閲覧者にも歓迎される機能
グローバルナビの項目数は7個を限度に４～５個に絞るのが理想
ナビゲーションは見た目の存在感と操作したときの存在感の両面で考える。
「購入」につなげるボタンを強調すべき。そのために周囲になじみすぎないくらいのデザインがよい
ナビゲーションのリンクに関してはすべて並べることにこだわらずニーズの高いリンクを目立たせる
クリックを促すリンクは初めてみる人でもはっきりわかるように説明する。
初めてサイトにきた人でも少しうるさいくらい説明がつくようにデザインをする。
すべての情報を並列に並べるのではなく、閲覧者がひとめでリンクを判別しクリックしやすいよう
メリハリをつけよう
リンクだと明示したうえでクリック先にあるものを予想させること
アンカーリンクのテキストにはクリックした先のコンテンツがどんなものか想像できる文言を用意しましょう。
伝えたいことはデザインに反映する。
第一印象は文字よりビジュアルから
スマホで閲覧する人は長い文章を読むのがつらいです。そのため
ＰＣをメインで使っていたときよりもウェブサイトの写真やイラストなどの印象でサイトの価値を判断することが顕著
最初のキービジュアルはウェブサイトの全体のイメージを印象づけ、どのような傾向のウェブサイトなのかを
一瞬で伝えることができる重要なエリアです。
閲覧者がウェブサイトに訪れたときにファーストビューでこのウェブサイトに目的のものはないと思ってしまったらすぐに離脱してしまう
だからこそ、伝えたい内容をいきなり詰め込むよりは、イメージを優先したサイトの構成が望ましい
人は端から端まで読むのではなくてななめ読みしている。
コピーやメッセージは短く簡潔に読みやすいサイズや位置を考えて配置する。
スマホは読みやすい文字サイズに大きくしておこう。
・コンテンツへのリンク
リンク先への興味を喚起できる写真がベスト
閲覧者は写真を目印にクリックしたい内容を探している。
記事の中身を伝えて興味を引くリンク画像を作ろう。
サムネイル画像がない文字だけのリンクはクリックできる部分も小さく目立ちません。
同じ写真でも並び方で受ける印象が変わる。
写真が多ければいいという訳ではない。数の多さは実績の信頼につながらない。
ウェブサイトに人物写真があると、見る人は信頼や安心を感じます。
ターゲットの女性が求めている絵を提供する。
女性はサービスや商品の機能そのものよりも、「サービスを受けて満足している自分や、その商品を使って充実している自分」という情景を連想させる写真に惹かれる傾向があります。その特徴を考慮して、幸せそうな表情の写真を選ぶようにしましょう。
人物写真があると、ユーザーはまず顔を見てしまう
顔を使った広告などは覚えてしまいやすいとう傾向があります。
人物の写真は肌の色が明るく自然に見えるかどうか確認しよう。
人物写真、特に顔写真は、見た人に強い安心感や信頼感を与えます。
人間は、人の顔や表情に敏感に反応しますので、モノや風景に比べビジュアルとして
アピールする力が強くなり、人物写真の撮り方・使い方次第では、１枚の写真でさまざまな情報を伝えることができます。
人物の視線にも意味がでる
例えば、カメラ目線の写真は強い意志を感じるので、サービスや商品のブランドサイトには効果的です。
逆に目線を外して、その先に空間を入れた写真は小田やアで控えめな印象を与えるのでイメージ写真に使うといいでしょう。
スマホデザインなどで、写真の上に文字を乗せてしまった場合、邪魔になってしまうのであれば
文字はのせずに写真下などにいれる方がいい。
アイコンやイラストを入れるだけでリンク先に目に留まる
・難しいことをわかりやすくするイラストを活用しよう。
文字ばかりの長いページは、なかなか最後まで読んでもらえないので、
画像を織り交ぜて構成を考えましょう。
（作業工程など、テキストでも大丈夫だが、「原料入荷」→「製造」→「加工」などビジュアル化して文章のみよりわかりやすくする）
---
背景写真の加工
背景写真は明度の調整だけでなく写真にぼかしなどのエフェクトを加えても面白いデザイン効果がでます。
背景写真の上に文字テキストなどが載ってる場合
主役に使うビジュアルならパリッと見やすくするが脇役としての背景なら色を暗めにするなどの視認性を意識します。
大事な情報はすぐに読めないとストレスを感じる。
背景に写真を使うときは可読性を意識した加工を加える。
背景画像にエフェクトを加えてコントラストを低くしたりする。
写真にぼかしを加えたりしよう。写真そのものの美しさよりも、上にのせた文章やロゴなどを優先したいときしか使えない表現ですが、ぼかすことでやわらかい表情がうまれ、遠近感がでて文章も読みやすくなります
写真をモノクロに加工して、そのうえに1色鮮やかな色でキャッチコピーやロゴを配置すると、色に視線がいくので文字が引き立って読みやすくなります。
ファビコンを追加することでブランディング効果がある。
目印がないサイトは記憶に残らない。
------
読みやすい配色
色使いによって、ウェブサイトの内容を理解しやすくもしづらくもなるのでイメージにあった配色にしましょう。
１つのサイトで使う色は３～５色まで。
色が多すぎると統一感がなく、デザインのまとまりにくくなるため
配色を決めるのは広い面に使用するベースカラー、補足として使うサブカラー、目立たせたい箇所などに使うアクセントカラーをみっつ選びます。
これに加え、黒白などの無彩色を使用するのが基本です。
無計画にその場、その場で色を増やしてはいけません。
読みやすさのために本文文字と背景のコントラストは必ず確保します。
濃い背景色には白文字、薄い背景色には黒文字です。
白黒どちらも読みづらい中濃度の背景は使用を避けます。
配色はターゲットにあった配色にする。
後退色と進出色
暖色系の色は進出色と呼ばれ、前方に呼び出してくるように見えます。
背景に深紅のような濃い進出色を使うと、中央のものは後退してみえ、その分中心が目立たなくなってしまうので色の配色には気を付けよう。
年齢や性別ごとに好まれやすい色、ターゲットの好みを演出できる配色にしよう
サイトの配色を決めるときは、商品やテーマにフィットする色であると同時に、ターゲット層に訴求する色かどうかというのも考慮しましょう。
一般的に幼児や子供は鮮やかなハッキリとした色を好み、青年になってくると寒色や淡い色も好むようになってくるそうです。成年期には寒色や中間色を好む人が多く、年齢を経るといわれる渋い色を好むようになるそうです。
------
文章にて読みやすさをあげる基本テクニックを使う。
ビジュアルを重視しすぎて文字が読みづらくならなうように気を付ける。
専門用語が多くならないように気を付ける。専門用語を使っても補足をいれる。
漢字ばかりになると読みづらいので、漢字は２～３割程度におさえる。
密度集をさげるために改行を2行あきにしたり、ざっくりと100～140文字程度で段落を変えるなどの調整を行います。
ウェブライティングでは特徴をまとめて箇条書きを使うと見た目も読み飛ばしがへります。
----
長い文章の扱い
長い文章を隅から隅まで読むのはつらい。
文字ばかりだと特に知りたい情報でない限り積極てきに読む気にならないこともなにか重要な箇所は目に留まる工夫を入れるといい。
長い文章を読ませるしかけ
文章に見出しを入れたり、下線をやマーカーを引いたり、イラストを入れるなど様々なあしらいをいれることで読みやすくなる。
