見出し画像

【webデザインの学習】XDでwebサイトの模写をしてみる

こんにちは!ちづみ です!(ブログはこちら)(^_^)

以前このようなツイートをして、少し反響があったので、私がいつもXDでwebデザインの模写する時に行っている手順をnoteにまとめました😊


このnoteの内容をざっと確認したい時はこちらをみるのが早いです🚴‍♀️


ここでは模写の方法について早くスムーズにできる方法について解説していきます。模写はある程度は何枚も何枚も繰り返し作ってスキルアップするものなので、その準備はなるべくパパッとやりたいですもんね

あと、XDを初める方が実際に模写ができるレベルにまでなるチュートリアルを出していますので、よければご活用ください!



以下手順です!

まずグーグルクロームにWindow Resizerの拡張機能を入れます。

これはブラウザサイズ細かく調節できるプラグインです。

画像1

こちらの数値を私はいつも1280pxでやってます。

次にFull Page Screen Captureもインストールしましょう。📷


こちらで模写したいページの全体スクショを取りましょう。できたらpngで保存しましょう。次にXDのプラグインMimicを導入します。

インストールできたらそこに模写したいサイトのURLを入れていだければ画像、カラー情報などを簡単に取得することができます。


Mimicで出力したデータとスクリーンショットをXDに置いて、アートボードをスクショと同じ幅サイズにします。

画像4

スクリーンショットを複製して、アピアランスの透過率を20~30%にしてアートボードに合わせます。

画像5


fontとかはXDにないものはひとまずは似たようなfontを当て込むのでもいいと思います(有料だったりもあるので)でも最低限whats fontのクロームの拡張を使ってなんのフォントを使ってるかみておきましょう!

ここまでで準備はおけまる水産です!😊

こんな感じであとは上書きするように模写して行きます。(↓こんな感じに)

画像3


ちなみに、最初は「よっしゃ!オッシャオシャでモダンなサイトやるで😤」と意気込みがちですが(わいがそうでした)まずは基本の型のデザインのものをたくさん模写することをおすすめします。

コーポレートサイトとかですね。そこで丁寧にヘッダーの特徴とかボタンとか余白の特徴や共通点など洗い出すことがいいと思います。

また、模写の際に意識する点、どこをみたらいいのかの点はこちらのnoteが素晴らしくまとまっていたのでぜひ参考にしてみてください!


また、以下は個人的に取り組みやすく、基本のwebデザインのレイアウトだなと思うサイト達です。何を模写したらいいかわからないかたはぜひこちらからやってみてください!(あくまで個人練習用にとどめてくださいね)





また、何かご質問等ございましたらお気軽にtwitterの方までお問いあわせください!


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

225

ちづみ

海外を住み歩くノマドです。ゆるく日々あったことを書いてます。

web制作で稼ぐための超実践的練習ドリル

小学校の教員→webデザイナーの私が考える実践的なスキルアップの課題を提供しています。
7つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。