レモネードスタンド普及協会(https://www.lemonadestand-pa.jp/

① ファーストビューの状態から1スクロールしたときに、ロゴ画像が縮小→消滅して、テキストに代わるギミックが気持ち良い。インタラクションとしてもステキだと思う。(PC版)

② 全画面表示と中央ブロック表示(width:984px)をセクション毎に綺麗に使い分けて併用しているところが印象的でした。(PC版)

全画面表示:ファーストビュー、フッター

中央ブロック表示:各種メインセクション

③ 中央ブロック表示の際は、画面の左右に切り抜き画像を配置してページの雰囲気を醸しているところに唸りました。(PC版)

④ 白を背景色として、レモネードをイメージした黄色と緑色をベースにページが構成されていたのが、とてもスッキリした印象を持ちました。(PC版)

⑤ 様々な書体が混在していることに感心しました。見出しにはペンで手書きしたようなフォントを用い、テキスト本文はシステムフォントを用いた太字、注釈や重要度の低い情報はシステムフォントの細字を使っていた。

⑥ サイトを装飾する要素に写真、手描きイラスト、抽象パターン、ピクトを美しく使い分けているのが印象的でした。これは是非とも真似たい。(PC版)

⑦ スマホ版での文字サイズは小さめだった。テキスト本文の文字サイズは13px。注釈などは11px。いずれも小さめ。(スマホ版)

⑧ 中央ブロック表示の時のセクション内レイアウトが、[半分画像:半分テキスト] の並びを左右で交互に配置していたのが、スマホ版表示 / PC版表示 ともに綺麗にレイアウトされていて唸りました。

⑨ 中央ブロック表示の各セクションを、点線でつなぐ表示の仕方は真似できないと思った。どうやってるのかすごく気になる!(PC版)

⑩ 全体として「ナチュラル・オーガニック」な雰囲気を醸しながら、ウェブに最適化されたインタラクションをしていて見れば見るほどにその自然さに感心させられました。

レモネードスタンド普及協会のサイトキャプチャ画像

 

情報ソース:レモネードスタンド普及協会|レモネードスタンド活動は、みんなにできる小児がん支援です。|WD ONLINE

カテゴリー: WEB