BOKENOTE

AboutBlog

大阪住み道産子リーマンのWEB備忘録的な日記的なふわっとしたメモブログです。
本当に個人的な備忘録なので何かを主張したいとかは無い。

Tag

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイトを模写してる

WEB備忘録

WEBデザインの上達方法にサイトを模写するのが効果的らしいから最近やってる。

模写の工程

  1. Full Page Screen Captureで目的のサイト全体をキャプチャー
  2. キャプチャーした画像を見ながらPhotoshopで完コピ
  3. コーディングに使うワイヤーフレームを作成
  4. 実際にコーディング

Full Page Screen Captureは、サイト全体を画像として保存できるChromeの拡張機能。WEB上にあるものはいつ消えたりするか分からないから画像として保存しておくようにしてる。

コーディングするときは、元のサイトのコードは一切見ない。調べながらやったほうが他の技術も学べて一石二鳥だと思うし、素敵なサイトに出会えたりする。

コーディングなんかは学べはすぐ身につくものだけど、デザインは簡単に身につくものじゃないからPhotoshopでサイトを模写する時は、余白の取り方とジャンプ率なんかをじっくりとよく見てる。

配色の知識とデザインのアイデアも圧倒的に足りてないんだけど、もっと根本的なところが疎かだから行間の間隔だったりボタンの余白だったり細かいところも測って全体のバランスをよく観察するようにしてる。最初は決まった比率でもあるのかなと考えてたけど全然そんなことはなかったし、目を肥えさせる他ないんだなと実感した。

まだ一週間かけて一つサイトを模写できれば良い方だけど、いつか余白の美しいミニマルなデザインがポンッとできるぐらいの技量を付けたい。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。