ボーイのサイト分析まとめ35
スマホファーストから逆算して作られた構成とデザイン。シンプルながらもアクセントの効いたあしらい。
女子美術大学の公式サイト。ターゲットは比較的若い年代となっており、その層のメインデバイスであるスマホ向けに最適化されたデザインとなっている。PC版では回遊性が高まる仕掛けもされており、単なるスマホ版のおまけとなっていない両立されたサイトになっている。
デザインは全体的にシンプルながらもアクセントの効いたあしらいをいくつか盛り込み、サイトならではの個性も担保されている。
スマホファーストで設計された画面の分割構成
PC版では二分割構成のレイアウト。左がメインコンテンツ、右がピックアップエリアを表示させる構成となっている。
スマホでは左側のメインコンテンツのみを表示される構成になっている。レイアウトは基本的にカラムが少ない縦積み構成がベースになっており、スマホデザインを軸にPC版を展開させた構成になっている。PCでは右側にピックアップコンテンツを掲載する事で回遊性を高める狙いもあり、単なるスマホ版のおまけになっていない機能性もあるサイトとなっている。
使用されている写真は全て縦長の画角で統一。スマホで写真が縮小されづらい考慮となっている。また写真の画角はスマホ画面とも近いサイズ感になっており、ターゲットが普段から見慣れた画角を採用する事で、余分な違和感を排除する狙いもある。
独自性のあるあしらい、仕掛け
コンテンツの背景色、ヘッダーのフォントカラーは写真のビジュアルに合わせて変わる仕掛けがされている。訪問するたびに色を変える事で、生徒や教育の多様性といった部分が表現されている。
見出しでは「助詞」の部分を改行するルールになっている。見出しのデザインをする際は、本文との差別化で線を加えるなど装飾的な表現を入れることが多いが、改行位置を工夫するだけで独自性の強い見せ方を確立させている。
今週気になったサイト、記事
子供向けの事業ながらも、エモさや余韻を感じさせる表現が印象的なサイト。スクロールで背景の色がゆっくり変わるなど、世界感にあったインタラクションも絶妙。
シンプルなレイアウトながらもどこか、海外サイトのような手触りも感じさせる仕上がり。ロールオーバーで動画になる演出も有りそうであまり見られない表現のため新鮮に感じる。
ビジュアル加工の総まとめ。クセのある表現も多いが、いざと言う時の引き出しとしても役に立ちそうな記事
この記事が気に入ったらサポートをしてみませんか？