セミナーフォローアップ

2018年3月24日開催のCSS Nite in SAITAMA, Vol.1 powered by 7Fで『The right tool for the job 適材適所で使い分ける正しいツールの使用法』セッションを担当した鷹野です。ご参加ありがとうございました！

最終更新日： 2018年3月29日 10:34 pm

ダウンロード

補足

XDでのビューポートの設定

長尺のアートボードをプレビューする場合、「ビューポート」の設定が必要です（デフォルトは「なし」）。

  1. 画面左上の▶をクリックすると、アートボード全体がプレビューされます（正確にはデスクトッププレビュー）。

  2. アートボード左上のアートボード名をクリック

  3. ［プロパティ］パネルで［スクロール］を「垂直方向」に変更

  4. ［ビューポートの高さ］を設定（アートボード左側に表示される青いツマミをドラッグすることも可能）

  5. 画面左上の▶をクリックすると、ビューポートに設定した高さでプレビューされます。

Zapfino

「ザップフィーノ」と読んでしまいましたが、「ツァッフィーノ」です。

Muse

懇親会で「Muse、どうすかね？」と聞かれ、「IllustratorやPhotoshopのデータ資産があり、そのまま貼り付けていく感じのLP制作ならアリ。レスポンシブ対応もできるし」とお答えしたのですが、開発終了になってしまいました…

参照リンク

Excel方眼紙

Photoshop

XD

Illustrator

その他

質問とその回答

Illustratorのあのスクリプトは外部のプラグインですか？　四角形分けるやつ

はい。Gorolib Designさん謹製のものです（有料）。

Illustratorのスクリプトは、いま、すごく熱くなっているので、また紹介できる機会があればと思います。

XDだけで画面設計、デザイン、アセット（画像書き出し）はできますか？

アセット（画像書き出し）がもう一息です。

もっとこちらのセクションに時間を割いてほしかったです。

またの機会によろしくお願いします！

ご参考までに昨年に出演したセミナーのうち、3本をご紹介します。

Adobe Creative StationにてIllustrator、Photoshop、Acrobat/PDFなどの連載をしています。末尾にリンク集も掲載しています。

https://blogs.adobe.com/creativestation/author/%e9%b7%b9%e9%87%8e-%e9%9b%85%e5%bc%98

https://blogs.adobe.com/creativestation/author/%e9%b7%b9%e9%87%8e-%e9%9b%85%e5%bc%98

XDを使用したことがないのですが、慣れるまでにどのくらいかかったか知りたいです。Photoshop、Illustratorを使っている人であればさほど難しくないのでしょうか？

はい、小さい1時間も触れば、それなりに使えるかと。逆をいうと、できることが限られています。

Adobe XDにインタラクション的な機能が増えたら使えそう

紹介しきれず申し訳ないのですが、下記はできます。

  • 画面の一部をクリックして、ほかのページ（またはページ内）にリンク -　ほかのページに移動するときにアニメーションを付加する

ページ内の要素に対してのちょっとした動きを付けることが、今のところできません。

ワイヤーフレームを作成するときには従来通りパワポ等がすぐれているのか？　XDなのか、オンラインツールなのか？について知りたかったです。

ワイヤーフレームをテーマにしたCSS Niteを昨年9月に開催しました。そのフォローアップ（スライドや動画）を公開していますのでご確認ください。

その中の益子さん、松田さんのセッション『ワイヤーフレームに必要な視点とワークフローの再考』が引き合いに出しながら考えてみましょう。

  • 作る人
    • クライアント担当者
    • ディレクター
    • デザイナー
  • タイプ
    • コンバージョンやCTAを最優先したインパクト勝負（ランディングページ）
    • 情報分類やラベルのわかりやすさなどを重視（コーポレートサイト、製品サイト）
    • UIやコンポーネントのコンテキスト（ウェブサービスや管理画面）
  • 役割
    • コピーや文書などテキスト要素が中心
    • ページ構成（必要な情報の整理
    • UIやコンポーネントが主役
  • ワークフロー
    • すばやくフロー（サイト設計や一貫性をあまり考えず、とにかく作る）
    • ほどほどフロー（サイト設計やページ構成をしっかりと考えつつ、UIは問わずに）
    • じっくりフロー（UIまでしっかりと設計、次のフローへの展開を念頭に）
  • ワークフローと担当者の関係
    • 「すばやくフロー」に、デザイナーのリソースを使うのはもったいない
    • ディレクターが手に負えるのは、「すばやくフロー」から「ほどほどフロー」まで
    • 「じっくりフロー」は、もはやワイヤーフレームを超えた作業であり、デザイナーでなければ対応できない
  • ツール
    • プレゼンツール（PowerPoint、Keynote）：ざっくりと作ればよいときや、Adobe製品を使っていない人向け
    • XD（軽快動作が魅力、機能はミニマムだが、ある程度のレベルまで作り込みもできる）
    • InVision、Prott、Cacooなどのオンラインツール（共有や共同編集がラク、ツールによって機能に差がある）

上記をまとめたのがこちらの表です。

松田さんはこうまとめます。

ワイヤーフレームは画面の構成要素を確定させるもの、プロトタイプは複数の画面のインタラクションを決めるためのもの、ということを前提とすれば、各画面のワイヤーフレームを作った後にプロトタイプとして画面間の関係性を検証できます。となると、複数画面の遷移において、整合性が取れているか、情報が冗長的でないか、ユースケースに適合するかなど、時系列での情報設計を行うことになります。これにより更にワイヤーフレームの精度を高めていくことが可能になります。

言い換えると、サイト制作でも「ワイヤーフレームだけでは完結しない」ことが理解されつつあります。

次の点でXDが非常にバランスがよいです。

  • 学習コストが低い
  • IllustratorやPhotoshopの資産を再利用しやすい
  • 画面遷移の設計や動きのシミュレーションをたやすく実現できる

難点は次の点です。

  • CC（Adobe Creative Cloud）のアカウントが必要
    • 単体プラン（1,180 円／月）もあるけれど…
  • マイクロインタラクション（要素ごとのアニメーション）などが“まだ”ない

おそらく、IllustratorやPhotoshopのように長く使われる定番ツールに仲間入りしそうです。Photoshop PSDの読み込みなど、いい感じに機能が成熟してきたこのタイミングで取り組まれてみることをオススメします。

その他の質問

ご質問のある方は、下記のフォームからご連絡ください。

質問する

フォームからうまく送付できない場合や、添付ファイルがある場合には、takano@swwwitch.comまでお送りください。

件名を「セミナー質問（●月●日開催分」のようにしてくださいますと見落としにくいです。

2017年にいただいた質問

こちらにまとめました。

ビデオ

ご参考

下記もご参照ください。

ベテランほど知らずに損してるIllustratorの新常識（Adobe Creative Station）

ベテランほど知らずに損してるPhotoshopの新常識（Adobe Creative Station）

知ってるようで、知らずに損してるAcrobatとPDFのアレコレ（Adobe Creative Station）

『10倍ラクするIllustrator仕事術』（増強改訂版）

2014年10月に発売。2011年バージョンと合わせて、3.5万部を突破。

Illustrator CC 2018対応版を発売予定ですが、全ページ書き換え予定ですので、両方お読みいただくことをオススメします。

SNSなど

TwitterやFacebookなどでもつながっていただければ幸いです。

Facebookで友達申請をお送りくださるときには（スパム避けのため）「〜のセミナーに参加した」等、ひとことメッセージをお願いします。

情報発信

下記にて情報発信を行っています。