サイト模写でデザイン力を磨く

デザイン力UPのため、サイト模写を始めました。


この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いた記事です。記事の内容は、2015年3月15日に書かれたものです。


初めてなので、なるべくシンプルめでカッコイイサイトを……と、思って選んだのは、HOTEL ANTEROOM KYOTOというホテルのトップページです。

まずは、サイトのワイヤーフレーム化をしてみました。

デザイン模写 ワイヤーフレーム

これだけでもかなり勉強になります!

どういう人が見ると仮定してサイトが作られているのか。
そのために各要素をどんな順番で、どのくらいの面積をとって配置するのか。
デザイン面でも、余白はどのくらい取っているのか、画面をどう分割しているかなどなど。

たとえば、SNS系のリンクと一緒に、表示言語の切り替えがページの右上に配置されています。
京都にあるホテルのサイトなので、海外からの観光客がターゲットに入ってるんだなー、ということが分かります。
表示できる言語も、英語だけじゃなくて、中国語が用意されています。京都って中国からの観光客もカナリ多いですからね!

それから、宿泊予約のフォームはコンテンツの一番上に配置されていますし、予約のときに何か確認したいことがあったらすぐ連絡できるように、電話番号も一緒に大きく書かれています。

デザインとしては、(このキャプチャだけでは分かりにくいですが)余白をしっかり取って、各コンテンツを1pxのラインで区切ってあります。スッキリとしていてオシャレな感じ。
スライドショーで見られるホテルの雰囲気とも合うようにしてあるんだろうなーと思います。
あとは、コンテンツを1:3で区切って配置したり、2:2で並べて配置したりしています。こういうのも、コンテンツの優先度やページ全体のメリハリに関係してくるんでしょうね。

Webデザイナーの先輩たちが、「サイトのデザインを勉強するにはサイト模写をすべし!」と言うのも、納得です。

早く自分でサイトを作りたい! 自分の作品を残したい! って、逸る気持ちもありますが、先輩の作品を真似て学ぶことがたくさんありますね。焦りを抑えて、まずはこのサイトの模写をしっかりやろうと思います。

次はデザインカンプに挑戦です!

この記事を書いた人

ひしもち

京都の某Web制作会社で4年弱勤務したのち、退職して個人事業主となりました。
現在の主なお仕事は、WordPressを利用したWebサイトの制作です。
業務システムのUIデザインをしていた経験もあり。

専業主夫+3人の子どもたちと暮らしています。ゲーム好きなインドア派ですが、ゆるゆる楽しむプレイスタイルです。