zu

へっぽこWebディレクター。webデザインを勉強中。学んだこと、気付いたこと、たまに自…

zu

へっぽこWebディレクター。webデザインを勉強中。学んだこと、気付いたこと、たまに自分の事を書いていきます。

  • 1日1サイトレビュー

    気になったWebサイトを取り上げて自分なりに考察しています。

  • 作ったものいろいろ

    勉強中に制作したもの。お題をお借りしたものから自主制作まで。

2022/3/23

戦争が起きて民間の人もどんどん亡くなっていっている現実が信じられず…一日も早く終息してほしいです。 #ウクライナ危機 #ウクライナ緊急支援 #READYFOR #クラウドファンディング

zu

    • 【1日1サイトレビュー】#142 Hello! TSUMURA バーチャル漢方記念館

      ■Hello! TSUMURA バーチャル漢方記念館 https://www.tsumura.co.jp/hellotsumura/ ツムラによるサイト全体が資料館のようになった特設サイト。 ・トップページのエンターからメインへ進んでいく。ファーストビューの記念館のビルにはローディングで階層ごとに分解されていくアニメーションが付いている。フロアごとのイラストも部分的に人が動いていたりホバーアクションがついていたりユーザーが記念館の雰囲気を楽しめるようになっている。 ・ナ

      zu

      • 【1日1サイトレビュー】#141 RINGO × シルバニアファミリー スペシャルサイト

        ■ RINGO × シルバニアファミリー スペシャルサイト https://ringo-applepie.com/collaborations/sylvanianfamilies/ RINGO×シルバニアファミリーサイト。 ・RINGOの世界観とシルバニアが今風に混じり合ってるありそうでなかったコラボ。リンゴの赤とシルバニアのあたたかみのある雰囲気、クリスマスカラーのような配色、うさぎの形とロゴやアップルパイのモチーフになっている丸の形を組み合わせた背景の模様もミニマル

        zu

        • 【1日1サイトレビュー】#140 SUHADAシリーズ

          ■SUHADAシリーズ https://www.wacoal.jp/suhada/ ワコールのSUHADAシリーズのサイト。 ・1カラムの構成でページ上部にナビゲーションメニューが固定されている。トップページでメニューの中ページへ遷移、中ページではサブナビゲーションが置かれている。 ・白をベースに 単色とグラデーションで使い分けられたヌーディーカラーを中心に淡い色でまとめられている。ロゴの線の細いスタイリッシュな雰囲気とポイントで使われている黒の割合が合っていると思った

          zu

        2022/3/23

        zu

        • 【1日1サイトレビュー】#142 Hello! TSUMURA バーチャル漢方記念館

          zu

        • 【1日1サイトレビュー】#141 RINGO × シルバニアファミリー スペシャルサイト

          zu

        • 【1日1サイトレビュー】#140 SUHADAシリーズ

          zu

        マガジン

        • 1日1サイトレビュー
          142本
        • 作ったものいろいろ
          10本

        記事

          【1日1サイトレビュー】#139 入場できない美術展「from the seabed」

          ■ 入場できない美術展「from the seabed」https://ici-art.com/from-the-seabed/ リアルの会場では入場できない、AR・VR技術を使った仮想展示「from the seabed」の告知サイト。 ・1カラムのシングルページでハンバーガーメニューのリンクはサイト内のセクションのみ。展示に関する情報と写真をまとめたシンプルな構成。 ・マウスの動きに合わせて背景写真に水面が揺れるようなエフェクトがかかっている。紺よりの青で深海っぽい

          zu

          【1日1サイトレビュー】#139 入場できない美術展「from the seabed」

          zu

          1日1サイトレビュー#138 BE.AT TOKYO

          ■BE.AT TOKYO https://be-at-tokyo.com/#cover BE.AT TOKYOのサイト。ビームスによる新プロジェクトなんだとか！ ・建物のような立方体やオブジェクトがいくつか重なり合ったファーストビューが印象的。街並みにも見えるし模様にも見える。パーツひとつひとつに動きの違うアニメーションがついていたり、マウスの動きに合わせて画面がモノクロになるので視覚的に楽しめる。 ・ファーストビューからスクロールしていくと中央の立方体が浮かび上がり全面

          zu

          1日1サイトレビュー#138 BE.AT TOKYO

          zu

          【1日1サイトレビュー】#137 アオラニ ダイナー&パーラー

          ■アオラニ ダイナー&パーラー http://www.aolani-ohana.com/aolani/ 熊本県のハワイアン料理アオラニのサイト。 ・ファーストビューのシズル感のある料理の写真と大きく全面に配置したキャッチコピーが印象的なサイト。トップページの読み込みでは細く淡い色のフォントがページの読み込みに合わせて太く変わっていく動きが珍しかった。 ・1カラムの構成でナビゲーションメニューはページ上部に固定されている。ナビゲーションメニューの内容がページの構成とイコール

          zu

          【1日1サイトレビュー】#137 アオラニ ダイナー&パーラー

          zu

          【1日1サイトレビュー】#136 AJINOMOTO オリーブオイル

          ■AJINOMOTO オリーブオイル https://www.j-oil.com/oliveoil/ JオイルミルズのAJINOMOTOオリーブオイルのサイト。 ・1カラムの構成でナビゲーションメニューはページ上部に固定。メニューは5つのみで端的にまとまっておりページ内、階層ページに遷移するものがある。 ・ポパイの世界観とオリーブオイルの紹介がマッチしている。赤、黄、緑を中心としたハッキリとした配色でイラストやパーツにはくっきりと縁が付いているので操作がしやすいと感じた

          zu

          【1日1サイトレビュー】#136 AJINOMOTO オリーブオイル

          zu

          【1日1サイトレビュー】#135 パティスリー GIN NO MORI

          ■ パティスリー GIN NO MORI https://ginnomori.info/patisserie/ 洋菓子専門店GIN NO MORIのサイト。 ・1カラムのサイトで画面左手にホームへ戻るロゴ、ページ内ナビゲーションメニューが固定されている。スクロール中はナビゲーションメニューが隠れる仕様。 ・トップページでは、アクセス時の読み込みでファーストビューになっているメイン商品の写真が靄が晴れるように徐々に見えていく。森をイメージさせる木の枝や植物、モチーフのリス

          zu

          【1日1サイトレビュー】#135 パティスリー GIN NO MORI

          zu

          【1日1サイトレビュー】#134 HAPPY OUTSIDE BEAMS meets TRAIL WORKS

          ■ HAPPY OUTSIDE BEAMS meets TRAIL WORKS https://www.beams.co.jp/special/happyoutside/trailworks/ TRAIL WORKSとBEAMSのタイアップを紹介するサイト。 ・サイト全体でインスタ風に白っぽく加工した写真を使用している。ファーストビューの霧のかかった早朝の出発写真のイメージに合っている。 ・大小さまざまな大きさの写真をグリッドから外してレイアウトしている。線や背景色、

          zu

          【1日1サイトレビュー】#134 HAPPY OUTSIDE BEAMS meets TRAIL WORKS

          zu

          【1日1サイトレビュー】#133 maxilla

          ■maxilla https://maxilla.jp/ クリエイティブエージェンシーmaxillaのコーポレートサイト。 ・トップページが作品を一覧できるポートフォリオの役割を果たしている。スクロールの動きと方向に合わせて作品が出てくる。円状に沿ってイメージが少し反れた状態で出てくるので立体感がある。カーソルが円形になっていてホバーしたタイトルが白抜き文字になる。色や動きを付けなくても一目で触っている箇所が分かる。 ・作品の詳細ページにもファーストビューのようにビジュ

          zu

          【1日1サイトレビュー】#133 maxilla

          zu

          【1日1サイトレビュー】#132 株式会社ノワール

          ■株式会社ノワール https://noir-e.com/photo 株式会社ノワールのコーポレートサイト。 ・トップページがメインコンテンツのフォトギャラリーになっている。スクロールに合わせて写真が下から入り込んでくるモーションが付いている。紙のような動きと写真に付いているシャドウで立体感が出ている。薄い背景色なので写真の色が映えている。 ・写真を一枚ずつ開くとカテゴリが表示されてカテゴリソートもできるようになっている。 ・スクロールに合わせて左上のメイン

          zu

          【1日1サイトレビュー】#132 株式会社ノワール

          zu

          【1日1サイトレビュー】#131 株式会社なないろ

          ■株式会社なないろ https://iroiro7iro.com/
 株式会社なないろのサイト。 ・1カラムの構成でナビゲーションメニューはサイトの上部に固定。スマホ版では右上にハンバーガーメニューが設置される。 
・キャッチコピーやテキスト、見出しの読み込みのモーションが文字をタイピングしていくような動きで目を引かれる。 ・ファーストビューの社名ほ写真は動きがネオン管の光が点滅するような自然な効果になっていて雰囲気がある。 ・配色は黒をベースにしていてハッキリと

          zu

          【1日1サイトレビュー】#131 株式会社なないろ

          zu

          【1日1サイトレビュー】#130 VOGUE GIRL

          ■VOGUE GIRL https://voguegirl.jp/ 読み物としても大好きで、よく見ているVOGUE GIRLのサイト。情報が盛り沢山なわりに記事一つ一つはサクッと読める。 ・ファーストビューを全面に見せず、ページ上部にトピックスのバナーをランダムで表示しているのが最近のサイトと違って珍しいと感じた。バナーの下から始まるファーストビューにはトピック記事のカバーでこちらもランダムに表示される。クリックすると記事のページへ。 ・配色のベースは白、グレーとモノ

          zu

          【1日1サイトレビュー】#130 VOGUE GIRL

          zu

          【1日1サイトレビュー】#129 Today

          ■Today https://hellotoday.jp/ デザイン企画会社Todayのコーポレートサイト。 ・ページ内、ページが切り替わるモーションが特徴的なサイト。 「Who we are」のページではスクロールに合わせて見出し、背景の文字がまばらに動く。ページ内の動きは横スクロールで写真とテキストエリアが交互に出てくる。テキストエリアをハッキリした黒、白にして写真との差が付いている＋動きをつけているので奥行きを感じる。スクロールの動きを逆にするとページを戻っていく。

          zu

          【1日1サイトレビュー】#129 Today

          zu

          【1日1サイトレビュー】#128 メディコートグレインフリー

          ■ メディコートグレインフリー（Medycoat Grain Free） http://www.petline.co.jp/medycoat/lineup/grainfree/ メディコートのドッグフード商品グレインフリーのサイト。 ・1カラムのランディングページ。ナビゲーションメニューはなく1ページで商品紹介をしている。左上にホームのサイトへのリンク、フッターにコンタクトと通販サイトへのリンクがある。 ・ハスキーの写真と山と岩場のイメージを使ったファーストビューの雰

          zu

          【1日1サイトレビュー】#128 メディコートグレインフリー

          zu