アプリと同等のUXをウェブでも提供する、PWA最新事情 from #ChromeDevSummit 2019
[レベル: 上級] この記事では、Chrome Dev Summit 2019 の PWA 関連セッションのハイライトをレポートします。 僕はデベロッパーではないので技術的な部分、特にコーディングについては言及しません。 テクニカルな内容は記事最後で紹介する動画でご確認ください。 では、PWA の最新事情を一緒に見ていきましょう！ ウェブプラットフォームとしての PWA 新興国のような通信環境が整っていない国々でもウェブを利用しやすくする。 スマートフォンや PC などあらゆるデバイスでウェブにアクセスできるようにする。 ネイティブアプリと同等な機能をウェブアプリでも提供することが重要。 airbnb 事例 airbnb はネイティブアプリから PWA サイトでのサービス提供に移行した。 その結果、初回訪問ユーザーの 65 % はウェブ経由になった。 成果: パフォーマンス（読み込み速度）
Font Awesomeを線画アイコンにした1300以上のアイコンセット・「Line Awesome」
Line AwesomeはFont Awesomeを線画アイコンにしたアイコンのセットです。Font Awesomeのカタログ全体を対象に線画アイコンを作成したそうで、その数は1300を超える量となっていますが、全てオープンソースとして提供されています 本プロジェクトは、以前ご紹介したゆるいイラストを作成できるVector CreatorやアニメーションアイコンセットのAnimated Iconsなどを提供しているicons8によるプロジェクトとなっています CDNも用意されており、手軽に利用できるようになっています 動作サンプル いくつかサンプル用意しました。使い方も簡単です <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/css/lin
オープンソースのReact.jsコンポーネントライブラリ「Flawwwless」
◆ Flawwwless https://ui.flawwwless.com/documentation/intro 紹介 「Flawwwless」は、yarn、npmでインストールできるオープンソースのReact.jsコンポーネントライブラリです。 100以上のアイコンや 5つのパターンが提供されたボタンとチートコード 新着通知に使うバッジや プログレスのほかフォームやモーダル、メニューといったUIコンポーネントは一通り揃っています。 高品質なアプリケーションを素早く作れるツールとして重宝しそうです。 ◆ Flawwwless https://ui.flawwwless.com/documentation/intro
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
マイクロソフト、クラウドのシステム構成図に使えるアイコン集を公開。Windows Azure以外にも一般的なシステム構成図で使えそう
マイクロソフト、クラウドのシステム構成図に使えるアイコン集を公開。Windows Azure以外にも一般的なシステム構成図で使えそう マイクロソフトは、Windows Azure関連のシステム構成図を描くために使えるアイコン集「Windows Azure Symbol/Icon Set」を公開しました。こうしたアイコン集はすでにAmazonクラウドがすでに公開しており、多くの利用者に使われてます。 Windows Azure用に作られてはいますが、一般的なシステム構成図のためのアイコンも多く含んでいるため、さまざまな場面で利用できそうです。公開された多数のアイコンの中から、よく使われそうなアイコンを集めてみました。 データはPowerPoint形式、Visio形式、PNG形式で提供されています。GitHubやBitBucket、DropBoxなどのアイコンもあるので、デプロイ関連の図を描く
もうアイコンには困らないぞ！ 11,245個のピクトグラムのアイコンがダウンロードできる -flaticon
10,000個以上あっても品質はどうよ、と思う人もいるかもしれませんが、サイトを運営しているのは当ブログともコラボしたfreepik.com！ 彼らのアイコンをはじめ、質の高いアイコンが揃っています。 ちなみに、コラボしたのはCelebrations Icon Setです。
iPhoneのホーム画面から特定の設定に直接アクセスできるショートカットの作成方法 | ライフハッカー・ジャパン
ジェイルブレイクしていないデバイスでも、iPhoneのホーム画面のアイコンは変更可能です。そこで今回は、「Spotlight検索」を使った、便利で美しいショートカットの設定方法をご紹介します。 デザイナーのJeff Broderick氏が、iPhoneの特定の「設定」にホーム画面から、すばやく直接アクセスできる方法を教えてくれました。もちろんジェイルブレイクする必要はありません。設定の手順は以下の通りです。 iPhone（もしくは他のiOSデバイス）から、このページにアクセスする。 インストールしたいショートカットをタップする。 使いたいアイコンのバージョンを選び（いくつか選択肢がある場合）、インストールボタンをタップする。 アプリのプロフィールページが読み込まれたら、インストールボタンをタップする。 ポップアップのアラート画面でインストールするかどうか聞かれるので、「今すぐインストール」
これだけあればシンプルアイコン探しには困らないかも！全部フリーのシンプルアイコンを一挙紹介！ | バンクーバーのうぇぶ屋
僕はとにかくシンプルなデザインが大好きです。無駄が無く、伝えることだけを伝えるあの潔さと、目的意識の高さが気持ちがいいです。もはや愛してます。 そんなミニマル変態な僕が集めたシンプルアイコン集。Evernoteのノートにびっしりになっていたので、せっかくだからここで全部ご紹介出来ればと思います！これだけあれば、まぁ今年は困ることは無いでしょう（たぶん）。自称ミニマル変態の僕は、まだまだ追加していくつもりなので、何か知っていれば是非教えてください！ なんだか一部、別にシンプルじゃないアイコンも混ざった気がしますが、その辺は軽く流してあげてください。僕のEvernoteの中は、人に見せられないくらい乱雑な分け方なので、整理整頓かねて、ちょっとこういう投稿増やしていこうかなと思います！ あと、大半は僕も商用利用を確認して利用したので、ほとんどはCommerciallyであることは確認していますが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用可能なアイコン・イラスト素材ならICON HOIHOI
http://miqata.com/t/14