16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針
アクセシビリティ向上メモ 最初から考慮されているのが一番ですが、そうでもなかったプロダクトに手を入れるときのあるあるを記録します。既存プロダクトはモノが出来上がってしまっているため根治的なリファクタリングよりも基本的には省力で済ませたいので、今回書いた対応方法も完璧よりは省力路線です。 HTML やらセマンティクスに関する知識はそれなりにあるつもりでしたが、AT やマシンリーダビリティを念頭に勉強し直すと自分で作ったものも至らなかったなと振り返らざるを得ない今日この頃。初期設計のときの考慮範囲が拡がったように思うので善きかなです。 各項目について、もっと良い解法や誤り等あれば twitter とかでご指摘ください。 1. 画像に alt 属性がない場合 付けましょう。付けます。はい。 昔から基本とも言うべき、HTML/CSS 書きとしては耳にたこができるほど言われてきたことなので今更感もあ
行政サイトを作る時に気をつけておいた方がいい事 - Qiita
県や市の公式ホームページ制作の経験から、気をつけておきたい点をメモに残しておきたいと思います。 納品前 納期が３月に集中する 行政サイトの場合、お金は年間予算や国からの特別補助金などから支払われます。つまり基本的に年度を跨ぐことが出来ません。（保守にかかる費用は別です）その為、行政の案件に頼っている制作会社は納期が重なり３月が滅茶苦茶忙しくなります。 年度末は余裕を持ったスケジュールを組んでおきましょう。 見積もりは２割増しで ここで言う見積とは入札時の見積もりではありません。行政の案件をいくつかこなして担当者と仲良くなってくると、コンペの上限金額を決めるために事前に見積を頼まれる事があります。「もし○○みたいな案件だったらいくら位でできそう？期間と見積もり貰えると助かるんだけど。」みたいな感じです。サラリーマン金太郎の東北編で出てきたアレです。大事なのはここで割引など一切考えずに、むしろ
どのCSSプロパティが世の中のWebサイトでよく使われているのか？ マイクロソフトがクローラーから得た統計を「Global CSS Property Usage」として公開
どのCSSプロパティが世の中のWebサイトでよく使われているのか？ マイクロソフトがクローラーから得た統計を「Global CSS Property Usage」として公開 Webサイトをデザインする際、HTMLでテキストを構造化した上で外観を整えるためにCSSを利用します。 いまのCSSには多彩な表現力を備えたさまざまなプロパティがある一方、最新のCSSに未対応のブラウザに気を使いつつも新しいプロパティを用いるべきかどうか、歴史的経緯からブラウザ固有のベンダプレフィクスを用いるべきかどうかなど、どのプロパティを実装に用いるのがよいか判断に迷いがちです。 その判断材料になりそうな情報が、マイクロソフトから公開されました。「Global CSS Property Usage」です。このデータは、マイクロソフト自身がWebブラウザの開発を進めていく上でどのプロパティを優先して実装していくか、そ
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
プッシュ通知をブラウザに送るサービスが複数登場、今年の流行になるか？ | はじめてWEBニュース
「プッシュ通知を表示するサービス」が、今年に入り相次いで登場している。アッションは、インドWingify社のプッシュ通知サービス「PushCrew（プッシュクルー）」の国内提供を2月15日に開始した。同様に「プッシュさん」の提供をシロクが、「Pushdog Owned（プッシュドッグ オウンド）」の提供をPushdogが、それぞれスタートさせている。 「PushCrew」によるプッシュ通知のイメージ これらのサービスでは、ユーザーが自社サイトを閲覧していないときでも、ブラウザやモバイル端末にメッセージを表示できるもの。 プッシュ通知を送るには、次の手順が必要になる。 これらのサービスをサイトに組み込む（登録し、JavaScriptをHTMLに貼り付ける）。一度サイトを訪れたユーザーに対して「プッシュ通知送信」を許可してもらう。あとは、許可済みのブラウザに対して、任意のタイミングでプッシュ通
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
ウェブのプッシュ通知、何がそんなにすごいのか？
3 月 13 日、Chrome Beta のブログポストが出ました。Android 版 Chrome でプッシュ通知が使えるようになったのが個人的なハイライトです。 「確かにプッシュ通知は便利かもね〜」と思ったあなた、驚きが足りません。のけぞるべきです。小躍りするべきです。 理由を説明します。 ユーザーエンゲージメントが変わる # あなたのウェブサイトのビジネスモデルが広告モデルにしろ課金モデルにしろ、ユーザーが繰り返し訪れてくれることは大前提です。通常のウェブサイトやサービスは、そのための策を練ります。そのきっかけをサービス側から能動的に与えることで、ユーザーが戻ってきて、ビジネスは回ります。しかし、そのきっかけを与える方法は、非常に限定されていると言わざるを得ません。 インターネットが普及し始めた当初から伝統的に利用されているのがメール、数年前から利用されているのがソーシャルメディア、
これはWebマーケティングの世界が変わるかも！Web Pushを導入してみた。
今年に入ってGoogleが「Webブラウザでもプッシュ通知できるようになる」という驚愕の発表をしました。 Push Notifications on the Open Web Webのプッシュ通知について プッシュ通知は、スマホアプリの世界ではもはや必須のマーケティング手法ですが、Webでは使うことができませんでした。 それがこの技術によって可能になった！･･･ということで、今までメールやリターゲティング広告を使っていた、Webマーケティングのユーザー呼び戻し手法がガラリと変わる可能性も大きいです。 そういうわけで、さっそくこのWeb Pushの開発を支援するツールがいくつか開発されているようです。 Roost bpush 技術的にはなかなか複雑で、まだWebの情報量も多くないので、こういうツールを使って進めてしまうのがお勧めです。 Growth Pushも実は対応していた ところで、シロ
新米エンジニアが入社して半年で読んだ・読まされた本まとめ - Qiita
Outline Category Web一般 HTML/CSS JavaScript jQuery Linux Java Android DB アルゴリズム 正規表現 サーバ・ネットワーク バージョン管理(Gitメイン) 資格 その他 Web一般 「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか ずっとHTML/CSSでWebサイト構築してたけど、なんとなくjQuery使ってリッチなサイト使ってたけど、裏側の仕組みがわからないからなんかなあ。。。という人はぜひ読んで欲しいです Webサイトとは何か、なぜWebが動くのか、そういった背景のうちデザイナやフロントコーダでも知っておくべき知識が体系的にまとめられています サーブレット/JSPのサンプルコードによる紹介が一部あります とはいえ、サーブレットとJSPでサンプルコードを用いながら紹介している章以外は
別ウィンドウを開くことの是非｜ウェブユーザビリティ向上を支援するWebsite Usability Info
（2012年1月28日追記） この記事内容をアップデートした記事を、別途公開しました。「別ウィンドウを開くことの是非 (その2)」をご参照ください。 Webサイトを制作していると、<a href="xxx" target="_blank"> などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。 別サイトにリンクする場合 (できれば 別サイトを回遊した後、自サイトに戻ってきてもらいたい) 開いたページであれこれ操作が予想され、その間、元ページは残しておきたい場合（ブラウザの [戻る] ボタンではすぐに戻れないケースなど） お気持ちはよくわかるのですが、ユーザビリティやアクセシビリティの観点で考えると、リンクは別ウィンドウを開くべきではないと考えます。理由は、以下の通りです。 初心者ユーザーやシニアユーザーは、別ウィ
CSSモジュール ― 明るい未来へようこそ | POSTD
ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch
非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの＋αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー＆デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
カードUIと会話化するデザイン
LINE, WhatsApp, Facebook Message のようなメッセージアプリの魅力のひとつに「情報の流れが制御できる」ところがあると思います。１対１の会話が中心なので、ノイズが少ないですし、情報を追いかけるのも容易です。Jelly のように、メッセージアプリのような表現がメッセージアプリ以外で見られるようになってきているのも、今の利用者に求めらている情報の形だからなのかもしれません。 今、UI デザインという観点で注目しているのは、この『メッセージ型 UI』で、どのような形状が人と情報とのやりとりに最適なのかをよく考えています。メッセージアプリだからといって、写真やテキストを送り合うチャットだけのために使うわけではありません。オススメのお店、地図、記事、レシピ、レビューなど様々なコンテンツが会話の中で共有されますが、それが最適な形で表示されているのかというと、そうではありませ
インターネットブラウザ「Google Chrome」利用時のホームページ一部閲覧不可について | ヤマト運輸
平成27年9月7日 お客様各位 いつもヤマト運輸をご利用いただきまして、ありがとうございます。 2015年9月1日にリリースされた「Google Chrome」Ver．45．0．2454以上をご利用のお客様が、弊社ホームページの一部ページにアクセスすると「SSLサーバーが古い可能性があります。」と表示され、閲覧ができない事象が発生しております。ご迷惑をおかけし、誠に申し訳ございません。 現在、弊社側の対応を進めてはおりますが、対応完了までの間、「Internet Explorer」、「Safari」またはAndroidの場合は「標準ブラウザ」からご覧いただきますようお願い申し上げます。 お問い合わせは、弊社サービスセンターまでお願いいたします。 （フリーダイヤル0120-01-9625 携帯電話からはナビダイヤル0570-200-000） 以上
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
Webアイコンクッキー会をしました - インターネットちゃんブログ
「Webアイコンクッキー会」 とは？ いまギークな女子のあいだで、ひそかに噂の「Webアイコンクッキー会」とは Webサービスのロゴやアプリのアイコンなど「インターネット」をモチーフにして みんなでいっしょにギークなクッキーを手づくりしよう、という会のこと。 おいしくてかわいい、食べられるインターネットをたのしんでいく企画です。 インターネット上でも 「かわいい！」 「これはすごい！」 「いつか私もつくってみたい！」 という声があふれたWebアイコンだらけのクッキー会、写真たっぷりでお届けします！ --> こんなところでやりました 会場は「農」と「食」をテーマにした コワーキングスペース「銀座ファーマーズラボ」http://www.farmers.jp/ 木のぬくもりと緑あふれるやさしいデザインで、ほっとくつろげる空間。 こんなかんじのところでした。 はじまりました インターネットが大好き
「Web解析ツール」は死に、「Predictive First」へと移行する - 絶倫ファクトリー
新卒でWeb系企業に入ってから6年間、webサイト改善の仕事に携わってきたけれど、いわゆるこの業界で言われる一般的な「Web解析」のやり方というのは、もう時代遅れなのではないかとこの半年くらい考えている。正確に言えば、Adobe Analytics（以下AA）やGoogle Analytics（以下GA)といった「Web解析ツール」を使ってWebサイトの課題を見つけて改善点を洗い出し云々……と言ったやり方は古いものになりつつあるのではないか、という話だ。 点の改善 線の改善 AAやGAといった従来のWeb解析ツールの弱点は、サイト全体でユーザがどのように動いているのか、つまりサイト上でのカスタマージャーニーを把握できないことだ。直帰率の高い入口ページを見つけて改善する、CVしているユーザがよく見ているページを見る……これらは基本的に課題がある、またはCVに寄与していそうな「点」を見つけて、
15年前の記事が教えてくれるWebの本質
2000年4月7日「A Dao of Web Design」という記事が A List Apart で公開されました（日本語訳）。今年は公開から 15 年経ったということで、Web 開発・設計の著名人がコメントを寄せた記念記事も配信されています。道教の教えを基に Web デザインの本質を説いたこの記事は、私も大きな影響を受けています。 2000年は、今では信じられないような状況でした。Web ブラウザが独自のタグを当たり前のように実装。<table> をつかってピクセルパーフェクトな固定レイアウトの全盛期でした。もちろん、マルチデバイスの世界ではなく、パソコンが中心です。せいぜい Windows と Macintosh の違いに頭を悩ませるくらいでした。CSS レイアウトで制作することが大事件だった頃に、「柔軟で適応力のあるデザインが必要である」という「A Dao of Web Desig
SEO業者に35万円払ったが、最悪な結果となったのでブログをはじめました。本当にありがとうございました。
タイトルの通りですが、僕は昨年、とある業者に350,000円（正確には、税込378,000円）払って、SEO対策を依頼しました。 そして、その結果は、マジFUCKER！って感じでした。 施策を受けた対象のサイトは、このサイトではありませんが、やはり35万円はすぐに立ち直れる金額ではなかったので、その時の詳しい経緯から現在、そしてこれからについて書いてみようと思います。 今回、具体的な業者の名前は伏せておきます。（なんか変なことされると怖いので） ただ、大手どころです。 大手だから大丈夫かな、と思った自分が情けないです。 大手だから、「より上手く」ごまかせるんですね。 これからSEOを外にお願いしようと思っている方は、もう一度考え直す必要があるかもしれませんよ。 SEOの裏技とは？ウェブサイトから情報発信する方にとっては、SEO（検索エンジン最適化）は、誰しもが興味のあるところかと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
