owned mediaウェブ制作に役立つコンテンツを発信中!

Sketchでテーブルのデザインを簡単かつスピーディーに作成する

最終更新日: Update!!
普段はSketchをメインにデザイン制作をしているのですが、今回はSketchでテーブルデザインを作成する方法についてまとめていきたいと思います。ウェブサイトのデザイン制作ではいろんな要素を作成する場面がありますが、この中でもテーブルを作成するのは少し面倒ですよね。そんな時にSketchのシンボル機能を使うことで、簡単かつ手早く、そしてデザイン変更にも柔軟に対応できるようになります。   まずは、テーブルのセルとなる要素を作成します。この時、セル内に入るテキスト量などを考慮してあらかじめサイズを決めておきます。 Sketchでテーブルのデザインをお手軽かつ簡単に作成してみる   次に作成したテーブルセルの要素をシンボルとして登録します。シンボルとして要素を扱うことで後から一括でスタイルを揃えることが可能になります。 Sketchでテーブルのデザインをお手軽かつ簡単に作成してみる   「cmd + D」で作成したシンボルを複製してテーブル状に配置していきます。 Sketchでテーブルのデザインをお手軽かつ簡単に作成してみる   セルにあたる各要素はシンボルとして登録しているので、セルの内容を変更する場合には個別でテキストを上書きすればOKです。 Sketchでテーブルのデザインをお手軽かつ簡単に作成してみる   セルに適用しているデザインやスタイルが変わった時も、登録しているシンボルに対して編集すれば、全てのセルが一括で更新されるので、デザイン修正が入った場合にも柔軟に対応することができます。 Sketchでテーブルのデザインをお手軽かつ簡単に作成してみる Sketchでテーブルのデザインをお手軽かつ簡単に作成してみる   このようにシンボルを使うことでいろんなテーブルのデザインが簡単に作成することができます。ということで、同じ方法で色々と他のデザインも作成してみました。 Sketchでテーブルのデザインをお手軽かつ簡単に作成してみる Sketchでテーブルのデザインをお手軽かつ簡単に作成してみる Sketchでテーブルのデザインをお手軽かつ簡単に作成してみる  
  いかがでしょうか、テーブルを作成するためのプラグインなどもあるようですが、単純なものや規模の小さいテーブルであればこのようにシンボルを使った作成方法が手軽かつ簡単なのでオススメです!
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram