SketchとPhotoshopの違いを実際に使って確かめてみた

　海外ではPhotoshopよりも使いやすいとデザイナーの間で人気があるSketch。

　私は普段Photoshopメインでデザインしていますが、30日の無料おためしソフトを使ってSketchとの違いを比べてみることにしました。

1. Sketchは操作性が良い

　ビットマップデータで作成されるPhotoshopと違い、Sketchはベクターデータで作成されるため、サイズ変更を行っても画質が悪くなることはありません。

　加えてSketchは描画速度がとても早いです。四角や丸といった図形や、テキストの打ち込みがPhotoshopと比べ体感で倍ほども違います。

　Photoshopと違い、角丸資格の角丸の量を変えてもすぐに反映されるためストレスなく変更が加えられます。

2. シンボル機能

　シンボル機能がSketchで一番の魅力だと感じました。以前Adobe Flashを使っていたころよく使っていた機能だったので、とても嬉しいです。

　シンボル機能とは、例えばリンクボタンを作った時「ボタン内の文章は違うけどボタンのデザインは一緒」という時とても便利です。角丸の四角に赤色を塗って、ホームボタン、ギャラリーボタン、ニュースボタンを作ったとします。そんな時、この角丸の四角をシンボルにしておけば、もしボタンの色を赤から青に変えようと思った時、同時に全てのボタンの色が変わります。

　以下の図では、四角と丸がセットでシンボルになったものをコピーし、丸の位置を変えてみた結果、それが両方の画像に反映されていることを表しています。

図1　移動前

図2　移動後

3. スマートフォンのUIデザインに特化している

　Sketchにはデフォルトでスマートフォンのアイコンボタンが入っていたり、その他基本UIのパーツが準備されています。先ほどのシンボル機能と合わせて、複数の画面遷移がとても安易に作成することがきます。

　Photoshopのように写真に補正や細かい描画などは難しいかもしれませんが、シンプルな画面を素早く作るには、Sketchはとても有効なソフトかもしれません。Photoshopとの両刀使いになればデザイナーとしてレベルアップできそうです。ただし無料期間は30日です。

図3　デフォルト機能

WEBデザインのセンスを上げるためサイトのトレース作業を行なった際のメモ

WEBデザイナーとしてホームページ制作のセンスを上げるためサイトのトレース作業を行いました。その際のメモをまとめます。

1. 使用ソフトについて。

　イラストが多めのサイトだったためIllustratorとPhotoshopの両方を使って制作しました。制作開始時には「イラスト部分をIllustratorでやって、テキストをPhotoshopでやろう」と思っていましたが、いざ制作を始めたら逆がよかったことに気づきました。

　イラストをIllustratorで作ろうとした理由は「ベクトルデータとして作れるためサイズを変更しても解像度が悪くならない」というものでしたが「線のパスをとってから、またその中に色を塗るためパスをとる」という工程がPhotoshopと比べとても時間がかかったためやめました。Photoshopでは選択ツールなどを有効に使えばもっと早くできました。解像度の問題は、画像データを大きめに作ることで解消できました。

　テキストをPhotoshopでやろうとなぜ思ったのかは今ではわかりません。とても不便でした。この規模のホームページをトレースしたことがないので、レイヤーの多さを甘くみていたのでPhotoshopでもできると思ったのでしょう。テキストのレイヤーが多くなりすぎたため、どこにどのレイヤーがあるかを探すのに時間がかかりました。それに「文字組と言えばIllustrator」と多くのグラフィックデザイナーが言うだけあって、テキストの編集がIllustratorでは安易に行うことができます。

2. 文字について

　ゴシック調のフォントが多いサイトでした。HTML内で打ち込まれたであろう通常サイズのフォントは「ヒラギノ角ゴシック」でしたが、バナー内で多く使われている丸めのフォントは「源柔ゴシック」が近かったです。

　数字のフォントは正確なものが見つけられなかったので一部ペンツールで自作しました。

　漢字やカタカナがひらがなよりも少し大きい、という場面が一部見受けられました。

3. イラストについて

　配達員のイラストは顔が異なるだけでポーズなどは同じものが多かったです。このような場合はPhotoshopでこの画像を別ファイルで作り、スマートオブジェクトとして読み込む手法が有効だと思いました。

　線の太さは一定で、影などほとんど使わず単色で表現されていたため、比較的トレースしやすいイラストでした。

4. サイトの目的について

　このサイトのページには計6個もの「ネット一括見積もり依頼スタート（無料）」ボタンがありました。何か一つアピールポイントを語る度にこのボタンが出現しています。

　このことから、このページの目的はユーザに見積もりをとらせるよう誘導することだとわかります。

　見積もりボタンの色は当サイト内では数少ないグラデーションが使用されており、サイズも大きめで目立つ仕様になっています。加えてボタンが配置されている範囲の直前には黄色い矢印で、ユーザの目線を誘導させようともしています。

5. 備考

　制作時間：22時間