これは便利！デザイナー向けのChrome拡張機能用デザインツールVisBug | SONICMOOV LAB
Chromeのブラウザにはデベロッパーツールというのがありますが、それを利用することでWebページのHTMLやCSSを書き換えて素早くコーディングをしたり、動作検証をすることができます。コーディングに使えるのはもちろんですが、うまく使えばデザインをあれこれと試行錯誤することもできます。 このデベロッパーツールに似たChrome拡張機能用デザインツールにVisBugというのがあります。 VisBugとは？ VisBugは、オープンソースによるChrome拡張機能用のデザインツールです。 下記のような主な特徴があります。 Webページの要素などをクリックすると、様々な情報を表示 アートボードのようにページを編集したり、スタイルを変更できる ホバースタイルやアクセシビリティの確認、要素配置の変更も可能 レイアウトとコンテントは、様々なデバイスサイズに対応 AdobeとSketchのスキルを活用
パーツ別のUI UXのデザインが参考になるサイトCollect UI | SONICMOOV LAB
以前にUI/UXデザイン制作の参考に！見てるだけでも楽しいアプリデザインのギャラリーサイト９選という記事でアプリに関連するUI UXの参考サイトを紹介しましたが、今回も個別に紹介したいと思います。 目次 Collect UI UI UXデザインサンプル Collect UI Collect UIは、Ahmet Sülek氏によるサイトで、Web及びアプリの様々なデザインやイラスト、およびUI / UXをパーツ別にコレクトしたギャラリーサイトです。 ざっとですが、こんなパーツデザインがまとめられています。 サインアップ チェックアウト ランディングページ 計算機 アプリアイコン ユーザープロフィール 設定 404ページ ミュージックプレイヤー SNS共有 カウントうダウンタイマー オン・オフスイッチ 検索パーツ http://collectui.com/ UI UXデザインサンプル いくつか
便利かも！iPhoneなどのモックアップがオンラインで使えるshotsnap | SONICMOOV LAB
iPhoneやAndroidなどの端末画像にPhotoshopでデザインしたスマホの画面やキャプチャ画面をはめ込んでデザインに活かせるモックアップですが、ネット上で検索すれば無料でPSDデータとして探すことができます。 ただ、Photoshopを持っていない人にはそれは使えないものだったり、Photoshopの知識がないと使えなかったりします。そこでもっと手軽に使えるshotsnapの紹介です。 関連記事 便利すぎ！Android、Surface等のあらゆるモックアップがあるFacebook Design Devices iPhoneだけじゃない！様々な素材がモックアップとして使えるMockupWorld shotsnapとは？ shotsnapは、Gaddafi Rusli氏によるオンラインで無料で利用できるモックアップ作成サービスです。 iPhone（SE、8、X）やGalaxy S8
コピペで絶対使いたくなるCSSボタン 25選 | SONICMOOV LAB
動きがシャープなStylish Social Buttons マウスオーバー時の背景の動きがシャープです。 送信完了が分かりやすいSend button with a transition クリックして送信完了するまでの過程が分かりやすいです。 視覚をさらにプッシュするMaterial Button Hover マウスオーバーでさらに視覚に対してプッシュしてくれます。 広がるメニューAnimated Material Design Button マウスオーバーでメニューが広がります。 tの文字にも注目Twitter Button Concept 遊び心があるボタンです。 隠しボタンHidden door twitter button ツイッターフォローボタンで動きを付けたい時にオススメです。 立体的なボタンSquishy Toggle Buttons CSSだけでの表現でこんなボタンも。
使える！CSSアニメーション 20選 | SONICMOOV LAB
CSSの進化により、様々な表現がCSSだけで完結できるようになったこの頃ですが、その中でもCSSを使ったアニメーションが色々と目を引くものがあり、今回はそれについて様々な場面で使えるCSSアニメーションをまとめてみました。ソースコードもあるので、カスタマイズすればすぐに使えますので、ぜひともチェックしてみてください。 関連：コピペで絶対使いたくなるCSSボタン 25選 目次 クネクネ動く CSS loading カラフルな CSS preloader! まるで折り紙のような Cube Fold ユーザーを引きつける Animated SVG Spinner バルスじゃないよ、パルスな Smooth Pulse スマホで見かけるあのメニュー Gooey Menu 一味違う確認モーダル Flipside 円形のプログレス SVG circular progress 流れる星 Parallax
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
