見出し画像

ワイヤーフレーム模写　１

やました かな

こんにちは◎
ご覧頂きありがとうございます。やましたです。

今回は人生で初めて、ワイヤーフレーム模写を行ってみました。
参考にさせて頂いたのは
HIBIYA　KADAN　WEDDING公式サイト様です。

とても素敵なデザインで今度は是非ワイヤーフレームだけでなく、デザイン模写もしてみたいと思いました。
こちらのトップページを模写したものがこちらです。


AdobeXDにて制作しました。

ワイヤーフレームの模写をしてみて自分なりに感じた工夫や解説などをさせて頂けたらと思います。

・メインビジュアルについて

ファーストビューが一面に画像が表示される訳ではなく大きなメインビジュアルとその下に小さく流れる動きがついたメインビジュアル達が出ています。
この画像たちは全て時間が経てば表示画像が順番に変わっていて大きく表示されていない画像が下で小さく流れていくデザインですごく目を引きます。
もしこの画像が画面幅いっぱいだと小さなデザインはそんなに引き立たなかったではないか、またキャッチフレーズも目につかなかったかもしれないと思います。
視線の誘導も
ロゴ→MV→コンセプトボタン→流れるサブビジュアルという風に自然なZ型にまとまっているのでユーザーが見て迷子になることがない設計だと感じました。
また、画像やキャッチフレーズ後ろの画像化した英語の筆記体などが重なり順になっていることで奥行きが増して見えます。

・CONCEPT

コンセプトのセクションではトップページとは左右反対にメイン画像を大きく１枚取り上げることでトップから繋がった視線誘導になりつつ、文字や画像以外の余白感などが程よく感じられました。
これで余白がガッツリすぎたりしてしまうと間延びしてしまったのではないかと思いました。
また文字の行間をゆったり取ることで読ませたいコンセプトが読みやすく伝わりやすいと感じました。
行間だけでなく、背景に大きな資格の図形を重ねて合わせることで色が加わりより文章も強調されているように感じました。

・INSTAGRAM

Instagram部分は背景などそのままの白で図形を組み合わせることも無く、スッキリ洗練されたデザインになっています。
Instagramに表示された画像のお花の解像度などをより際立たつシンプルさでした。
その中でも筆記体の重ね字などでニュアンスを出したりして、ただシンプルなだけではなくリッチな印象も与えているように感じました。

・NEWS

ニュースの部分も背景に図形を置いて色を重ねることで「そこはニュースのセクションです。」と見ているユーザーにまとまった印象を与えます。
記事などもきちんとバラけずに反復でまとまっていて、ジャンルごとに四角くアクセントを付けて表示しているので必要な情報を素早く手に入れることができるような仕組みになっていました。

・SERVICE

サービスのセクションに行くまでの少しの余白の軸の部分に細く線を入れることで改めてぶれずにきちんと視線を誘導しています。
また一番主張するイメージの上に透過した図形と文字を合わせることで文字だけが浮かず同調する仕組みになっています。
今回も図形と画像を組み合わせることで奥行きとリッチ感・リズムが付いて、画像自体のメッセージ効果を強調させているように感じます。

・PHOTOWEDDING

このセクションは割と優先度も高いくらい重要なサービスなのではないかと感じました。
今まで必ず風通し出来る余白があったのですがここのメインイメージは横幅がフルスクリーンになっています。
またフルスクリーンになっていることもあり、シンメトリー・アシンメトリーのリズムになっていたのが軸が出来てリセット出来たようにも感じてバラけてたように見えません。
ここもしっかり画像を見せたいのでメインの下に流れるようになっています。ただ、ファーストビューと違いイメージの力を重視するコンテンツなので下の画像自体のサイズもある程度しっかり取って主張しています。

・GARDENWEDDING/DISNEYWEDDING

この２つのコンテンツは上記のPHOTOWEDDINGに比べると主張が少なく優先順位は少し低く感じました。
ただ２つのコンテンツの間を同じ図形を背景に入れたりすることで一体感が出ているのと視線誘導を川の字のように円滑に出来ています。
離脱すること無くしっかりユーザーに見せたいイメージを強調して伝えています。

・PARTYコンシェルジュ

こちらも優先順位はサイト内でも低いように感じました。
その為必要な文章だけ大文字で読んで全部読まなくてもすぐにリンクに飛べれるようになっています。
ここでも図形やイメージなどを組み合わせることでシンプル過ぎずユーザーにチープな印象を与えません。

・CONTACT

CONTACTのセクションではオーバーレイしたイメージの上に文字を載せて、文字の視認性と可読性を高めています。

・FOOTER

必要最低限ですがきちんと整った列で秩序があり見やすくユーザーが必要な情報を受け取りやすいです。
トップページ全体がブライダルということもありイメージの力が大変強いのでFOOTERはこれくらいシンプルで風通しが良いデザインでないと最後まで読んでもユーザーは情報量が多すぎて疲れてしまうかもしれません。


サイト分析をしてみて

最初に書いたように初めてワイヤーフレームの模写をしたのですが、今回のサイトがWEDDINGで尚且お花を売りにしていたのでそうなるとやはりイメージの力がとても大事なサイトだと感じました。
ただいくら大事とは言え伝えたくてもただ画像をたくさん置くだけでは、ただただ画像が多くて見づらいサイトだったかもしれません。
ですが今回のサイトは左右対称と非対称・軸になる部分を上手く織り交ぜて見せているので無理なく安定感のある見え方になっています。
図形を重ねたり文字を重ねたり要素を重ねることで、より強調させて奥行きが全体的にどの部分でも感じることが出来ます。
これだけイメージを使ってもくどくならないのは要所要所の余白や風通りの良さからだと思います。

一見、自由にバラバラに思えるレイアウトもユーザーの視線誘導など計算された配置になっています。

上記のことを感じれました。
実際に自分がユーザーとして見た際に動きや奥行き・下品でないリッチ感などが本当にWEDDINGにふさわしいサイトだと思って見ておりました。
骨組みだけでもここまで考えられていたからこそデザインがついて更に素晴らしいものになったんだと思うと本当に自分自身ここまで考えて作成できるようになりたいと思いました。

なかなか卒業制作などと同時進行なこともあり模写一本で力を込めるのが難しい時期ですが継続は力なりなのでコツコツ続けて行こうと思っています。

ご覧頂きありがとうございました。

この記事が気に入ったらサポートをしてみませんか？