XDを使ったwebデザイン模写の方法

こんにちは!ちづみ(@098ra0209)です。私は小学校教員から現在はフリーのwebデザイナーとして活動しています。

今回はwebデザインの独学方法として模写の具体的な方法を記していきます。

なぜ模写がいいのか

「綺麗だな」「見やすいな」と感じるデザインにはデザインの基礎がしっかり導入されているからです。

プロの方の作ったサイトを模写することで、デザイナーにとって大切な「観察力」を上げ、デザインの観察を通して多サイトの共通部分を見出し、より具体的な数値や特徴に落としこむことでそれをそのまま実務に生かすことができます。

まねして作ってその特徴をとらえていくことによって早く確実にwebデザインに必要な力がつきます。

 

模写におすすめのXDプラグイン

XDで模写するのに絶対に入れた方がいいプラグインがMimicです。

そのサイトに使われているフォント、カラー、画像情報を取得してXDに落としてくれます!これで余計な手間をかけずにじゃんじゃん模写ができますね!これは本当にすごい!

 

 

まず模写するサイト

ではどんなサイトを模写しようと考えた時に私はまずコーポレートサイトの模写をおすすめします。

理由は2つあって1つは私自身、お仕事で作るものはコーポレートサイトなどのスタンダードの形のものが多いからです。

もう1つはウェブデザインの基礎が身につきやすいからです。スタンダードの構造を理解しないと何も始まりません。レイアウトがシンプルで読みやすい形はコーポレートなので、基礎を定着する上でもまずコーポレートを模写しましょう。

具体的にはこんな感じのデザインのものです。

参考サイトのコーポレートの探し方はこちらからがいいです。

模写で意識すること

模写では以下のことを意識しましょう。

  • フォントの形式、いろ、字間、行間はどうか
  • 画像のサイズ、縦横比はどうか
  • ヘッダー、フッターなどの幅はいくつか
  • 2カラム、3カラムの時の各カラムの幅はどうか
  • コンテナ(コンテンツが入っている幅)はどのくらいか
  • 見出しの大きさ、フォントはどうか

これらを5つくらい模写してくるとだいたいわかってくるかと思います。

まずは見やすいサイト、綺麗なサイト、よく見るサイトの共通点を探すための模写をおすすめします!

では!

【デザイン勉強法・練習方法】名刺の作り方から学ぶデザインの作り方

2019.04.17