イマドキのUIデザインには欠かせない! マイクロインタラクションを作るための ズルいAdobe CC活用テクニック （Adobe MAX JAPAN 2018発表資料） ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。 アーカイブビデオ 公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公

Adobe Senseiの画像解析が凄すぎた! 14000人から拍手喝采を浴びた研究中の技術 （Adobe MAX 2018） 米アドビシステムズが主催のクリエイティビティ・カンファレンス「Adobe MAX 2018」（ロサンゼルス）。2日目の10月16日は「スニークス」と題してAdobeの研究中の技術が発表されました。スニークスはAdobe MAXで最大の盛り上がりをみせる恒例の人気イベントです。 ▼「スニークス」が開催されたのは2018年10月16日（米国時間） ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。現地のイベントに自費参加したスタッフ（池田 @clockmaker）がレポートします。 今年は、画像解析にAIの「Adobe Sensei」を活用した次世代技術が多く扱われました。 ▼Adobe MAX 2018には14,

Adobe XDがデザインやプロトタイプのツールとして広まっていますが、Photoshopなど他のデザインツールとの使い分けや連携に悩んでいるウェブデザイナーの方も多いのではないでしょうか？　この記事では、デザインフェーズにおいてXDとPhotoshopを併用してデザインする方法を紹介します。 Photoshop単体で最後までデザインすることもできますが、XDと連携することによって以下のような恩恵を受けられるようになります。 XDの機能「リピートグリッド」で作業効率をアップ プロトタイプで実際の動作をシミュレーション URL共有でフィードバックや修正のサイクルコストを短縮 XDの強みである動作の軽快さを利用して全体の画面を見通す PhotoshopとXDを行き来してデザインする場合 Photoshopでパーツをデザインし、XDでレイアウトする方法を紹介します。 Creative Cloud

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。 前回の記事では、「HTMLコーダー」「フロントエンジニア」に役立つ拡張機能を紹介しました。本記事では、開発者全般の方に役立つ拡張機能を紹介します。 エディターを強化する拡張機能 1. Clipboard Ring テキストを「コピー」や「切り取り（カット）」したものを「貼り付け（ペースト）」する場合に、この拡張機能を入れることで複数件の内容を記憶できます。ctrl+shift+v（⌘+shift+v）を押すごとに過去の情報に切り替えられます。デフォルトでは10件の情報を記憶できますが、設定を変更することで記憶する件数を増やすことも可

2018年5月の アップデートリリース に合わせてAdobe XDが無料で利用できるプランが発表されました。2017年10月に正式版がリリースされ、その後も毎月機能追加や機能改善が行われ、現在もハイスピードで開発されています。 XDはUI/UXデザインに特化しており、デザイン制作はもちろんウェブ上で動作するプロトタイプまで作成できます。PhotoshopやIllustratorと比べるとデザインに関する機能は少なめですが、XD単体でデザインを完結させることも十分に可能です。また、起動が非常に早いことや、圧倒的に動作が軽いことも魅力です。macOS専用デザインツールのSketchも人気ですが、XDはmacOSとWindowsどちらでも動作します。 XDはデザインツールと称されていますが企画や仕様策定の段階から使用されることも増えており、筆者もワイヤーフレームなどの資料作成によく使用しています

米Adobeアドビ Systemsシステムズが主催の世界最大のクリエイティビティ・カンファレンス「Adobe MAX 2017」（ネバダ州ラスベガス）。二日目の10月19日は「スニークス」と題してAdobeの研究中の技術が発表されました。スニークスはAdobe MAXで最大の盛り上がりをみせる恒例の人気イベントです。 ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。過去の例を挙げると、Photoshopのディフォグ（霧を増減させる）機能やマッチフォント機能、最新のPremiere Proに搭載されたイマーシブ空間内での編集機能もかつてスニークスで発表された技術です。本記事では発表された11のテクノロジーを、現地のイベントに参加したスタッフ（池田）がレポートします。 今年は人工知能Adobe Senseiをフル活用した次世代技術のオンパ

SVGはベクターグラフィックスの画像形式で、昨今のウェブサイトで幅広く使われています。ウェブサイトのアニメーションやインタラクションにもSVGを使えますが、その用途ではJavaScriptを使わなければなりません。 たとえば矩形を1つ描くだけでも標準のAPIでは10行近いコードの記述が必要になりますが、JSライブラリを利用するとほんの数行で実装可能です。手軽に導入できるだけでなく、JSライブラリを使うことで表現の自由度が上がったり、古いブラウザもサポートできる利点もあります。この記事では有用なSVGライブラリをいくつかピックアップし、それぞれの特徴を紹介します。 Snap.svg Snap.svgはAdobe Systems社が提供しているオープンソースのライブラリです。SVG DOMの操作や、アニメーション・モーフィング、マスキング・クリッピングといったさまざまな高度な機能を簡潔に提供し

クリエイティブで話題にあがるウェブサイト。そこには、ユニークなアイデアが満ち溢れていたり、デザインの精度や高度な技術で驚くような体験が提供されており、学ぶべきものが多々あります。 この記事では最近話題になった国内のウェブサイトを5つ紹介します。 ※2016年10月から2017年2月までの期間で、ICS編集部が「ユーザーにどのような体験を提供するのか」という部分が工夫されていると感じたサイトをピックアップしています。 五五七二三二〇 /「四味一体」MASHUP MUSIC PLAYER 別ウィンドウで開く 日清シスコ株式会社のビスケット「ココナッツサブレ」のスペシャルコンテンツ。ココナッツサブレが4つの小分けなったことにかけて、4つの異なる楽曲と映像が提供されており、それぞれを同時に再生すると楽曲と映像がミックスされるという、ユーザーを驚かせる仕掛けが施されています。このサイトは海外でも評価

HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

Adobe MAX 2016 Sneaksで発表された新技術！ アドビの本気を垣間見る11の革新的なテクノロジー 米Adobeアドビ Systemsシステムズが主催の世界最大のクリエイティビティ・カンファレンス「Adobe MAX 2016」（カリフォルニア州サンディエゴ）。二日目は「スニークス」というAdobeが研究中の技術を発表する恒例の講演が行われました。ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。未来のCreative Cloudの新機能を一足先に知ることができます。本記事では発表された11のテクノロジーを、イベントに参加したスタッフがレポートします。 ▲11月3日（米国時間）の目玉プログラム「スニークス」。観客の注目度は高い 1. 紙に手書きして、3Dオブジェクトを着色するペイント技術 冒頭を飾ったのは未来のペイント技術

［速報］Adobe XDの大規模機能追加を発表！スタイルガイドの共有やコラボ編集をはじめ、待望のレイヤー・シンボル機能を搭載 Adobe Systemsアドビ システムズが世界最大のクリエイティブカンファレンスAdobe MAX 2016（米サンディエゴ）で、Experience Design CC（Adobe XD）の大規模な機能追加を発表しました。本記事では、速報としてAdobe XDの新機能を現地スタッフがレポートしつつ、クリエイターの視点から魅力や使い所を紹介します。 ▲Adobe MAX 2016の基調講演 XDはAdobe製のUXデザインツール XdはAdobe製のUXデザインツール。モバイルアプリやウェブサイトのプロトタイプを簡単な操作で制作できるデスクトップのソフトウェアです。昨年のAdobe MAX 2015で「Project Comet」という名前で発表され（参照「Ad

Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。 2010年頃からCSS 3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。 しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。 Noto Sans JP / 源ノ角ゴシック 世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。 Noto Sans JP

日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り

ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ

Adobe MAX 2015で発表されたアドビが研究中の新技術〜スニーク・ピークで発表された未来の11の技術 アメリカ・ロサンゼルスにて開催されているアドビシステムズ（以下、アドビ）のクリエイティブティ・カンファレンス「Adobe MAX 2015」。初日の基調講演（参考記事「[速報]Adobe MAX 2015 基調講演レポート」)に続いて、二日目は「スニーク・ピーク」というアドビが開発中の実験技術を紹介する講演が行われました。紹介された技術は将来的に搭載されるかもしれない技術であり、未来のAdobe Creative Cloudの新機能を一足先に知ることができます。現地に渡った弊社ICSの池田が速報レポートとしてお伝えします。 簡単な操作で新しいフォントを作り出せる技術：Project Faces フォントの骨格を解析し、字形を自由自在に調整し新しいフォントを作成できる技術。 ▲フォン

弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上がりになってしまいます。 今回はそういった方に是非読んでもらいたい記事を、すぐにでも実践できる内容を中心にピックアップしました。Webサイトやアプリケーションのデザインだけでなく、企画書やプレゼンテーション資料の作成などでも応用できるものなので、どなたでも覚えておいて損はないと思います。 フォント選び フォントの基本的な選び方 | Arch ▲フォントの系統から書体、ウェイトの選定方法まで、ユーザー