CCを基礎から学べる「スマートフォン時代のWebデザインスクール」を渋谷で開講します2020年1月から、「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールの初回体験レッスンを渋谷で開講します。XDについて基礎からしっかり学ぶことができます。XDによるプロトタイピング、UI/UXなど新しい内容に対応しています。使ったことない方向け)です。初回体験レッスンは1,000円でご参加いただけます。XDによるプロトタイピング」「Instagram風のプロトタイプ制作」などを行います。「スマートフォン時代のWebデザインスクール」のページよりお気軽にご参加ください。きっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。XD並みの速度でできる方法があるという事に気づきました。1つのアプリで完結させることができるという事に気づいたここ最近はたった1つのアプリでWebデザインを完結させるワークフローを実践していますが、とても快適なのでその方法についてこの記事で紹介したいと考えています。このワークフローは現在WindowsおよびMacで実践可能です。今後iPadでもできるようになるはずです。そのワークフローについては以下の動画をご覧いただければおおよその概要がわかると思います(この動画は声があります)。この記事には続編がありますこの記事の続編となる記事を書きました。Publisherをプロトタイピングツールとして使用するための設定やメリット、Adobeとの互換性などについて書いています。Designerについて解説する必要がありますので以下解説します。ご存じの方は読み飛ばしても結構です。PhotoはPhotoshopによく似た写真補正アプリケーションです。調整レイヤーのような基本的な機能はもちろん[コンテンツに応じた修復ブラシ]のような高度な機能まで搭載されています。1度で綺麗にならない場合、もう1度なぞれば綺麗になる。DesignerはIllustratorによく似たベクターグラフィックツールです。基本図形の作成に関してはIllustratorよりも圧倒的に豊富で、さまざまなバリエーションの図形を一瞬で作成できます。三角形ツールボタンを長押ししたところ。数が多すぎるので2行に分けて表示しています。豊富な図形ツールで基本図形を作成し、それを微調整するだけでさらに豊富な図形が作成できます。Publisherが発売されました。Designerを所有している場合、ウインドウの左上からそれらの機能に切り替えて使用することができます。Publisherは現時点では日本語組版の機能が弱いため、日本語の印刷物を制作するのは非常に厳しいです。多機能で便利なアプリなのに、日本語組版の機能が弱いために使い道がないというのはもったいないなーと思いながらTwitterを眺めていたところ、以下のようなツイートを見つけました。Publisherが印刷物にはテキスト機能がイマイチなので実用には物足りないが、ゲームのUI制作には同一フォーマットの使い回しや動作の軽快感で適してるのではとテスト中。Publisherを使用できないか実験されているそうです。PublisherはPhotoshopのような機能もIllustratorのような機能も使えて、ゲームの画面に表示するような日本語テキストの入力であればとくに問題なく行えるため、確かにそれは使い勝手が良さそうだと感じました。ゲームのUI制作に使えるのであれば、Webデザインのプロトタイピングやスマートフォンアプリのデザインにも使えるのではないかと感じました。思いついてすぐにWeb制作者の勉強会があったのでこの記事の冒頭の動画のようなプレゼンを行ったところ参加者の方に好評いただき、もっときちんと調査してプロトタイピングに本格的に利用してみようと考えるようになりました。シリーズがかなりいい感じになってる。XDのキャッチコピーは「思考の速度でデザインする」ですが、そのキャッチコピーのとおり非常に高速にキビキビ動作します。機能的に大きな特徴としては、「リピートグリッド」と呼ばれる機能があります。リピートグリッドは垂直方向または水平方向に繰り返しの要素を作り、そこに画像を挿入したりテキストを挿入したりするのに適しています。XDはカラーマネジメントに対応していません。リピートグリッドは規則的な繰り返ししかできませんが、実際のWebサイトは記事の一覧の途中に広告が挟まることもあります。その場合、リピートグリッドを解除しなければいけなくなります。記事一覧ページで、2つめの記事と3つめの記事の間に広告が挟まっているリピートグリッドに写真を入れる際、基本的にはファイル名順に入れることになります。ファイル名が「dog.jpg」「cat.jpg」「rabbit.jpg」など数字始まりでない場合などに、思った順序に入らないということが起きます。XDを純粋なプロトタイプ、つまり試作品を作るだけであればそれほど問題にはならないと思います。XDで最終的なデザインを作ってしまう場合が多いと思います。その場合、これらのことが問題になる場合があるでしょう。Affinityを使用した場合Affinityスイートは初期から「OpenColorIO」というマルチプラットフォームのカラーマネジメントシステムをサポートしています。Publisherにはリピートグリッドの代わりに[オブジェクトを別々に変換]と呼ばれる機能があります。長方形などのオブジェクトを複製したあと、それらのサイズを変更したくなったとします。その場合、複数のオブジェクトを選択してから[オブジェクトを別々に変換]を有効にし、サイズをドラッグで変更するとすべてのオブジェクトが個別にサイズ変更されます。この時、途中に広告など別の物が挟まっているとか、そういったことを気にする必要はありません。[パワー複製]と呼ばれる強力な複製機能を使えば水平方向垂直方向だけでなく円形に配置したり、複製したオブジェクトが回転したり少しずつ大きくなったりといった複雑な繰り返しのレイアウトも実現可能です。写真を配置するときは、クリックで自由に順序を決めることができます。したがって、「dog.jpg」を1番目、「cat.jpg」を2番目、「rabbit.jpg」を3番目といったような順序を任意で変更可能です。繰り返しの要素のマージン(間隔)を変更したい場合も、XDのリピートグリッドだとマウスで頑張って調整していたかと思いますが、AffinityならIllustratorライクな整列機能を使用してマージンを設定できます。XDの場合、プロトタイプモードに変更してから選択したオブジェクトから青いつまみを伸ばして別のページにドラッグすることで、ページ遷移のあるプロトタイプをつくることができます。制作したプロトタイプは[共有>プレビュー用に共有]を選択するとURLが発行され、Webブラウザーを使って確認することができます。Webブラウザーでプロトタイプを確認した時、他のユーザーがテキスト形式のコメントを残すこともできます。Publisherの場合、特定のボタンをタップすると別のページに遷移するようにするためには[ピクチャフレームツール]を使用して空(から)の画像ボックスを作成し、[ハイパーリンク]パネルを使用して別のページへのハイパーリンクを作成することができます。PDF形式で制作したものを書き出すことで、たとえばMacのQuickLookやプレビュー.app、PDFビューアなどを使用して「ボタンをタップすると別のページに遷移するプロトタイプ」の動作を確認することができます。プロトタイプがPDFであることのメリットプロトタイプがPDFであるということは、他の方に見せた時にPDFビューアーの注釈ツールなどを使用してコメントをもらうことができます。Pencelを使って「この画像をここまで大きく」とか、「このボタンをこの位置に移動」といったことをわかりやすく指示することができます。たくさんの方にPDFを見せてWebブラウザー経由でコメントをもらいたい場合はGoogleドライブやDropboxなどにアップロードし、URLを送る事でコメントをもらうということもできます。XDが登場した時、多くのAdobeユーザーの方はその快適な動作速度に驚いたと思います。XDが快適に動作するかというと、Appleが推奨する「Metal」という新しいグラフィックAPIを使用してGPUを活用しているからです。それに対し、PhotoshopやIllustratorはほとんどの機能でMetalというAPIを活用せず、古いグラフィックAPIを使用しています。AppleはOpenGL/OpenCLのような古いグラフィックAPIを「非推奨」としており、将来のmacOSで廃止すると表明しています。PublisherはMetalでほとんどの機能が動作します。XDのように快適に動作するというわけです。XDが「思考の速度でデザインする」プロトタイピングツールだとしたら、Affinityはデザインだけでなく写真編集やベクターグラフィックの制作など「思考の速度であらゆる作業を行える」アプリケーションであると言えます。プロトタイピング制作中にアイコンを制作したい場合たとえば、「プロトタイピング中に不足しているアイコンがある事に気づいた」という例を考えてみましょう。XDを使用している方のうちほとんどの方が「ちょっとしたアイコンの制作をIllustratorで行う」と回答しました。Webまたは公式アプリの投票機能でご回答ください。Publisherを使用している場合、アイコンを制作したい時は[デザイナーペルソナ]に切り替えるだけで、今開いているドキュメントはそのままでIllustratorのほぼすべての機能を利用してアイコン制作が行えます。制作が終わったらすぐに[パブリッシャーペルソナ]に切り替えてプロトタイピングの続きができます。Illustratorで制作したアイコンをXDに受け渡すためにファイルとして書き出したり、コピーペーストしたり、別のアプリに切り替えたりする必要はもうありません。「作業の途中で時間や思考が中断されない」と言えます。「プロトタイピングツールにPhotoshopやIllustratorのような高度な編集機能が欲しいと感じた事はありますか?」というアンケートでは半数以上の方が「アプリが重くならないなら欲しい」と回答いただきましたが、そのような方にはぜひ試して頂きたいです。XDのように快適に動作します。Webまたは公式アプリの投票機能でご回答ください。Photoが登場した時、私はてっきり「これはIllustratorやPhotoshopの8割ぐらいの機能を搭載して、買い切りで安く提供するのが目的なのかな」と思っていました。Publisherを使用した時、Affinityスイートの目的はそんな低い志にあるのではなく、「高い親和性のあるアプリケーションによってデザイン業務のワークフローそのものを改善することにあるのだ」ということに気づきました。XDを使用してプロトタイプを制作する場合、効率よく制作しようと思えば事前にすべての素材をきちんと用意しておく必要があります。XDを使用した方が早いかもしれません。すべてのデザイン案件がそんなにうまくは行きません。一部の写真がなかなか送られてこなかったり、写真のクオリティが悪くPhotoshopで修正が必要だったり、後になって「やっぱり写真の色味を修正して」と言われることもあるでしょう。XDで写真をずらっと並べた時に明るさや色味が揃っていないことに気づいて写真を修正したくなることもあるでしょう。撮影したばかりのRAWをそのままプロトタイピングに利用するたとえば「今すぐに、仮のプロトタイプを2分ぐらいでパパッと作りたい」というケースを考えてみましょう。デジタルカメラで写真を撮影し、それをLightroomで現像しPhotoshopに取り込んでからリサイズし...などとやっていては、あっという間に2分経ってしまいます。Publisherであれば一瞬です。デジタルカメラで撮影したRAWデータをそのままアートボードに配置して、そのままサクサク作業を続けることができるからです。Publisherに配置し、さらにベクターオブジェクトを使用してマスクしてみました。結果は全く重くならず、そのまま作業を続行できました。2枚貼り付けてベクターでマスクしてみたのですが全く重くならないですね。XDに配置しようとしても配置できず、Illustratorに配置しようとするとエラーメッセージが表示されました。IllustratorにRAWデータをドラッグした場合これに何の意味があるかと言うと、「完全に好きな手順で自分だけのワークフローを構築できる」ということと「後で修正作業が発生しても複数のアプリを行ったり来たりしなくて済むので、今までよりも手間がかからずデザイン業務が行えるようになる」ということです。CCアプリにもコピー・ペーストできる事が多いです。CCアプリ同士のコピー・ペーストについて確認しましょう。XDにPhotoshopのレイヤーをペーストする事はできません。テキストレイヤー(オブジェクト)のペースト可否Affinityアプリ同士は、当然あらゆるオブジェクトをコピー・ペーストできます。Photoにペーストすると、ペースト後もテーブルに行や列を追加できます。CCアプリのコピー・ペーストは以下のようになります。※Affinity→XDはテキストのペーストは問題ありませんが、ラスタライズされた画像をペーストすると、Macの一部の環境では垂直反転する場合があります。XDにペースト後に垂直反転すれば問題なく利用可能です。AffinityでSVGファイルを書き出し、XDにSVGファイルをドラッグすることでも回避可能です。△マークが付いている箇所もAffinityからPSDを書き出してPhotoshopに読み込み、Photoshopで作成したPSDをAffinityに読み込み、XDからSVGを書き出してAffinityに読み込みすれば、テキストをテキストのまま持って行けます。Publisherで制作したプロトタイプにXDでアニメーションをつけたい」という場合、ページごとにSVGで書き出し、XDで読み込んでアニメーションをつけるということも可能です。Publisherを使用されているのか質問したところ、「ゲーム制作では、レイヤーを保持した状態でページごとにPSDにばらして書き出せるというのが相当大きい」そうです。PhotoではPhotoshopプラグインが使用できます。動作する事が知られています。CC製品との親和性が高い」と言ってよいと思います。Publisherを使用したWeb制作に関しては、おそらくFireworksが好き、あるいは好きだった方には気に入って頂けるのではないかと思います。1つのアプリでベクターとラスターが使えるし動作も軽い、command+2で200%表示、command+4で400%表示、ベクターに対してレイヤースタイルが使える、カラーピッカー開きっぱなしで作業できる、[ファイル>Designerで開く]を使えば全情報引き継いで本格的なスライス(Retina・SVG対応)も使えます。Affinityによる3つの自由1つ目は「好きな手順で作業ができる」つまりワークフローの自由です。2つ目は「好きな場所で作業ができる」つまり作業環境の自由です。Photoは既にiPad版が発売されており、ほぼ全機能が搭載されています。PublisherのiPad版の発売も予定されています。これにより、自宅やオフィスだけでなくiPadを持ち歩けるあらゆる場所でデザインができるようになります。3つ目は「サブスクリプションからの解放」です。Affinityスイートは全て買いきりとなっています。Designerは2014年に買い切りのアプリとしてリリースされましたが、一度も追加料金無く2019年もアップデートを受けられています。したらいつかはメジャーアップデートにより有料になるかもしれませんが、少なくとも購入したバージョンは追加料金を支払うことなくそのまま利用可能です。Publisherは以下のページからWindows版とMac版の体験版をダウンロードすることができます。iPad版は残念ながら体験版はありません。動作環境(PCやOSなど)と、どのような機能があるかの一覧が見たい場合は以下のページの完全な機能一覧をご覧ください。完全な機能リスト一部の機能はAdobe製品とは名前が違うのでご注意ください。コンテンツに応じる→インペインティング)Windows・Mac用のDesigner・Photoの体験版は上記サイト内からダウンロードできます。iPad用の体験版はありません。Affinityではできないこと現状、以下の機能は搭載されていないようです。パスの単純化(今後搭載予定あり)、ライブトレース(ピクセル画像をパスに変換)、高度なアピアランス、縦書き、禁則処理また、現在確認されている不具合として、日本語を入力し、変換を確定する前にカーソルキーを入力するか、変換候補をクリックすると入力している文字がダブる(同じ文字列が2つ連続した状態になる)バグがあります。JAPANの活動として、日本語入力に関する問題を改善し、縦書きや禁則処理などに対応して頂けるよう開発者の方に求めていく予定です。Publisherでは利用できませんのでご注意ください。()内のアプリに切り替える、あるいは作業を引き継ぐ事で利用可能です。以下のページに、日本語字幕付きの動画があります。Photoのチュートリアル日本語テキストのヘルプは、メニューの[ヘルプ]からご覧頂けます。Facebookグループで質問するという方法があります。Facebookグループは他の方に投稿が見えないよう秘密のグループとなっていますが、お気軽にご参加ください。渋谷でイベントを開催しますAffinityスイート製品の活用方法を知り、意見交換し、アプリを育てていくための勉強会を開催します。7月19日の19:00〜21:00開催で途中参加可能です。以下のイベントページからお申し込みください。※こちらは既に満席となっておりますが、キャンセル待ちされていた方には無料で講演内容の動画をプレゼントする予定です。キャンセル待ちにご登録ください。CCにかなり似ていますが、一部違う部分もあります。別の記事で、私のおすすめ設定について書く予定です。最低限チェックした方が良い設定として、MacではAffinityの環境設定(Macはcommand+,キーで表示)で、[パフォーマンス]の[ディスプレイ]から[Metal]を選択し、[Metalアクセラレーションの計算を有効化]にチェックを入れます。Windowsでは現在は高速なグラフィックAPIなどに完全対応できていないようですが、まもなく対応予定とされています。関連記事この記事を公開してからわずか1週間で、海外のAffinityユーザーの方から取材を受けたり、日本でAffinity製品を使用しているプロのWebデザイナーの方のインタビュー動画を撮影したりといろいろな事がありました。詳しくは以下の記事に書いています。diaryこの記事には続編がありますこの記事の続編となる記事を書きました。Publisherをプロトタイピングツールとして使用するための設定やメリット、Adobeとの互換性などについて書いています。Publisherを最強のプロトタイピングツールとして使うために知っておきたいことスマートフォン時代のWebデザインスクールを渋谷で開講します2020年1月から、「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールの初回体験レッスンを渋谷で開講します。XDによるプロトタイピング、UI/UXなど新しい内容に対応しています。使ったことない方向け)です。初回体験レッスンは1,000円でご参加いただけます。XDによるプロトタイピング」「Instagram風のプロトタイプ制作」などを行います。「スマートフォン時代のWebデザインスクール」のページよりお気軽にご参加ください。PHP徹底入門講座・WordPressカスタマイズ講座を開きます「PHP徹底入門講座」は、「HTMLはわかるけどプログラミングは未経験」の方向けの日曜講座です。プログラミングを始めてみたい方は、まずはこちらへどうぞ。別途、「WordPressカスタマイズ講座」も開講します。管理画面から更新可能な中小企業サイト」制作までやります。スマートフォンやRetinaディスプレイに対応した新しい内容にリニューアルしました。渋谷にお越し頂くのが難しい場合、ご自宅で動画受講も可能です。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。WordPressPCのメールアドレス:Twitterでは、Web制作に関する最新情報をツイートしています。PhotoshopAboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。「スマートフォン時代のWebデザインスクール」を東京・渋谷で平日夜に開催します「スマートフォン時代のWebデザインスクール」は、2020年2月から平日夜開催!初回体験レッスンも開催します。XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。2020年2月に「WordPressカスタマイズ講座」を開きます以下の方を対象として「WordPressカスタマイズ講座」を開きます。AppはAndroidのホーム画面にあるGoogle検索フォームのことである」と解説している記事が多いですが、どうも数が合わないと思って調べた結果、別の結論に至ったのでこの記事にまとめています。Edgeの正式版がリリースされました。いえ、この記事を読んでいる方の中には「まだ使ったことがない」という方もいらっしゃると思います。...「Webデザイナーはコーディングできるべきか」という議論に対する私の考え過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。「Web制作に役立つIllustrator入門講座」という無料講座を開催しますIllustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。フィルムカメラで撮影した写真を自分で現像・プリントしてみたフィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。2019年12月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。年末年始にWebデザインを学び直すための3つのステップこの記事は、以下のような方を対象にしています。