記事一覧
Webサイト分析 『ambr』
https://ambr.co.jp/ 考察・勉強になったこと・メタバースのVR空間に入ったような気持ちになれるサイト。事業内容がサイトを見ただけで伝わる。 →サイトの奥行きがあり、…
Webサイト分析 『Roaster』
考察・勉強になったこと印象
レトロっぽさを感じさせながらも、現代と融合している印象。
→文字に濃いめの茶色
→英字書体がアンティークを感じさせるセリフ対と現代を感じさせる細身のサンセリフ体
→写真が青みかかったレトロな質感になっている
→Serviceではネオン文字の写真を使用
コンセプト
ゆったりと過ごすアンティークカフェ
→深めの茶色と青色を使用(カフェっぽさ)
→文字の動きや、余白でゆ
Webサイト分析 『ニンテンドーシステムズ株式会社』
考察・勉強になったこと印象
エネルギッシュとシンプルで分かりやすいが混在している。また、システム面に特化している印象を受けた。
→エネルギッシュ:赤。フォントが大きめ。
→シンプル:2色の配色。十分な余白と余分な装飾がない。
→分かりやすい:シングルページ。見出しと本文の簡単な構成。
→システム面に特化:左側にコーディングが反映されている。
コンセプト
システムで任天堂を支える
→コーディン
Webデザイン分析 『NEWPEACE』
考察・勉強になったこと・ファーストビューはイラストがスライドしていくような演出がされている。メッセージも左から弾むようにカラーで表示されてくるアニメーションがにぎやかさや楽しいことを提供しているような印象。
・ファーストビューからスライドすると、イラストのアニメーションとなっており、見る人をワクワクさせるような演出になっている。
明るいカラーやポップさから若年層や楽しいこと好きのクリエイティブ層
Webサイト分析 『MYMETHOD』
考察・勉強になったこと・ヘッダーがグラデーションになっていて、澄み渡っている雰囲気を感じた。ファーストビューで練り香水かな?と予想することができた。
・清潔感を感じた。
→清潔感(カラーがグレーに近いブルー)
→文字感を少し空けている。
→ゴシック体でも、細い文字を中心に使用している。
・ファーストビューでメイン写真が半分見えるのがトレンド?最近こういうタイプの配置が多いように感じる。美容系や
Webサイト分析 『DEMI DO | デミ コスメティクス』
・考察・勉強になったこと・ファーストビューにメニューとロゴが大きく配置されていることで、ダイナミックな印象を受ける。
・ファーストビューの写真も縦長で下にスクロールすることで全体が見える仕掛けになっている。大きい広告のように商品を大きく配置することで魅力的に魅せている。
・ファーストビューを抜けると、商品たちが下から勢いよく飛び出してくる。→やはりダイナミックな印象を与えたい?
・カードスリ
Webサイト分析 『社会福祉法人 慈楽福祉会
考察・勉強になったこと・全体的に柔らかい印象や和やかな空気感が伝わってくる。
→ベースカラーに柔らかいベージュカラー
→写真に角丸を使用
→文字が9割日本語、丸みのある書体『Zen Maru Gothic』
→柔らかい印象のカラーを使用
・老人の方がご覧になった時に、迷わないような情報設計がされていると感じた。
→ファーストビューにアイコン付きで4つメインとなるサービスを配置することで、「とりあ
Webサイト分析 『LMIグループ株式会社』
考察・勉強になったこと・ファーストビューは青とピンクの組み合わせが、クールさと可愛さの掛け合わせといった印象を受けた。
→全部青系だったらクールな印象になるが、深めの青ゆえに冷たさを感じるような気がした。ピンクがあることで緩和している。
・ファーストビューは2種類あって、一つは部屋の中に照明、2つ目は、両壁と照明と丸い図形となっており、2種類とも類似した配置になっていることで、お部屋といった統一
Webサイト分析 『株式会社renue』
考察・勉強になったこと・文章の部分の見出しを小さくすることで、伝えたいメッセージがメインで伝わる。その代わりに背景に見出しを忍ばせることで、ここのセクションが何を示しているのか認知することの補助になっていると感じた。
・TOPページでセクションの区切りとして、画面幅いっぱいに横長の写真を配置している。内容を一旦区切る役割を担うと同時に、ダイナミックさを与える。
・ファーストビューのオブジェクト
Webサイト分析 『京都移住計画』
参考・勉強になったこと・水色と黄色のグラデーションがメインカラーとして使用されている。黄色の明るさと水色の未来を感じさせる配色が、「京都での明るい未来の生活」といった印象を受けた。
・TOPページは、メッセージや文章は特になく、詳細記事を載せている。各セクション異なるレイアウトをしているため、記事の中でもジャンルが違うことが感じ取れる。リスト表示の参考になった。
・下層ページの記事では、文章が
Webサイト分析 『日本大学理工学部建築学科』
考察・勉強になったこと・教育する場である学校等は、メインビューを動画にすると、学校での様子や雰囲気が伝わるので良い。
・TOPの学科紹介では、ホバーすると項目が展開されるが、全て異なる色で配色されており、ベースカラーのみで配色されている中にカラーが映える。
・各紹介ページは説明が中心なので文字が多い。画像とテキストで左右交互に配置していくことで文章を区切る役割と目線の動きが出て、読みやすくして
Webサイト分析 『ねぎラボ』
考察・勉強になったことこのサイトのようなポップで柔らかいサイトが好きだ…(小声)。ねぎ大好きだからすごい魅力的なサイト。情報も見やすくて迷うストレスがない。
・ファーストビューで、ねぎを使用した料理の写真がスライドしていることで、「レシピサイトだ!」と瞬時に判断できる。スライドも写真が重なって、後ろにスライドしていく動きがポップさを感じさせる。
・小ネギの写真?イラスト?が散りばめられていてか
Webサイト分析 『CHIMJUN』
考察・勉強になったこと・ファーストビューは、会社名(商品ブランド名)が大きく配置されている。商品などの写真を持ってこなかったのは、会社名(商品ブランド名)を知ってもらいたいという想いがあると推測する。
・ファーストビューの右端に小さく配置されている写真は、スクロールするとスライドインしてくるアニメーションになっている。第二のメインビューといった印象を受ける。
・グリッドデザインは、要素を大きく
Webサイト分析 『STUDY BY SHIZUOKA』
考察・勉強になったこと・イラストだけで静岡の魅力が伝わるようになっている。海外の人がこのサイトを見た時に、静岡に留学するとどんな生活が待っているのか想像できるようなサイトになっていると思う。
・境界線のある文字を使用することで、ポップさが増して楽しげな雰囲気になっていると感じた。また、カラフルな中に、黒帯を引いたり黒を混ぜることでメリハリがでる。
・説明がたくさんあるのに、とても読みやすい。枠
Webサイト分析 『ambr』
https://ambr.co.jp/
考察・勉強になったこと・メタバースのVR空間に入ったような気持ちになれるサイト。事業内容がサイトを見ただけで伝わる。
→サイトの奥行きがあり、こういうところでも異空間のメタバースを表現していると感じた。
・斜めにスライドしたり、文字が円形に回っていたり、動きがあることで楽しくワクワクする気持ちになる。
Webサイト分析 『itskn』
考察・勉強になったこと・ファーストビューが、制作実績になっているデザインは初めて見た。ヘッダーにあるすべてのページが作品一覧になっている。
ハンバーガーメニューに、会社概要などの情報に飛べるようになっている。
→作品をとにかく見てもらいたいという表現だと思われる。
・ホバーした時に、枠線が表示されるところがおしゃれだと思った。グリッドデザインよりスッキリしている印象を受ける。
また、ホバー時に作
Webサイト分析 『らっきょう専門店とまりのつけもの』
考察・勉強になったこと・メインビューにおすすめの品がスライドで展開されることで、深くサイトを見なくても、どんな商品が売っているのかや、おすすめがスグに分かる。
・あしらいが和をテイストとしており、お土産っぽさが増している。自分へのプレゼントはもちろん、知り合いにあげるプレゼント(お土産)をユーザーに想像させることができる。
・商品のテイストにあったあしらいを選んでいることで、商品のコンセプトが