今回はオールアバウトのnnmrが弊社サイトAll About Japanの速度を高速化した経緯についてまとめます。 All About Japanとは そもそもAll About Japan（以下AAJ）とは何かといいますと、弊社が提供している訪日外国人向けの日本紹介サイトです。 外国人向けサイトで、英語、中国語（繁体字）、中国語（簡体字）、タイ語、韓国語の5か国語に対応しております。 「Anime」「Izakaya」「Ninja」といったような特集や、実際に観光する人向けのモデルルート記事が特色です。 ■ 特集 (url : http://allabout-japan.com/en/tag/sushi/ ) ■ モデルルート記事 (url : http://allabout-japan.com/en/article/222/ ) 技術的な紹介 LAMP環境です。 （サーバー構成は後に記述

by Jeremy Thomas Let's say you have a product, a portfolio, or just an idea you want to share with everyone on your own website. Before you publish it on the internet, you want to make it look attractive, professional, or at least decent to look at. What is the first thing you need to work on? Content The purpose of design is to enhance the presentation of the content it's applied to. It might sou

「また新しいブラウザー？ もういいよ。」いえいえ、Bliskはちょっと違います。Web開発者向けに便利な機能を搭載した、開発者専用のブラウザーなんです。 日々のWeb開発にどんなブラウザーを使っていますか？　私がTwitter上で先日実施した投票の結果によると、開発者の4分の3は一般的なWebブラウザーを使っています。おそらく以下のような理由が想像できます。 1番よく使うアプリケーションである すでに自分が使いやすいように調整できている 優れた開発ツールが入っている（どれもそうですよね！） それらのユーティリティが快適である そもそも、好みのブラウザーである しかし、そのブラウザーはWeb開発作業に向いているのでしょうか？ 私もそうですが、いつもブラウザーにさまざまなアプリやツール、あとで読もうと思っている記事（……でもほとんど読みませんけどね！）のタブを57個くらい開いているのでは？　こ

[この記事は、米国 Mozilla HACKS ブログに投稿された記事 "Make the Web Work For Everyone" の抄訳です。] 数多くのウェブサイトがブラウザー互換性の問題を抱えたまま運営されています。特定のブラウザーでしか正しく動作しないという状況は、ユーザー体験を大きく損なう要因となります。そして、この問題はウェブ開発者のコミュニティが修正できるものなのです。 この 20 年でウェブは全く異なるものになりました。1996 年の時点でウェブサイト数は 100 万程度。これが今では 10 億を超える サイトが運営されています。そしてインターネットの利用者数も 5 千万人から、30 億人 へと膨れ上がっています。私たちはかつて想像されたよりも、はるかに膨大なコンテンツと接しています。それにアクセスする端末も、810 億台と膨大で、その種別は 24,000 以上と非常

Profile twitter Facebook website spicagraph(スピカグラフ)角田綾佳 大阪枚方でweb・DTPデザイン制作をしているフリーランスです。イラストや参考にしたサイトのご紹介、アプリケーションの技術向上を目指すブログです。ツッコミ・アドバイスお待ちしてます！

Webサイトの記念的なエントリーやページを作成する際には縦向けのタイムラインがよく使われます。Webページは縦にスクロールされるものが多いので、一番上が過去とすれば、スクロールするごとに経過時間をたどれるようになります。 そんなサイトを作る際に使えるのがBlueprint: Vertical Timelineです。センスの良いタイムラインページが作成できることでしょう。 Blueprint: Vertical Timelineの使い方 Blueprint: Vertical Timelineのデモです。日時とコンテンツ、アイコンが並んで表示されています。 レスポンシブ対応です。 スマートフォンサイズにしても見やすいです。 Blueprint: Vertical Timelineはシンプルなデザインですが、それだけに見やすいのではないでしょうか。この手のコンテンツはよく使われますが、イチから

Webデザインのセンスを磨く方法の一つは、他人の作ったものを数多く見ること。 コンテンツの見せ方やレイアウト、繊細なアニメーションを使ったインタラクションなど、デザインのアイデアが素晴らしい、最近気になったチェックしておきたいWebサイトを紹介します。 Wrk フランスのWeb制作会社のサイト。ぱっと見、普通の矩形パネルに見えますが、CanvasとSVGを使った弾力性に富んだレイアウトやグラフィックは非常に楽しめます。 縦長ページの構成は新感覚で、ナビゲーションのスマホ時にフッタのコンテンツと合体するのはいいアイデアですね。 Booounce! ショートムービーやアニメーションGIFをコレクションしているサイトで、バウンスの名のようにバウンドを伴うエフェクトが気持ちいいです。ナビゲーションの細かいアニメーションをはじめ、一覧表示、進むと戻る、作品の見せ方、なにもかもがインタラクション性に優

.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads

モダンWeb：たった今と、ほんの少し未来のはなし～「de:code 2016」セッションレポート～ 佐川 夫美雄（Ashiras, inc.） この記事は、「de:code2016」のセッションレポート、日本マイクロソフトエバンジェリスト物江修氏による「モダンWeb:たった今と、ほんの少し未来のはなし」です。講演内容を再現していますが、ニュアンス等伝えきれない場合があるかもしれません。ご了承ください。 モダンWebとは 昨今、様々なところで「モダンWeb」という言葉を聞くが、その定義は曖昧で意味するところの範囲が広範囲に及んでいるためではないかと考える。多くの場合、「モダンWeb」という文脈で語られている内容は次の４つの事柄で語られている。 モダンなWebシステム モダンな開発手法 モダンな標準機能 モダンなアプリケーション 単にモダンWebアプリケーションと言った場合にはこれらいろいろな

LPなどの視覚的なデザインを売りとしたサイトの場合、高い水準でカンプ通りの実装が求められる。自分では狂いなく再現したつもりでも、どこかでずれていてデザイナーから指摘されることもしばしばある。この記事では、1デザインカンプの徹底再現（2 ピクセルパーフェクト）の必要性と、そのための便利なMacOSXアプリケーションを紹介する。 要約 他人の作ったデザインを高いレベルで再現するには、ピクセルパーフェクトを狙うくらいの意気込みが必要 その為には、ブラウザへカンプを重ね合わせるチェックが有効 Helium/Mapture/LayxerXは、フローティングと透過機能を持った非常に便利なアプリケーション なぜピクセルパーフェクトを目指すのか Webサイトという技術の特性上、フォントが違ったり、組版の仕様が違ったり、文字サイズのデフォルト値が違ったり、モニタの色見が周辺環境や端末スペックによって違ったり

こんにちは、大阪開発部のブノアです。 この間、サイボウズの採用情報ページのアニメーションについてグーグルデベロッパーエキスパートの矢倉さんにツッコミを頂きました！今回はそのアニメーションをするするさせたよという話をしたいと思います。 経緯 ４月頃、レンダリングパフォーマンス勉強会を社内で開催しました。東京開発部の鉄平がその話をツイッターで呟いたら矢倉さんにツッコミを頂きました。 社内でレンダリングパフォーマンス勉強会を開催中。will-changeの効果絶大なデモで会場がどよめいた。— teppeis (@teppeis) April 15, 2016 https://t.co/t2Irugs85V 「生まれたアプリは15万件」の動くアイコンのところが別レイヤーになってするする動くようになる日も近いということか https://t.co/ki5VSvbumY— Masataka Yakur

画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け

2016年4月19日にシナップ社内で開催されたアクセシビリティ勉強会で使用したスライドです。Read less

最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。

2016年 03月 07日 増え続けるエディタの中からAtomを選んだので、設定したパッケージのリストと管理方法について書いておきます カテゴリ： PCツール タグ：エディタ 長らくSublime Textを使ってきたんですが、色々あってエディタを乗り換えようと思い、この度Atomを選択して色々と設定したので記事にしておきます。 Atomを選んだ理由 パッケージリストと管理について インストールしたパッケージの紹介 設定 Githubでの公開 最後に Atomを選んだ理由 理由としては 周りで使っている人が増えている オープンソース EditorConfigに対応している 日本語の扱いが結構良さそう という点です。周りで使ってる人が多いとトラブル時や不明点などの、情報交換がしやすいので良いです。ネットで検索するというのは当然するんですが、なんか普段のコミュニケーションで、ここがね〜とかって

TalkNote Vol.8「TalkNote × Frontrend」 -（2013年6月8日開催）で使用したスライドです。 Webページを遅くしているボトルネックの1つは、レンダリングです。 昨今、フロントエンドにおけるパフォーマンスの最適化はレンダリングの話題にシフトしつつあります。 特に非力なデバイスでは、ページロードやスクリプトの速度改善よりもレンダリングまわりの最適化に注力したほうが良い効果を得られるケースもあるでしょう。 問題になり得る事例を元に、いくつかのTipsをご紹介させていただきます。Read less

UI Crunch #8 発表資料です

まずはこちらの動画をご覧ください。 こちらは娘が２歳半の頃に児童館で撮影したものです。 かわいい・・・ 生後1000日近くともなると、子どもは自分で絵本を読むようになります。 並行してひらがな覚え始めるので、親としてはガンガン絵本を読んでほしいのですが、実際には挿絵に合わせて適当な話を創をして遊んだり、まじめにひらがなを音読し始めたかと思えば数ページも読まないうちに次の絵本を引っ張り出してきては読んで、飽きてまた違う絵本に手を出すだけで、一向にちゃんと読んでくれません。 ちゃんと読まない原因として、もしかして絵本に動きがないから飽きてしまうのでは、と思った自分は もしもパパが作った動く絵本があったら、娘は大喜びして本を読むようになり、どんどん集中力が身について、あいうえおもマスターしてパパ大満足！なんてことになるんじゃないだろうか。 なんてことを考え、実際にWEB絵本を作成して娘に見せるま