ajike switch

【Sketch初心者必見!#01】Sketchで変わる?WEB制作のワークフロー

こんにちは!
インターンでアシスタントディレクターの野村です。
今回は「Sketch」というツールがWEB制作のワークフローを変化させていくかもしれない…!というお話をしたいと思います。

sketch_01_01
webの世界はすごい勢いで日々様々なことが変化していますよね…。
その流れに適さないものは排除されていく世界…。
制作フローもそんな流れに適するために日々変化しています。

これまで、制作フローはクライアントに
1.ワイヤーフレームを確認
2.プロトタイプを作って遷移を確認
3.デザインラフを確認

…という流れをぐるぐる回るようなフローでした。

しかし、近年UIデザインをますます重視するようになり、このフローでは会議においてUIのデザインを伝えることが難しく、クライアントとのやりとりに手を焼く人々が増えてきました。
どのように伝えていけばいいのか、何か上手く伝える方法はないか、かなり悩むところですよね…。

・「このボタンを押すと、こんな感じでシュイ〜ンと動きます」
・「このサイトのこの時の動きをイメージとして想定しています」
…わかんないよ!(心の叫び)

しかも「実際のデザインは動かないから、イメージが湧きにくいので意見を言いにくい…」なんてことにも。
最悪、「動いたらイメージが変わった」なんてクライアントから膨大な量の戻しが、直前になって来るなんてこともあり得ますよね…。

また、デザインが完成した!となってもデザイナーさんとコーダーさんが別々の人の場合、
デザイナーの方は「デザインをどうコーダーさんに伝えようかな…」なんて迷ってしまうのではないでしょうか?

逆に、「ここはグラデーションで」「ここはホバーで10px動く」などメモがちょろっと書かれた画像を渡されて、頑張って意図を汲み取ろうとするが、わからない…なんてコーダーの方も多いのではないでしょうか?
手間も時間もかかりますし、せっかく手間も時間も割いたのに結局よくわからなかったなんてこともありえますよね。

スクリーンショット 2015-09-14 10.19.27

そんな中、案件の打ち合わせでアジケのデザイナーさんが使用していた「Sketch」というツールが、上記のフロー中に発生する問題を解決してくれる上に、UIデザインを制作する際にとーっても適していることを発見してしまいました!
どんなところが便利かって?知りたいですよね…!?

これから「Sketch」の魅力を、使ったことのない方にお伝えするブログを定期的に更新いたします!
こんな感じで↓Sketchの魅力をお伝えする予定です!

#02 — Sketchとは?
#03 — UIデザインならSketch!の理由
#04 — テンプレート活用で素早くUIデザイン
#05 — シンボル化でスピーディーに作成
#06 — Sketchでスマートな会議に
#07 — Sketchは書き出しを簡単に
#08 — Sketchで簡単指示書作成

次回は、「Sketch」の概要と、「adobe」のツールPhotoshopとの比較についてお伝えしようと思います。
お楽しみに!

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×