難航していたサイト模写(デザインカンプの巻)が、やっとできました!


この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いた記事です。記事の内容は、2015年3月19日に書かれたものです。
でも、デザイン模写に関しては今でも変わらず「めっちゃ勉強になるからホントおすすめ!」って思ってます。入社してからもやりました。


本物のサイトと私の模写

お手本にさせていただいたのは「HOTEL ANTEROOM KYOTO」さん。
私が作った偽物模写はこちらです。

難航していたのは、時間が取れなかったからってのもあるんですが、何より難しかったからです……;
ブラウザの画面とにらめっこしながら悪戦苦闘しました。
一見シンプルそうに見えるサイトでも、細部までしっかり作られてるんだなぁってことがよくわかりました。

まず第一に使われているフォントがわかりません!

タイトルひとつ作るのに色々調べて、wordmarkでインストール済みのフォントと見比べ、なさそうだったので今度は画像をWhat Font isに読ませて……
結局有料フォントだってことが発覚したため、ここは画像をそのまま挿入しておきました。
でも、こうやって調べたおかげでフォント周りの便利なサイトをふたつも見つけることができたワケです。これも勉強ですよね! ね!

もちろん、デザイン面でも「むむむ」と思うことが何度もありました。ナビゲーションメニュー上の二重線は、ただの黒線じゃなくてテクスチャが貼ってあります。
さらに、コンテンツを分けている1px線も、よく見るとどうやらただの単色線ではなくて、テクスチャが貼ってあるようなのです……!

でも細すぎてどんなテクスチャを貼ったのか全くわかりません(笑)
仕方ないので私も適当にそれっぽく見えるようにパターンを作って貼り付けましたが、見比べてみるとカナリ違ってますね。哀しい;

ただ、この作業を通して、自分で作ったパターンをテクスチャとして登録する方法を学びました。
斜線の背景も作れるようになりましたし、パターン登録したので使いまわせます(やってみたらすごく簡単だった)。
何も知らないから何しても勉強になって素晴らしいですね!

それから、各コンテンツの頭にくっついている横向きの三角や、フッター部分で使われている小さなアイコンの数々……がんばって真似して作りました。
イラストレーターでパス引きました。

小さすぎて元がどんな形なのかよくわからないまま作りましたが、同じくらいの大きさにしてみるとやっぱりちょっと違ってて目が丸くなります。(@@;
イラストレーターはまだまだ修行が必要そうです。
よく使いそうなアイコンを作っておけば、練習にもなりますし、いざという時に使えていいかも知れないですね。フリーの素材もたくさんありますが。

シンプルに見えるサイトのデザインひとつ作るのにも、まだまだ勉強しなくちゃいけないこと、惜しんではいけない手間がたくさんあるんですね。

今はスキルも知識もなくて、自分の能力の範囲内でしかデザインできない状態なのですが、人の作ったデザインを真似ると自分の能力以上のことが必要になって、すごく勉強になりました。

これからもどんどん模写していきたいと思います!

この記事を書いた人

ひしもち

京都の某制作会社で4年ほど勤務したのち、フリーランスとして活動することにしました。
現在の主なお仕事は、業務システムのUIデザインと、幼稚園・保育園さまのWebサイト制作です。
専業主夫+3人の子どもたちと暮らしています。ゲーム好きなインドア派ですが、ゆるゆる楽しむプレイスタイルです。