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