デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント｜Tomoyuki Arasuna

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

[yarumato]

“1.リンク要素の共通ルール　2. UI要素の王道サイズ・形　3. 薄い色は何種類か　4. コンテンツの横幅やグリッド　5. 写真や図の比率　6. レスポンシブ時の変化　7. 配色ルールの適用方法　8. 読みやすい文字量”

[tockri]

デザイナーじゃないけど海外のデザイナーズブランドとか美しいサイトの模写を以前やった。マージンとか要素のサイズのバランスとか、学びが多かった。

[fukurow57]

良いまとめ。デザインの模写や完コピは1px単位の感覚が磨けて確実に身に付くので良い。／海外サイトの模写は「言語の違い」と言う特有の癖に気を付ける。そのまま模写しても残念サイトになるのが日本語の辛いところ。

[Nyoho]

どういうところに注目しながら学ぶかということが書かれていて素晴らしい。

[tanority]

面白そう

[homarenta]

あとで読む

[yushirusu]

“スクリーン”

[otihateten3510]

良い記事だね

[nacika_inscatolare]

同じ考え方です