Sketch触って色々やってみようの巻レポ(マニュアル付き)|ふにろぐふにろぐSketch触って色々やってみようの巻レポ(マニュアル付き)Publish2013/05/15(水)ツイート昨日うちの事務所で「Sketch触って色々やってみようの巻」と題してSketch.appの勉強会をしてみました。15時くらいからまったりしつつ実際にアプリをさわって、「こんな事ができた」「こういうときどうしたらいいですかね?」というような感じでやったのですが、やはり色々な意見や発見などがあり非常に有意義でした。簡易マニュアルくらいにまとめてみようとおもいます。Sketch.appについては他のブログなんかで概要説明されてるので割愛します。copies強制終了しても元に戻る。CSSの書き出し整列まとめグリッドSketchではガイドを引いたりルーラーを引いたりするのと同じようにグリッドでベースを作ることができます。一つ一つのブロックサイズから決めていけるのでグリッドデザインが作りやすくなっています。Gridで表示できます。初期設定でSquareになっているのでLayoutに変更します。Gridsettingsでlayoutに変更しましょう。アートボードメニューからアイコンをクリックするとアートボードモードになります。Sketchではアートボードとエクスポートは普段の作業領域と違ったそれぞれのモードになります。最初ちょっとこの感覚分かりにくいですがなれたら今がどのモードかは見たらすぐ分かるようになります。これでアートボードモードになってます。アイコンの様子でわかりますね。ここから自分の指定したサイズでアートボードを作ります。Fwでいうところのキャンバスみたいな感じに近いかと思います。アートボードを作成して名前をつける+をクリックするとアートボードが保存される保存したアートボードはクリックするとどんどん複製できるアートボードは自分でよく使うサイズを登録したり複製したりがとっても簡単です。クリックだけでどんどんアートボードが増えていくのはやってみると結構気持ちがいいです。あと、細かいところですがオブジェクトをアートボード間で移動させた場合には、レイヤーはアートボードに格納されます。アートボード毎でのオブジェクト管理が自動的に行われるのはすごく便利です。yokoにあったオブジェクトが...yoko2に移動しています!テンプレートSketchのテンプレート機能はかなり強力です。自分で作ったテンプレートから開いたり、元からあるiOS用なんかのテンプレを使ったりできます。Templateで開きます。Templateで保存します。ここで注意が必要なのは保存したテンプレートは当然ですがインストールしたマシンのみで適用されます。違う環境で作業を行うときなどに「テンプレートがない!」っててんぱらないようにDropboxなんかにテンプレート用の元ファイルを保存しておけば使い回しが非常に便利になります。ツールバーSkwtchのデフォルトのツールバーは実は隠れているアイテムがあったりして全部が見えているわけではありません。表示をカスタムする事で自分好みの環境を設定することができるので、よく使うものとかを分かりやすい配置で対応するといいかと思います。ちなみに勉強会の時はみんながMacbookだったのですが、トラックパッドだと横に矢印がついてる系は深いクリックしないと反応しません。ここには注意が必要かと。書き出しSketchの強力な機能にファイルの書き出しがあります。試用版の時はPDFのみにしか書き出せませんが、購入後はExportから6種類に書き出せます。svgでの書き出しがイラレと互換性があり、ベクターファイルへの互換性があります。知られているように@2xでの書き出しも付いているので、Retina対応の時とかには重宝すると思います。Fwを使っていた人の場合はスライスの設定がめちゃ重要って思うと思いますが、Sketchでもエクスポートモード時にスライスを設定できます。名前の管理ももちろんできますし、Fwにはない設定範囲の選択項目などより柔軟に書き出しが行えます。エクスポートモードに変更すると書き出し用のレイヤーが表示される。pixelsにチェックを入れると書き出しレイヤーの中のオブジェクトサイズを自動で検出してくれて便利。書き出しはこの6種類。追記:画像の書き出し時にFwのように一気に全てのレイヤーを書き出すこともできます。それぞれのレイヤーに対して設定ができるのでFwのスライス管理とかなり似た感じになっています。書き出したときのファイルサイズは同条件のpngで比べて見たところ1.2倍ほどSketchの方が重たかったです。jpgとか他のサイズについては未検証です。作業時にルーラーを表示して作業効率アップしたいっていう人も多いと思いますが、もちろんできます。ワンクリックで戻せない。これは次回のバージョンで改善されるって英語サイトに書いてあるよって参加者の一人が見つけてくれたので、バージョンアップに期待しましょう。Rulerでルーラーを表示する。リンクオブジェクト要素のスタイルはリンク機能でまとめて管理することができます。配置してある複数個のボタンを一回の作業で全てを一気に変更するなんていう事ができます。プリセットでリンクの設定自体を変更なんかができなかったりするので、挙動は実際にさわって確認してもらうのがいいかと思います。口で説明するのは難しいですが、実際にやってみると腑に落ちると思います。オブジェクトを選択し、+をクリックするとリンクに追加される。他のオブジェクトをリンクさせる場合は、オブジェクトを選択して登録したリンクの部分をクリックすると外側に枠が付いてリンクしたことが分かります。リンクされている要素の色を変更するとリンクしたオブジェクトの色が一気に変更になる。自分で作ったスタイルをプリセットとして保存、登録しておくことができます。使うデザインのスタイルをワンクリックでオブジェクトに適用させることができるので、かなり便利ですね。文字色だけとかであればプリセットよりもカラー設定の方がいいかもしれません。その辺は個人の好みに分かれる部分だと思います。スタイルまとめての場合は、StlyePresetsに保存する。画面の左下にある方の+を押すと登録される。色のみの登録の場合はカラーパレットに登録する。カラーパレットは画面右側でオブジェクト選択時に出てくるのでその時に+を押すと登録される。マスク埋め込んだ画像にマスクをかけるっていうのも、もちろんできますよ。Mask」からマスクをかけることができます。ここで注意が必要なのはマスクがかかる順番です。マスク設定のあるレイヤーの上にあるレイヤーにマスクが適用されます。それはいいんですが、一つ上だけじゃなくて全部にかかってきます。マスクかけてるレイヤーとマスクかけたいレイヤーのみを選択して「Ctl+G」でグループ化すればその上のレイヤーはマスク対象外になります。マスクをかける要素と画像を用意します。Mask」きれいにマスクがかかりました。かかったマスク内の画像はマスクを解除しない状態で拡大縮小が行えるので非常に便利です。ちなみにレイヤーのフォルダ管理はグループで管理する感じになります。グループ化したらフォルダアイコンっぽいのでまとまるのでそこをリネームして分かりやすいように管理します。イメージでいうとiPhoneのアプリをドラッグしてアプリに乗っけたらフォルダができるあんな感じです。ガイドルーラーだけじゃなくてもちろんガイドも引けます。ガイドの位置変更がルーラー上にあるかぶっている部分からじゃないと無理というのが少しいけてません。Fwのように数値でガイドの位置を指定することもできません。自分でドラッグするのみです。ここはちょっと本当にいけてないので、次に改善して欲しい点ではあります。ルーラー上でした移動できない...。ガイド作成はルーラー上でダブルクリックです。カーニングオブジェクト間の距離はopt押しながら選択することで数値が表示されます。数値で分かるので微調整がしやすくて確認が容易なのは嬉しいポイントです。キャンバスサイズSketchのキャンバスはspaceキーを押しながらだったり、マジックマウスの上下の動きなんかでどんどん伸びていきます。キャンバスサイズに限度がないらしいので大きなキャンバスで思いっきりデザインができますね。単純にアイコンとかのファイルの管理なんかも一つのファイルで済んだりするので、かなり便利じゃないでしょうか。後は気にするのはファイルサイズくらいですかね。指定したオブジェクトを指定した個数円にそう形で複製します。これも試しにやってみるとすごく爽快です。実用的考えるとそういうのってどうかなと思いますが、例えばPathのクリックした後に出てくる円のようなデザインはこれで一瞬でできますね。他にも使い道は自分のアイデア次第でなんとでもなりそうかなと思います。copiesをクリック何個コピーするのかを決める6個やったらこんな感じになった強制終了しても元に戻る。Sketchはいきなり落ちても大丈夫です。強制終了させても復帰後の画面ではストップする前の作業分のデータからはじまります。copies」でどれだけの処理できるかなと試しまして、9999個分複製するっていうドSな指示出したらさすがに止まりました。強制終了させてもっかい起動させると9999回複製する前の状態で起動しました。落ちても大丈夫っていうのは、作業をする側にはすごく便利かなと思います。CSS書き出しSketchでは6種類の書き出しが便利って書きましたが、最新版のFwにも実装されてたCSSの書き出しも非常に便利だと思います。書き出したい要素のレイヤー上で右クリックするとCSSをコピーできます。書き出されたCSSはベンダープレフィックスもついてるし、コメント付きだったりもするので運用するときにも便利そうですね。生成されたCSSはこんな感じ。コメントやベンダープレフィックスもついて優しい感じ。整列オブジェクトの整列もある程度いい感じに対応してくれています。ツールバー上のやつである程度はできるんですが、オブジェクトを等間隔に配置したい場合は少し手間が必要で「GridTool」で指定してあげる必要があります。整列するアイコンは上の方にある。丸で囲んである4つの□のアイコンがGridTool。GridToolで等間隔の整列は指定できる。まとめといった感じで、かなりよくできているなーというのが正直な感想です。実際とある案件から使っていますが、今のところ何の問題もなく運用できています。画像の切り抜きとか色補正とかはできないので、そういう部分はSketchと同じようなタイミングで安くなってたPixelmatorなんかで対応するのがいいのではないかなと思います。それぞれが動作軽いのでAdobe系一個立ち上げとくよりかは2つ同時起動の方が早いかもっていう実感です。作業している内容にもよりますけど。参加してくださった皆さん(僕も含め)もある程度集中してさわったら一日あればある程度使いこなせるようになっている感じでした。難しいソフトではありませんので,動作は軽いですし色々と今風に便利なのでまず使ってみるといいかなと思います。参考リンクSketch.appのメニューを日本語に翻訳意訳してみましたよ。Swatchesを登録しといたらモックアップ作りが捗るかもと思って作ったのでついでに公開しておきます。>Sketch触って色々やってみようの巻レポ(マニュアル付き)記事の著者:ふにすでぐち1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期で更新しています。2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。サイトの運用や活用にお困りの方はお気軽にご相談ください。お問い合わせはこちらLINEでWebに関する質問にお答えしています。ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。ふにろぐとは?ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。その他には僕自身の考え方なども書いています。このブログについてふにす株式会社ふにす株式会社は大阪の高槻にある「Webを起点に会社の成長を応援するパートナー」をモットーに、Webにまつわるいろいろな問題を解決する、サポートをする会社です。ホームページでお問い合わせを増やしたい、もっとたくさんの人に見てもらいたいなど、ホームページ/Webサイトを活用したい方向けの活動を行っています。ホームページの作成や、外部パートナーとしての運用サポートなど、幅広くWebにまつわる諸々のことをおこなっております。制作の実績/成功実績ふにすとは?(会社概要)ホームページの運用お得情報ホームページ/Webサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。Webサイトの運用に関する情報お問い合わせホームページを成功させたいとお考えの方はお気軽にご相談ください。ご相談は、下記の中からお好きなものを選んでいただければ大丈夫です。LINE@でも相談を受け付けています。QRコードから友達登録を行って、メッセージを送ってください。2020-022020-012019-122019-112019-102019-092019-082019-072019-062019-052019-042019-032019-022019-012018-122018-112018-102018-092018-082018-072018-062018-052018-042018-032018-022018-012017-122017-112017-102017-092017-082017-072017-062017-052017-042017-032017-022017-012016-122016-112016-102016-092016-082016-072016-062016-052016-042016-032016-022016-012015-122015-112015-102015-092015-082015-072015-062015-052015-042015-032015-022015-012014-122014-112014-102014-092014-082014-072014-062014-052014-042014-032014-022014-012013-122013-112013-102013-092013-082013-072013-062013-052013-042013-032013-022013-012012-122012-112012-102012-092012-082012-072012-062012-052012-042012-022012-012011-122011-112011-102011-092011-082011-072011-062011-052011-042011-032011-022011-01ホームページ/Webサイトの運用サポートに関するご案内ホームページで成果が上がらない、公開したホームページをどう更新していいのかわからないといったふわっとした質問から、アクセスを増やしたい、検索順位を上げたいなど具体的な希望がある場合でも、親切丁寧に相談にのります。方の場合でも、メールやチャットなどを活用してオンラインで相談することも可能ですし、交通費だけだしていただければお伺いして相談をお聞きすることもしています。「ホームページのことは誰に相談していいかわからない」など、ホームページ/Webサイトの運用にお困りの場合は、お気軽にご連絡ください。