さしみ

ー＊Webデザイン勉強中＊ー 日本大学卒業▷保険業界でシステムエンジニア▷デジLIGへ

さしみ

ー＊Webデザイン勉強中＊ー 日本大学卒業▷保険業界でシステムエンジニア▷デジLIGへ
  • 固定された記事

自己紹介

はじめまして、さしみと申します。 Webデザインの勉強をしており、アウトプットの場として利用したいと思いnoteを始めました。 まずは簡単なプロフィールから…… プロフィール■名前（年齢） さしみ（26） 食べ物の中で１番好きなものは魚介類で、その中でもお魚界の原点（？）であるお刺身が大好きなのでこの名前をネット上ではよく使っています。 ■育ち 引っ越しが多い家庭だったので、点々としていました。 北海道生まれ▷新潟県▷茨城県▷埼玉県▷東京都▷千葉 思い出が強いのは

さしみ

    • Webサイト分析 『Roaster』

      考察・勉強になったこと印象 レトロっぽさを感じさせながらも、現代と融合している印象。 →文字に濃いめの茶色 →英字書体がアンティークを感じさせるセリフ対と現代を感じさせる細身のサンセリフ体 →写真が青みかかったレトロな質感になっている →Serviceではネオン文字の写真を使用 コンセプト ゆったりと過ごすアンティークカフェ →深めの茶色と青色を使用（カフェっぽさ） →文字の動きや、余白でゆったりさを表現 勉強になったこと ・ストーリー&世界観づくりが会社の強みとな

      さしみ

      • Webサイト分析 『ニンテンドーシステムズ株式会社』

        考察・勉強になったこと印象 エネルギッシュとシンプルで分かりやすいが混在している。また、システム面に特化している印象を受けた。 →エネルギッシュ：赤。フォントが大きめ。 →シンプル：2色の配色。十分な余白と余分な装飾がない。 →分かりやすい：シングルページ。見出しと本文の簡単な構成。 →システム面に特化：左側にコーディングが反映されている。 コンセプト システムで任天堂を支える →コーディングを画面左側に反映 →任天堂のイメージカラーを使用 勉強になったこと ・メニ

        さしみ

        • Webデザイン分析 『NEWPEACE』

          考察・勉強になったこと・ファーストビューはイラストがスライドしていくような演出がされている。メッセージも左から弾むようにカラーで表示されてくるアニメーションがにぎやかさや楽しいことを提供しているような印象。 ・ファーストビューからスライドすると、イラストのアニメーションとなっており、見る人をワクワクさせるような演出になっている。 明るいカラーやポップさから若年層や楽しいこと好きのクリエイティブ層をターゲットにしているように感じた。 ・TOPページのサービスがカードスライド

          さしみ
        • 固定された記事

        自己紹介

        さしみ

          Webサイト分析 『MYMETHOD』

          考察・勉強になったこと・ヘッダーがグラデーションになっていて、澄み渡っている雰囲気を感じた。ファーストビューで練り香水かな？と予想することができた。 ・清潔感を感じた。 →清潔感（カラーがグレーに近いブルー） →文字感を少し空けている。 →ゴシック体でも、細い文字を中心に使用している。 ・ファーストビューでメイン写真が半分見えるのがトレンド？最近こういうタイプの配置が多いように感じる。美容系やおしゃれなものを扱うサイトに多いと思う。 ・ABOUTのセクションにスクロール

          さしみ

          Webサイト分析 『MYMETHOD』

          さしみ

          Webサイト分析 『DEMI DO | デミ コスメティクス』

          ・考察・勉強になったこと・ファーストビューにメニューとロゴが大きく配置されていることで、ダイナミックな印象を受ける。 ・ファーストビューの写真も縦長で下にスクロールすることで全体が見える仕掛けになっている。大きい広告のように商品を大きく配置することで魅力的に魅せている。 ・ファーストビューを抜けると、商品たちが下から勢いよく飛び出してくる。→やはりダイナミックな印象を与えたい？ ・カードスリーブのようなスライドの表現がおしゃれ。また商品イメージカラー？ごとに背景色を変え

          さしみ

          Webサイト分析 『DEMI DO | デミ コスメティクス』

          さしみ

          Webサイト分析 『社会福祉法人 慈楽福祉会

          考察・勉強になったこと・全体的に柔らかい印象や和やかな空気感が伝わってくる。 →ベースカラーに柔らかいベージュカラー →写真に角丸を使用 →文字が9割日本語、丸みのある書体『Zen Maru Gothic』 →柔らかい印象のカラーを使用 ・老人の方がご覧になった時に、迷わないような情報設計がされていると感じた。 →ファーストビューにアイコン付きで4つメインとなるサービスを配置することで、「とりあえずこの4つ押さえておけば大丈夫だろう」と思い、見てもらえる確率が上がるのではな

          さしみ

          Webサイト分析 『社会福祉法人 慈楽福祉会

          さしみ

          Webサイト分析 『LMIグループ株式会社』

          考察・勉強になったこと・ファーストビューは青とピンクの組み合わせが、クールさと可愛さの掛け合わせといった印象を受けた。 →全部青系だったらクールな印象になるが、深めの青ゆえに冷たさを感じるような気がした。ピンクがあることで緩和している。 ・ファーストビューは2種類あって、一つは部屋の中に照明、2つ目は、両壁と照明と丸い図形となっており、2種類とも類似した配置になっていることで、お部屋といった統一した印象を与えることができている。 ・空間を大切にしていることが、余白から伝わ

          さしみ

          Webサイト分析 『LMIグループ株式会社』

          さしみ

          Webサイト分析 『株式会社renue』

          考察・勉強になったこと・文章の部分の見出しを小さくすることで、伝えたいメッセージがメインで伝わる。その代わりに背景に見出しを忍ばせることで、ここのセクションが何を示しているのか認知することの補助になっていると感じた。 ・TOPページでセクションの区切りとして、画面幅いっぱいに横長の写真を配置している。内容を一旦区切る役割を担うと同時に、ダイナミックさを与える。 ・ファーストビューのオブジェクトと同じグラデーションが、下層ページのタイトル文字にも使用されている。ITのような

          さしみ

          Webサイト分析 『株式会社renue』

          さしみ

          Webサイト分析 『京都移住計画』

          参考・勉強になったこと・水色と黄色のグラデーションがメインカラーとして使用されている。黄色の明るさと水色の未来を感じさせる配色が、「京都での明るい未来の生活」といった印象を受けた。 ・TOPページは、メッセージや文章は特になく、詳細記事を載せている。各セクション異なるレイアウトをしているため、記事の中でもジャンルが違うことが感じ取れる。リスト表示の参考になった。 ・下層ページの記事では、文章が多くなっている。その中でも、小見出しのような文章は、メリハリをつけてフォントサイ

          さしみ

          Webサイト分析 『京都移住計画』

          さしみ

          Webサイト分析 『日本大学理工学部建築学科』

          考察・勉強になったこと・教育する場である学校等は、メインビューを動画にすると、学校での様子や雰囲気が伝わるので良い。 ・TOPの学科紹介では、ホバーすると項目が展開されるが、全て異なる色で配色されており、ベースカラーのみで配色されている中にカラーが映える。 ・各紹介ページは説明が中心なので文字が多い。画像とテキストで左右交互に配置していくことで文章を区切る役割と目線の動きが出て、読みやすくしている。配置されている写真もオートで切り替わっていくので動きがあると同時に、複数の

          さしみ

          Webサイト分析 『日本大学理工学部建築学科』

          さしみ

          Webサイト分析 『ねぎラボ』

          考察・勉強になったことこのサイトのようなポップで柔らかいサイトが好きだ…（小声）。ねぎ大好きだからすごい魅力的なサイト。情報も見やすくて迷うストレスがない。 ・ファーストビューで、ねぎを使用した料理の写真がスライドしていることで、「レシピサイトだ！」と瞬時に判断できる。スライドも写真が重なって、後ろにスライドしていく動きがポップさを感じさせる。 ・小ネギの写真？イラスト？が散りばめられていてかわいい。要素を区切るラインのような役割も果たしている。 ・ビタミンカラーを使用

          さしみ

          Webサイト分析 『ねぎラボ』

          さしみ

          Webサイト分析 『CHIMJUN』

          考察・勉強になったこと・ファーストビューは、会社名（商品ブランド名）が大きく配置されている。商品などの写真を持ってこなかったのは、会社名（商品ブランド名）を知ってもらいたいという想いがあると推測する。 ・ファーストビューの右端に小さく配置されている写真は、スクロールするとスライドインしてくるアニメーションになっている。第二のメインビューといった印象を受ける。 ・グリッドデザインは、要素を大きく配置したほうが綺麗に見えるという点が参考になった。 ・フッターに大きく会社名を

          さしみ

          Webサイト分析 『CHIMJUN』

          さしみ

          Webサイト分析 『STUDY BY SHIZUOKA』

          考察・勉強になったこと・イラストだけで静岡の魅力が伝わるようになっている。海外の人がこのサイトを見た時に、静岡に留学するとどんな生活が待っているのか想像できるようなサイトになっていると思う。 ・境界線のある文字を使用することで、ポップさが増して楽しげな雰囲気になっていると感じた。また、カラフルな中に、黒帯を引いたり黒を混ぜることでメリハリがでる。 ・説明がたくさんあるのに、とても読みやすい。枠やあしらいの工夫がたくさん見られる。文字が多いサイトを作成するときに参考にしたい

          さしみ

          Webサイト分析 『STUDY BY SHIZUOKA』

          さしみ

          Webサイト分析 『ambr』

          https://ambr.co.jp/ 考察・勉強になったこと・メタバースのVR空間に入ったような気持ちになれるサイト。事業内容がサイトを見ただけで伝わる。 →サイトの奥行きがあり、こういうところでも異空間のメタバースを表現していると感じた。 ・斜めにスライドしたり、文字が円形に回っていたり、動きがあることで楽しくワクワクする気持ちになる。

          さしみ

          Webサイト分析 『ambr』

          さしみ

          Webサイト分析 『ｉｔｓｋｎ』

          考察・勉強になったこと・ファーストビューが、制作実績になっているデザインは初めて見た。ヘッダーにあるすべてのページが作品一覧になっている。 ハンバーガーメニューに、会社概要などの情報に飛べるようになっている。 →作品をとにかく見てもらいたいという表現だと思われる。 ・ホバーした時に、枠線が表示されるところがおしゃれだと思った。グリッドデザインよりスッキリしている印象を受ける。 また、ホバー時に作品が白黒に変わるところもしゃれていると思う。 ・詳細ページが原稿のようになって

          さしみ

          Webサイト分析 『ｉｔｓｋｎ』

          さしみ