サイト構築 -実装
デザイナーはコーディングを学ぶべきか？ 2019年変わりつつあるデザイナーとコードの在り方
Post on:2019年1月29日
デザイナーはコーディングを学ぶべきか？ デザインやプロトタイプ、エディタなど、最近のツールの進化に伴い、この問題を見直す時期がきたようです。 2019年変わりつつあるデザイナーとコードの在り方、ワークフローについて紹介し […]
デバッグ作業が快適に！VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code
Post on:2019年1月28日
エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可 […]
これなら簡単！SVG対応、アイコンを組み合わせてWebフォントのセットを作成できる無料ツール -Webfont
Post on:2019年1月28日
複数のアイコンを自由に組み合わせて、SVG対応のWebフォントにできるmacOS対応の無料ツールを紹介します。 ソーシャルメディア用のアイコンで作成したり、自分のサイト用のアイコンで作成したり、自分だけのオリジナルのWe […]
Adobe XDの自動アニメーションとドラッグジェスチャー機能を使って、UIのインタラクションを実装したまとめ
Post on:2019年1月24日
Adobe XDの2018年10月のアップデートで使えるようになった新機能「自動アニメーション」「ドラッグジェスチャー」を使用して、Webサイトやスマホアプリで見かけるUIのさまざまなアニメーションやインタラクションの実 […]
コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
Post on:2019年1月23日
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！ STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツー […]
これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle
Post on:2019年1月22日
CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobjec […]
[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
Post on:2019年1月21日
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Mate […]
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
Post on:2019年1月21日
スマホの傾きを感知し、それに合わせてグラデーションを光の反射のようにシミュレートさせる軽量スクリプトを紹介します。 スクリプトは単体で動作し、MITライセンスで利用できます。 Shiny Shiny -GitHub
現在の制作環境に合うよう開発された、使い勝手がよさそうな新しいCSSリセット -Destyle.css
Post on:2019年1月18日
使い勝手がよさそうな新しいCSSリセットがリリースされたので、紹介します。 Destyle.cssは現在の制作環境に合うよう開発されたCSSリセットで、Eric MeyerのリセットとNormalize.cssの不満点を […]
イラストやデザインの参考資料に！人物・動物・植物・デジタル機器・建物・家具などを図版化 -Dimensions.Guide
Post on:2019年1月18日
人物・動物・植物をはじめ、デジタル機器、建物、家具など、日常で見かける標準的なさまざまなスペースとサイズを図版化したDimensions.Guideを紹介します。 人物だけでも、老若男女の立ち・座り・寝・歩き・運動、そし […]
sponsors
