webデザイン上達の近道!模写コーディングをしてみよう!

HTML/CSSの基本はわかったけど上手くサイトがつくれない!

模写コーディングって聞いたことあるけどどうやっていいのかわからない

という疑問を解消するため、簡単で効果的な模写コーディングのやり方とポイントについて解説していきたいと思います

 

1 模写コーディングとは

 

模写コーディングというのは、webサイトの見た目と動きを真似して、コーディングをすることです。

スポーツ、芸術などジャンルを問わず、上手い人を真似することは自分のスキルアップに重要です

しかし、ただ漠然と真似をするだけではあまり効果がないので、おさえておきたいポイントを順番に見ていきましょう。

 

2 模写するサイトを決めよう

 

基本的には何でも大丈夫ですが、画像ばかりのサイトは模写してても得るものがあまりないのでそういったサイトはできる限り避けて、それ以外で自分が、かっこいい!かわいい!と思うサイトを選びましょう

以下にギャラリーサイトのリンクを貼っておきますので、特別これを模写したい!というサイトが無ければそこから選びましょう!

 

3 模写をはじめる前に

 

さっそく模写をはじめる前に、いくつかやっておくことがあります。

webサイトの考察をしよう

 

デザインを直感ではなく論理的に理解することで、

このサイトのターゲット層は○○だから配色とフォントはこうしよう!レイアウトはこうしよう!

といったぐあいに、すぐに構想を立てることができます。

考察といっても、レポート用紙何枚にまとめなさい!なんてものではなく、

  • 何のサイトか
  • ターゲットのユーザー層は何か
  • 配色やフォントをこのようにした理由は何か

以上のポイントを簡単にまとめれば大丈夫です。

模写をするときじゃ無くても、いいデザインだな!と思ったらこのポイントを考察する癖をつけましょう

 

骨組みをつくろう

 



大体の要素の位置やバランスを紙に書き出していきましょう。

こういった設計図のことをワイヤーフレームといいます。模写する際は紙とペンで十分ですが、実際の現場では他人と共有する必要が出てきますので無料のオンラインツールを使って作成しても良いかと思います。

私はCaccoをよく使っています。他にもいくつかありますので、自分にあうツールを使うのがいいかと思います!

Cacoo  ・・・  無料で使える日本語サイト

moqups  ・・・  無料サイトですが英語です。

 

 

自分ルールをつくる

検証ツールを使ってコードを丸写ししても意味が無いので、自分ルールをつくりましょう、私が模写するときに課していたルールは

 

  • つくり方のわからないものは、諦めてすぐに答えを見るもしくは検索する
  • フォント、色、要素の幅などはツールを使って調べる
  • デザインに大きく関わる部分以外では、写真を適当な色のボックスに置き換える

 

です!

知らないものは、考えるだけ時間の無駄ですので

よし、引き出しが増えるぞ!

と思ってすぐに調べるなり答えを見る(検証ツールを使う)なりしましょう。

フォントや色の調べ方などは以下にまとめましたのでご覧ください!

記事を見に行く

 

4 いざ実践!webサイトを模写をしてみよう

 

準備が整いましたのでさっそくはじめてみましょう!

作成したフレームワークを見ながら、webサイトを模写していきましょう!

私は、適当に背景色をつけて、先に要素の幅や位置を確認しながらつくっていくことが多いです。うっかりインライン要素に幅の指定などをしてしまうことを未然に防ぐことができますので!

 

このあたりは好き好きだと思うので自分の思うがまま作るのがいいかと思います!

 

5 最後に

 

完成したものを自分でカスタマイズしてみましょう

フォントや色、メニューの配置などを自分流でアレンジしてみて、元のデザインと見比べてみてください。

もちろん元のデザインの方が良かったということもありますが、なぜもとのデザインのほうがいいのか?ということを考えるきっかけになります。

そうやって挑戦することで

なぜこのサイトは良いデザインなのかということが見えてくるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です