098raXDを使ったwebデザイン模写の方法ツイートシェアはてブLINEPocketこんにちは!ちづみ(@098ra0209)です。私は小学校教員から現在はフリーのwebデザイナーとして活動しています。今回はwebデザインの独学方法として、サイト模写の具体的な方法を記していきます。模写がいいのか「綺麗だな」「見やすいな」と感じるデザインにはデザインの基礎がしっかり導入されているからです。プロの方の作ったサイトを模写することで、デザイナーにとって大切な「観察力」を上げ、デザインの観察を通して多サイトの共通部分を見出し、より具体的な数値や特徴に落としこむことでそれをそのまま実務に生かすことができます。まねして作ってその特徴をとらえていくことによって早く確実にwebデザインに必要な力がつきます。模写するサイトではどんなサイトを模写しようと考えた時に私はまずコーポレートサイトの模写をおすすめします。理由は2つあって1つは私自身、お仕事で作るものはコーポレートサイトなどのスタンダードの形のものが多いからです。1つはウェブデザインの基礎が身につきやすいからです。スタンダードの構造を理解しないと何も始まりません。レイアウトがシンプルで読みやすい形はコーポレートなので、基礎を定着する上でもまずコーポレートを模写しましょう。具体的にはこんな感じのデザインのものです。参考サイトのコーポレートの探し方はこちらからがいいです。模写で意識すること模写では以下のことを意識しましょう。フォントの形式、いろ、字間、行間はどうか画像のサイズ、縦横比はどうかヘッダー、フッターなどの幅はいくつか2カラム、3カラムの時の各カラムの幅はどうかコンテナ(コンテンツが入っている幅)はどのくらいか見出しの大きさ、フォントはどうか5枚くらい模写してくるとこれらがだいたいわかってくるかと思います。Arasun...https://note.mu/arasunatomoyuki/n/nbe9189dfb926webやアプリのUIデザイン上達のコツとして、模写(コピー)がよく取り上げられます。Resizerウィンドウサイズを変更できるプラグインです。作成するアートボードと同じブラウザサイズにする目的です。Captureウェブサイト全体のスクリーンショット(画像)を撮ってくれます。2019こちらに一連の流れを動画にしているのでこちらから同じようにやってみてください!動画内にも出てきますが、おすすめのアートボードのサイズは1280pxなので、それに合わせてスクショもとります。一枚はこのように透かすと作りやすいです。↓テキストはサイトからコピペ、余白はクロームの検証機能を使って測れるといいです!効率よく模写するには個人的には全てとても丁寧にそっくり同じに模写していかなくても良いと思っていて、要素の繰り返し部分などはどんどん繰り返しと判断してコピペして行きましょう。繰り返しエレメントを作成する方法を説明します。フォントなどの情報はクロームの拡張機能Whats’fontを使うと楽です。フォントの種類、大きさなどすぐにみることができます。!(ブログはこちら)現在フリーランスとしてサイト制作を請け負ったり、制作会社からの依頼でwebデザインをしています。今回はXDでPC用のwebデザインを作るチュートリアルを作りました。・XDは操作がシンプルなので、Adobe入門としても入...模写の手順はわかったけど、XDの具体的な手順がわからない、、という方向けにnoteにてXDのチュートリアルを出しているので、ぜひご活用ください!おかげさまでリリース2日で100人以上の方にご利用いただけました。ちづみさん(@098ra0209)のnoteで早速Xdをちゃんと触ってみました!私にも出来た、凄い!動画もとてもわかりやすく丁寧で、優良な教材でした。便利だなあこのツール。作り方から学ぶデザインの作り方2019年4月17日サイト制作デザインツイートシェアはてブLINEPocketfeedlyWordPressデザインレシピ集のレビュー!初心者から開発者までおすすめの5.x対応本です!野外で気軽に楽しめるレクリエーション3選RECOMMENDこちらの記事も人気です。@098ra0209会社員→小学校の先生→フリーランス国内外を旅しながらホームページ屋をやっている人です。現在は日本各地や東南アジアを転々としながら生活しています。ノマドの働き方や、フリーランスのあれこれについて発信しています。