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

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

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

なぜ模写がいいのか

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

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

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

まず模写するサイト

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

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

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

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

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

模写で意識すること

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

５枚くらい模写してくるとこれらがだいたいわかってくるかと思います。

また、こちらの記事がとても模写で見るべき観点、ポイントを抑えています！webデザインの模写をするときは一読してから行うとかなりいい視点で模写できると思います！

どんなサイトの模写をすればいいのか

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

なんのサイトから模写したらいいかわからない方向けに、最初に取り組むべきおすすめのサイトをこちらで20こほどピックアップしてみました！

迷ったらぜひ参考にしてみてください！( ´ ▽ ` )

模写の手順

ここから具体的な模写の手順です！

インストール系はこちらがあれば大丈夫です！

それぞれを簡単に説明して行きます！

こちらに一連の流れを動画にしているのでこちらから同じようにやってみてください！

動画内にも出てきますが、おすすめのアートボードのサイズは1280pxなので、それに合わせてスクショもとります。

一枚はこのように透かすと作りやすいです。

↓テキストはサイトからコピペ、余白はクロームの検証機能を使って測れるといいです！

効率よく模写するには

個人的には全てとても丁寧にそっくり同じに模写していかなくても良いと思っていて、要素の繰り返し部分などはどんどん繰り返しと判断してコピペして行きましょう。

例えばこの部分などは↓

↓こんな感じですね！１つの塊を作ったらコピペして作っていっていいと思います！

見る観点としては、ブロック間の余白や各ブロックの文字量、画像などですね！

XDにはリピートグリッドがついているのでどんどん活用していくといいと思います！

また、フォントなどの情報はクロームの拡張機能Whats’fontを使うと楽です。フォントの種類、大きさなどすぐにみることができます。

XDの知識を学びたいなら

模写の手順はわかったけど、XDの具体的な手順がわからない、、

という方向けにnoteにてXDのチュートリアルを出しているので、ぜひご活用ください！

おかげさまでリリース２日で100人以上の方にご利用いただけました。

ちづみさん(@098ra0209)のnoteで早速Xdをちゃんと触ってみました！私にも出来た、凄い！

動画もとてもわかりやすく丁寧で、優良な教材でした。便利だなあこのツール。触った事ない方、是非おすすめです！！！ https://t.co/fpdP6Ayyjq pic.twitter.com/Mon5ndYPLS

— もなか.scss (@ruby443n) October 27, 2019

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

2019年4月17日