SHEET K-48-V03

SVGによる表現 V03

線を引くように動くアイコン

線が描かれて現れるアイコン。送信・完了・通知など、操作のあとの「伝わった」を、小さな動きで返せる。

01動く実物

見て、動かして確かめる。

line-md(MIT)から、問い合わせや手続きの場面でよく使う6つを選びました。アイコンを押すと、もう一度描かれます。

  • 完了手続きや保存が終わったとき
  • 送信フォームやメールを送ったとき
  • 電話お問い合わせの案内
  • アップロード中ファイルを送っている途中
  • 明るい/暗い表示の切り替え
  • 通知新着やお知らせ

line-md © 2020 Vjacheslav Trushkin/利用条件(MIT)

許諾文(MIT)を見る
Copyright 2020 Vjacheslav Trushkin

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

02この見せ方のよいところ

押したことに、動きで返事をする。

  • 操作の結果が、ひと目で伝わる

    送信や完了の瞬間に線が描かれ、「押した」ことへの返事になる。文字の案内より先に目に入る。

  • とても軽い

    1つ数百バイト〜数KB の SVG だけで動く。再生のための仕組みを読み込まなくてよい。

  • 色がサイトになじむ

    文字の色をそのまま使うので、自社の色にも暗い表示にも、そのまま合う。

  • 1,000以上をそろえて使える

    同じ線の太さ・同じ動きの調子のアイコンが1,000種類以上あり、サイト全体で統一できる。

03向いている内容

こんな説明に向いています。

  • フォームの送信・手続きの完了
  • 通知や新着のお知らせ
  • お問い合わせ(電話・メール)の案内
  • 表示の切り替え(明るい/暗い)

04無料相談

まずは、御社の業務についてお聞かせください。

導入の相談だけでも構いません。

無料相談を申し込む
  • 初回のご相談は無料です
  • オンラインでも対応します
  • ITに詳しくなくても大丈夫です
無料相談を申し込む