ボーイのサイト分析まとめ30
PC、スマホでそれぞれに最適化された見せ方、UIが考慮されているサイト。
ビジネス名刺管理ツール「Sansan」の活用法やセミナー情報を紹介するサイト。業務用ツールのためPCでの活用が主となるサービスではあるが、このサイト自体はスマホ向けの見え方もかなり考慮されたサイトになっている。
WEB、スマホで大きくUIや要素を変えている部分も特徴的。WEBデザインをしているとPC、スマホで両立させるために少し強引なレイアウトや設計をしてしまうこともあるため、UIや見せ方を変えてそれぞれのデバイスに最適化された見せ方をする割り切りも大事だと感じたサイト。
PC、スマホで大きく違うファーストビュー
PCではスライダー型で横一列に記事が展開する構成となっているが、スマホではファーストビューに新着記事を一見のみ表示。残りの記事は３カテゴリーのタブ型に集約されている。通常であれば両方ともスライダー型にする事が多いが、スマホでは画角の関係で複数の記事が確認できないデメリットもある。タブ型にする事で記事のカテゴリーを分かりやすく整理して、一覧生を担保している。
また他のページでもPCは画面サイズを生かしたカラム構成。スマホではアコーディオン型にして一覧性やモバイル画角でも成立する構成に変えるなどそれぞれのデバイスに最適化された見せ方が提案されている。
画像の構成要素、文字周りもデバイスに合わせて変更
PC、スマホでの最適化はUIだけでなく画像にも行われている。PCでは設置されていた人のイラストをスマホではバッサリとカット。人のイラストがあることで文字情報のノイズになるため省いたと考えられる。通常であれば同じ画像でトリミングだけを変える事が多いがそれぞれのデバイスに合わせて画像の要素も変えている。
文字周りではスマホで中央揃えに変更されている。一カラムが多いスマホでは要素を中央に揃える事で安定感のあるレイアウトになる。また揃えの変更に合わせてボタンのレイアウトも中央揃えに変わっている。細かい箇所のパーツも変更されていたりとデザインした人の拘りも感じられるサイトになっている
今週気になったサイト、記事
攻めたグラフィクが印象的なサイト。横尾忠則を大体的なモチーフにしたと思われるが、ここまでに至った経緯や製作プロセスも含めて気になるサイト。
コンタクトレンズ開発で有名な企業の採用サイト。ブラーを使用して視界がクリアに開いてくる演出を多用。企業のコンセプトが演出にもしっかり紐づいいた表現がされている。
建築事務所のコーポレートサイト。写真を生かした大きなトリミングや、適度なレイアウトの崩し等を入れつつも配色や装飾は控えめ。派手過ぎず平坦的過ぎずの足し引きが丁度良い塩梅になっている。
psd状でもベクターを編集したい事があるため、地味に助かる機能。コピペで行ける手軽さも嬉しい。