基本情報（プライス・スケジュール等）見せかた考察
基本情報の見せ方がわからない
Priceやschedule等、基本情報を掲載するとき、文字だけで端的に伝えて中央寄せにするデザインしか思いつかない私です、、、
しかも作成中の生け花スクールのサイト、そんなに料金体系もスケジュールも複雑ではないので、文章量少なくて左右余白がたっぷり。
なんだかスカスカの印象。
でも写真いれるとなんだか重たい。イラストは雰囲気的にあまり入れたくない。
もう少し、いい見せ方ないものかというどツボにはまって3日目です。
頭の整理もかねて考察〜
サイトレビュー
①KID ACADEMY NURSERY
・1カラム構成、フォントサイズは16pxと一般的だが、上下余白が30pxずつあるので、字が読みやすい 1pxのグレーのボーダー（#e4e4e4）が情報整理に効果発揮
・tableタグで囲んでおり、thのフォント色をピンクにしているので可読性が高い
・タイトルのあしらいとthのフォント色がマッチしていて統一感がある
ちなみにフォントカラー・あしらい等がないデザイン例はこちら↓
同じ構図なのに全然印象がちがう。
会社概要等、システマチックに情報を伝えたいときは、フォント・あしらい等ないほうが見ているこっちも気持ちが切り替わる。
②森の生活
・チケット風のデザインになっていて可愛い。
ノスタルジックな雰囲気もサイトとすごくマッチしている
・フォントのカラーが濃いグレー（#3a4b40）で優しい印象
・priceの値段に使われたフォントが「Sorts Mill Goudy」
値段だけ少し独特の字体にするとデザイン性が上がった印象がある。
・フォントサイズのジャンプ率が絶妙。
目立たせたい順に18px or 20px→16px→13px→12px
③YOGA CLASS studio Tao
・伝えたい情報量が多い場合に使いたい表デザイン。
表になっていると、自分の知りたい情報が手に入りやすい 親切さが伝わる
・フォント13px、一部の数字だけ15px 余白上下18px、左右20px
④SENSE ISLAND
・端的に文字情報で記載されているのだけれど、周りのデザインが斬新なので、とてもスタイリッシュに見える。
・フォントサイズは全て14pxだけれど、タイトルだけフォントウェイトをあげて、かつ情報と情報の余白が40pxと、広く空いているので情報整理がうまくされている
まとめ
・伝える情報量が少ない場合、情報間の余白は20-30pxと広めに設定するときちんとデザインされている感がでる
・「線」の使い方が重要になってくる
・フォントカラーを変えないのであれば、文字サイズ・フォントウェイトを上手く使って情報整理すべし
・position:fixedで付いてくる、周りのデザインによって、文字情報だけでも洗練された印象を与えることができる
この記事が気に入ったらサポートをしてみませんか？