ワタナベ/ウェブボーイ

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

ワタナベ/ウェブボーイ

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

記事一覧

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

トレース先 トレースしたデザイン ビジュアルを使用しないデザインのアプローチ今回トレースしたサイトは画像やグラフィックなどのビジュアルを大きく使用しないサイトと…

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

トレース先 トレースしたデザイン 繊細に作られたグリッドの設計ブロッグ状に配置されたレイアウトのため、一見するとシンプルなグリッド構成で組まれているようにも見え…

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

トレース先 トレースしたデザイン 長体・平体を組み合わせたフォントの表現 サイト中で最も目を引くのがタイポグラフィの表現。自社製のオリジナルフォントが使用されて…

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

トレースしたサイト シンメトリー、アシンメトリーを上手く使ったグリッドを感じさせないレイアウトの配置今回のサイトは海外のWEBデザインを彷彿とさせる「グリッド感」…

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

スマホファーストから逆算して作られた構成とデザイン。シンプルながらもアクセントの効いたあしらい。女子美術大学の公式サイト。ターゲットは比較的若い年代となってお…

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

日本的な要素と力強いメッセージの訴求。UIを活用した情報整理。古民家再生事業を行う企業のコーポレートサイト。歴史的建築を利用した地域の魅力発信や文化の継承がコン…

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

物件よりも地域の情報発信に比重を置いた不動産サイト横浜市に拠点を構える不動産の仲介・管理を行う松栄建設のコーポレートサイト。最大の特徴は不動産系サイトのメイン…

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

SNS風の構成が特徴的な採用サイトエイベックスの新卒者向け採用サイト。最大の特徴はデザイン、構成共にSNS風の質感に仕上げている事。Instagramのパロディ的なデザイン…

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

特殊なデザインはPCとスマホをどう共存させているのか?「既存のルールに囚われない」「制約から解き放たれた考え方」といった固定概念への脱却がコンセプトとなるメディ…

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

PC、スマホでそれぞれに最適化された見せ方、UIが考慮されているサイト。ビジネス名刺管理ツール「Sansan」の活用法やセミナー情報を紹介するサイト。業務用ツールのため…

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

マガジンハウス怒涛のリニューアルラッシュ。ターザンも例外ではなかった。 フィットネス系を題材にした雑誌、ターザンのメディアサイト。出版元のマガジンハウスは今年…

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

海外的なデザイン、レイアウトを上手く落とし込み、スマホでもダイナミックなレイアウトを実現。構成としてはプロダクト訴求の割合を強めたECサイト。日本サイトながらも…

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

オウンドメディアとECの組み合わせで相乗効果を狙ったサイトABCマートから派生して靴だけではない、スポーツ系のアパレルも総合的に扱う業態、GRAND STAGEの公式サイト。…

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

多くの情報量をUIで格納。スッキリとした見映えでデザイン性も両立車が出来るまでの工程を解説する工場見学のサイト。オフ、オンラインの両方に対応している総合サイトと…

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

シンプルながらもワンアクセントの演出が効いたサイト掃除道具のプロダクトサイト。シンプルながらもワンアクセントが効いた演出で、淡々となり過ぎないようなフックも演…

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

地味な商材でも高見えさせるLocomotiveのクリエイティブ力が発揮されたサイト 空調設備メーカーQualitairのコーポレートサイト。このサイトの特徴は見栄えが良いとは言い…

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

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

トレース先

トレースしたデザイン

ビジュアルを使用しないデザインのアプローチ今回トレースしたサイトは画像やグラフィックなどのビジュアルを大きく使用しないサイトとなっている。ビジュアルのパワーに頼らず見栄えの良いサイトに仕上げており、主にフォントや図形のみとシンプルな構成ながら単調な印象にもなっていない。これらは下記の要因があるからだと考えられてる。

●円を使った構成でデザインにフックとメリハ

もっとみる
ボーイのサイトトレース03

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

トレース先

トレースしたデザイン

繊細に作られたグリッドの設計ブロッグ状に配置されたレイアウトのため、一見するとシンプルなグリッド構成で組まれているようにも見えるが、トレースをしてみるとかなり細かい分割で構成されている事が分かった。

繊細なグリッド設計で配置する事で、整合性が取れた設計になるため崩した箇所を入れても破綻しにくい見え方になる。そのため思い切ったアプローチやレイアウトも可能なデザ

もっとみる
ボーイのサイトトレース02

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

トレース先

トレースしたデザイン

長体・平体を組み合わせたフォントの表現

サイト中で最も目を引くのがタイポグラフィの表現。自社製のオリジナルフォントが使用されているが、通常サイズ以外に長体と平体が掛かったフォントが2種類用意されている。

縦横比率が異なるフォントを組み合わせる事で単調な見せ方にならずインパクトのある訴求をしている。また両方をフラットに使用すると比率の違う物同士でチグハグな印

もっとみる
ボーイのサイトトレース01

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

トレースしたサイト

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

ファ

もっとみる
ボーイのサイト分析まとめ35

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



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

もっとみる
ボーイのサイト分析まとめ34

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



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

もっとみる
ボーイのサイト分析まとめ33

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



物件よりも地域の情報発信に比重を置いた不動産サイト横浜市に拠点を構える不動産の仲介・管理を行う松栄建設のコーポレートサイト。最大の特徴は不動産系サイトのメインとなる物件紹介はそこそこに、地域の情報発信に注力しており、地元に根ざした会社であることを訴求したコンテンツが多いところである。

如実に現れているのはファーストビューに設置されている「今月の街トピック」である。この箇所は会社のコンバージョ

もっとみる
ボーイのサイト分析まとめ32

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



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

エンタ

もっとみる
ボーイのサイト分析まとめ31

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



特殊なデザインはPCとスマホをどう共存させているのか?「既存のルールに囚われない」「制約から解き放たれた考え方」といった固定概念への脱却がコンセプトとなるメディアサイト。デザインも手書きやコラージュ感のあるエッジの効いたテイストが特徴的で、かなり攻めた構成になっている。

WEBの場合はレスポンシブも考慮しないといけないため、PC、スマホで両立できるデザインが求められる。その場合ボックスレイア

もっとみる
ボーイのサイト分析まとめ30

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



PC、スマホでそれぞれに最適化された見せ方、UIが考慮されているサイト。ビジネス名刺管理ツール「Sansan」の活用法やセミナー情報を紹介するサイト。業務用ツールのためPCでの活用が主となるサービスではあるが、このサイト自体はスマホ向けの見え方もかなり考慮されたサイトになっている。

WEB、スマホで大きくUIや要素を変えている部分も特徴的。WEBデザインをしているとPC、スマホで両立させるた

もっとみる
ボーイのサイト分析まとめ29

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



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

今回はターザンのリニューアルも例外ではなく,大胆なレイアウト構成

もっとみる
ボーイのサイト分析まとめ28

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



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

もっとみる
ボーイのサイト分析まとめ27

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



オウンドメディアとECの組み合わせで相乗効果を狙ったサイトABCマートから派生して靴だけではない、スポーツ系のアパレルも総合的に扱う業態、GRAND STAGEの公式サイト。特徴的なのはECサイトではあるがオウンドメディアやLPのような特設ページも展開。製品にストーリーを持たせる事で付加価値を付けて、ECへの購入に繋げるという構成となっている。

記事内では下部に固定で「記事内アイテムをチェッ

もっとみる
ボーイのサイト分析まとめ25

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



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

もっとみる
ボーイのサイト分析まとめ24

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



シンプルながらもワンアクセントの演出が効いたサイト掃除道具のプロダクトサイト。シンプルながらもワンアクセントが効いた演出で、淡々となり過ぎないようなフックも演出。PC、SPでデザインを絶妙に変えて、それぞれのデバイスに合わせた見せ方になっている。

PC、SPによるナビーゲーション周りの違い
サイトの一番特徴的な箇所として、スクロールに連動して画面下の「5656」が転がる仕様。そのまま転がるだ

もっとみる
ボーイのサイト分析まとめ23

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



地味な商材でも高見えさせるLocomotiveのクリエイティブ力が発揮されたサイト
空調設備メーカーQualitairのコーポレートサイト。このサイトの特徴は見栄えが良いとは言い難い商材に対して、デザインの工夫や見せ方でカバーしているという点である。

仮にクライアントからデザインを依頼され、資料として下記の商材画像を見せられたら、私達はどんなデザインをするのだろうか。世界的な制作会社「Loc

もっとみる