データを見続けて6年。ウェブ編集者が知っておくべき13のルール（消さずにすんだ） - @d_tettu blog
（アドベントカレンダーで13日までに何か書く、と言いつつこんな日になってしまいました） これまで某Yahoo! JAPANや某BuzzFeed Japanでデータを元に編成 / 編集 / 目標設定 / 評価などをしてきました。たまに書いたり撮ったりしますが、主にはグロースと業務改善。 データを使ってメディア面を伸ばしていく、打てる手は全て打て、みたいな感じです。PDCAよりもOODAループ派です。 現場レベルでいうとデータを見て細かいメソッドを抽出したり、各プラットフォームのアルゴがどう変化しているのか分析したりしています。Facebookがマジでエグい。 で、編集界隈の人たちと話をしていると、データにふれる機会がなかったり、そもそもデータをどう見れば良いのか分からないという雰囲気を感じます。データ面白いのになー。 というわけで、これまで見つけたぼんやりとした法則を共有しておこうかなと思い
サイドバイサイド/インライン表示に対応したJavaScriptテキスト差分表示ライブラリ·jsdifflib MOONGIFT
jsdifflibはJavaScript製のテキスト差分表示ライブラリです。 テキストを扱うWebアプリケーションで便利そうなライブラリがjsdifflibです。JavaScriptを使って二つのテキストの差分を表示してくれます。 デモです。二つのテキストエリアにテキストを入力しました。 Diffボタンを押すと差分が表示されます。サイドバイサイドのビューです。 行の内容が違う場合は表示色が異なります。 インラインで差分表示もできます。 jsdifflibはPython製のdifflibと互換性のあるライブラリとのことで、差分解析をサーバサイドで行って結果を描画することもできます。表示色などはCSSで自由に編集可能です。 jsdifflibはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webサービスの基本はテキストコンテンツ
「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは
「爆速すぎて笑う」「速すぎて逆に不安になるレベル」――「dev.to」という米国のWebサイトの表示速度が異常に速いと、ネット上で話題だ。なぜ速いのか、サイト創設者のベン・ハルパーンさんがサイト内の記事で説明している。 2016年にオープンしたdev.toは、プログラマーが情報を交換したり、議論したりできるコミュニティーサイト。トップページにはユーザーが投稿したブログ記事のタイトルやコメントが、SNSのタイムラインのように並んでいる。このトップページの表示にかかる時間、各記事をクリックしたときのページ遷移が“一瞬”なのだ。 なぜ速いのか。ハルパーンさんが17年2月に投稿したブログ記事によれば、米Fastlyが提供するCDN（Content Delivery Network）を活用している。CDNは世界中にキャッシュサーバを分散配置し、ユーザーごとに最も（ネットワーク的に）近いサーバにキャッ
改めてWebサイトの品質について考える
制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーション
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
Webサイトのフッターにサイトマップを設置すべき理由
何年か前は、フッターの部分にサイトマップへのリンクを置くのが一般的でしたが、近年ではフッター自体が、サイトマップとして新たに使われるようになりました。 サイトマップは、サイト内のすべてのリンクを１ページ内に記載したものです。しかし今では、フッターを正しくデザインすれば、ほとんどのサイトにおいては、必要ないページとなっています（XMLのサイトマップは、SEOにおいては未だに不可欠ですが）。 伝統的なフッター さかのぼってみると、フッター自体がユーサビリティの要素として、重要視されることはまれでした。伝統的なフッターとはサイト管理に関する一連のリンクと、コピーライトの情報が載せられているようなものを指しますが、研究によると、ほとんどのサイトが伝統的なフッターを使っていたそうです。当時、大半のユーザーはページの一番下にあるフッターの部分は使わないという思い込みがありました。 そんな伝統的なフッタ
もうすぐ絶滅するという開かれたウェブについて
もうすぐ絶滅するという開かれたウェブについて This is Not the End of the Open Web 2016.08.22 Updated by yomoyomo on August 22, 2016, 10:31 am JST すっかり旧聞に属しますが、Internet Archive が主催し、これからのウェブのあり方を議論するイベント Decentralized Web Summit が6月に開かれました。 このサミットには "Locking the Web Open" というサブタイトルが付いていますが、逆に言えば、主催者には現在のウェブはオープンではないという認識があるわけです。それにいたる流れを少し辿りたいと思います。 そもそも Open Web（オープンウェブ、開かれたウェブ）という言葉が特に言及されるようになったのは、2010年だったと記憶します。その背景の
いまさらだけど、Webのイケてないところについて - Tortoise Shell
Webは面倒くさくて、本当にイケてない。 わたしはWebデザイナーとして働いているので、Webについての色々な事を当たり前だと思い込んで何の疑問も抱きませんでした。 しかし、冷静に考えてみると、おかしいことだらけだと思います。 Webデザイナーは、デザインするのが仕事です。 コンテンツの魅力を最大限にエンドユーザーに伝えるべく、情報をデザインしています。 つまり、Webデザイナーは「コンテンツの質を高めること」に注力しなければならないのです。 しかし、現状はどうでしょうか。 人間ではなく検索エンジンに優しいWebサイト 本来ならデザインに集中すべきなのに、なぜブラウザの差分に振り回されたり、SEOを気にしながらWebコンテンツを作らなければならないのでしょうか。 ブラウザもSEOも「手段」であるはずなのに、わたしたちはいつもその「手段」に振り回されています。 特に、SEOなんてひどい話だと
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
「プログラミングを学ぼうと瞬間最大風速的に意識は高くなるものの、一人でいると気がついたら一日ソシャゲして夕方頃に『また今日も勉強できなかった』と自己嫌悪。」モチベーションが続かない時の対策をはじめ、学び方、学べる環境の作り方をまとめています。
Webライティング11のルール
Web用の分かりやすい文章が誰でも書けるようになるための11のポイントをまとめたスライドです。Read less
スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの？」と言われた時の対処法
※ この話はフィクションです。実在の人物や団体などとは関係ありません スマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自由にできる。 対処法1：話し合うそもそもブラウザにデフォルトで備わっている拡大縮小機能を無効にするのがおかしいなぜ拡大縮小を無効にするのか ネイティブアプリ感を出したい拡大縮小した時に表示が崩れるのを防ぎたい拡大した時に画像がボヤけるのが嫌例えば構成/デザインの上で小さな文字を使わなくてはならない場合、ユーザーはどうやってその文字を拡大するのかユーザーが拡大したいと思っても拡大が禁止されていたら、
起業するときに助かる！Web制作者が独立するために必要なまとめ - コムテブログ
TL;DR 筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。起業から少し時間が経ったので記憶があいまいですが、ざっくりとした流れと気をつけておきたいことをメモしています。 創業前に準備すること 起業前に事業内容と企業理念を決定し、会社案内資料をパワポで作成しておきます。内容は企業理念・事業内容・解決できること・会社概要など。 １．定款作成前 定款作成前に準備しておきたいこと、事務所について調査しておくべきことのリストです。実印・銀行印・角印・ゴム印に関しては司法書士さんに社名の重複がないか調べてもらった後に作成します。 事業所物件候補を見つけたら、不動産屋に連絡 回線がひけるかどうか聞く 改装可能か、どこまで改造出来るか聞く 計画している事業内容で賃貸可能か確認 信用審査があるので待つ 審査 OK でテナン
UI設計の土台になる考え方-インテリジェントネット社内勉強会
社内勉強会で使用したセミナーのスライドです。 UI設計そのものというより、その前の土台となる考え方について講義しました。基礎の基礎のものです。 Read less
【初心者向け】ランディングページ（LP）の“もったいない”をなくす構成要素とは？
ランディングページ（LP）は、インターネット広告やリスティング広告の受け口となるWebページのことです。 読み手が求める情報・内容にあわせ、このランディングページの情報を整理整頓することで、広告効果を高めることができます。しかし、構成の内容によっては、せっかくの来訪者が離れてしまうこともあるのです。 今回は、こうしたもったいないミスマッチをなくすため、これからランディングページの制作を考えられている方々に向けて効果を高めるための構成要素をお伝えできればと思います！ ランディングページ(LP)とは？ ランディングページとは、インターネット上のバナー広告や検索エンジンの結果に表示されるテキスト広告のリンク先になっているWebページのことを指します。このページは、企業や製品のWebサイトのトップページであるケースもありますが、多くは広告効果を高める目的で単独で制作されたWebページを用意していま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptやHTMLのコード整形と差分チェックが出来る・「Pretty Diff」
coach4pm.com
Flipsblog.jp
荳也阜譚ｯ螳俶婿荵ｰ逅�鄂大捩-2022蟷ｴ蜊｡蝪泌ｰ比ｸ也阜譚ｯ
Web制作のディレクションに必要な知識とノウハウがまとめられたオススメの本 -Webディレクションの最新常識
