茶ッカソン #1日1サイトレビュー

2019/11/9/土 vol.11

茶ッカソン

コンセプト

・お茶と座禅からはじまる日本のアイデアソン(※)
・新しい取り組みなので、参加への敷居を下げて、様々な人に興味を持ってもらいたい。

※アイデアソン＝「アイデア×マラソン」を掛け合わせた造語
・特定のテーマについて、様々な人々が集まりディスカッションする。
・短期間で、新たなアイデアを創り出していく取り組み。

アイデアソン - Wikipedia

フォント

・和文フォント
　- 見出し：凸版文久明朝 Pr6N R
　　[サイズ] 36px  [太さ] 700  [行間] 36px  [文字間] 3.6px(0.1em)
　- 本文：Noto Sans JP
　　[サイズ] 18px  [太さ] 700  [行間] 21px  [文字間] 2.7px(0.15em)
　　[サイズ] 14px  [太さ] 400  [行間] 25px(1.75)  [文字間] 0.28px(0.02em)

・見出しの「凸版文久明朝 Pr6N R」は、縦組みの可読性を第一に考えて作られた書体。
・明朝体で伝統的なイメージだが、太さが細めなので重々しくなくモダンな雰囲気がある。
・本文のフォントサイズは少し小さめでおしゃれな印象。トレンドに敏感な若者向けの印象。
・文字間や行間が広めに開いているので圧迫感がない。お茶のほっとする時間や空間というイメージに合っている。
・暗い背景に白文字なので、可読性がある。

カラー

・メイン
　　[グレー] 23232a [紺] 253965 [ゴールド] d4b079
 ・ポイント
　　[緑] 119e9d [赤] ef6f56 [黄色] e1bb0d

・グレーや紺でスタイリッシュで落ち着いた印象
・金色があることで伝統的な印象。暗い色と一緒に使うことで、効果が引き立っている。
・緑・赤・黄色といったカラフルな色があることで、ポップな印象が加わり敷居が下がる。親しみやすくなる。
・カラフルな色はソフトトーンなので、落ち着いた印象を壊さない。

ファーストビュー要素

・ロゴ
・新着情報
・グロナビ
・SNSのシェアリンク

ファーストビュー

・四角が四方に割れてファーストビューが登場する。何かが始まるようなワクワク感がある。ロゴも四方から表示されるので、連続性があり、中央に視点が集まる。必ずロゴを見てもらえる。
・お茶道具と文房具といった、茶カッソンを象徴するアイテムを散りばめている。
・左上にお茶道具、右下に文房具と分けられていて、アイテムのカテゴリーを認識しやすい。お茶道具の存在感の方が少し高め？
・ランダムに散りばめることで、堅苦しさがない。
・背景のタタミの割れ目が中央に集まっているので、中央のロゴに目がいく。（位置が中央より少し下なのはなぜなんだろう）
・下へのスクロールを促すラインがタタミの割れ目に沿っているので、目がいく。

グロナビ

・画面右上に配置。下にスクロールするとハンバーガーメニューに変わる。
・ハンバーガーメニューは、ホバーすると3本ラインが均等な長さに変化するので、選択していることがわかりやすい。
・下スクロールした時に、ハンバーガーメニューがコンテンツと被らないようになっている。
・グロナビは、ホバーすると白文字が黒文字になる。背景色的に、黒文字の方が視認性が良いので、選択していることがわかりやすい。背景色が変わるよりもテキスト色が変わった方が上品で落ち着いているイメージがする。
・右上のロゴは、ファーストビューでは表示されず、下にスクロールすると現れる。ファーストビューのビジュアルを邪魔しない。特に、SPではロゴが表示されるとコンテンツのタイトルと被って視認性が悪くなることを防いでいる。（ページランディング時にロゴがないことに気づいた時は、TOPページに戻れないと思い、少し焦った。）

TOPページコンテンツの流れ

① 茶カッソンとは何か、一文で説明
② 4つのポイントを紹介
③ コンテンツ詳細ページへの導線

TOPページ

・スクロールすると、縦向きにコンテンツが現れるアニメーションが設定されている。縦スクロールの動きと合っていて読みやすい。
・コンテンツの枠がベタ塗りの四角で表示されてから、内容が表示される。2段階表示なので、突発的な感じがなく落ち着いたイメージ。
・最後の「畳分け」のコンテンツだけ横アニメーションなので、目を引く。
・アニメーション表示は初回のスクロール時のみ。その後は上下にスクロールしても静的なページのままなので、アニメーションで無駄に気を削がれることがない。情報が読み取りやすい。
・背景の金の縦ラインが縦スクロールに合っている。
・グレーの背景にタタミ模様が入っているので、重々しくない。

・4つのポイントを紹介は、写真が縦長で、日本の御札のようなイメージを受けた。
・レポート一覧は、写真があることで興味を引く。最新のレポートの写真を大きく表示させている。
・レポート一覧のテキストで、数字の表示が横書きになっているので少し読みづらい。
・4つのポイントとレポート一覧のコンテンツの区切りが、背景のタタミ模様の有無で自然とわかる。コンテンツ詳細ページも、レポート一覧のみタタミ模様が使われていて統一感がある。
・畳分けは企業向けコンテンツなので、他と異なりきっちりしたイメージ。
・見出しがランダム配置なので、堅苦しくない。

フッター要素

・新着情報
・お問い合わせ
・プライバシーポリシー

コンテンツ

・コンテンツごとにテーマカラーがあり、情報を整理しやすい。
　- [緑] 茶カッソンとは
　- [赤] レポート一覧
・TOPページは縦書きが多いが、コンテンツページは横書き。情報量が増えるので、読みやすさやページの高さ軽減のためだろうか。
・レポート一覧ページで、テキスト量が増えた時には、文字間や行間（28px）を広くして読みやすくしている。
・新着情報の「茶ッカソン in Tokyo 2017」のゲスト写真の顔の大きさや背景が揃っていたら、イベントとしての信頼感や洗練感が上がるのではないか。

枠

・写真や枠は四角。伝統的なイメージ。
・ボタンは角丸（角丸4px）で親しみやすい。四角ばかりで堅苦しくなることを防いでいる。

SP

・スマホのフォントサイズは、本文12px〜14px。見出し16px〜24px。
・メインビジュアルの写真が、PCと若干異なる。
・TOPページの4つのポイントは、写真とテキストの配置を交互にしている。写真が縦長なので、縦書きテキストを横に並べると収まりが良い。
・TOPページのレポート一覧における、写真の大小の差がない。
・PCと同じように、SPもTOPページは縦書きの表現を使っている。高さ軽減のために横書きにせず、配置を工夫している。

その他

・茶カッソンとはページに書かれた「TEA BRINGS NEW( )」という言葉の（）は、「余白を作ること」を表しているのだろうか。表現の仕方がかっこいい。
・四角と丸の幾何学模様は、伝統と新しい考えを表しているように見えた。
　四角が[赤] （レポート一覧：真面目なイメージ）で、丸が[緑] （茶カッソンとは：新しい考えの説明）なので、コンテンツのイメージにも紐づけているのだろうか。
・金色の枠が常時表示されているが、そこまで窮屈な感じはしない。ページのビジュアルが一つの絵のように見える。和歌や俳句を書くための色紙のようなイメージも受けた。
・写真の上に、長方形の四角を置いて、その上にテキストを書く表現をよく見かける。
　- 視認性があり、目を引く。
　- 縦書きだと、日本の文学的な印象がある。
　- デザインとして今流行っているのだろうか。

ページキャプチャ