Webページやスマホアプリで、ドロワーのパネルを左・右・上・下からスライドさせるだけの超軽量3kBのスクリプトを紹介します。 実装もカスタマイズも超簡単で、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。
リスト要素を使ったシンプルなHTMLで実装されたメニューやナビゲーションをどのようにデザイン、スタイルするかのコンテストがCodePenで開かれているので紹介します。 次のプロジェクトで使用できそうなアイデアから、こんなの初めて見る! ここから更に広げていけそう! といった面白いアイデアまで、さまざまなメニューの実装が楽しめます。 CodePenChallenge: Menus CodePenChallengeの今回のお題は、メニューです。 実装のポイントになるのは、 ネストされたアイテムを常に表示させておくのか、サブメニューとしてインタラクションを使用するか。 スマホのような小型スクリーンとワイドスクリーンにどのように対応させるか。 リスト要素で実装されたメニューにさまざまなデザイン、アニメーションやインタラクションを与えます。ベースになるHTMLは、下記のようになります。
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
Elastic Slider 斬新な切り替えエフェクトをもつスライダー実装「Elastic Slider」 スワイプでびよーんと画像が切り替わります 関連エントリ 日付や時間を指定するスライダーUI実装「jquery-time-slider」
Result よく見かけるスクロール時のストーカーコンテンツをCSSだけでやろうという内容です。 特にトリックでもなんでもないのすが、position: sticky;使えば一部のブラウザを除いて実装できるようになりましたので使用例的な記事です。 position: sticky;に関してはtableのネタでも以前書きましたので参考になりましたら幸いです。 position: sticky;でtableを下スクロール時はヘッダ、横スクロール時は最左を固定 cssaside h3 { background: yellow; position: -webkit-sticky; position: sticky; top: 0; }html<article> <section>foo</section> <aside> <h3>bar</h3> </aside> </article>can i
待ち時間のストレスが軽減するローディングスニペット 「 10 Free CSS Loading Spinner Snippets For Web Designers & Developers」 Webサイト閲覧bの際にデータ読み込みに時間がかかる場合、ローディング画面をよく見かけますね。ユーザーにとって待たされるというのは非常にストレスのたまる時間です。そんな中今回紹介するのは、待ち時間のストレスが軽減するローディングスニペット 「 10 Free CSS Loading Spinner Snippets For Web Designers & Developers」です。 ベーシックなアイテムから、ずっと見ていたくなるようなものまで、いくつか気になったものをピックアップしましたので以下よりご覧ください。 詳しくは以下 ハートや花モチーフのデザインや動きがユニークなものまで、 ポップで可愛
実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。 たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。 今回はこれらのサンプル例を作成するために、Material Motion、IBMのアニメーション原則、Motion in Manifestoのガイドラインを参考にしています。 また今回のサンプル例は、InVision Studio(現在は限定ユーザーのみのアーリーアクセスで、メール登録
プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」 Webサイト閲覧中によく見かけるプログレスバーですが、最近は動きや形も様々で遊び心のあるものも増えてきています。そんな中今回は、プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」の紹介したいと思います。 Animated Goal Progress Bar jQuery plugin ベーシックなものから、ちょっと変わったものまで9種類のプログレスバーがピックアップされています。 詳しくは以下 ProgressBar.js – Progress bar
おつかれさまです。デザイナーのみやっちです。 最近引っ越して通勤時間が3時間弱になりました。本当にありがとうございました。 UX初心者がお送りするUIとUXの連載第4弾です。今回は「ワイヤーフレーム」について話していきます。 今までの流れ 1. UIとUXの基本 まずvol.1では、UIとUXとはなんぞや?というところを解説しました。 vol.1はこちら 「UIとUXの基本」UIとUXをこれから学ぼうとしているデザイナーへ vol.1 https://liginc.co.jp/360504 2. ペルソナ vol.2では、ウェブサイトのペルソナ(詳細なユーザーモデル)について、そもそもなぜ要るのかというところから、実際にペルソナを作成するところまで書きました。 vol.2はこちら 「ペルソナ」UIとUXをこれから学ぼうとしているデザイナーへ vol.2 https://liginc.co.
GitHub - simonsmith/jquery.stickyTableHeader: Small, accessible sticky table header plugin スクロールしても項目が分かりやすいヘッダー固定「jquery.stickyTableHeader」 通常のテーブルの欠陥を補うプラグインです。 関連エントリ テーブルをサクッとレスポンシブ対応にする「resTables」 テーブルをブラウザ上で組み立てられるUI実装「a-table」 テーブル等のヘッダをスクロールしても超簡単に固定できる「jquery-sticky-header-footer」 テーブル行の詳細をクリックで開けるテーブル実装
UXのベンチマークツール、プロトタイピングツール、VRを使ってデザインするツールなど、最新のデザインツールやリソースを紹介します。 最新のデザインツール、リソース、アプリ、参考書、トレンドなどを追いかけるだけでも大変なのに、そこから役に立っておもしろいものを探すのは、さらに大変です。そこで誰が見ても優れているデザインツールとリソースを紹介するProduct Hunt collectionを始めました。SitePointで使っているものもありますよ。 Product Huntのコレクションをフォローすれば、私たち(編集者Alex Walkerと私Daniel Schwarz)がチェックして価値があると判断したものをコレクションに加えたときに通知が届きます。また、もっともすぐれたツールを選んで月ごとに記事にしています。2017年8月の選りすぐりのデザインプロダクトを紹介します。 FullSto
Modal windows were always the realm of JavaScript and there are plenty of scripts to try. But with CSS3 it’s even easier to create a modal in pure CSS. The effects are somewhat limited but you can still make an excellent experience without relying on scripting. Most of these CSS examples are scattered to various corners of the web so I’ve curated some of the best ones here. These vary from simple
画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb)スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他のファイルには一切依存しません。 レスポンシブ対応、ブレイクポイントは簡単にカスタマイズできます。 HTMLは非常にシンプルな構造です。 CSSトランジションで動作します。 シンプルなイベントAPIを備えています。 Macy.jsのデモ 実際の動作は、デモページで楽しめます。 動作は非常に軽快で、快適です。
jQuery Menu 階層的な右クリックメニュー実装「jQuery Menu」 次のような右クリックメニューをブラウザ上で実現できます。特定要素上のみといった使い方が可能 関連エントリ レスポンシブに使えるメガメニュー実装jQuery「SmartMenu」 ハンバーガーメニューを実装するならコレかもという「Ember Burger Menu」 シンプルなサイドメニュー実装「sideToggle」
こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイアウト(横幅の変化に追従するレイアウト)や、ユーザーの操作に反応するインタラクティブなアニメーション表現、CMSやJavaScriptと連動して動作する複雑なUIなどをカンプ上で表現するのは困難です。 そのため、デザイナーが「ここはこういう風に動かしたいな〜」と思っていても、それがエンジニアに伝わっていない、という見落しも発生してしまいます。 一般的に、ソフトウェアの開発では仕様が不安定(=必要な機能
WebサイトやアプリなどのUIデザインのアイデアに困った時の参考に、そして勉強になるサイトを紹介します。 ページのレイアウト、UIのさまざまなコンポーネント、動きが気持ちいいアニメーション、実装のテクニックなど、定期的にチェックしておきたいサイトばかりです。 UI Patterns ページのレイアウト、ナビゲーション、データコンテンツ、フォーム、ユーザスクリーンなど、インタラクティブ性の高いUIデザインのさまざまな事例から、UIの問題を解決するデザインのパターンが紹介されています。 ローンチして間もないサイトですが、内容は非常に充実しています。 Collect UI DribbbleでUIデザインを探す人には、かなり便利です。日々アップロードされるDribbleのアートワークのUIデザインに関するもののみをコレクションしているサイトです。 このサイトもローンチしたばかり、登録数は2,000
シンプルで美しい!Google発のUIフレームワーク「Material Components for the Web�」とは?更新日: 2018年05月28日UI ここ最近、GoogleのMaterial ComponentsのGitHubページが頻繁に更新されています。 Material Componentsとは、Googleが推奨しているデザインフレームワーク*「マテリアルデザイン」(Material Design)*をさまざまなプラットフォームで簡単に取り入れることができるフレームワークです。 ゼロからマテリアルデザインのドキュメントに沿ってパーツを作らなくとも、Material Componentを組み込むだけで、簡単にマテリアルデザインのUIを取り入れたWebアプリケーションを作成することができます。 もともとはMaterial Design Light(MDL)としてリリースさ
商用プロジェクトでも完全に無料、コピペで簡単に利用できるSVGアニメーションのスピナーを紹介します。よく見かけるものから変わったものまで、さまざまなスピナーが揃っており、スピナーの素材として重宝すると思います。 SVGのスピナーのほとんどは、300-2500バイトの超軽量サイズ。アニメーションも快適で、くるくる気持ちよく動きます。 SVG Spinners -GitHub SVG Spinnersは、SVGで実装された超軽量のスピナーです。24x24dpで設計されていますが、SVGなのでサイズやカラーを簡単に変更できます。MITライセンスで、商用プロジェクトでも無料で利用できます。 スピナーは44種類あり、その中からいくつかコピペしてみました。 まずはよく見かけるドットが回転するスピナー。 <svg width="24" height="24" viewBox="0 0 24 24" xm
ウェブサイトや配布物を作っているときに、制作物にぴったりのアイコンが見つからず、写真やイラストを元に自分でアイコンを作成したことがある人もいるはず。このような手間を大幅に省いてくれるのが「SVG Silh」で、無料&商業利用可能なフォトストック「pixabay」にある人・動物・物といったさまざまなイラストや写真をSVG・PNG形式のアイコンに変えてくれており、制作物にぴったりのアイコンを探し出せるようになっています。 Free SVG Image & Icon. | SVG Silh https://svgsilh.com/ SVG Silhのトップページは以下のような感じ。画面上部にSVG画像、下部にカテゴリタグが表示されています。 ウェブサイト名の下には全21色のカラーボタンが表示されており、ボタンを押すと表示されているSVG画像を全ての色を変化させることが可能。「5」と書かれたボタン
Webページやアプリで見かける、通知や注目の役割を担うカットアウト(画像の一部を切り取る)を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS or SVG? by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カットアウトとは アバター画像で見かけるカットアウト カットアウトの実装 1: clip-pathを使用する カットアウトの実装 2: CSSのマスク カットアウトの実装 3: SVGのマスク アバター画像を重ねるカットアウト カットアウトの実装 1: clip-pathでマスク カットアウ
この記事では、Webデザイン制作の面倒な作業を楽にこなす、便利なSVGツール53個をまとめてご紹介します。 背景テクスチャやSVGシェイプから、オンラインSVGツールやSVG最適化ツールなど、SVGにまつわるあらゆるツールを揃えています。 新しいツールが見つかり次第アップデートしていく予定なので、ブックマークしておくと良いかもしれません。 Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ Web制作をもっと楽に!便利なSVGツールまとめ Haikei ユニークなSVGシェイプや背景、シームレスパターンを作成できるオンラインツールで、グラデーションや波ウェーブなど基本的なシェイプはほぼ揃います。 配色やサイズなど、本格的なカスタマイズができるのも特長で、作成したデザインはSVGやPNGファイルとして無料ダウンロード可能です。 Cool Backgrounds お好みの配色をつか
こんにちは。koyaです。 今回は「コロナに負けない!シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由 今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。 もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。 その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。 svg画像の出力 今回はAdobeXDを使用したsvg画像の出力を行います。 書き出す際の設定は下の画像のように 形式→svg スタイル→内部CSS 画像を保存→リンク と設定します。 ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いや
SVGXはSVGの編集や最適化、変換、管理や検索が可能なSVG管理デスクトップアプリです。Win、Macの両OSに対応しています。Electron + Svelteで作られているようです。 端末内の任意のSVGのプレビューや拡大/縮小、コードのライブ編集、URLエンコード、CSS用コード変換、検索が可能な他、ブックマークや履歴なども利用できる様になります。 実際使ってみた感想ですが、個人的にはかなり便利に感じました。特に検索機能と変換、最適化機能など欲しかった機能を1つのアプリで使えるのは嬉しいです。自分自身、ファイルの整理整頓がやや苦手なので助かりました。今のところ、そのまま使い続けるつもりです。 本題とはあまり関係ないのですが、このSVGXが少し変わった配布手法を取っていたのでメモ代わりに。 SVGXはオープンソースでもなく有償ライセンスでもない、Gitwareという配布スタイルを取っ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGを作成する場合、Illustratorなどのドローアプリケーションを使ってSVG形式でエクスポートするのではないでしょうか。SVGを直接作成、編集できるソフトウェアはあまりないように思います。 そこで使ってみたいのがSvgPathEditorです。SVGをWebブラウザ上で作成、編集できるソフトウェアです。 SvgPathEditorの使い方 メイン画面です。 マウスでドラッグして編集できます。 パスの追加や描画の種類を変更できます。 プレビューです。 コマンド一覧から、描画している範囲を可視化できます。 保存機能もあります。 SvgPathEditorを使えばSVGをWebブラウザ上で手軽に加工できます。最初はドローアプリケーションでもいいですが、その後のちょっとした編集は
Emblemiconsは1000以上のアイコンをセットにしたOSSのアイコンパックです。それぞれSVG、背景有りSVG、PDF、PNGが6サイズ、JPGも6サイズ用意されており、全てがMITライセンスの元で公開されています。 アイコンはプレゼンや設計、開発などビジネスで利用できるものが中心に揃えられているそうです。 また、Figma向けのアイコンも用意されており、こちらも無料で利用する事が出来ます。 様々なデジタル製品で一般的に頻繁に使われるようなアイコンを作って世界中で共有するのがこのプロジェクトの目的だそうです。全てのファイルはGithubでも公開されています。ライセンスはMITとの事です。 EmblemiconsOn Github
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アイコンはWebサイトのデザイン、特徴によって雰囲気に合わせて選ばなければなりません。そのため、一つのアイコンセットを知っていれば良いのではなく、様々なものを見ておくと良いでしょう。フォントと変わらない存在です。 そんなアイコンセットとしてRemix Iconを紹介します。小さめのアイコンで、控えめなデザインが特徴です。 Remix Iconの使い方 スクリーンショット多めで紹介します。まずはビルディング。 ビジネス。 コミュニケーション。 デザイン。 開発。 デバイス。 ドキュメント。 ドキュメントとファイナンス。 ロゴ。 マップ。 メディア。 システム。 ユーザ。 Remix IconはSVGアイコンなので、表示する大きさは自由に選べます。小さくても視認性の高い、はっきりとした
2019年4月19日 SVG, Webサイト制作 高解像度ディスプレイでもきれに表示できるSVG形式の画像。アイコンの表示などでは一般的に普及してきたかと思います。SVG形式ではカスタマイズがしやすいところもメリットのひとつですね。今回はブラウザー上で簡単に自分好みに変更できるSVGアイコンや背景パターン、イラストを配布しているWebサイトを紹介します。 ↑私が10年以上利用している会計ソフト! ICONSVG ICONSVGは矢印やインターフェイスまわりで使えるシンプルなアイコンを揃えています。サイズや線の太さ、色などをカスタマイズできます。SVGコードが表示されるので、そのままコピペして利用できますよ。「Download icon」ボタンからファイルをダウンロードすることも可能。商用利用OK。 Ikonate IkonateもシンプルなSVGアイコンをまとめています。サイズや太さ、色を
この記事のターゲットとなる方 この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。 記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。 ぜひ記事を読みながら一緒に書いてみてください。 SVGは他の画像形式と何が違うの? この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか? たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。 しかし、SVGはJPEGやPNGと明確に違うところがあります。 SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。
WEBデザインでは非常に重要となり、利用頻度も高いアイコン。様々なアイコンセットが世に中には出回っていますが、今回紹介するのはJPGやPNGといった画像データでは無くて、SVGでダウンロードしたり、SVGコードで出力できる、ICONサービス「ICONSVG」です。 シンプルでスタンダーどなアイコンが並んで降り、「Arrow」「InterFace」「Media」「Files&folders」「Editor」「Symbols and shapes」「User」「Graphs&charts」「Devices」「Layout」といったカテゴリに分けられて収録されています。 詳しくは以下 SVGの特徴として自由にサイズやカラー・線幅が変えられるようになっており、エンドの形状や角丸といったことも指定可能です。アイコンはSVGとしてダウンロードできる他、SVGコードで出力されて、コピーできるようになって
ICONSVGはシンプルなSVGアイコンをカスタマイズした後でダウンロードできるアイコン配布ツールです。アイコンはオリジナルではなく、以前ご紹介したOSSのアイコンセット・Featherを使用しており、太さの調整や角丸化、サイズ、色などを設定可能で、そのままDL出来る、というもの。凝ったカスタマイズは出来ませんがちょっと変えたい、featherのうち特定のアイコンだけ欲しい、SVGのカスタマイズは自分では出来ないという場合は楽かも?ICONSVGというよりfeatherが優秀みたいな記事になってしまいましたが実際featherは良いアイコンセットなのでこの機会に利用してみては如何でしょうか。 ICONSVG
SVGはベクターデータで扱えるため、Webサイト上ではデザインパーツやアニメーション用のパーツとして使われることが多いかと思いますが、今回はそのSVGを使って背景を綺麗に見せるためのサービスを紹介したいと思います。 関連記事 SVGとは?使う前に知っておきたいことまとめ SVG Backgroundsとは SVG Backgroundsは、予め用意された様々なデザインパターンのオブジェクトの中から好きなものを選択し、色などをカスタマイズしてそれをCSSコードでコピーして使ったり、SVGそのもののデータをダウンロードしてをWebサイトの背景として利用できるサービスです。 オブジェクトによっては、色の他にデザインパターンの大きさ、透明度、ブレンドモードなどを自由にカスタマイズして利用することができます。 データ自体は5KB程度と軽量なので、美麗なSVGの背景を利用できる機会があるなら検討するの
複数のアイコンを自由に組み合わせて、SVG対応のWebフォントにできるmacOS対応の無料ツールを紹介します。 ソーシャルメディア用のアイコンで作成したり、自分のサイト用のアイコンで作成したり、自分だけのオリジナルのWebフォントを簡単に作成できます。 Webfontの特徴 アイコンを自由に組み合わせ 手元のアイコンを自由に組み合わせて、SVG対応のWebフォントのセットを作成できます。既存のフォントをインポートすることも可能です。 フォントのカスタマイズ アイコンをカスタマイズして、フォントに名前を付けることができます。 フォントのエクスポート フォントには1クリックでエクスポートできます。HTMLやCSSファイルも生成されるので、簡単に利用できます。 フォーマットは、.svg, .ttf, .eot, .woff, .woff2 コラボレーション メンバーを招待し、チームを作成して、共
Vector Logo Zoneは様々な企業ブランドのロゴをSVGで検索できるWebサービスです。現在でも1000以上のロゴから検索出来るようになっています。また、Wikipedia等から探せるようにもなっていたり、PNGにコンバートしたりも可能です。なかなか便利だとは思うのですが、企業によってはロゴの使用にガイドラインを設けているところが殆どなので配布されているから自由に使える、と思わず、まずはそのブランドロゴのガイドラインも合わせて確認する必要がありそうです。日本の企業ブランドも少し確認出来ましたが昔からこの手のリストにはあまり乗らないのが寂しいところです。世界から認識されるような企業がもっと出ると良いですね。 Vector Logo Zone
Result よくあるサーチアイコンからinput要素の下線に遷移する、みたいなの css.search input { background: none; border: none; outline: none; width: 28px; min-width: 0; padding: 0; z-index: 1; position: relative; line-height: 18px; margin: 5px 0; font-size: 14px; -webkit-appearance: none; font-family: "Mukta Malar"; transition: all 0.6s ease; cursor: pointer; color: #fff; } .search input + div { position: relative; height: 28px; w
Result SVGとCSSで作れるサークルプログレスバーです css@keyframes load {/*アニメーション*/ 0% { stroke-dashoffset: 0; } } .progress {/*親要素*/ position: relative; display: inline-block; padding: 0; text-align: center; } .progress > li {/*プログレスバーを包括する子要素*/ display: inline-block; position: relative; text-align: center; color: #93A2AC; font-weight: 100; margin: 2rem; } .progress > li:before {/*カスタムデータ属性に設定したデータ名のテキストを表示*/ conten
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGの面白いところはバイナリデータではないので、JavaScriptから簡単に操作できるところです。時間によって移動させたり、形を変えることもできます。もちろんクリックなどのイベント処理とも連携できます。 今回紹介するBowlcutはSVGのテキストを面白く表示できるライブラリです。 Bowlcutの使い方 例です。人の顔の部分は画像です。JavaScriptで文字を動かしています。 こんな感じで曲線に沿った表示もできます。 ほとんどロゴのように使えます。 そしてパスをカスタマイズできます。 複数のエフェクトを組み合わせられます。 Bowlcutを使えば単なるテキストがあっと驚くくらい印象的になります。うまく使うためにはコツも必要そうですが、アニメーションGIFで作るよりも軽く、
TOP > Design , Font > 豪華な花柄が美しいSVGフォント「Flower Bouquet SVG Font」 タイポグラフィ自体にデザイン性を持たせることで、ぱっと華やかなものにしてくれます。今回ご紹介する「Flower Bouquet SVG Font」は、美しい花とともに可変性の高いSVGに対応しているフリーフォントになります。 バラやパンジーなどの色鮮やかで華やかな雰囲気が特徴。デザインを彩り鮮やかに演出してくれます。 詳しくは以下 色とりどりの薔薇やパンジーなどの花は、色のはっきりとしたクラシックタイプと柔らかい雰囲気が水彩の淡いタイプの2バージョンで作成されています。ポスターやWEBサイト、ちょっとした服飾のデザイン、パッケージなどにも使用することが可能。シンプルなデザインに花を添えるにはぴったりなタイポグラフィとなっています。 ここまで精度の高いものを
Webサイト内でよく見かけるアイコンですが、みなさんはどのように制作しているでしょうか。IllustratorやPhotoshopを使い、JPEGやPNG形式で保存している方も多いかと思いますが、今回紹介するのは、CSSとSVGで作るアイコンセット「Let’s make multi-colored icons」です。 SVGのメリットを活用したアイコンの生成方法が分かりやすく解説されています。 詳しくは以下 レティナディスプレイが普及し、より高画質でWebサイトの閲覧ができるようになった今、どのようにして高解像度ディスプレイに対応させるのかが問題となります。そんな問題を解決してくれるのが、SVG。JEPGやPNGでサイズを大きく作り、実寸サイズに縮小する必要がないベクター形式の画像なので、拡大縮小しても画質が劣化しないという最大のメリットです。紹介したページには、SVGデータにCSSを当て
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。 下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミングをずらしたりもできます。 ※キャッチ画像なので、SVGアニメーションをGIFアニメにしたものです。 ラインで描くSVGのアニメーションをいくつか作成してみました。 まずは、SVGファイルを用意します。 シンプルな図形を描いたSVGのキャプチャ ※キャプチャなので、PNG画像です。 3つの図形を順番にラインのアニメーションで描いてみます。 イラストやモックアップをラインで描くアニメーションをよく見かけますね。
どうもですよ、はやちですよ( ˇωˇ) 今回はsvgのアニメーションの操作がカンタンにできるSnap.svgをご紹介致します( ˘ω˘)☞三☞シュッシュッ 導入方法 さっそく、導入からご紹介いたします。まず、こちらのサイト(↓)からダウンロードします。 snap.svg ダウンロードしたら、snap.svg-min.jsを読み込みます。 <script src="snap.svg-min.js"></script> タスクランナーでのご使用の方 npmでも公開されています。 https://www.npmjs.com/package/snapsvg npm install snapsvg でインストールまたは bower install snap.svg でインストールします。 使用するjsに読み込ませたら準備完了です( ˇωˇ)☝ import snapsvg from 'snapsvg
いまやモバイルアプリのデザインでもWebデザインでも、欠かせなくなったSVG画像。ブラウザー上でサクッと編集できる、SVGエディターを紹介します。 SVG画像の普及率は、PNGやJPGといった人気ビットマップフォーマットに比べれば低いかもしれません。しかし、そのメリットから、プロジェクトにSVGの導入を検討するデザイナーが増加してきています。 いままでは、IllustratorやInkscapeといったデスクトップアプリケーションが普通でしたが、2017年となった現在では、Webブラウザー上でもベクターデザインができます。そこで、無料のWebベースのSVGエディターを探している人のために、6つのおすすめエディターを紹介します。 1. Vectr VectrはビギナーにもSVGのベテランユーザーにもとてもおすすめです。インターフェイスが簡潔で、使いもしないような大量のツールに圧倒されてしまう
プライムナンバーズの広告運用の特長は、運用にたずさわるスタッフの「姿勢」と、中長期的な視点で成果を追求する「戦略」にあります。リスティング広告に代表されるあらゆるWeb広告の運用を通じ、広告主さまの事業が「成長し続けられる環境」を実現。Web広告を始めたばかりの広告主さまでも自社の運用状況をご理解いただけるよう、コンサルタントが丁寧にアドバイスいたします。
「構造設計を体験してほしい」これが“ANDO Imagineering Group/AIG”のホームページのデザインコンセプトです。構造設計と聞くと、何か難しそう、数式とかちょっと苦手。こんな声をよく聞きます。けれど決してそんなことはなく、入り口はそう、子供のころに遊んだ積み木。シンプルな、まる・さんかく・しかくの図形を組み合わせて、家を作ったり、街を作ったり。構造の面白さを多くの人に伝えたい、そんな想いをこのホームページに込めました
やさしさがめぐる経済へ 一人ひとりがワクワク働くチーム。 ずっと使い続けたくなるモノやコト。 その両輪をデザインすることによって 人や社会や地球に愛される 会社や組織を増やし、 やさしさがめぐる経済の実現を目指す。 KESIKIは日本から世界へ、 その輪を広げていきます。
HTMLとCSSだけではキャリアアップの限界を感じている、JavaScriptを今より使えるようになりたい、Next.jsやReactも気になるけどどこから手をつければよいか分からない、そんな人にお勧めの解説書を紹介します。 最近ではCSSにもReactの存在が感じられるようになり、FigmaでもReactを理解している方が便利だったりします。ReactベースのフレームワークNext.jsを使用できるようになると、Web制作での選択肢は一気に広がります! 著者は「作って学ぶ HTML&CSSモダンコーディング(紹介記事)」でもお馴染み、ていねいで分かりやすい解説で評判のエビスコム様。 HTMLとCSSの解説書を数多く執筆している著者様ならではの、HTMLとCSSを使用してきたけどReactにはちょっと手を出せなかった人向けの解説書です。Next.jsとReactの環境構築から、実際にブログ
こんにちは森田です。 弊社 VSCode がメインエディターにしているメンバーが多いです。 そして、プロジェクトは Github を使うことが多いです。 なので今回は、より便利になる VSCode の Github 拡張機能を紹介します。 GitHub Pull Requests and Issuesvia: GitHub Pull Requests and Issues – Visual Studio MarketplaceGitHub Pull Requests and Issues は GitHub が出している純正の拡張機能で プルリクエストや Issue を VSCode上で見たり編集することができます。 サイドパネルサイドパネルに GitHub アイコンが表示されプルリクエストのブランチやレビュー、アサインされているプルリクエストのファイルを直接開くことができます。 Diff
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く