Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選 - ICS MEDIA
ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。 Figmaプラグインの使い方 Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。 プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。 プラグインアイコンの右下のマークで、対応している
FigmaのVariants入門 - さらにコンポーネントを使いこなそう - ICS MEDIA
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variantsバリアンツ」を紹介します。 Variantsを使うと、複雑なコンポーネントの切り替えや管理が行いやすくなり、堅牢なデザインファイルが作成できます。また、コーディング時に近い思想でデザインを組めるので、実装時に破綻が起こりにくくなります。 Variantsは規模感に関わらず小さな単位でも活用できます。 「使いこなせていない」、「自分の制作の規模感では不要」と考えているデザイナーにも、手軽に導入できメリットを実感できるはずです。本記事で使い方を説明する
文章の品質向上に役立つ！ Figmaのプラグイン「テキスト校正くん」を公開 - ICS MEDIA
ウェブ制作の現場で一般的に使われるようになってきたデザインツール「Figma」。そのFigma上で動作する文章校正支援プラグイン「テキスト校正くん」を弊社からリリースしました。無料で利用できます。 テキスト校正くん for Figma 本プラグインを利用することで、画面内の文章を手軽に校正でき、テキストの品質を高めることができます。 「テキスト校正くん」はテキストエディターの「VS Code」（参考）や、デザインツールの「Adobe XD」向けの拡張機能（参考）として以前から公開しており、多くの方に利用いただいています。とくにVS Code版の「テキスト校正くん」は約4万インストールも利用されており、今も利用者が増えています。「テキスト校正くん」の校正機能をさまざまなツールで利用できるよう、今回はFigma向けのプラグインとして新たに開発し公開しました。 「テキスト校正くん」でできること
Adobe XDとPhotoshopのアセット連携が便利! 快適なデザイン制作フローを実現しよう - ICS MEDIA
Adobe XDがデザインやプロトタイプのツールとして広まっていますが、Photoshopなど他のデザインツールとの使い分けや連携に悩んでいるウェブデザイナーの方も多いのではないでしょうか？ この記事では、デザインフェーズにおいてXDとPhotoshopを併用してデザインする方法を紹介します。 Photoshop単体で最後までデザインすることもできますが、XDと連携することによって以下のような恩恵を受けられるようになります。 XDの機能「リピートグリッド」で作業効率をアップ プロトタイプで実際の動作をシミュレーション URL共有でフィードバックや修正のサイクルコストを短縮 XDの強みである動作の軽快さを利用して全体の画面を見通す PhotoshopとXDを行き来してデザインする場合 Photoshopでパーツをデザインし、XDでレイアウトする方法を紹介します。 Creative Cloud
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
Flash Playerが終了するまでに見ておきたい！ 今も試せる歴史的Flashサイトまとめ - ICS MEDIA
多くのサイトは脱Flashの流れのなかにあり、従来Flashで作られていた表現の多くはHTML5へ移行が進んでいます。使われている技術は変われど、アニメーションを心地よく見せる技やユーザーを楽しませる要素は普遍的なもの。かつて話題になったFlashサイトから得られるものは多いはずです。 2017年7月26日（水）、ブラウザプラグインのFlash Playerが2020年末に終了すると、アドビが発表しました（参照「Flash とインタラクティブコンテンツの未来 | Adobe.com」）。Flashサイトがブラウザで見られなくなってしまうまでに見納めするべきサイトをまとめました。 FONTPARK 2.0 | MORISAWA 別ウィンドウで開く フォントメーカー「モリサワ」のウェブサイト（2008年公開）。文字のパーツを組み合わせてオリジナルのイラストを作成し、作品として投稿・共有できます
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA
ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基本については前回の記事『CSS Grid Layout入門』を参照ください。 この
CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA
CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。たとえばfloatだと親要素にdivを増やす必要があったのが、Grid Layoutを使えばそのようなムダなHTML要素を増やさなくて構わなくなります。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくり
CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 - ICS MEDIA
CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 CSS Filtersとはボカシや色調整などグラフィカルな効果が得られるCSSの機能です。この記事では「マウスオーバーなどの表現を作るのにCSS Filtersが便利」ということを紹介します。 CSS Filtersの使い方は簡単。CSSのfilterプロパティに適用したい種類の指定を行うだけです。たとえば、次のような指定をすると、HTML要素にエフェクトがかかった状態で表示されます。 CSS Filtersは実はアニメーションにも利用可能。多彩な表現が簡単に実現できます。今回紹介するサンプルは、マウスオーバーでエフェクトを適用するシンプルなもの。まずは次のビデオをご覧ください。 明るさを使った表現 明るさ調整のbrightness()メソッドを利用してみましょう。マウスオーバー時に写真を明
CSS Grid Layoutをガッツリ使った所感 - Qiita
この記事は、加筆して「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に引っ越しました。 引越し先の記事では CSS Grid Layoutを使ってよかったこと 逆に苦労したこと、解決できなかったこと IE 11対応には工夫が必要 Autoprefixerの最新版を使えば、IE 11向けのコードに変換してくれる という内容をまとめています。 ※Google検索で辿り着いた方がリンク切れだと申し訳ないので、投稿は残しておきます。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat yo
試して理解する話題の仮想化技術、ウェブ制作者のためのDocker入門 - ICS MEDIA
Docker（ドッカー）とは、シンプルで軽量なコンテナー型の仮想化環境です。コンテナー技術の採用により、仮想化ソフトウェア（たとえばVMware Player、VirtualBox、Paralles Desktop等）と比べて起動も速く高速に動作します。 ※コンテナー型の仮想化環境については、@ITの記事「アプリ開発者もインフラ管理者も知っておきたいDockerの基礎知識」がわかりやすいでしょう 2016年7月に「Docker For Windows」と「Docker For Mac」が正式リリースされたことで、Windows・macOSでも環境の違いを意識することなくDockerを導入できるようになりました。 Dockerは、サーバーサイドエンジニアやインフラエンジニアだけでなく、Webのフロントエンドエンジニアにも非常に有用なツールです。本記事では、フロントエンドエンジニアがDocke
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
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
JenkinsでCI環境構築チュートリアル （Linux編・macOS編） - ICS MEDIA
Jenkinsとは、アプリケーション開発におけるテストやビルドなどの作業を自動化する継続的インテグレーション（CI）ツールの1つです。 Jenkinsはクロスプラットフォームに対応しているため、macOS/Windows/LinuxなどのさまざまなOSで利用できます。そのため、AWSなどのクラウド環境に構築するだけでなく、ローカル環境にインストールしても使用できます。 本記事では、LinuxとmacOS上でCI環境を構築する手順を紹介します。また、Windowsの手順は別記事「JenkinsでCI環境構築チュートリアル (Windows編)」で解説しています。 JenkinsでCI環境構築（Linux編） JenkinsでCI環境構築（macOS編） JenkinsでCI環境構築（Linux編） 本記事では、CentOS 7をminimalインストール（最小構成でのインストール）した環境に
エフェクト作成入門講座 Three.js編 ゲーム演出に役立つマグマ表現の作り方 - ICS MEDIA
ゲームやビジュアライゼーションのWebコンテンツでは、華やかな3D演出の実装をJavaScriptとWebGLで求められることがあります。この記事のシリーズでは、WebGLのJSライブラリとして有名なThree.jsを利用して、3Dエフェクトの作成手順を解説します。 今回、扱うテーマは「マグマエフェクト」。実は以前、このテーマを3Dエフェクト作成ツールであるEffekseerエフェクシアーで扱ったことがあります（記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」)。Effekseerはプログラムを使わないデザインツールなので、今回紹介するThree.jsによるプログラムの作り方とはまったく異なります。ですが、表現のエッセンスはどんな作り方でも共通。エフェクトの実装ポイントが理解できていれば、異なった方法でも同じ表現を実装できるのです。 本記事
Adobe MAX 2016 Sneaksで発表された新技術！ アドビの本気を垣間見る11の革新的なテクノロジー - ICS MEDIA
Adobe MAX 2016 Sneaksで発表された新技術！ アドビの本気を垣間見る11の革新的なテクノロジー 米Adobeアドビ Systemsシステムズが主催の世界最大のクリエイティビティ・カンファレンス「Adobe MAX 2016」（カリフォルニア州サンディエゴ）。二日目は「スニークス」というAdobeが研究中の技術を発表する恒例の講演が行われました。ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。未来のCreative Cloudの新機能を一足先に知ることができます。本記事では発表された11のテクノロジーを、イベントに参加したスタッフがレポートします。 ▲11月3日（米国時間）の目玉プログラム「スニークス」。観客の注目度は高い 1. 紙に手書きして、3Dオブジェクトを着色するペイント技術 冒頭を飾ったのは未来のペイント技術
Web業界は何時まで働くのか？ HTMLコーダーへのアンケート結果（業務時間やコードの書き方、Web技術について） - ICS MEDIA
Web業界は何時まで働くのか？ HTMLコーダーへのアンケート結果 （業務時間やコードの書き方、Web技術について） ウェブ制作者の就業時間やコーディングスタイルなど、皆さんは気になったことはありませんか？ 同業者と交流の少ない職場だと、常識だと思っていることが業界多数の傾向と異なっているかもしれません。 そこで、Twitterアカウントから実施していたWeb業界に関するアンケートをまとめました。この記事では「Web業界の働く時間」「トレンドの技術」「コーディングスタイル」「フォント」の4つのアンケート結果を紹介します。 Web業界は何時まで働くのか？ 当サイトICS MEDIAのアクセスは18時を超えると急激に下がります。このことから、Web業界で働く大半の方々は18時に仕事を上がっているのではないかと考えるようになりました。このことをツイートしたら意外性があったらしく多くの注目を集めま
商用利用可能！高品質なオススメ日本語Webフォント10選（無料フォント多数） - ICS MEDIA
Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。 2010年頃からCSS 3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。 しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。 Noto Sans JP / 源ノ角ゴシック 世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。 Noto Sans JP
CreateJSのための高速なトライアル＆エラー開発環境の作り方ーCreateJS勉強会/野原発表資料 - ICS MEDIA
2016年9月30日（金）、CreateJS勉強会 (第8回）がアドビシステムズ（東京）で40人の定員規模で開催されました。勉強会のフォローアップとして、発表資料「CreateJSのための高速なトライアル&エラー開発環境の作り方」のスライドを一部抜粋し記事という形で公開します。 リッチなコンテンツを効率的に作るための開発環境づくり 今回のCreateJS勉強会では、スペシャルサイトやゲームなどのリッチなコンテンツを作るためにCreateJSを使用している方が多くいらっしゃいました。CreateJSではリッチなコンテンツ表現を作成できますが、その表現を高めるためにはトライアル&エラーを繰り返すことが必要になります。本記事では効率よく開発するための開発環境の作り方を紹介します。 ▲ 勉強会でも共有した開発環境の動画です。TypeScriptによって書かれたコードの補完やAdobe Animat
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
