[レベル: 中級] 【UPDATE】 この記事は事実を正しく反映していないことが判明しました。 こちらの記事で説明しています。 ページの読み込み速度をモバイル検索のランキング要因として用いる “Speed Update”（スピード アップデート）を Google は今月導入する予定です。 Speed Update は、本当に遅いページだけが影響を受けるアルゴリズムだと思われていました。 しかしながら実際には、速ければ速いほど評価が上がるアルゴリズムになっているようです。 Speed Update では、読み込み速度が速いと段階的に評価が上がる Speed Update の導入を事前アナウンスした公式ブログの記事は次のように説明していました。 The “Speed Update,” as we’re calling it, will only affect pages that delive

HTML, CSS, JavaScript それぞれのロード時間が First Paint に与える影響を検証して整理するHTMLCSSJavaScriptGo tl;dr First Paint はウェブページの何らかが描画されたタイミングのこと。これが遅いということは、初回の真っ白な状態が長いということ。 First Paint は Chrome Developer Tool の Audit で簡単に確認できる。 HTML は描画の起点になるので、ロード時間はそのまま First Paint Timing の遅延になる。 CSS は描画に必須なので ロード時間はそのまま First Paint Timing の遅延になる。 JavaScript は同期で読み込むと、ロード時間がそのまま First Paint Timing の遅延になる。 JavaScript は非同期で読み込むと、ロ

日米通算1億ダウンロードで日本最大フリマアプリ「メルカリ」。今回はメルカリの小嶋仁司さん、坂本結衣さんにメルカリのフロントエンドエンジニアたちがどんな技術や体制で開発しているのか、HTML5 Experts.jp白石俊平編集長が直撃インタビューしてきました！ メルカリで重要な役割を果たしているWebView 白石：お二人は、メルカリでどんなお仕事をされているんですか？ 小嶋：私は2015年10月に入社して、アプリケーション内のWebViewページの開発を担当してきました。具体的には大規模なトラフィックがある取引画面や、配送サービス「メルカリ便」に新たな運送会社を追加したり、「大型らくらくメルカリ便」の配送機能を拡大したり、集荷サービスなどの開発も行いました。 白石：ビジネス的に重要な部分を作っていらしたんですね。 小嶋：技術としてはいわゆるHTML5、CSS3、JavaScriptを使った

フリマアプリ大手のメルカリが6月19日、東証マザーズに上場した。2013年7月のサービス開始からわずか5年。時価総額でマザーズ首位に躍り出たベンチャーは、調達資金をテコに急ピッチでグローバル化を進める。けん引する山田進太郎代表取締役会長兼CEOとはどんな人物なのか。なぜ世界を目指そうとするのか。その実像に迫る。（井上理／Yahoo!ニュース 特集編集部） 「ここまで必死にやってきたので、自分でも整理できていないことが多いのかもしれません。いい機会なので、何でも聞いてください」――。今年4月、東京・六本木ヒルズのメルカリ本社を訪れると、創業者で代表取締役会長兼CEOの山田進太郎はそう言って出迎えた。メルカリが6月に東証マザーズに上場することは正式発表前だったが、既にこのとき多くのメディアがそう報じていた。もちろん、山田は上場について具体的なコメントをすることはなかったが、この後に予定された大

事業や人材の開発にデザインの力が重要になってきていると述べるのは、ハーバード大学デザイン大学院を卒業し、早稲田大学の教育事業「WASEDA NEO」で事業プロデュースプログラムのコーディネーターを担当する各務太郎（かがみ たろう）氏。自身がハーバード時代に経験したNASAへの問題提起を始め、takramやソイレントといった具体的な事例を織り交ぜながら、日本とアメリカでのデザイン教育の違いが起こすイノベーションに差を生み出していることについて語りました。 話はハーバードデザインスクールでのデザイン手法を取り入れた事業プロデュースの実践プログラム「みらいブレンディピティ」へと移り、アクションにまで落とし込めるプログラムとはなにかについての論を展開します。 AirbnbもPinterestも建築家が生み出した 各務太郎氏：おはようございます。各務太郎と申します。本日はご足労いただきまして誠にあり

フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。 一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。 下記のデモはJavaScriptは無し、CSSのみで実装されています。

フェンリルのプランナーの柴田です。 デザイナーではない人にとって、デザインの良し悪しを判断するのは難しいものですよね。「なんとなく良い」「ピンとこない」まではわかるのですが、「なぜ良いのか」「なぜピンとこないのか」を言葉にするのは、それなりの経験と知識が必要となります。 しかし、そこをきちんと言葉にできないとデザイナーへのフィードバックは難しく、適当な指示で無駄な作業をお願いすることになります。何よりプランナーは自分でプレゼンすることが多く、デザインの魅力をクライアントに十全に伝えることができなくなります。この「デザインを言葉で説明するの難しい問題 」は、最もありふれていながら対処が難しい問題です。 今回はデザインの勉強もしていない僕が、どうにかデザイナーさんやクライアント様に対してデザインを言葉で議論する時の方法論を整理してみたいと思います。 デザイナーもデザインを説明するの難しい実はデ

青田努さんとは、人材業界出身者は知らない人はいないのではないでしょうか？ 私が青田さんを知ったキッカケはオンラインスクール「Schoo（スク―）」で講師を務められていたのがきっかけです。 青田さんのご経歴は早稲田大学大学院卒業後、リクルート、アマゾン、「日本の人事部」を運営しているアイ・キューなど様々な企業をへて、現在はＬＩＮＥにて人事を担当されていらっしゃいます。 まじでこれやと思ってます。 pic.twitter.com/gpyiyl7L1R — 融子 (@kinyuuchan) June 17, 2018 そんな、青田努さんの考えがツイッターでも10万程のイイネを集めている大旋風を巻き起こしています。ビジネスマンが是非とも知っておきたい学び、個人的メモの意味も込めて今回は簡単にまとめてみました。 青田さんのツイッターはコチラ 教え方がうまい人は何をしているのか？お客様、上司、部下に物

使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく

融子 @kinyuuchan 青田努さんがまとめたもので、私自身が後輩指導の際に意識したいとともに上司からもこのように指示をあおぎたいなという思いでツイートしました。まわしもんでもなんでもないんですが、こんなに拡散されているのは同じ思いの方がそれなりにいる証拠だなと思いました🌸 2018-06-18 11:37:11 リンク www.wantedly.com 【図表】教え方がうまい人は何をしているか（ヘタな場合はこの8つのどれかができていない） | 株式会社アイ・キュー 「教える」というのは業界や職種を問わず大事なスキル。でもその行動品質はさまざまですよね。教え方がうまい人たちに共通するのって、多分この8つなんじゃないかと思っています。いかがでしょうか。 6 users 76

僕の中で仕事人生に影響を与え続けてくれている三大COO（と勝手に呼んでる人たち）がいる。 一人目がアカツキ共同創業者COOの香田哲朗くん、二人目がフリークアウト(元)COOで現hey代表の佐藤裕介さん、そしてメルカリ社長兼COOの小泉文明さんだ。 それぞれ社長もできる人だが、COOとして事業及び組織の構築も構造的分析もハイレベルにできる。恐ろしく広域のアビリティを持ち、バイタリティとバランス感覚に優れ、超人的な仕事量をこなす人たちである。 そのうちのお一人であるメルカリ小泉さんと1on1させてもらう機会があり、その話が組織の課題に悩む他の人にもとても有用だと思ったのでメモを公開させていただくことにした。（ほんとにメモなんで乱文ご容赦ください） ツクルバでは組織・文化づくりに社をあげて徹底的に投資していく方針なので、非常に参考になった。 ＊＊＊以下メモ＊＊＊ [お題] メルカリで急激に組織を

Become a Better Designer in 100 DaysDaily UI is a series of Design Challenges and Surprise Rewards sent out everyday. Get Started for Free100% FREE. No Spam. No Affiliate Links. No data sharing.

Stephenはオンラインのマーケッターおよびデザイナー、テクノロジーに詳しいブロガーです。彼はロサンゼルスを拠点とするSPINX Digital Agencyと関連をもっています。 ユーザー体験の観点から言うと、フリクション（摩擦）とはユーザーが目標を達成するのを阻むすべての要因のことです。 フリクションはユーザーとデザイナーの双方にとって重大な問題となります。なぜなら、フリクションはコンバージョンを低下させ、直帰率を上昇させて、ユーザーがタスクをやめてしまう要因となるからです。言いかえると、あらゆる優れたWebサイトとは正反対のものです。 ユーザー体験のフリクションは、あらゆるユーザーインタラクションに大きな被害を与えるでしょう。そのため、どんなに優れたインターフェイスであっても使いにくいものになってしまいます。反対にフリクションのないWebサイト体験は、シームレスで自然に理解できるイ

現役高校生プログラマーの率いるワンファイナンシャルは6月12日、お財布に溜まっているレシートを瞬時に現金化できるアプリ｢ONE（ワン）｣の提供を始めることを明らかにした。スマートフォンのカメラ機能を使ってレシートを撮影すれば、すぐにアプリ内のウォレットに10円が振り込まれるという。振り込まれた現金は銀行の手数料分以上になれば、国内のほぼ全ての金融機関で好きなタイミングで引き出すことができる。 ワンファイナンシャルCEOで高校3年生の山内奏人さんは｢レシートには究極のいろんなデータが含まれている。いつ、どこで、誰が何をいくら払って、いくらお釣りをもらって買ったのか。一人ひとりの購買行動やパターン分析ができるようになる｣と話す。蓄積データをメーカーなど企業向けに販売していく狙いがある。 山内さんは小学生の時に独学でプログラミングを始め、国際的なプログラミングコンテストやビジネスコンテストで数々

Trianglify.io is a tool for generating low poly triangle patterns that can be used as wallpapers and website assets.

コンポーネントにして設計しようとか言われていますが、手法・手段の話になりがち。肝心の考え方がないままだと、抜け漏れも多くなります。 自分が携わる仕事がたとえデザインだけだったとしても、全体像を見極める能力、そこからパターンを見つけ出したり、原因と結果の関係性を理解することは重要です。システム思考はデザイナーの課題解決の能力をワンステップ引き上げるだけでなく、エンジニアとの会話もしやすくなります。本セッションでは、次の日から役立つシステム思考の基礎を学習します。

どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単にクオリティの高いデータの可視化（データビジュアライゼーション）を実現することができる無料サービスのご紹介です！ アニメーションも自動生成されるうえ、ネット上に公開したり自分のブログやサイトに挿入することも簡単にできます。 また、上級者向けにJavaScriptを活用した独自テンプレートの作成機能が用意されているなど、自由度の高いサービスなのでご興味ある方はぜひトライしてみてください！ 【 Flourish 】 ■「Flourish」の使い方 それでは、実際に「Flourish」を触りながら、どのように始めたらいいのかを見ていきましょう！ まずは、サイトのトップページにある「Sign up」から無料のユーザー登録をしておきます。 メールアドレス、パスワード、ユーザー名を入力すればすぐに登録は完了します！ すると、自分専用の「マ

フロントエンドの制作者は、コードの入力や操作に多くの時間を費やします。最高のパフォーマンスを得るには、エディタを快適に操作する方法を知っておく必要があります。Web制作において、特に有用なエディタの操作方法を紹介します。 Sublime Text, VS Code, Atom, Brackets, Vim, Emacsなど、ほとんどのエディタで操作可能なテクニックです。 Text editing techniques every Front-End developer should know 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 2つのコードを入れ替える 2. エディタでコミット 3. タスクランナーの実行 4. サイドバーを開閉 5. コードを移動 6. 行単位の選択 7. ぎざぎざに選択 8. 選択したワード

社外のコミュニティ活動で広がった興味の対象 まずは、エンジニアとして最初の就職をした私が、どのようにデザインに対して興味を持ったのかについてお話しします。 大学卒業後、新卒として3,000人規模のSIerに就職し、主にJavaとLinuxを用いたシステム開発や、インフラ構築を行いました。入社して3年目くらいに、全社の技術支援を行う部署に異動し、プログラミングやパフォーマンスチューニングなどを経験しました。SIerに所属していた8年ほどの間、デザイナーと一緒に働くことはありませんでした。 興味の対象が広がったのは2011年ごろ、外部の勉強会などに積極的に参加するようになってからです。当時のSun Microsystems（2009年にOracleが買収）によるJavaの勉強会や、Webクリエイター・エンジニア向けコミュニティ「html5j」が主催する勉強会「HTML5とか勉強会」などで、多く