ハイパフォーマンスCSS3アニメーション——60fpsを実現するベストプラクティス
すっかり普及したCSS3アニメーション。ハイパフォーマンスなアニメーションを実現する、ちょっとした書き方のポイントとは？ モバイルアプリケーション内の要素をアニメーションさせるのは難しいことではありません。でも、この記事を読めば、さらに適切な方法でアニメーションさせることができます。 最近、多くの人がモバイルでCSS3アニメーションを使っていますが、正しく使っていない場合が多くあります。開発者はしばしばベストプラクティスを無視します。なぜなら、多くの人はなぜCSS3アニメーションが存在し、なぜ急速に浸透しているのかを理解していないからです。 モバイルデバイスのスペックの幅はとても広いので、もしコードを最適化しなければ、シェアが高い端末では標準以下の体験しか提供できないでしょう。 注意：いくつかのハイエンドなデバイスは可能性の限界に挑んでいますが、世界中の多くの人はそうしたスペックモンスター
メールを重視する一休.comがSendGridの障害から学んだこと
5月29日、構造計画研究所は同社が国内で販売代理店を務める「SendGrid」のイベント「Send with Confidence」を開催。米SendGridのプロフェッショナルが語った前半に引き続いて行なわれた後半では、ホテル・レストランの予約サイトである一休.comのしばやん氏がSendGridの大障害から得た教訓を披露した。 AWSへの全面移行を機にSendGridを導入した一休.com Webサービスとしては老舗となる一休.comは、「こころに贅沢させよう。」を掲げ、厳選したホテル・レストランを専門に扱う予約サイト。そんな一休.comにとってメール送信は「非常に重要」だという。たとえば、一休.com側からの予約完了メールの送信が失敗すると、ユーザーが予約できてないものだと思い、重複予約が発生してしまう。「メールが素早くきちんと届くことはサービスの生命線」としばやん氏は語る。 一休.
ストレスフリーを制度化した「満員電車禁止令」導入の背景
その会社にはその会社ならではの働き方がある。みんなの働き方改革・業務改善を追う連載「私たちの働き方カタログ」の第2回は、オーディオブックを手がけるオトバンク。満員電車での通勤を経営リスクととらえ、満員電車禁止令を出した背景を探る。 出戻りメンバーに「こんな無駄、まだやっているの？」と指摘されて オーディオブック配信サービス「FeBe（フィービー）」を展開するオトバンクが働き方改革に乗り出したきっかけは、スタッフ含めたメンバーが50名を越え始めたほか、エンジニア中心の組織に変えていくという会社の方針変換があったという。 2004年の設立以来、同社は書籍を音声化して、配信するという事業を手がけてきた。そのため、音声コンテンツの制作や記事化などを行なうメンバーが大半を占めていた。代表取締役社長の久保田裕也氏は「ネット配信という事業なのにエンジニアがほとんどおらず、CTOという役職もなかった。IT
手を動かして学ぶCMSの新しい潮流「ヘッドレス」とは何か？
フロントエンドとバックエンドを分離する「ヘッドレスCMS」が話題となっています。Elemenoを例に、ヘッドレスCMSを使ったWebサイトの開発方法を説明します。 「ヘッドレスCMS」は比較的新しいタイプのツールです。特徴や、利用方法を解説します。 従来のCMSは、コンテンツを作って管理するバックエンドと、コンテンツを表示するフロントエンド、２つのコンポーネントがあります。フロントエンドは、昔からのテクニック、ツールやライブラリーで作られた「Webサイト」です。 ヘッドレスCMSは、コンテンツを制作して管理するバックエンドしかありません。ロバストなAPIでコンテンツを配信し、開発者はAPIを用いて簡単にコンテンツを管理できます。この役割分担は、CMSがコンテンツの管理しかやらないことを意味します。ヘッドレスCMSはコンテンツの表示は関知しません。任意のプログラム言語、フレームワーク、ライブ
「Facebookはおじさんだらけ」ってホント？ SNS調査でわかった意外な実態
新年度が始まり、ここ最近「ソーシャルメディア最新動向」といった記事を多く見かけます。例えば、以下のような記事やデータです。 ●【最新版】2017年4月更新！ 11のソーシャルメディア最新動向データまとめ https://gaiax-socialmedialab.jp/post-30833/ ●【2017年4月版】人気SNSの国内＆世界のユーザー数まとめ （Facebook、Twitter、Instagram、LINE） http://www.advertimes.com/adobata/article/31933/blog.comnico.jp/we-love-social/sns-users-april-2017/ ●動画マーケティングに最適なSNSはどれ？ 国内5大ソーシャルメディアを徹底比較した、便利なSNSデータ集！ http://www.movie-times.tv/basic/
なぜAmazonですらUXデザインの「ダークパターン」でユーザーを騙すのか
コンバージョン率を上げ、短期的なビジネスゴールを達成するために、UXデザインの「ダークパターン」を採り入れる企業が後を絶ちません。4つの実例をもとにダークパターンの問題点を考えてみましょう。 多くの人もそうだったと思いますが、2016年11月8日、私はスクリーンにくぎづけになっていました。そのとき私が米国大統領選挙戦の結果をめぐって当てにしていたのはThe New York Timesでした。ほかのどのソースよりも信頼していたからです。 The New York TimesのWebページの一番上に、「選挙予想」というダイヤルがありました。 ダイアルが意味していたのは「大統領選に勝つ確率」で、左側に激しく揺れ動いていました。このとき私はすでに不安でいっぱいでしたが、それはどんどん高まっていきました。 New York Timesの記者、Jake Swearingenは次のように語っています。
「なぜ買わないの？」たった1つのシンプルな質問がCVRを27％も向上させた話
モノが売れないとき、私たちはいろいろな原因を考え、改善に取り組みます。でも、意外とその原因はシンプルなものなのかもしれません。ある電子書籍を販売した著者のストーリーです。 1年前、私は失業中で実家にいました。28歳でした。振り返ると、次の2つのタスクが日常でした。 仕事を見つけること 1の間は、生活費の足しになることはなんでもする 私は以前教師をしていて、試験準備において幅広い経験があったので、小遣い稼ぎのために地元の図書館で教えていました。図書館の仕事をしていない間、採用試験に広く使われているテスト「Wonderlic」の教材を書くことも始めました。1カ月もしないうちに、Wonderlicの模擬テストやスタディガイドについての小さなWebサイト「Beat the Wonderlic」を立ち上げました。Wonderlicに関心のあるすべての人が対象で、無料の模擬テストにチャレンジできるサイ
「作ったものをユーザーに届けるまでがデザイナーの責任」クックパッド池田拓司さん
毎日の献立を考えなければならない生活者の悩みを解消してくれる、日本最大のレシピサービス「クックパッド」。サービス開始から約20年。その間、急激な成長を遂げきた同社で投稿開発部長を務めているのが、デザイナーの池田拓司さん。時代とともに変化するデザイナーの役割と必要なスキルとは？ エンジニアに認めてもらうために身につけた実装のスキル ——池田さんの経歴とクックパッドに入社された経緯を教えてください。 もともとパソコン通信をしていたこともあり、多摩美術大学在学時のアルバイトがきっかけで、インターネットの世界に足を踏み入れました。どちらかというとコンテンツやサービスに興味があったので、卒業後はニフティに入社。ポータルサイトと有料課金コンテンツの制作ディレクションをしていました。 ニフティに3年あまり勤めたところで、ブログやAdsenseなどが登場してきました。技術を自分の身につけないとこの先やって
SendGridユーザーが語る！メール大量配信のここが落とし穴 (1/3)
個人向けのWebサービスを展開しているWeb事業者にとって、メールシステムの運用はきわめて重要だ。現場ではどのような苦労があるのか？ どのように活用しているのか？ クラウド型メール送信サービス「SendGrid」を検証・活用するWeb事業者のエンジニアを集めて、本音を聞いてみた。（以下、敬称略） dots.とコーチ・ユナイテッドがSendGridに至った経緯 構造計画研究所 SendGridエバンジェリスト 中井勘介（以下、構造計画研究所 中井）：クラウド型メールサービスSendGridの日本での販売を手がけている構造計画研究所の中井です。今回はSendGridを検討・導入しているおもにスタートアップの導入担当者の方に集まっていただき、メールシステムの導入や運用の苦労やクラウド型メールサービスの率直な感想をお聞きしたいと思います。まずは杉山さん、自己紹介からお願いします。 インテリジェンス
「勝算はないからやめておけ」猛反対の中でビットコイン市場を開拓したcoincheck (1/3)
レジュプレスが提供する、仮想通貨ビットコイン（BitCoin）のサービス『coincheck』（コインチェック）。その機能の1つであるビットコイン取引所の取引額が順調に増えている。2014年8月にスタートしたcoincheckは、2015年3月には早くも月間取引額1億円を突破。だが、それで驚いてはいけない。2015年12月の月間取引額は31億円にも上ったというのだ。 「ここまで急激に成長するとは思っていなかった。サービス開始当初に考えていたのは、1年後の取引額が5億円ぐらいになればいいということだった」。レジュプレスの取締役・共同創業者の大塚雄介氏はこう明かす。 同社がcoincheckのサービスを開始する約半年前。ビットコインの名を一躍全国に知らしめた出来事があった。当時、世界最大のビットコイン取引所だった「MTGOX（マウントゴックス）」が突如取引を停止し、経営破綻に陥った事件だ。この
明朝体は絶滅するのか？ AXIS Font生みの親の挑戦
「明朝体はこのままだとあと20年もすればこの世から消えてしまうかもしれない」。独立系フォントベンダーであるタイププロジェクト社長の鈴木功さんはそう語る。鈴木さんはタイプデザイナーであり、デザイン業界で評価の高いAXIS Fontの生みの親として知られる人物だ。 事実、明朝体を目にする機会は激減している。PCのWebブラウザーはもちろん、スマートフォン、タブレットといったデバイスの基本フォントはいずれもゴシック体。ニュースは新聞ではなくニュースサイトやアプリでチェックし、知りたいことは本ではなくググるかFacebookで尋ねる時代。紙媒体ですら、ゴシック体で堂々と本文を組む書籍が増えた。私自身、Web業界の経験が長い新人編集者に、明朝体で組まれた新刊のゲラを「なんか読みづらい」と言われてしまった経験がある。 「気持ちが悪い」から始まった、明朝体の居場所作り 6年前。鈴木さんには忘れられないエ
書かなきゃいけない人のためのWebコピーライティング教室
「書くのが得意ではないけれど、仕事で書かなければならない」。そんなWeb担当者のために、コピーライティングの考え方と実践的な書き方を、現役コピーライターの森田哲生さんが解説。Webでの商品売上げを伸ばしたい、Webコンテンツの読者を増やしたい、Webで会社のブランドイメージを高めたい人、必読です。
好調のシャープが約150の新規技術とサービスを公開 (1/3)
シャープの構造改革は着実に成果をあげているようだ。 先頃発表した2014年度第1四半期（2014年4月～6月）の連結業績では、売上高は前年同期比1.9％増の6197億円、営業利益は55.0％増の46億円、経常損失は127億円の赤字から54億円の赤字に縮小。当期純損失は179億円の赤字から、17億円の赤字に縮小。「経常利益と最終利益は、いずれも前年同期から大幅に改善しており、第1四半期は順調に推移。中期経営計画についても計画通りに進捗している」と、業績回復に手応えをみせた。 こうした構造改革への取り組みに一方で、シャープは次の一手をすでに打ち始めている。 その象徴的な取り組みが、2013年5月に発足した新規事業推進本部と、2014年4月に発足した市場開拓本部によって推進されている新事業領域への取り組みだ。いずれもCTOである水嶋繁光代表取締役副社長執行役員が率いる組織である。 「ヘルスケア・
誰も教えてくれない「コンセプト」の作り方 (1/3)
商品のコンセプト、例えば商品の魅力は、モニター上で素敵な言葉をいくら羅列してもなかなか伝わりません。コンセプトは商品や作品の本質そのものなので、言葉にするのは難しいのです。だから私はコンセプトを伝えるシンプルな一言を探します。それが「コンセプトキーワード」です。コンセプトキーワードは特別なものではなく、製品の開発や企画書のタイトルなどさまざまな場面でよく使われる言葉ですが、ここでは「商品の魅力を表現する」キーワードのことを指します。コンセプトキーワードを制作の柱としてコンテンツを作ることで、魅力の本質がユーザーの心に届くようになります。コンセプトキーワードを決めなければ広告作りは先に進まないので、いわば魅力を伝える力の源泉、ご本尊と言えるものです。 前回、サイトマスターはコンセプトをまとめる前に情報収集をすることを書きました。その上で魅力、ターゲット、タイミングを考えるわけですが、今回は魅
SEO: Googleで掲載順位を確認する際の注意点
近日中に公開予定のGoogleパーソナライズ検索の技術的解説の記事において別途詳細を触れますが、本日はSEO担当者がGoogleで検索順位を確認する際のワンポイントアドバイスをします。 既報の通り、2009年12月からGoogleパーソナライズ検索がブラウザのcookieベースでも行われるようになりました。これはオプトアウト方式、すなわち、自分でパーソナライズ検索を無効設定しない限り、過去の検索履歴に基づいて検索結果がカスタマイズされるようになったことを示します。 パーソナライズがどのように行われるかの詳細は割愛しますが、本日は (1) 同じキーワードで何度も検索していると、パーソナライズされる確率が高い、(2) 同じキーワードで同じリンクをクリックしていると、そのリンクは上位に表示されやすくなる、という2点を覚えておいてください。 以上(1)(2)の条件が揃うケースは、よく訪問するサイト
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
ログインボタンって本当に必要？ UIの常識を検証する
会員登録制サイトに欠かせないログインボタン。ヘッダーの右上に設置されていることが多いですが、購入などのアクションを起こした時点でログインフォームを表示するようにしておけば、ユーザーにわざわざ「ログインボタン」をクリックしてもらう必要性は薄れます。 ユーザーが明示的にログアウトしない限り、ログイン状態を維持しておくのも有効です。後日再訪問したときには「ようこそ○○さん」などと表示し、ログイン状態が続いていますが、購入や登録情報の閲覧など高いセキュリティが必要なアクションでは再度認証を求めます。わざわざログインしないでもパーソナライズされた情報が表示されるので、ユーザーにとって利便性が高く、運営側にも「会員の行動履歴を取得しやすい」「ターゲティングによりコンバージョン率が上がる」などのメリットがあります。 このように、「ログイン」「ログアウト」ボタンはどの程度目立たせればよいのでしょうか？ 今
遅すぎる日本のスマホサイトの原因を探る (1/4)
デジタル機器の利用動向で知られるコムスコアの調査によると、2011年12月時点の日本における携帯電話に占めるスマートフォンの割合は16.6%でしたが、2012年6月には23.5%になり、半年で約7ポイントも増加しました。「まだ4人に1人の割合じゃないか」と思う方もおられるでしょう。 しかし、有名な「キャズム理論」によれば、普及率がイノベーターとアーリーアダプターを合わせて16%を超えると、一般大衆が技術を受け入れます。2012年12月時点の普及率はまだわかりませんが、すでに半分を超えていてもおかしくありません。スマートフォン未対応の企業サイトは、「時代遅れ」といっても過言ではないのです。 日本のスマートフォンサイトの問題点 すでにスマートフォン対応を済ませた日本の企業サイトは「マーケットに素早く対応して流石だ！是非、お手本として見習おう」といえるでしょうか？ 先行してスマートフォンに対応し
jQuery Mobileを使った国内スマホサイトまとめ (1/3)
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゼロから始めるレスポンシブWebデザイン入門
