ワタナベ/ウェブボーイ

webデザイナー2年生のボーイ。 ツイッター https://twitter.com/…

ワタナベ/ウェブボーイ

webデザイナー2年生のボーイ。 ツイッター https://twitter.com/ws0606

ボーイのサイトトレース04

トレース先 トレースしたデザイン ビジュアルを使用しないデザインのアプローチ今回トレースしたサイトは画像やグラフィックなどのビジュアルを大きく使用しないサイトとなっている。ビジュアルのパワーに頼らず見栄えの良いサイトに仕上げており、主にフォントや図形のみとシンプルな構成ながら単調な印象にもなっていない。これらは下記の要因があるからだと考えられてる。 ●円を使った構成でデザインにフックとメリハリを付与 サイトで一番特徴的なのは大胆に円の要素が配置されている事である。直線

ワタナベ/ウェブボーイ

    • ボーイのサイトトレース03

      トレース先 トレースしたデザイン 繊細に作られたグリッドの設計ブロッグ状に配置されたレイアウトのため、一見するとシンプルなグリッド構成で組まれているようにも見えるが、トレースをしてみるとかなり細かい分割で構成されている事が分かった。 繊細なグリッド設計で配置する事で、整合性が取れた設計になるため崩した箇所を入れても破綻しにくい見え方になる。そのため思い切ったアプローチやレイアウトも可能なデザインになっている。 情報量を上げる事で淡々とした印象を回避デザインのトーンとし

      ワタナベ/ウェブボーイ

      • ボーイのサイトトレース02

        トレース先 トレースしたデザイン 長体・平体を組み合わせたフォントの表現 サイト中で最も目を引くのがタイポグラフィの表現。自社製のオリジナルフォントが使用されているが、通常サイズ以外に長体と平体が掛かったフォントが２種類用意されている。 縦横比率が異なるフォントを組み合わせる事で単調な見せ方にならずインパクトのある訴求をしている。また両方をフラットに使用すると比率の違う物同士でチグハグな印象も与え兼ねないため、ジャンプ率で差を付けるなどしてバランスを取っている。 ち

        ワタナベ/ウェブボーイ

        • ボーイのサイトトレース01

          トレースしたサイト シンメトリー、アシンメトリーを上手く使ったグリッドを感じさせないレイアウトの配置今回のサイトは海外のWEBデザインを彷彿とさせる「グリッド感」を感じさせないデザインとなっている。実はレイアウト単体で見るとある程度グリッドやインナーに沿った構成になっており、自由に散らしている訳でもない。左右対象、非対称の要素を上手く織り混ぜる事で無理なく崩したレイアウトを実現している。 ファーストビューでは中央に線を引く事でそれが「軸」となり左右に異なる要素を入れても安

          ワタナベ/ウェブボーイ

        ボーイのサイトトレース04

        ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ35

          スマホファーストから逆算して作られた構成とデザイン。シンプルながらもアクセントの効いたあしらい。女子美術大学の公式サイト。ターゲットは比較的若い年代となっており、その層のメインデバイスであるスマホ向けに最適化されたデザインとなっている。PC版では回遊性が高まる仕掛けもされており、単なるスマホ版のおまけとなっていない両立されたサイトになっている。 デザインは全体的にシンプルながらもアクセントの効いたあしらいをいくつか盛り込み、サイトならではの個性も担保されている。 スマホ

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ35

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ34

          日本的な要素と力強いメッセージの訴求。UIを活用した情報整理。古民家再生事業を行う企業のコーポレートサイト。歴史的建築を利用した地域の魅力発信や文化の継承がコンセプトになっているだけあり日本的な情緒を感じる要素を入れている。さらに事業の熱量をストレート伝えるため、メッセージをダイナミックに見せる構成、ワンページ型のサイトとしてUIを上手く活用した情報整理も行っているのが特徴的なサイトになっている。 縦組みの多用。日本家屋を思わせる白壁の質感。 サイト全体では見出しやメ

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ34

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ33

          物件よりも地域の情報発信に比重を置いた不動産サイト横浜市に拠点を構える不動産の仲介・管理を行う松栄建設のコーポレートサイト。最大の特徴は不動産系サイトのメインとなる物件紹介はそこそこに、地域の情報発信に注力しており、地元に根ざした会社であることを訴求したコンテンツが多いところである。 如実に現れているのはファーストビューに設置されている「今月の街トピック」である。この箇所は会社のコンバージョンに起因するコンテンツ（お勧めの物件情報など）又はお知らせが設置される事が多いが

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ33

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ32

          SNS風の構成が特徴的な採用サイトエイベックスの新卒者向け採用サイト。最大の特徴はデザイン、構成共にSNS風の質感に仕上げている事。Instagramのパロディ的なデザインとなっているが、TOPのみSNS風にしているという中途半端な作りではなく、下層も含めてSNSライクな使用感にするなど徹底されている。他社の採用サイトでは見られないアプローチのため印象に残りやすいサイトになっている。 エンタメ業界はユニークなサイトにする傾向？放送、出版、音楽などエンタメ業界の採用サイト

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ32

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ31

          特殊なデザインはPCとスマホをどう共存させているのか？「既存のルールに囚われない」「制約から解き放たれた考え方」といった固定概念への脱却がコンセプトとなるメディアサイト。デザインも手書きやコラージュ感のあるエッジの効いたテイストが特徴的で、かなり攻めた構成になっている。 WEBの場合はレスポンシブも考慮しないといけないため、PC、スマホで両立できるデザインが求められる。その場合ボックスレイアウトをベースとした保守的なデザインに収まる事も多い。今回のサイトのように特殊なデ

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ31

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ30

          PC、スマホでそれぞれに最適化された見せ方、UIが考慮されているサイト。ビジネス名刺管理ツール「Sansan」の活用法やセミナー情報を紹介するサイト。業務用ツールのためPCでの活用が主となるサービスではあるが、このサイト自体はスマホ向けの見え方もかなり考慮されたサイトになっている。 WEB、スマホで大きくUIや要素を変えている部分も特徴的。WEBデザインをしているとPC、スマホで両立させるために少し強引なレイアウトや設計をしてしまうこともあるため、UIや見せ方を変えてそ

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ30

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ29

          マガジンハウス怒涛のリニューアルラッシュ。ターザンも例外ではなかった。 フィットネス系を題材にした雑誌、ターザンのメディアサイト。出版元のマガジンハウスは今年に入って新しいメディアサイトの立ち上げリニューアルなどリーリスラッシュが続いており、どれも定型的なメディアサイトにはしないという意気込みを感じさせる仕上がりになっている。 今回はターザンのリニューアルも例外ではなく,大胆なレイアウト構成や独自性のあるコンテンツの提案がされており、個性を感じさせるメディアサイトになっ

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ29

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ28

          海外的なデザイン、レイアウトを上手く落とし込み、スマホでもダイナミックなレイアウトを実現。構成としてはプロダクト訴求の割合を強めたECサイト。日本サイトながらも海外のデザイントレンドを上手く落とし込みダイナミックな見せ方にしている。 購入層のメインデバイスであるモバイルも考慮した設計となっており、大人しいレイアウトになりがちなスマホにおいても、レイアウトを工夫してPC版と変わらないダイナミックな印象を担保している。 PC、スマホそれぞれでレイアウトを大きく変えたデザイン

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ28

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ27

          オウンドメディアとECの組み合わせで相乗効果を狙ったサイトABCマートから派生して靴だけではない、スポーツ系のアパレルも総合的に扱う業態、GRAND STAGEの公式サイト。特徴的なのはECサイトではあるがオウンドメディアやLPのような特設ページも展開。製品にストーリーを持たせる事で付加価値を付けて、ECへの購入に繋げるという構成となっている。 記事内では下部に固定で「記事内アイテムをチェック」という購入導線を設置。スクロール中は透過されるため、記事を読み込む邪魔になら

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ27

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ25

          多くの情報量をUIで格納。スッキリとした見映えでデザイン性も両立車が出来るまでの工程を解説する工場見学のサイト。オフ、オンラインの両方に対応している総合サイトとなっている。膨大な情報量を１ページで収めているのだが情報が多い事による雑多な印象は無く、逆にスッキリと洗練された印象すらも感じさせてるサイトになっている。各種UIを使用した情報整理により、デザイン性も担保されたサイトとなっている。 詳細情報は全てモーダルに格納、スマホ閲覧を考慮した情報設計。サイト全体では項目の一

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ25

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ24

          シンプルながらもワンアクセントの演出が効いたサイト掃除道具のプロダクトサイト。シンプルながらもワンアクセントが効いた演出で、淡々となり過ぎないようなフックも演出。PC、SPでデザインを絶妙に変えて、それぞれのデバイスに合わせた見せ方になっている。 PC、SPによるナビーゲーション周りの違い サイトの一番特徴的な箇所として、スクロールに連動して画面下の「５６５６」が転がる仕様。そのまま転がるだけではなく、画面下に設置した要素を潜り抜ける演出も印象的。サイト全体のシンプルな

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ24

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ23

          地味な商材でも高見えさせるLocomotiveのクリエイティブ力が発揮されたサイト 空調設備メーカーQualitairのコーポレートサイト。このサイトの特徴は見栄えが良いとは言い難い商材に対して、デザインの工夫や見せ方でカバーしているという点である。 仮にクライアントからデザインを依頼され、資料として下記の商材画像を見せられたら、私達はどんなデザインをするのだろうか。世界的な制作会社「Locomotive」はこうアプローチするという最良の事例が知れるサイトとなっている。

          ワタナベ/ウェブボーイ

          ボーイのサイト分析まとめ23

          ワタナベ/ウェブボーイ