Photoshopなんて便利になったんだ！MUSEもね

最近めっきり寒くなりましたね、ご無沙汰してます！
capaでデザインを担当しております。初心者コーダーこと鈴鹿です。
つい先週11月27日に六本木ミッドタウン デザインHUBで行なわれました
JAGDA × Adobe セミナー グラフィックデザイナーのためのWeb制作
（Photoshop & Adobe Muse）
に行ってまいりました〜、AdobeとJAGDAが一緒になって定期的に無料のセミナーを行っているようで、無料なら〜と思って行ってみたのですが、便利な機能を知れて目からウロコな2時間でしたので、レポートしたいと思います。

PhotoshopCC から追加された、サイト作成に便利な機能

ガイドレイアウト

多種多用なディバイスが出回る昨今、レスポンシブデザインでの依頼が増加しております。私もレスポンシブと格闘の毎日ですw
そんなあなたに強い味方、「表示」→「新規ガイドレイアウトを作成」で自分の好みの分割数にできて便利です。

ライブラリ

よく使うコンテンツをライブラリに保管しておけば、クラウド上からいつでもどこでも取り出せるようになりました。InDesingを使っている人には馴染みのあるライブラリですが。こちらのライブラリは、Adobe Clud上にデータをアップするので、他ソフトでも共有できるのが最大の特徴です！
しかも、ライブラリから取り出したコンテンツはリンクされた状態を維持しているので、修正すれば、ライブラリ内のデータも自動で修正が反映されます。リンクを切りたい場合は「Alt」キーを押しながら配置すれば大丈夫。

ディバイスプレビュー

ディバイス側、iphone、ipadなど、に「AdobePreview」をインストールするだけで、photoshopで作成しているコンテンツがリアルタイムでディバイス側で確認できます。
デザインを起こしている段階から、ディバイスで確認できるのでコーディングしてみたら、ちょっとデザインイメージが違ったなんてことがなくなりますね?
しかも勝手に同期してくれるので、わずらわしい設定もしなくていいので便利です✨

画像アセット

「ファイル」 → 「生成」 → 「画像アセット」これを使うととっても便利。
画像アセットして、photoshopのレイヤー名に拡張子をつけると〜あら不思議！デスクトップに「-assets」というフォルダが勝手に生成され、なんとそのフォルダ内に先ほど拡張子をつけたレイヤーがその拡張子通りのデータで自動で書き出されているじゃありませんか❗️かっ画期的〜✨
書き出された後もオリジナルデータとリンクされているので、オリジナルデータを修正すると、新しいデータを自動でうわがいてくれます。レイヤーに拡張子をつけるだけで「-assets」フォルダにどんどんデータが出来ていきます〜❗️すごーいすごーい

Camera Raw

「フィルターメニュー」 →「 Camera Raw」 今まで、彩度、コントラスト、カラーミキサー、露光、明度、補正なんかをいちいち選択して、サブウィンドウ出てきて修正してってやってましたよね。アピアランス上でもやっぱりいちいち、選択しなくちゃいけなくて、あーめんどくさい！ってことがなくなります。
なぜなら、これ1つですべて出来ちゃうからです。Adobeさんも「これからの画像修正やレタッチなんかはこれを使ってください」と推奨しておりました?

書き出し形式　⌘ option shift w

「web用に保存」⌘ option shift s はもう古い！これからは「書き出し形式」⌘ option shift w を使うべし！こちらで書き出せば最新のjpg、png、svg形式で書き出してくれるそうですよお試しあれ〜❗️各レイヤー、レイヤーグループ、アートボードを選択して右クリックで「書き出し形式」すれば、個別に書き出すこともできます。

Adobe Extract

Extract はPSDデータから画像、テキスト、CSSを抽出しコピペで配置できるという優れもの！photoshopとDreamwaverにもいます✨
photoshopで作成したPSDデータをDreamWaverにあるExtractで開くと、色、距離、大きさの情報すべてがCSSで表現されるので、コピペで作成中のサイトに貼り付けることが出来ちゃいます！
しかも、、、Adobe CludのExtractでも同じことが出来るので、デザイナーがコーダーさんにデザインカンプを渡す際にとっても便利です。チームでの情報共有の場としても大変便利

MUSE もね

簡単に直感的にサイトを作れるアプリそれがMUSEです…と当初Adobeさんが何年か前に言っていましたが、実際当時は使い勝手が悪くほとんど使用しなかった私でしたが………。
知らない間に進化してました！（使えないなんて言ってゴメンなさい…?）
MUSE自身で絵を描いたり、画像加工したりはほとんどできないので、photoshop、イラストレーターで作成したコンテンツを使用して、コードを打たずにサイトが作れます。
なおかつ作成したサイトをクラウド上に置くことで、チームで閲覧したり、管理者権限を付与された人は修正もできます。機能もたくさん増えて今流行り!?のパララックスも出来ちゃいます?
ただ、MUSEで作成したデータは「.muse」という特殊な保存形式になるため、コードがいじれませんのであしからず。。。いちよHTMLでの書き出しも出来ますが、後でMUSEで編集しようとしてもできません。MUSEは「.muse」のファイルしか編集できませんのでお気をつけください。
それと、MUSEはあまり階層の深い大規模サイトには向かないそうです。軽めのサイトをサクサク作るのに向いてるみたいです〜。まだまだ色々あるのですが、ここでは書ききれないので、以下の参考サイトを覗いてみてください〜（いつも最後まるなげでゴメンなさい…?）

参考サイト

Adobe Live 2015 -Best of MAX アーカイブー
https://maxjp.creativecloud.adobeevents.com/

MUSEのサイト事例集
Site of the Day
http://muse.adobe.com/site-of-the-day/

その他の最新情報
Adobe Criative Station
https://blogs.adobe.com/creativestation/

ではでは、最後までご声調ありがとうございました?
またお会いしましょう〜

株式会社キャパでは、アプリの企画・開発についてご相談を承っています。
アプリを作りたいので、具体的な提案が欲しい。頭の中にあるアイデアを本当に実現できるのか知りたい。予算内に収まるのか？
などのお客様のご相談に、親身に応じます。
https://stg.capa.co.jp/CorporateSite_LP_B/