en

1999 / web design / 新卒3年目 https://twitter.c…

en

1999 / web design / 新卒3年目 https://twitter.com/en_design0315

マガジン

  • 架空サイトリニューアル

  • サイトトレース

  • 月報

  • サイト分析

    気になったサイトを分析して言語化した記事をまとめています。

  • デジハリ

最近の記事

サイト分析:NATOCO

●下層ページのフォーマット・ディレクトリ構成:下層はメインのページは第二階層まで、ニュース記事など詳細ページも含めると第三階層まである。 ・ニュース詳細や社員インタビュー詳細などCMSで量産するページは固有のレイアウトにしている。またニュース詳細のみパンクズがない。 第二階層は2種類のフォーマットがある。 ・H1の左端の位置(X座標)はアンカーリンクの有無によって異なる。 →アンカーリンクがない場合はその分、左に詰められている。 ・頭の位置(Y座標)は全ページ統一されてい

    • サイト分析:inter office

      ●下層ページのフォーマット・基本は背景色がベージュ ・一覧ページ(ServicesとProjects)、社員インタビュー詳細は背景がベージュ+英語 ・Productsとnewsの詳細は背景が白 ・Service、Careers>募集要項のモーダルの背景色は黒 ・一覧ページ(Service、Projects、news)はメインビジュアルなし ・About、Products、Cateersはメインビジュアルあり ●H1のルール・h1の頭の位置は同じ(Projects、Car

      • 架空サイトリニューアル【eスポーツ編】

        こんにちは。QUOITWORKS(@quoitworks)の遠藤(@en_design0315)です。 自主学習で架空のサイトリニューアルに挑戦したので、デザイン完成までの過程を記録していこうと思います。 今回は、eスポーツに関する大会やイベントの企画・運営を行なっている企業のコーポレートサイトをお題に設定しました。 実在する企業を題材としているため、企業名は伏せています。(デザインもロゴの部分にはぼかしを入れています) 題材サイトの選定理由は、普段業務で固めのサイトを作

        • サイト分析(2023.03.04)

          デザインの意図の推測というよりは、"どういった部分が効いているのか"という見た目のスタイリングに関して気づいた点をメモしています✍️ 余白を生かしたデザイン見出しを3行に改行して高さを出しつつ、右側に空間を作っている。 左下の文章も見出しとは頭を揃えず、下に配置している。 見出しを「Works」ではなく「Selected Works」にするなど、 敢えて単語の数を増やすことで改行できるようにし、余白を作っている。 また、画像の頭をずらしている。 PERSONページでは、

        サイト分析:NATOCO

        マガジン

        • 架空サイトリニューアル
          3本
        • サイトトレース
          7本
        • 月報
          4本
        • サイト分析
          39本
        • デジハリ
          0本

        記事

          グラフィックトレース(2022.02.28)

          今週はグラフィックのトレースをしてみました。 というのも、会社でウェブサイトよりもピンタレストとかに載っている複雑な図をトレースした方がいいという話になったからです。 会社からグラフィックのトレース課題を出してもらったので作ってみました。 基本は円を重ねれば出来ますが、右下だけはパスファインダーで合体させてます。 この白い縦線が集まった円は作り方が分からなかったのですが、調べてみると線を一本描いて、回転ツールで角度を指定して複製するだけですごい簡単でした。 ブレンド

          グラフィックトレース(2022.02.28)

          サイトトレース(2022.02.13)

          トレースしたデザイン気づいたこと※以下の数値は画面サイズ1366pxで見た時のもの ・左上の一番外側の余白と各テキスト間の余白は2倍になっている。 ・テキストは縦軸センターから120px左の位置に配置。一文が長く、センターに置くと右に寄って見えるため左にずらすことでバランスを取っているのではないか。 ・一番最後の「いこう、その先へ」と上のテキストとのジャンプ率は1.8倍。 ・背景の英語はSVG。 ・「クリエイティブパートナー事業」は上が3カラム、下の「雇用形態」は4

          サイトトレース(2022.02.13)

          サイトトレース(2022.02.06)

          トレースしたデザイン 気づいたことスクロールボタンを黒にしてみるとすごく重たくなってしまう。ロゴやコピーよりも目立ってしまい情報の優先度が崩れるなと感じた。(赤より黒の方が背景の白に対してのコントラストが強いため、黒の方が目立ってしまうのではないか) また、赤色といっても彩度・明度がかなり高いためそこまで重くならないのかなと思った。 スクロールボタンを右に置くと逆に左の余白が目立ってしまう→余白のバランスを取るために左に設置されている。 画像の比率は白銀比。美しく見え

          サイトトレース(2022.02.06)

          サイトトレース(2022.01.30)

          トレースしたデザイン気づいたことフッターは普通のメニューを左、「Request demo」「Contact」のCTAを右に配置し情報を分けており、画面中央に近いCTAの方が目に留まりやすくなっている。フォントサイズを大きくしたり装飾を施さなくてもレイアウトを工夫することで目立たせられることがわかった。 ヘッダーでは「Contact」の導線は格納されており「demo」だけ目立つ形で配置されている。いきなり問い合わせする確率が低いためハードルの低いdemoだけを配置している。

          サイトトレース(2022.01.30)

          サイトトレース(2022.01.23)

          トレースしたデザイン気づいたことサイトはコンテンツが2カラムで構成されており、その横に縦型のメニューが設置されている。各要素の余白が狭く、文字や写真が敷き詰められているにも関わらず、圧迫感や淡々とした印象を感じない。 コンテンツの上部は画像、下部はテキストの割合が多い。「あそぶ」では画像の上に見出しやタグを設置し、情報を画像一枚に集約することですっきりした見せ方になっている。画像をメインにした見せ方にすることで、テキストばかりでごちゃごちゃしないように全体のバランスを取って

          サイトトレース(2022.01.23)

          架空サイトリニューアル【歯科医院編】

          こんにちは。QUOITWORKS(@quoitworks)の遠藤(@en_design0315)です。 入社してから2回目のサイトリニューアルに挑戦したのでその内容をまとめていきたいと思います^^ 今回は実在する歯医者さんのサイトを自分なりにリニューアルしてみました。 リニューアルしたデザインFV 全体のデザイン リニューアルは以下のフローで進めていきました。 今回は2回目なので、プロセスそのものの説明は割愛します。01〜04の行程については前回のサイトリニューア

          架空サイトリニューアル【歯科医院編】

          サイトトレース(2022.01.16)

          気づいたこと情報の整理の仕方についてFVは最初に「いきつけからはじまる地域のお仕事・お手伝い」というサブコピーが目に入り、その後にメインコピーである「いきつけいなか」が目に留まる。 フォントサイズが大きいメインコピーよりもサブコピーの方が目につきやすいのは、人は動きのあるものに目が行きやすいため、スライドが設置してある左側に注目が集まるからだなと思った。 最初にサイトの内容を説明しているサブコピーから見ることでどんなサイトかすぐに理解できていいなと感じた。 目立たせたい

          サイトトレース(2022.01.16)

          サイトトレース(2022.01.10)

          トレースしたデザイン気づいたことMVの画角はヘッダーに高さがあったり、下にニュースのエリアがあることによりあまり広く取られていないが圧迫感を感じない。右側に半円があることでヘッダーとニュースとの境目が曖昧になり抜けができているため、画面に広がりを感じるのだなと思った。また半円の上にコピーが載っているのも画像と白い部分に繋がりを感じる要因となっている。 ピックアップニュースの記事の下のバーが記事よりも左に配置されているが、これは記事をドラッグした時に画面全体に記事が並ぶため画

          サイトトレース(2022.01.10)

          サイト分析(2021.12.27-12.31)

          欧文フォントはCanela(見出しに使用)とInter(ヘッダー等)の2種類。 日本語フォントはNoto SerifとNoto Sans。 VCという今どきな事業を行なっている会社のため見出し部分はモダンでお洒落なフォントを使用し世界観を作っている。一方でヘッダーなどには小さいサイズでも可読性の高いフォントを使用することで使いやすさも担保している。 ●良いと思った箇所01 写真がない中でのビジュアルの起こし方、より企業の想いを伝えるための見せ方が勉強になるトップページ

          サイト分析(2021.12.27-12.31)

          サイト分析(2021.12.20-12.26)

          FVはどんな会社なのかを説明するコピーが設置されている。ホワイトスペースが大きく取られているため、サイトを訪れた際にコピーに目が留まるよう設計されている。またその下にビジュアルを見切れさせることで続きがあることがわかるようにしている。 実績を立たせるために装飾的な部分はなく色もモノトーンで構成されている。使う色が限られているためヘッダーの文字や本文の文字の濃さを見出しよりも薄くして濃淡をつけることで情報の優先度をつけている。そのため日本語の見出しと本文のジャンプ率がそこまで

          サイト分析(2021.12.20-12.26)

          サイト分析(2021.12.13-12.19)

          メインのニュースとサブの情報を左右で分けているパターン。左右で分割して情報に優先度をつけるのはなるほどと思った。 大体メガメニューは開いた時に背景がつくがこれは文字だけのパターン。意外と文字だけでも見やすいなと感じた。ただ背景の写真など後ろにあるものによって使い所が限られそうではある。 第2階層をタップするとアコーディオンで3階層目が表示される。個人的には画面が切り替わるよりそのまま下に表示された方が使いやすいなと感じた。また病院のサイトのため一番上にはアクセスへの導線が

          サイト分析(2021.12.13-12.19)

          サイト分析(2021.12.06-12.12)

          画面右側にはコピーライトが配置されている。普通のサイトはMVで装飾的な意味合いで配置したりするが、このサイトではMVだけでなくスクロールすると追従するのでめずらしいと思った。 MVにはフルスクリーンで制作実績の動画が設置。その下のコンテンツも実績の画像を多く載せている。 またメニューは一番左が「works」、その次が「services」になっており、「about us」は3番目に配置されている。 →実績の豊富さや実力の高さを訴求することで高いレベルの作品を求めている顧客に

          サイト分析(2021.12.06-12.12)