Web制作が面白いほどはかどる！便利な最新オンラインツール54個まとめ
この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。 「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。 Web制作の常識が変わる、便利な最新オンラインツール48個まとめ コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Squircley デザイン制作で使える美しいSV
フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
パフォーマンスJavaScriptHTMLフロントエンドcssdomcssom こんにちは、羽山です。 今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ しかしプログラムをチューニングしても、期待ほどはページ表示速度が改善しなかったことはありませんか？ 昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されているページが大半です。例えばHTMLを100～300msほどで生成してブラウザに転送できたとしても、ページ表示が完全に完了するのに4～5秒かかるということも珍しくありません。 「なんか遅いけど沢山いろいろ読み込んでるから仕方ないな・・・」と諦めないでください。ブラウザがどのようにHTMLを解釈して、CS
![フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e392d4350342045b699dea4e2a6421740d16647/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2018%2F04%2Fphoto_47592_20151013_min.jpg)
Nuxt.js + Netlify + tailwind CSSでseijishukyoproyakyuというバンドのHPを作りました - pco2699’s blog
今回つくったもの 構成・利用技術 要件定義 利用技術選定 ホスティングサービス フロントエンドフレームワーク CSSフレームワーク 開発 レスポンシブ対応 画像処理周り パララックス効果 ソースコード こんにちは、お久しぶりです！ 最近↓の「ぬるさくAI本」を書いていたので、ブログの方をお休みさせていただいてました！ （もしよかったら買ってください。） norwegian-geek.booth.pm ところで、友人がやっているSeijisyukyoproyakyuというバンドのHPを作りました。 サクッと作れたので、そのノウハウを今回の記事でお伝えできればと思います！ 今回つくったもの seijishukyoproyakyuという友人がやっているバンドのホームページを作りました。 （私やデザイナーの人件費を除けば）インフラなどの費用はゼロ！です。 ひとえにNetlifyのおかげでしょう。
Nuxt.js × Atomic Designのサービスデザインフロー
2019/6/1 初夏のJavaScript祭りで使用したスライドです。 Atomic Designの考え方をNuxt.jsのコンポーネント分割に取り入れてサービス開発してみました。フロントエンドエンジニア、デザイナー両面からの視点でやってみて良かったことやハマりどころをご紹介します。
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&... 設置するファイル ajax-loader.gif fonts（フォルダ） slick-theme.css slick.css slick.min.js HTML <link href="js/slick-theme.css" rel="styleshee
【jQuery】スライダー系プラグイン slickの使用方法 - Qiita
<link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> デフォルトのスタイルからカスタマイズしたい場合はslick-theme.cssを入れる。 また、slick.min.jsはbodyの閉じタグの直前で読み込む。 スライドさせるコンテンツを作成
LottieとNuxtでWebページをリッチにする - Qiita
会社のAdventCalendarだから気合を入れて書かなければと思った結果気合が遅延しました… 最初はFlutterに関して書く予定でしたがちょっと別の機会に取っておこうと思います。 今回はLottieとNuxtを使ったwebページ構築を試してみたのでそちらをご紹介したいと思います。 Lottieとは airbnbがAndroid,iOS,React Native向けに作ったライブラリでAdobe After Effectで作成した動画をjsonに書き出しページ上にSVGやキャンバスなどで組み込むことができます。 AfterEffectsはモーショングラフィックスを作ることに長けたソフトウェアですのでうまく使えばリッチなウェブページを作れるわけです。 流れとしては AfterEffect ←lottie-web(旧Bodymovin)→ JSONデータ ← Lottie-vue → HT
Androidアイコンジェネレータ
ガイドラインに沿ったアイコンを簡単に作成できるツールです。 「ファイルを選択...」から、白黒画像ファイルを選択してください。 Androidのアイコンを作るときには、公式で決められた、アイコンのデザインガイドラインに従う必要があります。 そのガイドラインでは、グラデーションの色や、影の付け方などが細かく決まっていて、普通に作ろうとすると結構大変です。 そこで、このツールを使えば、ペイントソフトで描いた白黒画像を選択するだけで、アイコンを生成してくれて、とても簡単。 アプリ開発はもちろん、モックの作成にも使えます。
Open Icon Library
The goal of this project is to offer a consolidated library of icons used in various libraries, window makers, themes and other applications. Over 10,000 unique icons in svg, png, xpm, ico, and icns formats. See homepage for details. Features Icon files: svg, png, xpm, ico, icnsover 2500 unique svg iconsover 7500 unique png icons
CSS3 buttons by Chad Mazzola
This is a collection of CSS3 buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button. These buttons are now implemented using Sass, with help from Bourbon. The generated CSS for all the buttons is also available. Classic buttons This is the original set of buttons, showing a vari
| test
mameshibankさん 豆柴日和 amecustomさん アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん 脚本家によろしく。 nisishowさん リフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん 広報＆IR担当のオフィシャルブログ shikamaさん 千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん 経営に終わりはない nina-yuanbeauteさん 芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさん フロンティア社長 オフィシャルブログ Powered by Ameba ohtias-ceoさん ソーエネ×オーチアス社長 alfortさん 念ずれば花ひらく「会社経営」
Progressionフレームワーク開発者が語る、 Progressionの魅力とFlashクリエイターの理想像
『Progression 3』（以下、Progression）は、Flashコンテンツのページ移動処理をスムーズに行うためのフレームワーク。HTMLベースのサイトと同じような階層構造や複雑なリンク構造を持つFlashコンテンツを容易に開発できる特徴を持つ。設計期間を短縮でき、Flash開発者がクリエイティブに集中できることもあって、利用するサイトが増えている。 今回はProgressionプロダクトマネージャーの阿部 貴弘氏に、開発の背景や特徴、今後の展開、クリエイターに対するアドバイスなどを聞いた。 きっかけは「技術的興味」と「開発者共通の問題意識」 開発のきっかけについて阿部氏に聞くと、当初はフレームワークを作るという目的はなかったという。「もともとFlash制作でデザインもプログラミングもすべて行っていました。ActionScript 3になってから、スクリプトの構文やエラーチェック
第22回 Flexでちょっと実用的なサンプル・サイトを作ってみる（内容編）
今回は前回に引き続いて，“ちょっと実用的な”サンプル・サイト（図1）のFlex2アプリケーションの中身を解説していきます。今回の内容は アプリケーション・フロー Main.mxmlの概要 ApplicationControlBarの機能 の三つです。 図1：サンプル・サイト（クリックすると別ウィンドウで表示します。ソースコードはこちら） 前回作成したサンプル・サイトのデザインを修正してくれる方をブログで募集しましたところ，teppei-studioさんからご連絡をいただきました。修正されたデザインのサンプル・サイトがこちらです（ソースコードをダウンロードできます）。結果的に「Main.mxml」（後述）にも若干手が入りました。このように，デザインとプログラミングの"完全な分離"というのは現状できないと思って良いと思います。Flexプロジェクトを進める場合はこの辺りにも注意が必要です。蛇足に
PhotoshopのPSDファイルを無料でゲットできるサイトいろいろ - GIGAZINE
PSDファイルとは、Photoshopのデフォルトのファイル形式であり、レイヤー構造や画質などがかなりそのまんまなので、いろいろとこのPSDファイルを元にしてサイトのデザインや素材作成などに利用されています。Photoshopを持っていなくても、例えばフリーソフトの「Paint.NET」とPSDファイルの読み込み・編集ができるようになる「Photoshop file plug in」を組み合わせれば、完全無料で利用可能になります。また、PhotoshopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」というような無料サービスもあります。 というわけで、いろいろな局面で役に立つPhotoshopのPSDファイルを無料でダウンロードできるサイトいろいろは以下から。 60 Most Wanted Photoshop Tutorials, Brushes, .PSDs and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ
https://oswdiary.net/archives/5853
IDEA * IDEA
Button Maker
ソシオメディア | UIデザインパターン
User Plus