フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
WEBデザイナーはAIに職を奪われるぞ-FIREDROPの脅威-
「え？AI？アドビのイラレがどうしたの？」と思った、そこのWEBデザイナー。殺られるぞ。 illustratorの話ではない。人工知能の話だ。 恐るべきAI「FIREDROP」 昨日ホットエントリーを眺めていたら、こんな記事を発見。 bita.jp なんと、この「FIREDROP」というAI、テキストを入力してボタンをクリック後、わずか60秒でWEBサイトのページ構成とレイアウトを作ってしまうそうだ。 現在は、まだ日本語化はされていない。日本のWEBデザインは海外とは異なる点も多いので、すぐに日本のWEB制作に影響を及ぼすとは考えにくい。 しかし、いずれは日本語化されて日本のWEB制作で運用される日が来るのは間違いない。もしくは「FIREDROP」でなく、同じようなAIが日本で登場する可能性だってある。 WEB制作だけではない。この「FIREDROP」はユーザーのニーズを学習し、自動でデザ
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
Atomic Design
Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook. We’re not designing pages, we’re designing systems of components.—Stephen Hay As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. A lot has been said about creating
横にはみ出すナビゲーション
今回(2014年9月)のAppleのウェブサイトのリニューアルにはいくつもの興味深い点がある。ナビゲーションの二本線とバツ印が共にインラインのSVGなことなどもそうだし、多くのポーションがモダナイズされたにも関わらずPrototype.jsを継続利用したこともすごく気になる。その中でも一番気になったのは狭い画面向けの横にはみ出すナビゲーションだ。 これまでの通常は隠されている狭い画面向けのナビゲーションの多くは、次の3つに大別されていた。 ドロップダウン オーバーレイ ドロワー 極稀にアイコンのみのコンパクトに横へ並べたものもあったが、いずれの場合もナビゲーションの項目は縦に並んでいることがほとんどだ。一覧性に富み、アクセス性が高く、ユーザーの学習コストも低い。 これに対して横にはみ出すナビゲーションは、項目を画面外にはみ出すように横に並べ、スワイプでスクロールして探させるという形のものだ
mydevice.io : web devices capabilities
CSS3 flexbox grid layout grid layout (old) position: sticky regions @supports will-change pointer events calc() viewport units hover media query pointer media query background blend mode background-size: cover object-fit font ligatures appearance filters masks scroll snap points shapes hyphens HTML5 / JS flash video webgl canvas srcset <picture> inline SVG webp jpegxr geolocation matchmedia() webs
HTML5 Conference 2013 レンダリングパフォーマンスお話してきた！
HTML5 Conference 2013 で、僭越ながら1セッション担当させていただきました！やっっったら、奥行きの深い部屋で、後ろのほうの方にはスライド見えづらかったかもしれません。ごめんなさい。部屋の奥行きのわりに、スクリーン小さいという不遇がありました orz ということで、スライドのURL共有とか、イベントの感想とかです。 Rendering Performance 動画 Webフロントエンドのパフォーマンスは、今やページの初期表示を早くすることだけではありません。昨今のHTML/CSS/JavaScriptを駆使したWebコンテンツを、スムーズに動かすには、ブラウザのレンダリング(描画)処理について知る必要があります。このセッションでは、レンダリング上のよくあるボトルネックの見つけ方と対処を中心に、最適化Tipsをお届けします。 ちと粗いのですが、今回の参考URLリストです。
Re: レスポンシブWebデザインのメリット、デメリット比較まとめ
2012年11月13日 著 レスポンシブWebデザインのメリット、デメリット比較まとめ - Photoshop VIPという記事がかなりはてブられているようなのですが、個人的に「そこはそうじゃないんじゃないかなぁ」と思うところが複数あったので、覚え書きしておきます。もっとも、当該記事の元ネタはThe opportunities and challenges of responsive design | Webdesigner Depotという記事なので、そちらに対する違和感、ということになるかもですが。 メンテナンスが楽？ レスポンシブWebデザイン（以下「RWD」）のメリットの筆頭に挙げられているのがこれなんですが、必ずしもそうとは言えないと思います。CMSのような仕組みの動いている環境であれば、デバイスごとに複数のHTMLファイルを出し分けていたとしても、RWDのようなワンソースマルチ
Basic/Digest認証のサイトではapple-touch-iconが使用されない - chocoringの日記
Basic/Digest(ベーシック/ダイジェスト)認証などが設定されていると、apple-touch-icon が使用されない模様。 開発用の試験環境で確認中にちょっとハマった。（確認バージョンは、iOS5のSafari） linkタグでapple-touch-iconとしてpngファイルを指定したり、デフォルトで使用されるはずのドキュメントルートのapple-touch-icon.pngなどのファイルを用意してもまったく使用されることはなく、ページサムネイルがホーム画面アイコンとして使用されてしまう。Apacheのログファイルをみると、デフォルトで使用されるはずのpngファイルもろもろをiOSのSafariが一生懸命取得しようとしているが、のきなみ 401 エラーで残念なことになっているのがよく分かる。 10.0.0.1 - - [09/Nov/2011:00:01:42 +0900]
W3Q - Web業界で働く方専用のQ&Aサービス - Tters
質問です。 とあるメーカーのECサイトを運営する事業部のインハウスでコーディングをしています。 特集ページなどを作っているのですが、特集ページから商品ページに飛んで購入してもらう場合、 成果を測る指標としてどこの数値を見ていますか？ 商品ページだと測りやすいのですが、通過したページだと測りにくいなと思っています。 現状の所、GA4の探索のファネルデータで測るしかないかなと思っています。 しかしこの方法だとそのページを見てまったく別の商品を購入した場合との区別がつかないと思っています。 このほか良い計測方法などありましたら教えていただきたいです。
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
タイトルタグを作るときに意識したい７つのポイント | ウェブ力学
タイトルタグは様々な観点から見ても最も重要なHTMLタグといっていいでしょう。ここでは、サイトのトップーページと個別記事（サブページ）のタイトルタグを作成する場合に意識しておきたいポイントを紹介します。 １．ターゲットとするキーワードを含める SEOの観点からもクリック率を高める観点からもタイトルタグにキーワードを含めることは大切です。 数年前に比べると、特にYahoo!においてタイトルタグにキーワードを含めた場合のSEOスコアが弱くなった印象がありますが、それでも最も重要なタグであることに変わりはありません。また、検索されたキーワードは強調表示されますので、検索結果で目立つことになります。 SEO狙いで無理やりキーワードをタイトルの先頭に入れようとする人もいますが、無理してまで先頭に拘る必要はないでしょう。 ただし、キーワードが前方にないと検索結果で目立たなくなってしまいます。検索結果で
iPad用のサイト作成に覚えておくこと色々:phpspot開発日誌
Technical Note TN2262: Preparing Your Web Content for iPad appleのサイトにiPad用のサイト作成準備のためのページが上がっていました。 USの発売日に３０万台発売ということで、日本でもそれなりに売れることが予想出来ますが、今後iPad用にページを最適化する場合に覚えておくとよさそうです。 メモついでにご紹介。 UserAgent UAはiPadが入ってWebKitベースなので、AppleWebKit となるみたいです。 Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 プラグインは使わない Fla
MT5で中・大規模サイト開発するためのシステム設計図 | ユージック
MT5で中・大規模サイト開発するためのシステム設計図 2010年2月4日 MT5の機能をフルに活用して100ページ以上、4階層以上のサイト構築の際のシステム設計図をまとめてみました。 要件定義 100ページ以上 サイト構造は4階層まである 各階層にインデックスページを用意する インデックスページも含めて出来る範囲クライアントが編集できるようにする カテゴリーやフォルダ、ページを後からでも追加できるようにする PCサイトと連動したモバイルサイトも自動構築で作成する 「サイト」だけで構築する際のハードルが高い MT5からは大元である「サイト」を作ってから「サイト」と連動した「ブログ」を作るという手順になります。 「サイト」だけでもMTIｆのような分岐をたくみに使うことで4階層まで対応したサイト設計は可能になりますが、多々問題点が発生してしまいます。 問題点 テンプレートの設計が複雑になってしま
CMSにデータベースを用いると制作が楽になる……とは限らない | 落とし穴だらけ！CMS都市伝説
落とし穴だらけ！CMS都市伝説 第四回 CMSにデータベースを用いると制作が楽になる……とは限らない いまやウェブサイトの運営にCMS（コンテンツ管理システム）は欠かせない。サイトのコンテンツ更新コストの削減、トラブルのないワークフローの確立、サイト全体にわたるデザイン変更、他のシステムとの連携によるコンテンツ表示など、CMSで実現できることは多く、ウェブサイト運営の要ともなり得る。 しかし、CMSは単に導入すればいいものではない。サイトの性質や組織によってどのCMSを選べばいいのかや注意すべき点などは異なる。間違ったCMS導入をしてしまうと、コストばかりかかって効果を得られない結果を生んでしまう。成功と失敗を分ける要因は何か。世にはびこるCMSに関する「勘違い」「理解不足」による都市伝説をあげながら、正しいCMS導入を解説しよう。 石村雅賜（株式会社ビジネス・アーキテクツ） CMSにデー
IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パフォーマンスチューニング の記事一覧 | DevelopersIO
http://team-pag.interprism.co.jp/member/noguchi/blog/2010/10/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%81%AE%E3%83%A6%E3%83%BC%E3%82%B6%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%82%92%E7%BA%8F%E3%82%81%E3%81%A6%E3
HTML+CSS templating