クルマの時代から、もっと自由に移動を楽しむモビリティの時代へ。この大きな変化を伝えていくメディアが「トヨタイムズ」。
![TOP|トヨタイムズ](https://cdn-ak-scissors.b.st-hatena.com/image/square/37433b69e7bbac2f84f0299a432172990731b7e4/height=288;version=1;width=512/https%3A%2F%2Ftoyotatimes.jp%2Fogp.jpg)
クルマの時代から、もっと自由に移動を楽しむモビリティの時代へ。この大きな変化を伝えていくメディアが「トヨタイムズ」。
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート(メディアクエリ)で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ(コンテナクエリ)で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ
現場で使えるアニメーション系JSライブラリまとめ(2022年版) GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ(トゥイーンライブラリとも言います)が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジ
VS CodeのAdobe XD用拡張機能が登場! デザインシステムにもとづきコード出力と補完が可能に Microsoftが開発を行っている無償のエディター「VS Code」にAdobe XD用の拡張機能「Adobe XD extension」が登場しました。 この拡張機能を使うことで、Adobe XD上で作成したデザインアセットをVS Code上で参照・編集できるようになります。デザイナーとエンジニア間の溝を埋めることができ、デザインシステム構築のハードルが下がるでしょう。 今回の記事では、「Adobe XD extension」の活用方法を紹介します。コーディングの際に活躍する拡張機能ではありますが、Adobe XDを使ったデザイン段階でのひと工夫も必要になりますので、デザイナーの方も理解しておくとプロジェクトの進行がスムーズになるでしょう。 「Adobe XD extension」と
「事態が落ちついたら、また。」「このご時世ですから」と繰り返し唱えていたら2020年も半分がおわり、梅雨が明け、麦茶を煮出す回数が増えました。そして、ご時世のおかげで飲み会やイベントがすべて消え去ったことで貯金が増え、定額給付金も手に入ったので、「いい機会だから」とPCを新調することにしました。 iOSアプリエンジニアという職業柄、OSはMacになります。持ち運びできるMacBook Proもいいですが、据え置きタイプのほうが費用対効果が良いのでiMacかMac miniにしたいところです。当分の間は家で開発することが多いでしょう。 そんな折に、こちらの記事に出会いました。 note.com この記事で「なるほどMac miniを机の下にくっつける手があるか」と合点がいったので、Mac miniを注文。それにあわせて、デスク環境も力強く整えることにしました。 [2020/08/03 14:
CVRを上げるためのバナー制作4つのポイント~Yahoo!ニュースアプリA/Bテスト事例からみえた「都道府県ニュース」の隠れた需要 世のアプリ運営者なら誰でも抱えている課題の一つに、「どう集客するか(=ダウンロードしてもらうか)」ということが挙げられると思います。Yahoo!ニュースはブラウザ、アプリの両方で展開しておりますが、もちろんYahoo!ニュースのアプリ担当者らもそのような課題を抱えており、日々研究・試行錯誤を続けています。今回は、Yahoo!ニュースアプリにおけるバナー集客の事例と、そこから見えてきたポイントをご紹介したいと思います。 効果的なバナーをつくる4つのポイント アプリの集客方法には様々な方法がありますが、今回はYahoo!ニュースのブラウザ版の利用者に向けたバナー集客例を取り上げたいと思います。 Yahoo!ニュースは、ご存知の方も多いと思いますが、アプリ版が登場す
等間隔に水平・垂直にガイドを設定したい、よく使うブラシのサイズを登録しておきたい、方眼紙やカンバスで新規ドキュメントを作成したい、鉛筆やボールペン・マーカー・水彩・エアブラシなどすぐに使いたい、ノイズやブラーやグロウなどをブラシ感覚で使いたいなど、さまざまな機能が備わったPhotoshop CS5, CS5.5, CS6対応の機能拡張を紹介します。 NKS5 -Natural Media Toolkit NKS5はナチュラルなエフェクトを便利に使えるようコンパクトにまとめたツールで、小さいツールパレットにさまざまな機能が備わっています。 下記は、Photoshop上のNKS5のツールパレットと簡単な説明です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く