Webpagetestから始める継続的パフォーマンス改善
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
Words
This is a web page. There's not much here. Just words. And you're reading them. We've become obsessed with fancy designs, responsive layouts, and scripts that do magical things. But the most powerful tool on the web is still words. I wrote these words, and you're reading them: that's magical. I'm in a little city in British Columbia; you're probably somewhere else. I wrote this early in the mornin
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
「」や『』など約物が半角にできる、Yaku Han JP のご紹介 - デザイナーのタネあかし
標準のフォントでは WEBの文章での「」や『』など約物の空きが気になります。 それを解消できる約物半角専用のWebフォント、Yaku Han JP をご紹介します。 約物半角専用のWebフォント、Yaku Han JP デザイナーの Qrac（クラク）さんが Noto Sans Japanese をベースに、特定の約物のみの半角フォントを制作したものが「Yaku Han JP」です。 現在はCDNもあり、とても簡単にサイトへ導入することができます。 とても軽量なフォントでなので、ダウンロードして各自サーバーへUPして使っても何ら問題はないと思います。 “Yaku Han JP”は、Web上の日本語テキストに含まれる約物を半角にする「約物半角専用Webフォント」です。GoogleのNoto Sans Japaneseをベースにしており、7ウェイト対応が可能となっています。 Yaku Han
The modern web design process: creating sitemaps and wireframes | Webflow Blog
Hillary Pitts’ web design sitemap example breaks down an ecommerce site into its most basic building blocks.Have you ever looked out of an airplane window and seen the outline of a brand-new subdivision taking shape below? It’s kind of like a sitemap: a footprint signaling where structures need to be built, as seen from 30,000 feet. A sitemap provides a diagram of the site’s hierarchy and shows wh
The Many Tools for Shape Morphing | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their
JavaScript is not available.
Something went wrong, but don’t fret — let’s give it another shot.
2017年のWeb標準 | gihyo.jp
株式会社ミツエーリンクスの渡邉卓です。昨年の「2016年のWeb標準」と同様に、2017年もWebコンテンツのフロントエンド設計および実装に関連した各種標準や、周辺領域の動きに関する短期的な予測を寄稿させていただきます。 2017年のWeb標準については「HTML 5.1およびHTML 5.2 - HTML Living Standardとの乖離」「IE9のサポート終了」「CSS Flexible Boxの利用増加 - ただし旧仕様とバグに注意」「ECMAScript 2017」「各Webブラウザ、Adobe Flashのブロック開始」をキーワードとして取り上げます。 HTML 5.1およびHTML 5.2 - HTML Living Standardとの乖離 2016年11月1日、HTML 5.1がW3C勧告になりました。しかし、各ブラウザベンダーは（Microsoftを除いて）
Web制作の流れをもう一度おさらいしてみる。20のステップ
「新しく会社を作った」「ウェブサイトが古くリニューアルしたい」「サイトをスマートフォンに対応させたい」などウェブサイトを作る理由はさまざまです。大体の流れはわかっているのですけど、詳細にはわからないというのが、web制作の流れ（ワークフロー）ではないでしょうか？ここでは、もう一度、おさらいしてみましょう。 大まかな流れは次の通りです。できるだけ初心者にもわかりやすい言葉を使ったつもりですが、ウェブサイトを作る上ではぜひ覚えておいて欲しい専門用語はあえて括弧書きで説明を加えています。業者によっては、若干異なる事があると思いますが、基本的な流れは以下の20のステップです。 競合サイトや参考サイトを調べる アクセスログを解析する 新しいサイトのペルソナを作る 新サイトの他社に対する差別点や強みをまとめる 新サイトが伝えたいメッセージを考える 新しいサイトのコンセプトをまとめる スマホへの対応、C
ウェブ・フォントの読み込み - Weblog - Hail2u.net
ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり、どのようなメリット、そしてデメリットがあるのだろうか。 TypeKit等に頼るにしろ、自前でホスティングするにしろ、もちろん最終的にはウェブ・フォントをブラウザーに送りつける必要がある。読み込みとはまさにその部分の話だ。話がややこしくなるので、多様な実装を意識した安全な書き方などについては触れない。 普通に@font-face定義を利用 @font-face定義をただ普通に書く場合のメリットは、
お金をかけてプロに任せれば成功する！？ オウンドメディアの運営に潜む5つの落とし穴 | 優良顧客を育てる！ オウンドメディア運用入門
企業がオウンドメディアを運用するにあたって、社外の専門スタッフと組むことは決して間違った選択ではありません。むしろ社内にWebマーケティングやコンテンツ制作の専門スタッフがいなければ、社外のプロと組むべきでしょう。しかし、その際に気を付けたいのが、いわゆる「外注丸投げ」です。あなたはこれまで下記のような経験はありませんか？ 1つでも当てはまることがあったら要注意です。「外注丸投げ」の落とし穴にハマっています。 コンテンツ案の千本ノック 根拠がなくなんとなく好き、嫌いでコンテンツの良し悪しを決めていませんか。 バズ狙いのおもしろいコンテンツをめざす 売上増加など本来のKGIから脱線してもおもしろければOKとしていませんか。 最先端のデザインや機能にウキウキする 見た目のクリエイティブでなんとなく自己満足できればOKとしていませんか。 結果を焦って広告に頼る 長期的エンゲージメントより短期的な
Webサービス開発の変遷と現在
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
Font Size Idea: px at the Root, rem for Components, em for Text Elements | CSS-Tricks
Font Size Idea: px at the Root, rem for Components, em for Text Elements Me, for the last year or so: “rem‘s are so cool! I’m gonna size everything with them, that way I can adjust the font-size on the root element and everything will scale with it!” It was a nice dream. And it wasn’t a disaster. That’s what I’m doing right now here on CSS-Tricks and this is how it plays out in a very simple scena
Webサービス開発現場から / 近頃の開発のやり方 ･･･ Github と Pull Request とコードレビュー - naoyaのはてなダイアリー
先日プレスリリースが出たのですが、KAIZEN platform という会社で技術顧問などをやっています。それから、一昨日自分も出たWebアプリケーション開発に関する勉強会 (資料) を開いたじげんという会社でも少し前から同じように顧問のような形で携わっています。 自分が関わっている会社のPRも含めて、すこし、2013年現在のWebサービス開発の現場感、やり方みたいなものを書いてみたいと思う。ただ、自分の利益があるところの話だけではフェアではないので、Webエンジニアならよく知っているであろう Qiita を運営しているインクリメンツの様子も合わせて紹介する。 KAIZEN platform KAIZEN platform が提供しているサービスは planBCD という A/B テストの SaaS で、Webサイトのコンバージョンだとかを画面の構成要素を変えて効果測定したいとか、そういう
18 stunning parallax scrolling websites
Web design trends come and go, but parallax scrolling websites seem to be here to stay. The parallax scrolling effect revolutionised web design in around 2010, but it still remains in use since it's such an effective way to create a seamless and immersive user experience. Making a parallax scrolling website involves making the background layout move more slowly than the foreground elements when th
デザインのインスピレーションが得られる最強Webサービス7選
毎日のようにデザインをしていると、良いデザインが思いつかなかったり、前回と同じようなデザインが完成してしまったりと、どうしてもデザインに行き詰ってしまうことがありますよね。 私自身まだまだ未熟なこともあり、デザインに行き詰ることはよくあります。そんなとき、私は極力仕事中でもカメラ片手にボーっと散歩に出たりして、どうにかインスピレーションを刺激させようとするんですが、散歩に出られないときや、散歩に出ても何も思い浮かばなかったときなどは、いくつかのWEBサイトを見てインスピレーションを刺激させます。 ｢インスピレーションの刺激になるぞ｣と思ってブックマークしたサイトはいくつもあるんですが、今回はその中から、とくに皆さんに紹介したい利用頻度の高い7つwebのサービスを紹介したいと思います。ではどうぞ！ 1.Dribbble Dribbble これはかなり有名なサイトですね。いまさら紹介するまでも
Web Typography Sucks | Slides and notes from SxSW 2007
Web Typography Sucks South by Southwest 2007 Richard Rutter – Clearleft Mark Boulton – Mark Boulton Design Slides PDF with notes (4 Mb) PDF without notes (4 Mb) Audio Recording of the session (27.2 Mb mp3) from the SxSW podcast Transcription of podcast audio Online typography resources Elements of Typographic Style Applied to the Web A List Apart typography articles The Trouble With EM ’n EN (and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Fundamentals — Google Developers
University Websites: Top 10 Design Guidelines