雑誌POPEYEのWebサイトをトレースしました。
POPEYEのWebサイトは実は見たことがなかったのですが、POPEYEらしいカルチャー感がWebならではの表現でデザインされていてとても素敵だと思いました。
今回は「グリッドレイアウト」という点、「雑誌のWebサイト」という点に注目してトレースしていきました。
それから、トレースは基本的にAdobeXDを使用して行っていますが、今回は初めてFigmaを使用してトレースしてみました。FigmaはXDと似たプロトタイプツールで、機能や操作も似ています。ただ、Figmaは英語なのでそこに慣れることも必要だと思いました。
（トレースを中断している間にサイトが更新されてしまい古いサイトのトレースとなっています。一部スクショなどで対応してしています。。）
■構成
ヘッダー
↓
-------------グリッドコンテナ--------------
POPEYEのWebサイトは実は見たことがなかったのですが、POPEYEらしいカルチャー感がWebならではの表現でデザインされていてとても素敵だと思いました。
今回は「グリッドレイアウト」という点、「雑誌のWebサイト」という点に注目してトレースしていきました。
それから、トレースは基本的にAdobeXDを使用して行っていますが、今回は初めてFigmaを使用してトレースしてみました。FigmaはXDと似たプロトタイプツールで、機能や操作も似ています。ただ、Figmaは英語なのでそこに慣れることも必要だと思いました。
（トレースを中断している間にサイトが更新されてしまい古いサイトのトレースとなっています。一部スクショなどで対応してしています。。）
■構成
ヘッダー
↓
-------------グリッドコンテナ--------------
トップ
↓
ピックアップ記事、カレンダー
↓
記事サムネグリッド
↓
ニュースレター登録
↓
記事サムネグリッド
------------------------------------------------------
↓
フッター
まずレイアウトですが、大部分がグリッドレイアウトになっています。一見そう感じさせないのは、グリッドレイアウトでも画像によって何グリッドにもわたって使ったり、円形だったり、平行四辺形で使ったりと変則的だからかと思います。とても遊び心があって面白いです。サイトは毎月？更新されていて、コンテンツが変わるだけでなくレイアウトも変わったりしているようで可変なデザインとなっています。定期的に更新される雑誌のwebサイトならではかもしれません。
メインビューは動画になっていたのですが、綺麗な画質というわけでもない、ZOOMの動画や画像を入れてもおしゃれにみえるのがすごいと思いました。色や画像を変えてもPOPEYEのロゴがあるとお洒落に見えるのはこのロゴやブランド力のすごさでしょうか。何でもお洒落に見えてしまうのでは...と思ってしまうほどです。
上部のスライドする字幕テキストがメディア感が出て良い感じです。絵文字を入れることで、ポップさ、親しみやすさ、カルチャー感が出てます。少し中身を見てみると、ここのテキストはbタグで囲まれていました。bタグは太字にする装飾系のタグなのであまりHTMLで使用することはほとんどないかと思っていましたが、場合によっては使用するのかもしれません。
ファッション雑誌のWebサイトでは、「その雑誌らしさをwebで表現すること」、「更新頻度を高くし定期的に観に来たくなるようコンテンツを充実させること」、「その更新に対応できるよう可変なレイアウトであること」が重要な要素となると思いました。
・雑誌らしさ・・・文字や写真、イラストが段組などで敷き詰められていてコンテンツが充実している。特徴的なあしらいや、イラストを使用している。黒の視認性の高いテキスト。人の写真。連載物のコンテンツ。
↓
ピックアップ記事、カレンダー
↓
記事サムネグリッド
↓
ニュースレター登録
↓
記事サムネグリッド
------------------------------------------------------
↓
フッター
まずレイアウトですが、大部分がグリッドレイアウトになっています。一見そう感じさせないのは、グリッドレイアウトでも画像によって何グリッドにもわたって使ったり、円形だったり、平行四辺形で使ったりと変則的だからかと思います。とても遊び心があって面白いです。サイトは毎月？更新されていて、コンテンツが変わるだけでなくレイアウトも変わったりしているようで可変なデザインとなっています。定期的に更新される雑誌のwebサイトならではかもしれません。
メインビューは動画になっていたのですが、綺麗な画質というわけでもない、ZOOMの動画や画像を入れてもおしゃれにみえるのがすごいと思いました。色や画像を変えてもPOPEYEのロゴがあるとお洒落に見えるのはこのロゴやブランド力のすごさでしょうか。何でもお洒落に見えてしまうのでは...と思ってしまうほどです。
上部のスライドする字幕テキストがメディア感が出て良い感じです。絵文字を入れることで、ポップさ、親しみやすさ、カルチャー感が出てます。少し中身を見てみると、ここのテキストはbタグで囲まれていました。bタグは太字にする装飾系のタグなのであまりHTMLで使用することはほとんどないかと思っていましたが、場合によっては使用するのかもしれません。
ファッション雑誌のWebサイトでは、「その雑誌らしさをwebで表現すること」、「更新頻度を高くし定期的に観に来たくなるようコンテンツを充実させること」、「その更新に対応できるよう可変なレイアウトであること」が重要な要素となると思いました。
・雑誌らしさ・・・文字や写真、イラストが段組などで敷き詰められていてコンテンツが充実している。特徴的なあしらいや、イラストを使用している。黒の視認性の高いテキスト。人の写真。連載物のコンテンツ。
・定期的に観に来たくなるようなコンテンツ・・・更新頻度の高さ。情報の質と量。連載物。
フォントはDM Sansを主に使用しています。Googlefontsで使うことができます。癖が少なく使いやすさがありながら、どこか海外のチャットやメール？の雰囲気、少しチープなような感じがして、個人的にとても気に入りました。ゴシック系でもHelveticaと比べて丸みがある文字が多く（同じ丸みでも正円に近い丸み）、若干字幅が広かったりします。また、「i」や「j」は点の部分が円になっています。「g」も特徴的。数字や記号も良い雰囲気です。
DM Sans：abcdefghijklmnopqrstuvwxyz1234567890@;:!?><,._#$%&
Helvetica Neue：abcdefghijklmnopqrstuvwxyz1234567890@;:!?><,._#$%&
毎月POPEYEに合わせて更新というのは、とても大変そうだけど、色々な形で表現していて楽しそうです。
カラーについても毎月背景もロゴの色も違うカラーにしているようでした。
ぜひ実際のサイトもご覧ください。
フォントはDM Sansを主に使用しています。Googlefontsで使うことができます。癖が少なく使いやすさがありながら、どこか海外のチャットやメール？の雰囲気、少しチープなような感じがして、個人的にとても気に入りました。ゴシック系でもHelveticaと比べて丸みがある文字が多く（同じ丸みでも正円に近い丸み）、若干字幅が広かったりします。また、「i」や「j」は点の部分が円になっています。「g」も特徴的。数字や記号も良い雰囲気です。
DM Sans：abcdefghijklmnopqrstuvwxyz1234567890@;:!?><,._#$%&
Helvetica Neue：abcdefghijklmnopqrstuvwxyz1234567890@;:!?><,._#$%&
毎月POPEYEに合わせて更新というのは、とても大変そうだけど、色々な形で表現していて楽しそうです。
カラーについても毎月背景もロゴの色も違うカラーにしているようでした。
ぜひ実際のサイトもご覧ください。